feat(examples): Add floating edges example

2022-04-11 11:30:10 +02:00
parent 534c514f15
commit 7aa1773e02
5 changed files with 232 additions and 0 deletions
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import { getBezierPath, GraphNode, EdgeProps, MarkerType } from '@braks/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>