feat(edges): Add base edge

src/components/Edges/BaseEdge.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import EdgeText from './EdgeText.vue'
+
+interface Props {
+  centerX: number
+  centerY: number
+  path: string
+  label?:
+    | string
+    | {
+        props?: any
+        component: any
+      }
+  style?: CSSProperties
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  markerStart?: string
+  markerEnd?: string
+}
+const props = defineProps<Props>()
+</script>
+<template>
+  <path
+    :style="props.style"
+    :d="props.path"
+    class="vue-flow__edge-path"
+    :marker-end="props.markerEnd"
+    :marker-start="props.markerStart"
+  />
+  <EdgeText
+    v-if="props.label"
+    :x="props.centerX"
+    :y="props.centerY"
+    :label="props.label"
+    :label-style="props.labelStyle"
+    :label-show-bg="props.labelShowBg"
+    :label-bg-style="props.labelBgStyle"
+    :label-bg-padding="props.labelBgPadding"
+    :label-bg-border-radius="props.labelBgBorderRadius"
+  />
+</template>

src/components/Edges/BezierEdge.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Position } from '../../types/flow'
 import type { EdgeProps } from '../../types/edge'
-import { getCenter, getBezierPath } from './utils'
+import { getBezierPath, getBezierCenter } from './utils'
-import EdgeText from './EdgeText.vue'
+import BaseEdge from './BaseEdge.vue'
 
 const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
@@ -15,14 +15,26 @@ const props = withDefaults(defineProps<EdgeProps>(), {
 })
 
 const centered = computed(() =>
-  getCenter({
+  getBezierCenter({
-    ...props,
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    sourcePosition: props.sourcePosition,
+    targetPosition: props.targetPosition,
+    curvature: props.curvature,
   }),
 )
 const path = computed(() => {
   if (props.sourceX && props.sourceY)
     return getBezierPath({
-      ...props,
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      curvature: props.curvature,
     })
   else return ''
 })
@@ -30,28 +42,21 @@ const path = computed(() => {
 <script lang="ts">
 export default {
   name: 'BezierEdge',
-  inheritAttrs: false,
 }
 </script>
 <template>
-  <path
+  <BaseEdge
-    class="vue-flow__edge-path"
+    :path="path"
+    :center-x="centered[0]"
+    :center-y="centered[1]"
+    :label="props.label"
+    :label-style="props.labelStyle"
+    :label-show-bg="props.labelShowBg"
+    :label-bg-style="props.labelBgStyle"
+    :label-bg-padding="props.labelBgPadding"
+    :label-bg-border-radius="props.labelBgBorderRadius"
     :style="props.style"
-    :d="path"
     :marker-end="props.markerEnd"
     :marker-start="props.markerStart"
   />
-  <slot :x="centered[0]" :y="centered[1]" v-bind="props">
-    <EdgeText
-      v-if="props.label"
-      :x="centered[0]"
-      :y="centered[1]"
-      :label="props.label"
-      :label-style="props.labelStyle"
-      :label-show-bg="props.labelShowBg"
-      :label-bg-style="props.labelBgStyle"
-      :label-bg-padding="props.labelBgPadding"
-      :label-bg-border-radius="props.labelBgBorderRadius"
-    />
-  </slot>
 </template>