chore(core,edges): simplify edge components

packages/core/src/components/ConnectionLine/ConnectionLine.vue

@@ -104,6 +104,7 @@ export default {
         markerStart: `url(#${getMarkerId(connectionLineOptions.markerStart)})`,
       }"
     />
+
     <path
       v-else
       :d="dAttr"

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

@@ -67,6 +67,7 @@ BaseEdge.props = [
   'style',
   'interactionWidth',
 ]
+
 BaseEdge.inheritAttrs = false
 
 export default BaseEdge

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

@@ -6,46 +6,19 @@ import type { EdgeProps } from '~/types'
 const BezierEdge: FunctionalComponent<EdgeProps> = function ({
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  label,
-  labelStyle = {},
-  labelShowBg = true,
-  labelBgStyle = {},
-  labelBgPadding,
-  labelBgBorderRadius,
-  sourceY,
-  sourceX,
-  targetX,
-  targetY,
-  curvature,
-  markerEnd,
-  markerStart,
-  style,
-  interactionWidth,
+  ...props
 }) {
   const [path, labelX, labelY] = getBezierPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
     sourcePosition,
     targetPosition,
-    curvature,
+    ...props,
   })
 
   return h(BaseEdge, {
     path,
     labelX,
     labelY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
+    ...props,
   })
 }
 
@@ -67,7 +40,9 @@ BezierEdge.props = [
   'markerStart',
   'style',
   'interactionWidth',
+  'ref',
 ]
+
 BezierEdge.inheritAttrs = false
 
 export default BezierEdge

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

@@ -21,21 +21,24 @@ const shiftY = (y: number, shift: number, position: Position): number => {
 }
 
 const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX = 0, centerY = 0, position = Position.Top }) {
-  const cx = computed(() => {
+  const cx = () => {
     const val = shiftX(centerX, radius, position)
+
     if (isNaN(val)) return 0
     else return val
-  })
-  const cy = computed(() => {
+  }
+
+  const cy = () => {
     const val = shiftY(centerY, radius, position)
+
     if (isNaN(val)) return 0
     else return val
-  })
+  }
 
   return h('circle', {
     class: 'vue-flow__edgeupdater',
-    cx: cx.value,
-    cy: cy.value,
+    cx: cx(),
+    cy: cy(),
     r: radius,
     stroke: 'transparent',
     fill: 'transparent',

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

@@ -54,6 +54,7 @@ export default {
       :rx="labelBgBorderRadius"
       :ry="labelBgBorderRadius"
     />
+
     <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
       <slot>
         <component :is="label" v-if="!isString(label)" />

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

@@ -13,7 +13,7 @@ interface Props {
   targetNode: GraphNode
 }
 
-const Wrapper = defineComponent({
+const EdgeWrapper = defineComponent({
   props: ['name', 'type', 'id', 'updatable', 'selectable', 'edge', 'sourceNode', 'targetNode'],
   setup(props: Props) {
     const { addSelectedEdges, connectionMode, edgeUpdaterRadius, emits, nodesSelectionActive, getEdges, getEdgeTypes } =
@@ -239,4 +239,4 @@ const Wrapper = defineComponent({
   },
 })
 
-export default Wrapper
+export default EdgeWrapper

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

@@ -6,44 +6,19 @@ import type { EdgeProps } from '~/types'
 const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  label,
-  labelStyle = {},
-  labelShowBg = true,
-  labelBgStyle = {},
-  labelBgPadding,
-  labelBgBorderRadius,
-  sourceY,
-  sourceX,
-  targetX,
-  targetY,
-  markerEnd,
-  markerStart,
-  style,
-  interactionWidth,
+  ...props
 }) {
   const [path, labelX, labelY] = getSimpleBezierPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
     sourcePosition,
     targetPosition,
+    ...props,
   })
 
   return h(BaseEdge, {
     path,
     labelX,
     labelY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
+    ...props,
   })
 }
 
@@ -65,6 +40,7 @@ SimpleBezierEdge.props = [
   'style',
   'interactionWidth',
 ]
+
 SimpleBezierEdge.inheritAttrs = false
 
 export default SimpleBezierEdge

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

@@ -6,48 +6,19 @@ import { Position } from '~/types'
 const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  label,
-  labelStyle = {},
-  labelShowBg = true,
-  labelBgStyle = {},
-  labelBgPadding,
-  labelBgBorderRadius,
-  sourceY,
-  sourceX,
-  targetX,
-  targetY,
-  markerEnd,
-  markerStart,
-  borderRadius,
-  offset,
-  style,
-  interactionWidth,
+  ...props
 }) {
   const [path, labelX, labelY] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
     sourcePosition,
     targetPosition,
-    borderRadius,
-    offset,
+    ...props,
   })
 
   return h(BaseEdge, {
     path,
     labelX,
     labelY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
+    ...props,
   })
 }
 
@@ -71,6 +42,7 @@ SmoothStepEdge.props = [
   'style',
   'interactionWidth',
 ]
+
 SmoothStepEdge.inheritAttrs = false
 
 export default SmoothStepEdge

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

@@ -24,6 +24,7 @@ StepEdge.props = [
   'style',
   'interactionWidth',
 ]
+
 StepEdge.inheritAttrs = false
 
 export default StepEdge

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

@@ -2,38 +2,14 @@ import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
 import type { EdgeProps } from '~/types'
 
-const StraightEdge: FunctionalComponent<EdgeProps> = function ({
-  label,
-  labelStyle = {},
-  labelShowBg = true,
-  labelBgStyle = {},
-  labelBgPadding,
-  labelBgBorderRadius,
-  sourceY,
-  sourceX,
-  targetX,
-  targetY,
-  markerEnd,
-  markerStart,
-  style,
-  interactionWidth,
-}) {
-  const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY })
+const StraightEdge: FunctionalComponent<EdgeProps> = function (props) {
+  const [path, labelX, labelY] = getStraightPath(props)
 
   return h(BaseEdge, {
     path,
     labelX,
     labelY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
+    ...props,
   })
 }
 
@@ -53,6 +29,7 @@ StraightEdge.props = [
   'style',
   'interactionWidth',
 ]
+
 StraightEdge.inheritAttrs = false
 
 export default StraightEdge

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

@@ -6,5 +6,5 @@ export { default as SmoothStepEdge } from './SmoothStepEdge'
 export { default as StraightEdge } from './StraightEdge'
 export { default as EdgeAnchor } from './EdgeAnchor'
 export { default as EdgeText } from './EdgeText.vue'
-export { default as EdgeWrapper } from './Wrapper'
+export { default as EdgeWrapper } from './EdgeWrapper'
 export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.vue'

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EffectScope } from 'vue'
-import EdgeWrapper from '../../components/Edges/Wrapper'
+import EdgeWrapper from '../../components/Edges/EdgeWrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
 import MarkerDefinitions from './MarkerDefinitions.vue'