From 004dcc652895f1023430877519a5b8785b511073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Thu, 18 Nov 2021 16:53:41 +0100
Subject: [PATCH] feat(selection): disable pane movement when selection is
 dragged

---
 package-lock.json                       | 4 ++--
 package.json                            | 2 +-
 src/components/NodesSelection/index.tsx | 5 ++++-
 src/container/FlowRenderer/index.tsx    | 1 +
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1756d2e2..9299f831 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.14",
+  "version": "10.0.0-next.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "10.0.0-next.14",
+      "version": "10.0.0-next.17",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.15.4",
diff --git a/package.json b/package.json
index b2fdbe7a..1133fcf0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "10.0.0-next.14",
+  "version": "10.0.0-next.17",
   "engines": {
     "node": ">=12"
   },
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index 95fac2c0..b75c5ea6 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/src/components/NodesSelection/index.tsx
@@ -5,6 +5,7 @@
 
 import React, { useMemo, useCallback, useRef, MouseEvent } from 'react';
 import ReactDraggable, { DraggableData } from 'react-draggable';
+import cc from 'classcat';
 
 import { useStore } from '../../store';
 import { Node, ReactFlowState } from '../../types';
@@ -14,6 +15,7 @@ export interface NodesSelectionProps {
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
+  noPanClassName?: string;
 }
 // @TODO: work with nodeInternals instead of converting it to an array
 const selector = (s: ReactFlowState) => ({
@@ -33,6 +35,7 @@ export default ({
   onSelectionDrag,
   onSelectionDragStop,
   onSelectionContextMenu,
+  noPanClassName,
 }: NodesSelectionProps) => {
   const { transform, selectedNodesBbox, selectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } =
     useStore(selector);
@@ -105,7 +108,7 @@ export default ({
   }
 
   return (
-    <div className="react-flow__nodesselection react-flow__container" style={style}>
+    <div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
       <ReactDraggable
         scale={tScale}
         grid={grid}
diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index 9a34403d..8b8d3088 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -122,6 +122,7 @@ const FlowRenderer = ({
           onSelectionDrag={onSelectionDrag}
           onSelectionDragStop={onSelectionDragStop}
           onSelectionContextMenu={onSelectionContextMenu}
+          noPanClassName={noPanClassName}
         />
       )}
       <div