chore(examples): cleanup examples

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

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import type { Elements } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -14,12 +14,13 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
-  defaultZoom: 1.5,
+const { onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   minZoom: 0.2,
   maxZoom: 4,
   connectOnClick: true,
   fitViewOnInit: false,
+  selectionOnDrag: true,
+  panOnDrag: [2],
 })
 
 onNodeDragStop((e) => console.log('drag stop', e))

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { VueFlow, isNode } from '@vue-flow/core'
 
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -50,7 +50,7 @@ export default defineComponent({
       this.instance = instance as any
     },
     onConnect(params: FlowEvents['connect']) {
-      addEdge(params, this.elements)
+      this.instance?.addEdges([params])
     },
   },
 })

examples/vite/src/CustomNode/CustomNode.vue

@@ -67,21 +67,16 @@ onMounted(() => {
   ]
 })
 
-const { onPaneReady } = useVueFlow({
+useVueFlow({
   connectionMode: ConnectionMode.Loose,
   connectionLineStyle,
   snapToGrid: true,
   snapGrid,
-  defaultZoom: 1.5,
-})
-onPaneReady((i) => {
-  i.fitView()
-  console.log('flow loaded:', i)
 })
 </script>
 
 <template>
-  <VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
+  <VueFlow v-model="elements" fit-view-on-init :style="{ backgroundColor: bgColor }">
     <template #node-selectorNode="props">
       <ColorSelectorNode v-bind="props" />
     </template>

examples/vite/src/DragNDrop/DnD.vue

@@ -43,6 +43,7 @@ const onDrop = (event: DragEvent) => {
     position,
     label: `${type} node`,
   } as Node
+
   addNodes([newNode])
 }
 </script>