chore(examples): update floating edges example

Author: bcakmakoglu

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -13,17 +13,17 @@ interface FloatingConnectionLineProps {
 
 const props = defineProps<FloatingConnectionLineProps>()
 
-const targetNode = computed(
-  () =>
-    ({
-      id: 'connection-target',
-      position: { x: props.targetX, y: props.targetY },
-      dimensions: { width: 1, height: 1 },
-    } as GraphNode),
-)
+const targetNode = computed(() => {
+  return {
+    id: 'connection-target',
+    computedPosition: { x: props.targetX, y: props.targetY },
+    dimensions: { width: 1, height: 1 },
+  } as GraphNode
+})
 
 const edgeParams = computed(() => getEdgeParams(props.sourceNode, targetNode.value))
-const d = computed(() =>
+
+const edgePath = computed(() =>
   getBezierPath({
     sourceX: edgeParams.value.sx,
     sourceY: edgeParams.value.sy,
@@ -34,7 +34,7 @@ const d = computed(() =>
 
 <template>
   <g>
-    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d[0]" />
+    <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="edgePath[0]" />
     <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import type { EdgeProps, GraphNode, MarkerType } from '@vue-flow/core'
-import { getBezierPath } from '@vue-flow/core'
+import { BaseEdge, getBezierPath } from '@vue-flow/core'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {
@@ -20,7 +20,7 @@ const props = defineProps<FloatingEdgeProps>()
 
 const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
 
-const d = computed(
+const edgePath = computed(
   () =>
     (edgeParams.value.sx &&
       getBezierPath({
@@ -36,7 +36,5 @@ const d = computed(
 </script>
 
 <template>
-  <g class="vue-flow__connection">
-    <path :id="id" class="vue-flow__edge-path" :d="d[0]" :marker-start="markerStart" :marker-end="markerEnd" :style="style" />
-  </g>
+  <BaseEdge :id="id" :path="edgePath[0]" :marker-start="markerStart" :marker-end="markerEnd" :style="style" />
 </template>

examples/vite/src/FloatingEdges/floating-edge-utils.ts

@@ -7,9 +7,9 @@ function getNodeIntersection(intersectionNode: GraphNode, targetNode: GraphNode)
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
   const {
     dimensions: { width: intersectionNodeWidth, height: intersectionNodeHeight },
-    position: intersectionNodePosition,
+    computedPosition: intersectionNodePosition,
   } = intersectionNode
-  const targetPosition = targetNode.position
+  const targetPosition = targetNode.computedPosition
 
   const w = intersectionNodeWidth / 2
   const h = intersectionNodeHeight / 2
@@ -32,7 +32,7 @@ function getNodeIntersection(intersectionNode: GraphNode, targetNode: GraphNode)
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: GraphNode, intersectionPoint: XYPosition) {
-  const n = { ...node.position, ...node.dimensions }
+  const n = { ...node.computedPosition, ...node.dimensions }
   const nx = Math.round(n.x)
   const ny = Math.round(n.y)
   const px = Math.round(intersectionPoint.x)