From 4e3f4541a18733f65ef949c7d2d1b1b99bb19843 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Apr 2022 22:30:09 +0200
Subject: [PATCH] chore(nodes): flush watcher on post hook

---
 package/src/components/Nodes/NodeWrapper.vue | 33 +++++++++++---------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index 295ea395..8141eea5 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -17,11 +17,21 @@ interface NodeWrapperProps {
 
 const props = defineProps<NodeWrapperProps>()
 const { store } = useVueFlow()
-const node = useVModel(props, 'node')
-provide(NodeId, props.id)
 
+const node = useVModel(props, 'node')
 const nodeElement = ref()
 
+const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
+  handle: node.value.dragHandle,
+  disabled: !props.draggable,
+  grid: props.snapGrid,
+  cancel: `.${store.noDragClassName}`,
+  enableUserSelectHack: false,
+  scale: store.viewport.zoom,
+})
+
+provide(NodeId, props.id)
+
 const onMouseEnterHandler = () =>
   node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
 const onMouseMoveHandler = () =>
@@ -49,8 +59,12 @@ onMounted(() => {
     store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]),
   )
 
-  watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () =>
-    nextTick(() => store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])),
+  watch(
+    [() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
+    () => {
+      store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
+    },
+    { flush: 'post' },
   )
 
   store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }])
@@ -114,22 +128,13 @@ const type = computed(() => {
   return slot
 })
 
-const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
-  handle: node.value.dragHandle,
-  disabled: !props.draggable,
-  grid: props.snapGrid,
-  cancel: `.${store.noDragClassName}`,
-  enableUserSelectHack: false,
-  scale: store.viewport.zoom,
-})
-
 onMounted(() => {
   debouncedWatch(
     () => store.viewport.zoom,
     () => {
       scale.value = store.viewport.zoom
     },
-    { debounce: 5 },
+    { debounce: 5, flush: 'post' },
   )
 })