From f84eff1a8c504e03b81ad4c15efa9bf2d3a10970 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 30 Jul 2020 11:10:41 +0200
Subject: [PATCH] feat(interaction): add paneMoveable prop #377

---
 README.md                         |  1 +
 example/src/Interaction/index.js  | 14 ++++++++++++++
 src/container/GraphView/index.tsx |  6 ++++--
 src/container/ReactFlow/index.tsx |  4 ++++
 src/hooks/useD3Zoom.ts            |  8 +++++++-
 5 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index feea4611..4d8ae2e9 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `zoomOnScroll`: default: `true`
 - `zoomOnDoubleClick`: default: `true`
 - `selectNodesOnDrag`: default: `true`
+- `paneMoveable`: default: `true` - If set to `false`, panning and zooming is disabled
 
 #### Element Customization
 - `nodeTypes`: object with [node types](#node-types--custom-nodes)
diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 3599ab7b..99027f31 100644
--- a/example/src/Interaction/index.js
+++ b/example/src/Interaction/index.js
@@ -24,6 +24,7 @@ const InteractionFlow = () => {
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
+  const [paneMoveable, setPaneMoveable] = useState(true);
 
   return (
     <ReactFlow
@@ -37,6 +38,7 @@ const InteractionFlow = () => {
       onElementClick={onElementClick}
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
+      paneMoveable={paneMoveable}
     >
       <MiniMap />
       <Controls />
@@ -102,6 +104,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="panemoveable">
+            pane moveable
+            <input
+              id="panemoveable"
+              type="checkbox"
+              checked={paneMoveable}
+              onChange={(evt) => setPaneMoveable(evt.target.checked)}
+              className="react-flow__panemoveable"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 987ea8bf..2b509c31 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -60,6 +60,7 @@ export interface GraphViewProps {
   markerEndId?: string;
   zoomOnScroll: boolean;
   zoomOnDoubleClick: boolean;
+  paneMoveable: boolean;
 }
 
 const GraphView = ({
@@ -98,6 +99,7 @@ const GraphView = ({
   markerEndId,
   zoomOnScroll,
   zoomOnDoubleClick,
+  paneMoveable,
 }: GraphViewProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
   const rendererNode = useRef<HTMLDivElement>(null);
@@ -141,7 +143,6 @@ const GraphView = ({
     updateDimensions();
     window.onresize = updateDimensions;
 
-
     if (rendererNode.current) {
       resizeObserver = new ResizeObserver((entries) => {
         for (let _ of entries) {
@@ -169,6 +170,7 @@ const GraphView = ({
     selectionKeyPressed,
     zoomOnScroll,
     zoomOnDoubleClick,
+    paneMoveable,
   });
 
   useEffect(() => {
@@ -196,7 +198,7 @@ const GraphView = ({
       }
     }
   }, [d3Initialised, onLoad]);
-        
+
   useEffect(() => {
     if (onConnect) {
       setOnConnect(onConnect);
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index c69b4a69..55bdf12d 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -60,6 +60,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   nodesConnectable: boolean;
   elementsSelectable: boolean;
   selectNodesOnDrag: boolean;
+  paneMoveable: boolean;
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
@@ -110,6 +111,7 @@ const ReactFlow = ({
   markerEndId,
   zoomOnScroll,
   zoomOnDoubleClick,
+  paneMoveable,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -154,6 +156,7 @@ const ReactFlow = ({
           markerEndId={markerEndId}
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
+          paneMoveable={paneMoveable}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -186,6 +189,7 @@ ReactFlow.defaultProps = {
   nodesConnectable: true,
   elementsSelectable: true,
   selectNodesOnDrag: true,
+  paneMoveable: true,
   minZoom: 0.5,
   maxZoom: 2,
   defaultZoom: 1,
diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts
index b948c9df..e25de360 100644
--- a/src/hooks/useD3Zoom.ts
+++ b/src/hooks/useD3Zoom.ts
@@ -9,6 +9,7 @@ interface UseD3ZoomParams {
   selectionKeyPressed: boolean;
   zoomOnScroll: boolean;
   zoomOnDoubleClick: boolean;
+  paneMoveable: boolean;
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
@@ -33,6 +34,7 @@ export default ({
   zoomOnScroll,
   zoomOnDoubleClick,
   selectionKeyPressed,
+  paneMoveable,
 }: UseD3ZoomParams): void => {
   const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 });
   const d3Zoom = useStoreState((s) => s.d3Zoom);
@@ -100,6 +102,10 @@ export default ({
   useEffect(() => {
     if (d3Zoom) {
       d3Zoom.filter(() => {
+        if (!paneMoveable) {
+          return false;
+        }
+
         if (!zoomOnScroll && event.type === 'wheel') {
           return false;
         }
@@ -111,5 +117,5 @@ export default ({
         return !event.ctrlKey && !event.button;
       });
     }
-  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick]);
+  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick, paneMoveable]);
 };