Merge pull request #339 from wbkd/develop

Develop

README.md

@@ -64,40 +64,54 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 
 # React Flow Component Prop Types
 
+#### Basic Props
 - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
-- `onElementClick(element: Node | Edge)`: element click callback
-- `onElementsRemove(elements: Elements)`: element remove callback
-- `onNodeDragStart(node: Node)`: node drag start callback
-- `onNodeDragStop(node: Node)`: node drag stop callback
-- `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter callback
-- `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move callback
-- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave callback
-- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu callback
-- `onConnect({ source, target })`: connect callback
-- `onLoad(reactFlowInstance)`: editor load callback
-- `onMove()`: move callback
-- `onSelectionChange(elements: Elements)`: fired when element selection changes
-- `nodeTypes`: object with [node types](#node-types--custom-nodes)
-- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
 - `style`: css properties
 - `className`: additional class name
-- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
-- `connectionLineStyle`: connection style as svg attributes
-- `deleteKeyCode`: default: `8` (delete)
-- `selectionKeyCode`: default: `16` (shift)
+
+#### Flow View
+- `minZoom`: default: `0.5`
+- `maxZoom`: default: `2`
+- `defaultZoom`: default: `1`
 - `snapToGrid`: default: `false`
 - `snapGrid`: [x, y] array - default: `[16, 16]`
 - `onlyRenderVisibleNodes`: default: `true`
+
+#### Event Handlers
+- `onElementClick(element: Node | Edge)`: called when user clicks node or edge
+- `onElementsRemove(elements: Elements)`: called when user removes node or edge
+- `onNodeDragStart(node: Node)`: node drag start
+- `onNodeDragStop(node: Node)`: node drag stop
+- `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter
+- `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move
+- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave
+- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
+- `onConnect({ source, target })`: called when user connects two nodes
+- `onLoad(reactFlowInstance)`: called when flow is initialized
+- `onMove()`: called when user pans or zooms
+- `onSelectionChange(elements: Elements)`: called user selects one or multiple elements
+
+#### Interaction
 - `nodesDraggable`: default: `true`
 - `nodesConnectable`: default: `true`
 - `elementsSelectable`: default: `true`
 - `zoomOnScroll`: default: `true`
+- `zoomOnDoubleClick`: default: `true`
 - `selectNodesOnDrag`: default: `true`
-- `minZoom`: default: `0.5`
-- `maxZoom`: default: `2`
-- `defaultZoom`: default: `1`
+
+#### Element Customization
+- `nodeTypes`: object with [node types](#node-types--custom-nodes)
+- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
 - `arrowHeadColor`: default: `#bbb`
 
+#### Connection Line Options
+- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
+- `connectionLineStyle`: connection style as svg attributes
+
+#### Keys
+- `deleteKeyCode`: default: `8` (delete)
+- `selectionKeyCode`: default: `16` (shift)
+
 ## React Flow Instance
 
 You can receive a `reactFlowInstance` by using the `onLoad` callback:

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 () {
-          if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
-            return;
-          }
-
-          if (!zoomOnScroll && event.sourceEvent.type === 'wheel') {
-            return;
-          }
-
+        d3Zoom.on('zoom', () => {
           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];
   }),