From d5a9ae0101672a604d8f3bac1604faa2216fa788 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 14 Nov 2022 21:23:03 +0100
Subject: [PATCH] chore(docs): center dnd nodes after drop

---
 docs/components/examples/dnd/App.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/components/examples/dnd/App.vue b/docs/components/examples/dnd/App.vue
index e8c6297f..dab99c69 100644
--- a/docs/components/examples/dnd/App.vue
+++ b/docs/components/examples/dnd/App.vue
@@ -1,11 +1,12 @@
 <script setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { nextTick, watch } from 'vue'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const { onConnect, nodes, edges, addEdges, addNodes, viewport, project } = useVueFlow({
+const { findNode, onConnect, nodes, edges, addEdges, addNodes, viewport, project, vueFlowRef } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -29,7 +30,12 @@ onConnect((params) => addEdges([params]))
 const onDrop = (event) => {
   const type = event.dataTransfer?.getData('application/vueflow')
 
-  const position = project({ x: event.clientX - 40, y: event.clientY - 18 })
+  const { left, top } = vueFlowRef.value.getBoundingClientRect()
+
+  const position = project({
+    x: event.clientX - left,
+    y: event.clientY - top,
+  })
 
   const newNode = {
     id: getId(),
@@ -39,6 +45,21 @@ const onDrop = (event) => {
   }
 
   addNodes([newNode])
+
+  // align node position after drop, so it's centered to the mouse
+  nextTick(() => {
+    const node = findNode(newNode.id)
+    const stop = watch(
+      () => node.dimensions,
+      (dimensions) => {
+        if (dimensions.width > 0 && dimensions.height > 0) {
+          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+          stop()
+        }
+      },
+      { deep: true, flush: 'post' },
+    )
+  })
 }
 </script>