chore(deps): upgrade dependencies

examples/vite/package.json

@@ -10,14 +10,14 @@
     "@braks/vue-flow": "workspace:*"
   },
   "devDependencies": {
-    "@types/dagre": "^0.7.46",
-    "@vitejs/plugin-vue": "^2.2.0",
+    "@types/dagre": "^0.7.47",
+    "@vitejs/plugin-vue": "^2.3.3",
     "dagre": "^0.8.5",
-    "unplugin-auto-import": "^0.6.8",
-    "vite": "2.5.x",
+    "unplugin-auto-import": "^0.6.9",
+    "vite": "2.5.10",
     "vite-plugin-vue-type-imports": "^0.1.3",
-    "vite-svg-loader": "^3.1.2",
-    "vue": "^3.2.25",
-    "vue-router": "^4.0.12"
+    "vite-svg-loader": "^3.4.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.2"
   }
 }

examples/vite/src/DragNDrop/DnD.vue

@@ -23,11 +23,20 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
+const wrapper = ref()
+
 onConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
   const type = event.dataTransfer?.getData('application/vueflow')
-  const position = project({ x: event.clientX, y: event.clientY - 40 })
+
+  const flowbounds = wrapper.value.$el.getBoundingClientRect()
+
+  const position = project({
+    x: event.clientX - flowbounds.left,
+    y: event.clientY - flowbounds.top,
+  })
+
   const newNode = {
     id: getId(),
     type,
@@ -40,7 +49,7 @@ const onDrop = (event: DragEvent) => {
 
 <template>
   <div class="dndflow" @drop="onDrop">
-    <VueFlow @dragover="onDragOver" />
+    <VueFlow ref="wrapper" @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>