From 4eb775477fdcfdc1e0c7594caf3dd3b56e5ef036 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Apr 2022 16:19:04 +0200
Subject: [PATCH] fix(nodes): Add draggable watchers

---
 package/src/components/Nodes/NodeWrapper.vue  | 27 ++++++++++++++++++-
 .../NodesSelection/NodesSelection.vue         |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index 9fa35b7e..7c8bade0 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -43,7 +43,7 @@ watch(
 
 const nodeElement = ref()
 
-const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
+const { scale, disabled, handle, cancel, grid, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
   handle: node.dragHandle,
   disabled: !draggable,
   grid: snapGrid,
@@ -64,6 +64,31 @@ onMounted(() => {
     },
     { debounce: 5, flush: 'post' },
   )
+
+  watch(
+    () => draggable,
+    () => {
+      disabled.value = !draggable
+    },
+  )
+
+  watch(
+    () => node.dragHandle,
+    () => {
+      if (node.dragHandle) handle.value = node.dragHandle
+    },
+  )
+
+  watch($$(noDragClassName), () => {
+    if (noDragClassName) cancel.value = noDragClassName as any
+  })
+
+  watch(
+    () => snapGrid,
+    () => {
+      if (grid) grid.value = snapGrid
+    },
+  )
 })
 
 onMounted(() => {
diff --git a/package/src/components/NodesSelection/NodesSelection.vue b/package/src/components/NodesSelection/NodesSelection.vue
index d93da8f0..39b37c2e 100644
--- a/package/src/components/NodesSelection/NodesSelection.vue
+++ b/package/src/components/NodesSelection/NodesSelection.vue
@@ -18,7 +18,7 @@ const innerStyle = computed(() => ({
 
 const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
 
-watch(selectedNodesBBox, (v) => {
+watch($$(selectedNodesBBox), (v) => {
   setState({
     selectedNodesBbox: v,
   })