From 93aa5c96ca87eee12f945f0f1813c993725d7293 Mon Sep 17 00:00:00 2001
From: Nate Amack <nate@amack.org>
Date: Tue, 4 Aug 2020 17:11:10 -0600
Subject: [PATCH] feat(props): add onPaneContextMenu

---
 example/src/Interaction/index.js  | 2 ++
 src/container/GraphView/index.tsx | 8 +++++++-
 src/container/ReactFlow/index.tsx | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

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}
     >
       <MiniMap />
       <Controls />
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<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>
   );
 };
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 92231b86..465cc69f 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/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?: () => 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}