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,49 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
+import { getEdgeParams } from './floating-edge-utils'
+
+interface FloatingEdgeProps extends EdgeProps {
+  id: string
+  source: string
+  target: string
+  markerEndId?: string
+  sourceNode: GraphNode
+  targetNode: GraphNode
+  nodes: GraphNode[]
+  style?: CSSProperties
+  markerEnd: MarkerType
+  markerStart: MarkerType
+}
+
+const props = defineProps<FloatingEdgeProps>()
+const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
+
+const d = computed(
+  () =>
+    (edgeParams.value.sx &&
+      getBezierPath({
+        sourceX: edgeParams.value.sx,
+        sourceY: edgeParams.value.sy,
+        targetX: edgeParams.value.tx,
+        targetY: edgeParams.value.ty,
+        sourcePosition: edgeParams.value.sourcePos,
+        targetPosition: edgeParams.value.targetPos,
+      })) ||
+    '',
+)
+</script>
+
+<template>
+  <g class="vue-flow__connection">
+    <path
+      :id="props.id"
+      class="vue-flow__edge-path"
+      :d="d"
+      :marker-start="props.markerStart"
+      :marker-end="props.markerEnd"
+      :style="props.style"
+    />
+  </g>
+</template>