refactor pan/zoom behaviour, implement pan on scroll #359, edit interaction example

src/hooks/useD3Zoom.ts

@@ -6,7 +6,9 @@ import { FlowTransform, TranslateExtent } from '../types';
 interface UseD3ZoomParams {
   zoomPane: MutableRefObject<Element | null>;
   selectionKeyPressed: boolean;
+  elementsSelectable?: boolean;
   zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
   defaultPosition?: [number, number];
@@ -34,8 +36,10 @@ export default ({
   onMoveStart,
   onMoveEnd,
   zoomOnScroll = true,
+  panOnScroll = false,
   zoomOnDoubleClick = true,
   selectionKeyPressed,
+  elementsSelectable,
   paneMoveable = true,
   defaultPosition = [0, 0],
   defaultZoom = 1,
@@ -46,6 +50,7 @@ export default ({
 
   const initD3 = useStoreActions((actions) => actions.initD3);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
+  const updateTransformDelta = useStoreActions((actions) => actions.updateTransformDelta);
 
   useEffect(() => {
     if (zoomPane.current) {
@@ -55,20 +60,22 @@ export default ({
 
   useEffect(() => {
     if (d3Zoom) {
-      if (selectionKeyPressed) {
-        d3Zoom.on('zoom', null);
-      } else {
-        d3Zoom.on('zoom', (event: any) => {
+      d3Zoom.on('zoom', (event: any) => {
+        if (panOnScroll && event.sourceEvent.type === 'wheel') {
+          const { deltaX, deltaY } = event.sourceEvent;
+          updateTransformDelta({ x: deltaX, y: deltaY });
+        } else {
           updateTransform(event.transform);
 
+          // todo: should we move this into the store or into a wrapper component with useEffect?
           if (onMove) {
             const flowTransform = eventToFlowTransform(event.transform);
             onMove(flowTransform);
           }
-        });
-      }
+        }
+      });
     }
-  }, [selectionKeyPressed, d3Zoom, updateTransform, onMove]);
+  }, [selectionKeyPressed, panOnScroll, d3Zoom, updateTransform, updateTransformDelta, onMove]);
 
   useEffect(() => {
     if (d3Zoom) {
@@ -107,34 +114,44 @@ export default ({
   useEffect(() => {
     if (d3Zoom) {
       d3Zoom.filter((event: any) => {
-        if (selectionKeyPressed) {
+        // if all interactions are disabled, we prevent all zoom events
+        if (!paneMoveable && !zoomOnScroll && !panOnScroll && !zoomOnDoubleClick) {
           return false;
         }
 
-        // only allow zoom on nodes
-        if (event.target.closest('.react-flow__node') && event.type !== 'wheel') {
-          return false;
-        }
-
-        // only allow zoom on user selection
-        if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
-          return false;
-        }
-
-        if (!paneMoveable) {
-          return false;
-        }
-
-        if (!zoomOnScroll && event.type === 'wheel') {
+        // during a selection we prevent all other interactions
+        if (elementsSelectable && selectionKeyPressed) {
           return false;
         }
 
+        // if zoom on double click is disabled, we prevent the double click event
         if (!zoomOnDoubleClick && event.type === 'dblclick') {
           return false;
         }
 
+        // when the target element is a node, we still allow zooming
+        if (event.target.closest('.react-flow__node') && event.type !== 'wheel') {
+          return false;
+        }
+
+        // when the target element is a node selection, we still allow zooming
+        if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
+          return false;
+        }
+
+        // when there is no scroll handling enabled, we prevent all wheel events
+        if (!zoomOnScroll && !panOnScroll && event.type === 'wheel') {
+          return false;
+        }
+
+        // if the pane is not movable, we prevent dragging it with the mouse
+        if (!paneMoveable && event.type === 'mousedown') {
+          return false;
+        }
+
+        // default filter for d3-zoom, prevents zooming on buttons and when ctrl is pressed
         return !event.ctrlKey && !event.button;
       });
     }
-  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick, paneMoveable, selectionKeyPressed]);
+  }, [d3Zoom, zoomOnScroll, panOnScroll, zoomOnDoubleClick, paneMoveable, selectionKeyPressed, elementsSelectable]);
 };