chore(examples): add easy connect example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2023-04-03 08:54:32 +02:00
parent da6039fc35
commit adccf1b38e
6 changed files with 294 additions and 0 deletions
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { GraphNode } from '@vue-flow/core'
+import { getStraightPath } from '@vue-flow/core'
+import { computed } from '@vue/reactivity'
+const props = defineProps<{ sourceNode: GraphNode; sourceX: number; sourceY: number; targetX: number; targetY: number }>()
+
+const edgePath = computed(() =>
+  getStraightPath({
+    ...props,
+    sourceX: props.sourceX - props.sourceNode.dimensions.width / 2,
+  }),
+)
+</script>
+
+<template>
+  <g>
+    <path
+      :style="{
+        strokeWidth: 3,
+        stroke: 'black',
+      }"
+      fill="none"
+      :d="edgePath[0]"
+    />
+    <circle :cx="targetX" :cy="targetY" fill="black" :r="3" stroke="black" :stroke-width="1.5" />
+  </g>
+</template>