From 48c4f0a0eb27bc50ddc8b1d3a6506ca5f228013a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 25 Dec 2022 15:49:01 +0100
Subject: [PATCH] chore(examples): cleanup examples

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/vite/src/Basic/Basic.vue           | 7 ++++---
 examples/vite/src/Basic/BasicOptionsAPI.vue | 4 ++--
 examples/vite/src/CustomNode/CustomNode.vue | 9 ++-------
 examples/vite/src/DragNDrop/DnD.vue         | 1 +
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 6cda913f..1c366a56 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/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))
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index d19c8e5a..2e821224 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/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])
     },
   },
 })
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index 727de9a7..a163f2e5 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/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>
diff --git a/examples/vite/src/DragNDrop/DnD.vue b/examples/vite/src/DragNDrop/DnD.vue
index 94e6d20c..66def30f 100644
--- a/examples/vite/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -43,6 +43,7 @@ const onDrop = (event: DragEvent) => {
     position,
     label: `${type} node`,
   } as Node
+
   addNodes([newNode])
 }
 </script>