feat(edge): add onEdgeContextMenu handler #943

example/src/Overview/index.tsx

@@ -40,6 +40,7 @@ const onLoad = (reactFlowInstance: OnLoadParams) => {
 };
 
 const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform);
+const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge);
 
 const initialElements: Elements = [
   {
@@ -177,6 +178,7 @@ const OverviewFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
+      onEdgeContextMenu={onEdgeContextMenu}
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />

src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ComponentType, useCallback, useState } from 'react';
+import React, { memo, ComponentType, useCallback, useState, useMemo } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
@@ -37,7 +37,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     targetHandleId,
     handleEdgeUpdate,
     onConnectEdge,
-  }: WrapEdgeProps) => {
+    onContextMenu,
+  }: WrapEdgeProps): JSX.Element | null => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
     const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
@@ -53,34 +54,45 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       { selected, animated, inactive, updating },
     ]);
 
+    const edgeElement = useMemo<Edge>(() => {
+      const el: Edge = {
+        id,
+        source,
+        target,
+        type,
+      };
+
+      if (sourceHandleId) {
+        el.sourceHandle = sourceHandleId;
+      }
+
+      if (targetHandleId) {
+        el.targetHandle = targetHandleId;
+      }
+
+      if (typeof data !== 'undefined') {
+        el.data = data;
+      }
+
+      return el;
+    }, [id, source, target, type, sourceHandleId, targetHandleId, data]);
+
     const onEdgeClick = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-        const edgeElement: Edge = {
-          id,
-          source,
-          target,
-          type,
-        };
-
-        if (sourceHandleId) {
-          edgeElement.sourceHandle = sourceHandleId;
-        }
-
-        if (targetHandleId) {
-          edgeElement.targetHandle = targetHandleId;
-        }
-
-        if (typeof data !== 'undefined') {
-          edgeElement.data = data;
-        }
-
         if (elementsSelectable) {
           addSelectedElements(edgeElement);
         }
 
         onClick?.(event, edgeElement);
       },
-      [elementsSelectable, id, source, target, type, data, sourceHandleId, targetHandleId, onClick]
+      [elementsSelectable, edgeElement, onClick]
+    );
+
+    const onEdgeContextMenu = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        onContextMenu?.(event, edgeElement);
+      },
+      [edgeElement, onContextMenu]
     );
 
     const handleEdgeUpdater = useCallback(
@@ -127,7 +139,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     }
 
     return (
-      <g className={edgeClasses} onClick={onEdgeClick}>
+      <g className={edgeClasses} onClick={onEdgeClick} onContextMenu={onEdgeContextMenu}>
         {handleEdgeUpdate && (
           <g
             onMouseDown={onEdgeUpdaterSourceMouseDown}

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} />}

src/types/index.ts

@@ -125,6 +125,7 @@ export interface WrapEdgeProps<T = any> {
   isHidden?: boolean;
   handleEdgeUpdate: boolean;
   onConnectEdge: OnConnectFunc;
+  onContextMenu: (event: React.MouseEvent, edge: Edge) => void;
 }
 
 export interface EdgeProps<T = any> {