chore(examples): update examples with new API for add/remove

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/vite/src/FloatingEdges/FloatingConnectionLine.vue

@@ -35,6 +35,6 @@ const d = computed(() =>
 <template>
   <g>
     <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" />
+    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdge.vue

@@ -11,13 +11,13 @@ interface FloatingEdgeProps extends EdgeProps {
   markerEndId?: string
   sourceNode: GraphNode
   targetNode: GraphNode
-  nodes: GraphNode[]
   style?: CSSProperties
   markerEnd: MarkerType
   markerStart: MarkerType
 }
 
 const props = defineProps<FloatingEdgeProps>()
+
 const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
 
 const d = computed(
@@ -37,13 +37,6 @@ const d = computed(
 
 <template>
   <g class="vue-flow__connection">
-    <path
-      :id="props.id"
-      class="vue-flow__edge-path"
-      :d="d[0]"
-      :marker-start="props.markerStart"
-      :marker-end="props.markerEnd"
-      :style="props.style"
-    />
+    <path :id="id" class="vue-flow__edge-path" :d="d[0]" :marker-start="markerStart" :marker-end="markerEnd" :style="style" />
   </g>
 </template>

examples/vite/src/FloatingEdges/FloatingEdges.vue

@@ -8,25 +8,28 @@ import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
 
-const { addEdges, onConnect, onPaneReady, getNodes } = useVueFlow({
+const { addEdges, onConnect } = useVueFlow({
   modelValue: createElements(),
 })
-onPaneReady(({ fitView }) => fitView())
-onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: MarkerType.Arrow }]))
+
+onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerType.Arrow }))
 </script>
 
 <template>
   <div class="floatingedges">
-    <VueFlow>
+    <VueFlow fit-view-on-init>
       <Background :variant="BackgroundVariant.Lines" :gap="24" />
+
       <MiniMap />
+
       <Controls />
 
       <template #connection-line="props">
         <FloatingConnectionLine v-bind="props" />
       </template>
+
       <template #edge-floating="props">
-        <FloatingEdge v-bind="props" :nodes="getNodes" />
+        <FloatingEdge v-bind="props" />
       </template>
     </VueFlow>
   </div>