examples: move current examples into examples/vite

2022-06-03 19:32:46 +02:00
parent c6bda81c5e
commit 8dd7c79700
68 changed files with 94 additions and 91 deletions
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { GraphNode, Position } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
+import { getEdgeParams } from './floating-edge-utils'
+
+interface FloatingConnectionLineProps {
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  sourceNode: GraphNode
+}
+
+const props = defineProps<FloatingConnectionLineProps>()
+
+const targetNode = computed(
+  () =>
+    ({
+      id: 'connection-target',
+      position: { x: props.targetX, y: props.targetY },
+      dimensions: { width: 1, height: 1 },
+    } as GraphNode),
+)
+
+const edgeParams = computed(() => getEdgeParams(props.sourceNode, targetNode.value))
+const d = computed(() =>
+  getBezierPath({
+    sourceX: edgeParams.value.sx,
+    sourceY: edgeParams.value.sy,
+    ...props,
+  }),
+)
+</script>
+
+<template>
+  <g>
+    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d" />
+    <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
+  </g>
+</template>