feat(interaction): add zoomOnDoublickClick and fix behaviour closes #338

example/src/Interaction/index.js

@@ -23,6 +23,7 @@ const InteractionFlow = () => {
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(true);
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true);
 
   return (
     <ReactFlow
@@ -31,6 +32,7 @@ const InteractionFlow = () => {
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
+      zoomOnDoubleClick={zoomOnDoubleClick}
       onConnect={onConnect}
       onElementClick={onElementClick}
       onNodeDragStart={onNodeDragStart}
@@ -88,6 +90,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="zoomondbl">
+            zoom on double click
+            <input
+              id="zoomondbl"
+              type="checkbox"
+              checked={zoomOnDoubleClick}
+              onChange={(evt) => setZoomOnDoubleClick(evt.target.checked)}
+              className="react-flow__zoomondbl"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );

src/container/GraphView/index.tsx

@@ -55,6 +55,7 @@ export interface GraphViewProps {
   arrowHeadColor: string;
   markerEndId?: string;
   zoomOnScroll: boolean;
+  zoomOnDoubleClick: boolean;
 }
 
 const GraphView = memo(
@@ -90,6 +91,7 @@ const GraphView = memo(
     arrowHeadColor,
     markerEndId,
     zoomOnScroll,
+    zoomOnDoubleClick,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -160,7 +162,7 @@ const GraphView = memo(
       };
     }, []);
 
-    useD3Zoom({ zoomPane, onMove, selectionKeyPressed, zoomOnScroll });
+    useD3Zoom({ zoomPane, onMove, selectionKeyPressed, zoomOnScroll, zoomOnDoubleClick });
 
     useEffect(() => {
       if (d3Initialised && onLoad) {

src/container/ReactFlow/index.tsx

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

src/hooks/useD3Zoom.ts

@@ -7,10 +7,11 @@ interface UseD3ZoomParams {
   zoomPane: MutableRefObject<Element | null>;
   selectionKeyPressed: boolean;
   zoomOnScroll: boolean;
+  zoomOnDoubleClick: boolean;
   onMove?: () => void;
 }
 
-export default ({ zoomPane, onMove, zoomOnScroll, selectionKeyPressed }: UseD3ZoomParams): void => {
+export default ({ zoomPane, onMove, zoomOnScroll, zoomOnDoubleClick, selectionKeyPressed }: UseD3ZoomParams): void => {
   const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
@@ -27,15 +28,7 @@ export default ({ zoomPane, onMove, zoomOnScroll, selectionKeyPressed }: UseD3Zo
       if (selectionKeyPressed) {
         d3Zoom.on('zoom', null);
       } else {
-        d3Zoom.on('zoom', function () {
+        d3Zoom.on('zoom', () => {
-          if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
-            return;
-          }
-
-          if (!zoomOnScroll && event.sourceEvent.type === 'wheel') {
-            return;
-          }
-
           updateTransform(event.transform);
 
           if (onMove) {
@@ -44,5 +37,21 @@ export default ({ zoomPane, onMove, zoomOnScroll, selectionKeyPressed }: UseD3Zo
         });
       }
     }
-  }, [selectionKeyPressed, zoomOnScroll, d3Zoom]);
+  }, [selectionKeyPressed, d3Zoom]);
+
+  useEffect(() => {
+    if (d3Zoom) {
+      d3Zoom.filter(() => {
+        if (!zoomOnScroll && event.type === 'wheel') {
+          return false;
+        }
+
+        if (!zoomOnDoubleClick && event.type === 'dblclick') {
+          return false;
+        }
+
+        return !event.ctrlKey && !event.button;
+      });
+    }
+  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick]);
 };

src/store/index.ts

@@ -349,6 +349,7 @@ export const storeModel: StoreModel = {
 
   initD3: action((state, zoomPaneNode) => {
     const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]);
+
     const selection = select(zoomPaneNode).call(d3ZoomInstance);
 
     state.d3Zoom = d3ZoomInstance;
@@ -413,7 +414,8 @@ export const storeModel: StoreModel = {
     const transform = [width / 2 - boundsCenterX * k, height / 2 - boundsCenterY * k];
     const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
 
-    d3Selection.call(d3Zoom.transform, fittedTransform);
+    // we need to sync the d3 zoom transform with the fitted transform
+    d3Selection.property('__zoom', fittedTransform);
 
     state.transform = [fittedTransform.x, fittedTransform.y, fittedTransform.k];
   }),