refactor(edges)!: simplify edge paths and center calculations

examples/vite/src/Edges/CustomEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EdgeProps, Position } from '@vue-flow/core'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@vue-flow/core'
+import { getBezierPath, useVueFlow } from '@vue-flow/core'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
@@ -34,14 +34,6 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
 </script>
 
 <script lang="ts">
@@ -51,12 +43,12 @@ export default {
 </script>
 
 <template>
-  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="props.markerEnd" />
   <foreignObject
     :width="foreignObjectSize"
     :height="foreignObjectSize"
-    :x="center[0] - foreignObjectSize / 2"
-    :y="center[1] - foreignObjectSize / 2"
+    :x="edgePath[1] - foreignObjectSize / 2"
+    :y="edgePath[2] - foreignObjectSize / 2"
     class="edgebutton-foreignobject"
     requiredExtensions="http://www.w3.org/1999/xhtml"
   >

examples/vite/src/Edges/CustomEdge2.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EdgeProps, Position } from '@vue-flow/core'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@vue-flow/core'
+import { EdgeText, getBezierPath, getMarkerId } from '@vue-flow/core'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -32,15 +32,9 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
+
 const markerEnd = computed(() => getMarkerId(props.markerEnd))
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
+
 const onClick = () => console.log(props.data)
 </script>
 
@@ -51,10 +45,10 @@ export default {
 </script>
 
 <template>
-  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" />
   <EdgeText
-    :x="center[0]"
-    :y="center[1]"
+    :x="edgePath[1]"
+    :y="edgePath[2]"
     :label="props.data?.text"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -34,7 +34,7 @@ const d = computed(() =>
 
 <template>
   <g>
-    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d" />
+    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d[0]" />
     <circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -40,7 +40,7 @@ const d = computed(
     <path
       :id="props.id"
       class="vue-flow__edge-path"
-      :d="d"
+      :d="d[0]"
       :marker-start="props.markerStart"
       :marker-end="props.markerEnd"
       :style="props.style"