update(docs): Add all examples

2021-11-06 08:54:35 +01:00
parent 61779638ac
commit e99dfc3dd2
54 changed files with 2582 additions and 285 deletions
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import {
+  getBezierPath,
+  getMarkerEnd,
+  ArrowHeadType,
+  EdgeProps,
+  ElementId,
+  getEdgeCenter,
+  Position,
+  EdgeText,
+} from '@braks/vue-flow'
+
+interface CustomEdgeProps<T = any> extends EdgeProps<T> {
+  source: ElementId
+  target: ElementId
+  sourceHandleId?: ElementId
+  targetHandleId?: ElementId
+  id: ElementId
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  arrowHeadType?: ArrowHeadType
+  markerEndId?: 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(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+</script>
+<template>
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <EdgeText
+    :x="center[0]"
+    :y="center[1]"
+    :label="props.data?.text"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: 'red' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+    @click="() => console.log(props.data)"
+  />
+</template>