refactor(core): use normal components for edges

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

@@ -1,30 +1,12 @@
-import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
-import { h } from 'vue'
 import BaseEdge from './BaseEdge.vue'
 import { getBezierPath } from './utils'
 import type { BezierEdgeProps } from '~/types'
 import { Position } from '~/types'
 
-const BezierEdge: FunctionalComponent<BezierEdgeProps> = function (
+const BezierEdge = defineComponent<BezierEdgeProps>({
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  name: 'BezierEdge',
-  { attrs },
+  props: [
-) {
-  const [path, labelX, labelY] = getBezierPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
-
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-BezierEdge.props = [
     'sourcePosition',
     'targetPosition',
     'label',
@@ -41,9 +23,25 @@ BezierEdge.props = [
     'markerEnd',
     'markerStart',
     'interactionWidth',
-]
+  ] as any,
+  compatConfig: { MODE: 3 },
+  setup(props, { attrs }) {
+    return () => {
+      const [path, labelX, labelY] = getBezierPath({
+        ...props,
+        sourcePosition: props.sourcePosition ?? Position.Bottom,
+        targetPosition: props.targetPosition ?? Position.Top,
+      })
 
-BezierEdge.inheritAttrs = false
+      return h(BaseEdge as any, {
-BezierEdge.compatConfig = { MODE: 3 }
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default BezierEdge

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

@@ -1,30 +1,12 @@
-import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
-import { h } from 'vue'
 import BaseEdge from './BaseEdge.vue'
 import { getSimpleBezierPath } from './utils'
 import type { SimpleBezierEdgeProps } from '~/types'
 import { Position } from '~/types'
 
-const SimpleBezierEdge: FunctionalComponent<SimpleBezierEdgeProps> = function (
+const SimpleBezierEdge = defineComponent<SimpleBezierEdgeProps>({
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  name: 'SimpleBezierEdge',
-  { attrs },
+  props: [
-) {
-  const [path, labelX, labelY] = getSimpleBezierPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
-
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-SimpleBezierEdge.props = [
     'sourcePosition',
     'targetPosition',
     'label',
@@ -40,9 +22,25 @@ SimpleBezierEdge.props = [
     'markerEnd',
     'markerStart',
     'interactionWidth',
-]
+  ] as any,
+  compatConfig: { MODE: 3 },
+  setup(props, { attrs }) {
+    return () => {
+      const [path, labelX, labelY] = getSimpleBezierPath({
+        ...props,
+        sourcePosition: props.sourcePosition ?? Position.Bottom,
+        targetPosition: props.targetPosition ?? Position.Top,
+      })
 
-SimpleBezierEdge.inheritAttrs = false
+      return h(BaseEdge as any, {
-SimpleBezierEdge.compatConfig = { MODE: 3 }
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default SimpleBezierEdge

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

@@ -1,30 +1,12 @@
-import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
-import { h } from 'vue'
 import BaseEdge from './BaseEdge.vue'
 import { getSmoothStepPath } from './utils'
 import type { SmoothStepEdgeProps } from '~/types'
 import { Position } from '~/types'
 
-const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function (
+const SmoothStepEdge = defineComponent<SmoothStepEdgeProps>({
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
+  name: 'SmoothStepEdge',
-  { attrs },
+  props: [
-) {
-  const [path, labelX, labelY] = getSmoothStepPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
-
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-SmoothStepEdge.props = [
     'sourcePosition',
     'targetPosition',
     'label',
@@ -42,9 +24,25 @@ SmoothStepEdge.props = [
     'markerStart',
     'interactionWidth',
     'offset',
-]
+  ] as any,
+  compatConfig: { MODE: 3 },
+  setup(props, { attrs }) {
+    return () => {
+      const [path, labelX, labelY] = getSmoothStepPath({
+        ...props,
+        sourcePosition: props.sourcePosition ?? Position.Bottom,
+        targetPosition: props.targetPosition ?? Position.Top,
+      })
 
-SmoothStepEdge.inheritAttrs = false
+      return h(BaseEdge as any, {
-SmoothStepEdge.compatConfig = { MODE: 3 }
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default SmoothStepEdge

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

@@ -1,13 +1,9 @@
-import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
-import { h } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
-import type { StepEdgeProps } from '~/types'
 
-const StepEdge: FunctionalComponent<StepEdgeProps> = function (props, { attrs }) {
+const StepEdge = defineComponent({
-  return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 })
+  name: 'StepEdge',
-}
+  props: [
-
-StepEdge.props = [
     'sourcePosition',
     'targetPosition',
     'label',
@@ -23,9 +19,10 @@ StepEdge.props = [
     'markerEnd',
     'markerStart',
     'interactionWidth',
-]
+  ] as any,
-
+  setup(props, { attrs }) {
-StepEdge.inheritAttrs = false
+    return () => h(SmoothStepEdge as any, { ...props, ...attrs, borderRadius: 0 })
-StepEdge.compatConfig = { MODE: 3 }
+  },
+})
 
 export default StepEdge

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

@@ -1,22 +1,11 @@
-import type { FunctionalComponent } from 'vue'
+import { defineComponent, h } from 'vue'
-import { h } from 'vue'
 import BaseEdge from './BaseEdge.vue'
 import { getStraightPath } from './utils'
 import type { StraightEdgeProps } from '~/types'
 
-const StraightEdge: FunctionalComponent<StraightEdgeProps> = function (props, { attrs }) {
+const StraightEdge = defineComponent<StraightEdgeProps>({
-  const [path, labelX, labelY] = getStraightPath(props)
+  name: 'StraightEdge',
-
+  props: [
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-StraightEdge.props = [
     'label',
     'labelStyle',
     'labelShowBg',
@@ -30,9 +19,21 @@ StraightEdge.props = [
     'markerEnd',
     'markerStart',
     'interactionWidth',
-]
+  ] as any,
+  compatConfig: { MODE: 3 },
+  setup(props, { attrs }) {
+    return () => {
+      const [path, labelX, labelY] = getStraightPath(props)
 
-StraightEdge.inheritAttrs = false
+      return h(BaseEdge as any, {
-StraightEdge.compatConfig = { MODE: 3 }
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default StraightEdge