Merge branch 'namack-expose-zoom-pane-click'

README.md

@@ -93,6 +93,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onMoveStart()`: called when user starts panning or zooming
 - `onMoveEnd()`: called when user ends panning or zooming
 - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements
+- `onPaneClick()`: called when user clicks directly on the canvas
 
 #### Interaction
 - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option.

example/src/Interaction/index.js

@@ -14,6 +14,7 @@ const initialElements = [
 const onNodeDragStart = (node) => console.log('drag start', node);
 const onNodeDragStop = (node) => console.log('drag stop', node);
 const onElementClick = (element) => console.log('click', element);
+const onPaneClick = () => console.log('onPaneClick');
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
@@ -25,6 +26,7 @@ const InteractionFlow = () => {
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
+  const [captureZoomClick, setCaptureZoomClick] = useState(false);
 
   return (
     <ReactFlow
@@ -39,6 +41,7 @@ const InteractionFlow = () => {
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
       paneMoveable={paneMoveable}
+      onPaneClick={captureZoomClick ? onPaneClick : undefined}
     >
       <MiniMap />
       <Controls />
@@ -116,6 +119,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="capturezoompaneclick">
+            capture zoom pane click
+            <input
+              id="capturezoompaneclick"
+              type="checkbox"
+              checked={captureZoomClick}
+              onChange={(evt) => setCaptureZoomClick(evt.target.checked)}
+              className="react-flow__capturezoompaneclick"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );

src/container/GraphView/index.tsx

@@ -39,6 +39,7 @@ export interface GraphViewProps {
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
+  onPaneClick?: () => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -100,6 +101,7 @@ const GraphView = ({
   zoomOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
+  onPaneClick,
 }: GraphViewProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
   const rendererNode = useRef<HTMLDivElement>(null);
@@ -121,7 +123,10 @@ const GraphView = ({
 
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  const onZoomPaneClick = () => setNodesSelection({ isActive: false });
+  const onZoomPaneClick = () => {
+    onPaneClick?.();
+    setNodesSelection({ isActive: false });
+  };
 
   const updateDimensions = () => {
     if (!rendererNode.current) {

src/container/ReactFlow/index.tsx

@@ -47,6 +47,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
+  onPaneClick?: () => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: ConnectionLineType;
@@ -112,6 +113,7 @@ const ReactFlow = ({
   zoomOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
+  onPaneClick,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -157,6 +159,7 @@ const ReactFlow = ({
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
           paneMoveable={paneMoveable}
+          onPaneClick={onPaneClick}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}