update(examples): move examples into src dir

2022-04-04 21:42:48 +02:00
parent 9539d7f263
commit c1594b0071
53 changed files with 34 additions and 35 deletions
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
+
+interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  markerEnd?: string
+  data?: T
+}
+
+const props = defineProps<CustomEdgeProps>()
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+
+const markerEnd = computed(() => getMarkerId(props.markerEnd))
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+<template>
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <text>
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
+      {{ props.data?.text }}
+    </textPath>
+  </text>
+</template>