refactor(core): use sfc for base edge and bind template refs

2023-07-10 19:20:26 +02:00
parent 435cb9b687
commit 80ad6f1677
2 changed files with 66 additions and 81 deletions
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { ref, useAttrs } from 'vue'
+import type { BaseEdgeProps } from '../../types'
+import { isNumber } from '../../utils'
+import EdgeText from './EdgeText.vue'
+
+const { interactionWidth = 20, labelShowBg = true } = defineProps<BaseEdgeProps>()
+
+const pathEl = ref<SVGPathElement | null>(null)
+
+const interactionEl = ref<SVGPathElement | null>(null)
+
+const labelEl = ref<SVGGElement | null>(null)
+
+const attrs: any = useAttrs()
+
+defineExpose({
+  pathEl,
+  interactionEl,
+  labelEl,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BaseEdge',
+  inheritAttrs: false,
+  compatConfig: { MODE: 3 },
+}
+</script>
+
+<template>
+  <path
+    :id="id"
+    ref="pathEl"
+    :d="path"
+    :style="attrs.style"
+    class="vue-flow__edge-path"
+    :class="attrs.class"
+    :marker-end="markerEnd"
+    :marker-start="markerStart"
+  />
+
+  <path
+    v-if="interactionWidth"
+    ref="interactionEl"
+    fill="none"
+    :d="path"
+    :stroke-width="interactionWidth"
+    :stroke-opacity="0"
+    class="vue-flow__edge-interaction"
+  />
+
+  <EdgeText
+    v-if="label && isNumber(labelX) && isNumber(labelY)"
+    ref="labelEl"
+    :x="labelX"
+    :y="labelY"
+    :label="label"
+    :label-show-bg="labelShowBg"
+    :label-bg-style="labelBgStyle"
+    :label-bg-padding="labelBgPadding"
+    :label-bg-border-radius="labelBgBorderRadius"
+    :label-style="labelStyle"
+  />
+</template>