From 677c9a8b5e8a480e80cea02bd825f3aaad6a0b70 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 Nov 2021 00:45:43 +0100
Subject: [PATCH] fix: properly check if node is
 connectable/draggable/connectable

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Nodes/Node.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 4ffb6ed3..60a182c7 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -23,9 +23,13 @@ provide(NodeIdContextKey, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
-const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
-const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
+const selectable = computed(() =>
+  typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
+)
+const draggable = computed(() => (typeof props.node.draggable === 'undefined' ? store.nodesDraggable : props.node.draggable))
+const connectable = computed(() =>
+  typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
+)
 const scale = computed(() => store.transform[2])
 
 const onMouseEnterHandler = () =>
@@ -40,7 +44,7 @@ const onMouseLeaveHandler = () =>
 const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
 
 const onSelectNodeHandler = (event: MouseEvent) => {
-  if (!draggable) {
+  if (!draggable.value) {
     const n = props.node
     if (selectable.value) {
       store.unsetNodesSelection()
@@ -59,7 +63,7 @@ const onDragStart: DraggableEventListener = ({ event }) => {
     store.unsetNodesSelection()
 
     if (!props.selected) store.addSelectedElements([n])
-  } else if (!props.selectNodesOnDrag && !props.selected && selectable) {
+  } else if (!props.selectNodesOnDrag && !props.selected && selectable.value) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
   }
@@ -86,7 +90,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
   if (!props.node.__rf?.isDragging) {
-    if (selectable && !props.selectNodesOnDrag && !props.selected) {
+    if (selectable.value && !props.selectNodesOnDrag && !props.selected) {
       store.addSelectedElements([n])
     }
     hooks.nodeClick.trigger({ event, node: n })