feat(interaction): add zoomActiviationKeyCode #847

example/src/Layouting/index.js

@@ -46,7 +46,7 @@ const LayoutFlow = () => {
 
   useEffect(() => {
     onLayout('TB');
-  }, []);
+  }, [onLayout]);
 
   return (
     <div className="layoutflow">

src/container/FlowRenderer/index.tsx

@@ -37,6 +37,7 @@ const FlowRenderer = ({
   onMoveEnd,
   selectionKeyCode,
   multiSelectionKeyCode,
+  zoomActivationKeyCode,
   elementsSelectable,
   zoomOnScroll,
   panOnScroll,
@@ -99,6 +100,7 @@ const FlowRenderer = ({
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}
       translateExtent={translateExtent}
+      zoomActivationKeyCode={zoomActivationKeyCode}
     >
       {children}
       <UserSelection selectionKeyPressed={selectionKeyPressed} />

src/container/GraphView/index.tsx

@@ -51,6 +51,7 @@ const GraphView = ({
   connectionLineComponent,
   selectionKeyCode,
   multiSelectionKeyCode,
+  zoomActivationKeyCode,
   onElementsRemove,
   deleteKeyCode,
   onConnect,
@@ -205,6 +206,7 @@ const GraphView = ({
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
       multiSelectionKeyCode={multiSelectionKeyCode}
+      zoomActivationKeyCode={zoomActivationKeyCode}
       elementsSelectable={elementsSelectable}
       onMove={onMove}
       onMoveStart={onMoveStart}

src/container/ReactFlow/index.tsx

@@ -82,6 +82,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   deleteKeyCode?: KeyCode;
   selectionKeyCode?: KeyCode;
   multiSelectionKeyCode?: KeyCode;
+  zoomActivationKeyCode?: KeyCode;
   snapToGrid?: boolean;
   snapGrid?: [number, number];
   onlyRenderVisibleElements?: boolean;
@@ -138,6 +139,7 @@ const ReactFlow = ({
   deleteKeyCode = 'Backspace',
   selectionKeyCode = 'Shift',
   multiSelectionKeyCode = 'Meta',
+  zoomActivationKeyCode = 'Meta',
   snapToGrid = false,
   snapGrid = [15, 15],
   onlyRenderVisibleElements = true,
@@ -194,6 +196,7 @@ const ReactFlow = ({
           onElementsRemove={onElementsRemove}
           deleteKeyCode={deleteKeyCode}
           multiSelectionKeyCode={multiSelectionKeyCode}
+          zoomActivationKeyCode={zoomActivationKeyCode}
           onConnect={onConnect}
           onConnectStart={onConnectStart}
           onConnectStop={onConnectStop}

src/container/ZoomPane/index.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, ReactNode } from 'react';
-
 import { zoom, zoomIdentity } from 'd3-zoom';
 import { select } from 'd3-selection';
-import { clamp } from '../../utils';
 
+import { clamp } from '../../utils';
+import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
-import { FlowTransform, TranslateExtent, PanOnScrollMode } from '../../types';
+import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
 
 interface ZoomPaneProps {
   selectionKeyPressed: boolean;
@@ -23,6 +23,7 @@ interface ZoomPaneProps {
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
+  zoomActivationKeyCode?: KeyCode;
   children: ReactNode;
 }
 
@@ -52,6 +53,7 @@ const ZoomPane = ({
   defaultPosition = [0, 0],
   defaultZoom = 1,
   translateExtent,
+  zoomActivationKeyCode,
   children,
 }: ZoomPaneProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -65,6 +67,8 @@ const ZoomPane = ({
   const initD3Zoom = useStoreActions((actions) => actions.initD3Zoom);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
 
+  const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
+
   useResizeHandler(zoomPane);
 
   useEffect(() => {
@@ -93,7 +97,7 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Selection && d3Zoom) {
-      if (panOnScroll) {
+      if (panOnScroll && !zoomActivationKeyPressed) {
         d3Selection
           .on('wheel', (event: any) => {
             event.preventDefault();
@@ -117,7 +121,7 @@ const ZoomPane = ({
         d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
       }
     }
-  }, [panOnScroll, panOnScrollMode, d3Selection, d3Zoom, d3ZoomHandler]);
+  }, [panOnScroll, panOnScrollMode, d3Selection, d3Zoom, d3ZoomHandler, zoomActivationKeyPressed]);
 
   useEffect(() => {
     if (d3Zoom) {

src/hooks/useKeyPress.ts

@@ -3,35 +3,37 @@ import { useState, useEffect } from 'react';
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
 
-export default (keyCode: KeyCode): boolean => {
+export default (keyCode?: KeyCode): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
   useEffect(() => {
-    const downHandler = (event: KeyboardEvent) => {
-      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-        event.preventDefault();
+    if (typeof keyCode !== 'undefined') {
+      const downHandler = (event: KeyboardEvent) => {
+        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+          event.preventDefault();
 
-        setKeyPressed(true);
-      }
-    };
+          setKeyPressed(true);
+        }
+      };
 
-    const upHandler = (event: KeyboardEvent) => {
-      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-        setKeyPressed(false);
-      }
-    };
+      const upHandler = (event: KeyboardEvent) => {
+        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+          setKeyPressed(false);
+        }
+      };
 
-    const resetHandler = () => setKeyPressed(false);
+      const resetHandler = () => setKeyPressed(false);
 
-    window.addEventListener('keydown', downHandler);
-    window.addEventListener('keyup', upHandler);
-    window.addEventListener('blur', resetHandler);
+      window.addEventListener('keydown', downHandler);
+      window.addEventListener('keyup', upHandler);
+      window.addEventListener('blur', resetHandler);
 
-    return () => {
-      window.removeEventListener('keydown', downHandler);
-      window.removeEventListener('keyup', upHandler);
-      window.removeEventListener('blur', resetHandler);
-    };
+      return () => {
+        window.removeEventListener('keydown', downHandler);
+        window.removeEventListener('keyup', upHandler);
+        window.removeEventListener('blur', resetHandler);
+      };
+    }
   }, [keyCode, setKeyPressed]);
 
   return keyPressed;

tsconfig.json

@@ -16,11 +16,11 @@
     "alwaysStrict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
+    "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },
   "include": ["src"],
   "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
-}
+}