feat(edge): add onEdgeContextMenu handler #943

src/container/EdgeRenderer/index.tsx

@@ -29,6 +29,7 @@ interface EdgeRendererProps {
   markerEndId?: string;
   onlyRenderVisibleElements: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeContextMenu?: (event: React.MouseEvent, element: Edge) => void;
 }
 
 interface EdgeWrapperProps {
@@ -163,6 +164,7 @@ const Edge = ({
       isHidden={edge.isHidden}
       onConnectEdge={onConnectEdge}
       handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
+      onContextMenu={props.onEdgeContextMenu}
     />
   );
 };

src/container/GraphView/index.tsx

@@ -85,6 +85,7 @@ const GraphView = ({
   onPaneScroll,
   onPaneContextMenu,
   onEdgeUpdate,
+  onEdgeContextMenu,
 }: GraphViewProps) => {
   const isInitialised = useRef<boolean>(false);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
@@ -262,6 +263,7 @@ const GraphView = ({
         markerEndId={markerEndId}
         onEdgeUpdate={onEdgeUpdate}
         onlyRenderVisibleElements={onlyRenderVisibleElements}
+        onEdgeContextMenu={onEdgeContextMenu}
       />
     </FlowRenderer>
   );

src/container/ReactFlow/index.tsx

@@ -109,6 +109,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeContextMenu?: (event: MouseEvent, nodes: Edge) => void;
 }
 
 const ReactFlow = ({
@@ -173,6 +174,7 @@ const ReactFlow = ({
   onPaneContextMenu,
   children,
   onEdgeUpdate,
+  onEdgeContextMenu,
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
@@ -240,6 +242,7 @@ const ReactFlow = ({
           onSelectionDragStop={onSelectionDragStop}
           onSelectionContextMenu={onSelectionContextMenu}
           onEdgeUpdate={onEdgeUpdate}
+          onEdgeContextMenu={onEdgeContextMenu}
         />
         <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}