From 4cc6b0af02949c934342b3f95a8ed40b8613eb65 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 11 Sep 2020 11:04:38 +0200
Subject: [PATCH] fix(selection): dont render selection when another node gets
 selected

---
 src/components/Nodes/wrapNode.tsx       | 3 +++
 src/components/NodesSelection/index.tsx | 9 +++++----
 src/store/index.ts                      | 4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 54be5214..4634eb90 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -51,6 +51,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
     const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
+    const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
 
     const nodeElement = useRef<HTMLDivElement>(null);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -104,6 +105,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       (event: MouseEvent) => {
         if (!isDraggable) {
           if (isSelectable) {
+            unsetNodesSelection();
             setSelectedElements({ id: node.id, type: node.type } as Node);
           }
 
@@ -132,6 +134,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         }
 
         if (selectNodesOnDrag && isSelectable) {
+          unsetNodesSelection();
           setSelectedElements({ id: node.id, type: node.type } as Node);
         }
       },
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index a2f6d1d2..c46e7b9e 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/src/components/NodesSelection/index.tsx
@@ -25,6 +25,7 @@ export default ({
 }: NodesSelectionProps) => {
   const [tX, tY, tScale] = useStoreState((state) => state.transform);
   const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
+  const selectionActive = useStoreState((state) => state.selectionActive);
   const selectedElements = useStoreState((state) => state.selectedElements);
   const snapToGrid = useStoreState((state) => state.snapToGrid);
   const snapGrid = useStoreState((state) => state.snapGrid);
@@ -34,10 +35,6 @@ export default ({
 
   const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
-  if (!selectedElements) {
-    return null;
-  }
-
   const selectedNodes = useMemo(
     () =>
       selectedElements
@@ -109,6 +106,10 @@ export default ({
     [selectedNodesBbox]
   );
 
+  if (!selectedElements || selectionActive) {
+    return null;
+  }
+
   return (
     <div className="react-flow__nodesselection" style={style}>
       <ReactDraggable
diff --git a/src/store/index.ts b/src/store/index.ts
index 44648a8a..ec39cac5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -312,9 +312,9 @@ export const storeModel: StoreModel = {
   }),
 
   unsetUserSelection: action((state) => {
-    const selectedNodes = getNodesInside(state.nodes, state.userSelectionRect, state.transform);
+    const selectedNodes = state.selectedElements?.filter(isNode);
 
-    if (!selectedNodes.length) {
+    if (!selectedNodes) {
       state.selectionActive = false;
       state.userSelectionRect = { ...state.userSelectionRect, draw: false };
       state.nodesSelectionActive = false;