feat(interaction): add zoomOnScroll property closes #331

README.md

@@ -91,6 +91,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `nodesDraggable`: default: `true`
 - `nodesConnectable`: default: `true`
 - `elementsSelectable`: default: `true`
+- `zoomOnScroll`: default: `true`
 - `selectNodesOnDrag`: default: `true`
 - `minZoom`: default: `0.5`
 - `maxZoom`: default: `2`

example/src/Interaction/index.js

@@ -18,6 +18,7 @@ const InteractionFlow = () => {
   const [isSelectable, setIsSelectable] = useState(false);
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
+  const [zoomOnScroll, setZoomOnScroll] = useState(true);
 
   return (
     <ReactFlow
@@ -25,6 +26,7 @@ const InteractionFlow = () => {
       elementsSelectable={isSelectable}
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
+      zoomOnScroll={zoomOnScroll}
       onConnect={onConnect}
     >
       <MiniMap />
@@ -67,6 +69,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="zoomonscroll">
+            zoom on scroll
+            <input
+              id="zoomonscroll"
+              type="checkbox"
+              checked={zoomOnScroll}
+              onChange={(evt) => setZoomOnScroll(evt.target.checked)}
+              className="react-flow__zoomonscroll"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );

src/container/GraphView/index.tsx

@@ -54,6 +54,7 @@ export interface GraphViewProps {
   defaultZoom: number;
   arrowHeadColor: string;
   markerEndId?: string;
+  zoomOnScroll: boolean;
 }
 
 const GraphView = memo(
@@ -88,6 +89,7 @@ const GraphView = memo(
     defaultZoom,
     arrowHeadColor,
     markerEndId,
+    zoomOnScroll,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -158,7 +160,7 @@ const GraphView = memo(
       };
     }, []);
 
-    useD3Zoom({ zoomPane, onMove, selectionKeyPressed });
+    useD3Zoom({ zoomPane, onMove, selectionKeyPressed, zoomOnScroll });
 
     useEffect(() => {
       if (d3Initialised && onLoad) {

src/container/ReactFlow/index.tsx

@@ -62,6 +62,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   defaultZoom: number;
   arrowHeadColor: string;
   markerEndId?: string;
+  zoomOnScroll: boolean
 }
 
 const ReactFlow = ({
@@ -99,6 +100,7 @@ const ReactFlow = ({
   defaultZoom,
   arrowHeadColor,
   markerEndId,
+  zoomOnScroll
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -138,6 +140,7 @@ const ReactFlow = ({
           defaultZoom={defaultZoom}
           arrowHeadColor={arrowHeadColor}
           markerEndId={markerEndId}
+          zoomOnScroll={zoomOnScroll}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -174,6 +177,7 @@ ReactFlow.defaultProps = {
   maxZoom: 2,
   defaultZoom: 1,
   arrowHeadColor: '#bbb',
+  zoomOnScroll: true
 };
 
 export default ReactFlow;

src/hooks/useD3Zoom.ts

@@ -6,10 +6,11 @@ import { useStoreState, useStoreActions } from '../store/hooks';
 interface UseD3ZoomParams {
   zoomPane: MutableRefObject<Element | null>;
   selectionKeyPressed: boolean;
+  zoomOnScroll: boolean;
   onMove?: () => void;
 }
 
-export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
+export default ({ zoomPane, onMove, zoomOnScroll, selectionKeyPressed }: UseD3ZoomParams): void => {
   const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
@@ -31,6 +32,10 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
             return;
           }
 
+          if (!zoomOnScroll && event.sourceEvent.type === 'wheel') {
+            return;
+          }
+
           updateTransform(event.transform);
 
           if (onMove) {
@@ -39,5 +44,5 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
         });
       }
     }
-  }, [selectionKeyPressed, d3Zoom]);
+  }, [selectionKeyPressed, zoomOnScroll, d3Zoom]);
 };