Merge pull request #402 from namack/expose-pane-context-click

Add onPaneContextMenu

example/src/Interaction/index.js

@@ -15,6 +15,7 @@ const onNodeDragStart = (evt, node) => console.log('drag start', node);
 const onNodeDragStop = (evt, node) => console.log('drag stop', node);
 const onElementClick = (evt, element) => console.log('click', evt, element);
 const onPaneClick = (evt) => console.log('onPaneClick', evt);
+const onPaneContextMenu = (evt) => console.log('onPaneContextMenu', evt);
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
@@ -42,6 +43,7 @@ const InteractionFlow = () => {
       onNodeDragStop={onNodeDragStop}
       paneMoveable={paneMoveable}
       onPaneClick={captureZoomClick ? onPaneClick : undefined}
+      onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
     >
       <MiniMap />
       <Controls />

src/container/GraphView/index.tsx

@@ -42,6 +42,7 @@ export interface GraphViewProps {
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onPaneClick?: (evt: MouseEvent) => void;
+  onPaneContextMenu?: (evt: MouseEvent) => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -106,6 +107,7 @@ const GraphView = ({
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
+  onPaneContextMenu,
 }: GraphViewProps) => {
   const isInitialised = useRef<boolean>(false);
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -130,6 +132,10 @@ const GraphView = ({
     unsetNodesSelection();
   }, [onPaneClick]);
 
+  const onZoomPaneContextMenu = useCallback((evt: React.MouseEvent) => {
+    onPaneContextMenu?.(evt);
+  }, [onPaneContextMenu]);
+
   useResizeHandler(rendererNode);
   useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
   useElementUpdater(elements);
@@ -237,7 +243,7 @@ const GraphView = ({
       />
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
       {nodesSelectionActive && <NodesSelection />}
-      <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
+      <div className="react-flow__zoompane" onClick={onZoomPaneClick} onContextMenu={onZoomPaneContextMenu} ref={zoomPane} />
     </div>
   );
 };

src/container/ReactFlow/index.tsx

@@ -51,6 +51,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
   onPaneClick?: (evt: MouseEvent) => void;
+  onPaneContextMenu?: (evt: MouseEvent) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: ConnectionLineType;
@@ -119,6 +120,7 @@ const ReactFlow = ({
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
+  onPaneContextMenu,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -167,6 +169,7 @@ const ReactFlow = ({
           zoomOnDoubleClick={zoomOnDoubleClick}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
+          onPaneContextMenu={onPaneContextMenu}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}