refactor(core): use normal components for edges

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

@@ -1,49 +1,47 @@
-import type { FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { defineComponent, 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 (
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
-  { attrs },
-) {
-  const [path, labelX, labelY] = getBezierPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
+const BezierEdge = defineComponent<BezierEdgeProps>({
+  name: 'BezierEdge',
+  props: [
+    'sourcePosition',
+    'targetPosition',
+    'label',
+    'labelStyle',
+    'labelShowBg',
+    'labelBgStyle',
+    'labelBgPadding',
+    'labelBgBorderRadius',
+    'sourceY',
+    'sourceX',
+    'targetX',
+    'targetY',
+    'curvature',
+    '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,
+      })
 
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-BezierEdge.props = [
-  'sourcePosition',
-  'targetPosition',
-  'label',
-  'labelStyle',
-  'labelShowBg',
-  'labelBgStyle',
-  'labelBgPadding',
-  'labelBgBorderRadius',
-  'sourceY',
-  'sourceX',
-  'targetX',
-  'targetY',
-  'curvature',
-  'markerEnd',
-  'markerStart',
-  'interactionWidth',
-]
-
-BezierEdge.inheritAttrs = false
-BezierEdge.compatConfig = { MODE: 3 }
+      return h(BaseEdge as any, {
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default BezierEdge

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

@@ -1,48 +1,46 @@
-import type { FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { defineComponent, 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 (
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
-  { attrs },
-) {
-  const [path, labelX, labelY] = getSimpleBezierPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
+const SimpleBezierEdge = defineComponent<SimpleBezierEdgeProps>({
+  name: 'SimpleBezierEdge',
+  props: [
+    'sourcePosition',
+    'targetPosition',
+    'label',
+    'labelStyle',
+    'labelShowBg',
+    'labelBgStyle',
+    'labelBgPadding',
+    'labelBgBorderRadius',
+    'sourceY',
+    'sourceX',
+    'targetX',
+    'targetY',
+    '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,
+      })
 
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-SimpleBezierEdge.props = [
-  'sourcePosition',
-  'targetPosition',
-  'label',
-  'labelStyle',
-  'labelShowBg',
-  'labelBgStyle',
-  'labelBgPadding',
-  'labelBgBorderRadius',
-  'sourceY',
-  'sourceX',
-  'targetX',
-  'targetY',
-  'markerEnd',
-  'markerStart',
-  'interactionWidth',
-]
-
-SimpleBezierEdge.inheritAttrs = false
-SimpleBezierEdge.compatConfig = { MODE: 3 }
+      return h(BaseEdge as any, {
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default SimpleBezierEdge

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

@@ -1,50 +1,48 @@
-import type { FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { defineComponent, 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 (
-  { sourcePosition = Position.Bottom, targetPosition = Position.Top, ...props },
-  { attrs },
-) {
-  const [path, labelX, labelY] = getSmoothStepPath({
-    sourcePosition,
-    targetPosition,
-    ...props,
-  })
+const SmoothStepEdge = defineComponent<SmoothStepEdgeProps>({
+  name: 'SmoothStepEdge',
+  props: [
+    'sourcePosition',
+    'targetPosition',
+    'label',
+    'labelStyle',
+    'labelShowBg',
+    'labelBgStyle',
+    'labelBgPadding',
+    'labelBgBorderRadius',
+    'sourceY',
+    'sourceX',
+    'targetX',
+    'targetY',
+    'borderRadius',
+    'markerEnd',
+    '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,
+      })
 
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-SmoothStepEdge.props = [
-  'sourcePosition',
-  'targetPosition',
-  'label',
-  'labelStyle',
-  'labelShowBg',
-  'labelBgStyle',
-  'labelBgPadding',
-  'labelBgBorderRadius',
-  'sourceY',
-  'sourceX',
-  'targetX',
-  'targetY',
-  'borderRadius',
-  'markerEnd',
-  'markerStart',
-  'interactionWidth',
-  'offset',
-]
-
-SmoothStepEdge.inheritAttrs = false
-SmoothStepEdge.compatConfig = { MODE: 3 }
+      return h(BaseEdge as any, {
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default SmoothStepEdge

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

@@ -1,31 +1,28 @@
-import type { FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
-import type { StepEdgeProps } from '~/types'
 
-const StepEdge: FunctionalComponent<StepEdgeProps> = function (props, { attrs }) {
-  return h(SmoothStepEdge, { ...props, ...attrs, borderRadius: 0 })
-}
-
-StepEdge.props = [
-  'sourcePosition',
-  'targetPosition',
-  'label',
-  'labelStyle',
-  'labelShowBg',
-  'labelBgStyle',
-  'labelBgPadding',
-  'labelBgBorderRadius',
-  'sourceY',
-  'sourceX',
-  'targetX',
-  'targetY',
-  'markerEnd',
-  'markerStart',
-  'interactionWidth',
-]
-
-StepEdge.inheritAttrs = false
-StepEdge.compatConfig = { MODE: 3 }
+const StepEdge = defineComponent({
+  name: 'StepEdge',
+  props: [
+    'sourcePosition',
+    'targetPosition',
+    'label',
+    'labelStyle',
+    'labelShowBg',
+    'labelBgStyle',
+    'labelBgPadding',
+    'labelBgBorderRadius',
+    'sourceY',
+    'sourceX',
+    'targetX',
+    'targetY',
+    'markerEnd',
+    'markerStart',
+    'interactionWidth',
+  ] as any,
+  setup(props, { attrs }) {
+    return () => h(SmoothStepEdge as any, { ...props, ...attrs, borderRadius: 0 })
+  },
+})
 
 export default StepEdge

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

@@ -1,38 +1,39 @@
-import type { FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { defineComponent, 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 [path, labelX, labelY] = getStraightPath(props)
+const StraightEdge = defineComponent<StraightEdgeProps>({
+  name: 'StraightEdge',
+  props: [
+    'label',
+    'labelStyle',
+    'labelShowBg',
+    'labelBgStyle',
+    'labelBgPadding',
+    'labelBgBorderRadius',
+    'sourceY',
+    'sourceX',
+    'targetX',
+    'targetY',
+    'markerEnd',
+    'markerStart',
+    'interactionWidth',
+  ] as any,
+  compatConfig: { MODE: 3 },
+  setup(props, { attrs }) {
+    return () => {
+      const [path, labelX, labelY] = getStraightPath(props)
 
-  return h(BaseEdge as any, {
-    path,
-    labelX,
-    labelY,
-    ...props,
-    ...attrs,
-  })
-}
-
-StraightEdge.props = [
-  'label',
-  'labelStyle',
-  'labelShowBg',
-  'labelBgStyle',
-  'labelBgPadding',
-  'labelBgBorderRadius',
-  'sourceY',
-  'sourceX',
-  'targetX',
-  'targetY',
-  'markerEnd',
-  'markerStart',
-  'interactionWidth',
-]
-
-StraightEdge.inheritAttrs = false
-StraightEdge.compatConfig = { MODE: 3 }
+      return h(BaseEdge as any, {
+        path,
+        labelX,
+        labelY,
+        ...attrs,
+        ...props,
+      })
+    }
+  },
+})
 
 export default StraightEdge