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

packages/core/src/components/Edges/BaseEdge.ts

@@ -1,81 +0,0 @@
-import type { Component, FunctionalComponent } from 'vue'
-import { h } from 'vue'
-import EdgeText from './EdgeText.vue'
-import type { BaseEdgeProps } from '~/types'
-import { isNumber } from '~/utils'
-
-/**
- * The base edge is a simple wrapper for svg path
- * You can use the base edge in your custom edges and just pass down the necessary props
- */
-const BaseEdge: FunctionalComponent<BaseEdgeProps> = function (
-  {
-    id,
-    path,
-    label,
-    labelX,
-    labelY,
-    labelBgBorderRadius,
-    labelBgPadding,
-    labelBgStyle,
-    labelShowBg = true,
-    labelStyle,
-    markerStart,
-    markerEnd,
-    interactionWidth = 20,
-  },
-  { attrs },
-) {
-  return [
-    h('path', {
-      'id': id,
-      'style': attrs.style,
-      'class': ['vue-flow__edge-path', attrs.class].join(' '),
-      'd': path,
-      'marker-end': markerEnd,
-      'marker-start': markerStart,
-    }),
-    interactionWidth
-      ? h('path', {
-          'd': path,
-          'fill': 'none',
-          'stroke-opacity': 0,
-          'stroke-width': interactionWidth,
-          'class': 'vue-flow__edge-interaction',
-        })
-      : null,
-    label && isNumber(labelX) && isNumber(labelY)
-      ? h(EdgeText as Component, {
-          x: labelX,
-          y: labelY,
-          label,
-          labelStyle,
-          labelShowBg,
-          labelBgStyle,
-          labelBgPadding,
-          labelBgBorderRadius,
-        })
-      : null,
-  ]
-}
-
-BaseEdge.props = [
-  'id',
-  'path',
-  'labelX',
-  'labelY',
-  'label',
-  'labelBgBorderRadius',
-  'labelBgPadding',
-  'labelBgStyle',
-  'labelShowBg',
-  'labelStyle',
-  'markerStart',
-  'markerEnd',
-  'interactionWidth',
-]
-
-BaseEdge.inheritAttrs = false
-BaseEdge.compatConfig = { MODE: 3 }
-
-export default BaseEdge

packages/core/src/components/Edges/BaseEdge.vue

@@ -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>