From 41db69e06c22d278657ba810198f371119b4972b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 Jul 2021 17:59:04 +0200
Subject: [PATCH] fix(nodes): dont select nodes when selectable=false closes
 #1324

---
 src/store/reducer.ts |  2 +-
 src/utils/graph.ts   | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/store/reducer.ts b/src/store/reducer.ts
index 57d4ea97f..d9b9fbb40 100644
--- a/src/store/reducer.ts
+++ b/src/store/reducer.ts
@@ -191,7 +191,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
         height: Math.abs(mousePos.y - startY),
       };
 
-      const selectedNodes = getNodesInside(state.nodes, nextUserSelectRect, state.transform);
+      const selectedNodes = getNodesInside(state.nodes, nextUserSelectRect, state.transform, false, true);
       const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
 
       const nextSelectedElements = [...selectedNodes, ...selectedEdges];
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index ad486fd26..73b6c68b5 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -216,7 +216,9 @@ export const getNodesInside = (
   nodes: Node[],
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
-  partially: boolean = false
+  partially: boolean = false,
+  // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
+  excludeNonSelectableNodes: boolean = false
 ): Node[] => {
   const rBox = rectToBox({
     x: (rect.x - tx) / tScale,
@@ -225,7 +227,11 @@ export const getNodesInside = (
     height: rect.height / tScale,
   });
 
-  return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
+  return nodes.filter(({ selectable = true, __rf: { position, width, height, isDragging } }) => {
+    if (excludeNonSelectableNodes && !selectable) {
+      return false;
+    }
+
     const nBox = rectToBox({ ...position, width, height });
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));