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

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

examples/vite/src/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -33,23 +33,31 @@ const {
 })
 
 const captureZoomClick = ref(false)
+
 const captureZoomScroll = ref(false)
 
-onConnect((params) => addEdges([params]))
+onConnect(addEdges)
+
 onNodeDragStart((e) => console.log('drag start', e))
+
 onNodeDragStop((e) => console.log('drag stop', e))
+
 onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+
 onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+
 onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
+
 onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 
 <template>
   <VueFlow>
     <MiniMap />
+
     <Controls />
 
-    <div :style="{ position: 'absolute', left: 10, top: 10, zIndex: 4 }">
+    <Panel :position="PanelPosition.TopLeft">
       <div>
         <label for="draggable">
           nodesDraggable
@@ -120,6 +128,6 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
           <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
-    </div>
+    </Panel>
   </VueFlow>
 </template>