diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 6284bcd3..3a4fba99 100644
--- a/example/src/Interaction/index.js
+++ b/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}
>
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 58e105a5..48bbe61a 100644
--- a/src/container/GraphView/index.tsx
+++ b/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(false);
const zoomPane = useRef(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 = ({
/>
{nodesSelectionActive && }
-
+
);
};
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 8618c5b4..8b59f307 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -51,6 +51,7 @@ export interface ReactFlowProps extends Omit, '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 && }
{children}