feat(selection): add context menu handler closes #478

README.md

@@ -101,6 +101,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onSelectionDragStart(evt: MouseEvent, nodes: Node[])`: called when user starts to drag a selection
 - `onSelectionDrag(evt: MouseEvent, nodes: Node[])`: called when user drags a selection
 - `onSelectionDragStop(evt: MouseEvent, nodes: Node[])`: called when user stops to drag a selection
+- `onSelectionContextMenu(event: MouseEvent, nodes: Node[])`: called when user does a right-click on a selection
 - `onPaneClick(event: MouseEvent)`: called when user clicks directly on the canvas
 - `onPaneContextMenu(event: MouseEvent)`: called when user does a right-click on the canvas
 - `onPaneScroll(event: WheelEvent)`: called when user scrolls pane (only works when `zoomOnScroll` is set to `false)

example/src/Overview/index.js

@@ -7,6 +7,10 @@ const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onSelectionDrag = (event, nodes) => console.log('selection drag', nodes);
 const onSelectionDragStart = (event, nodes) => console.log('selection drag start', nodes);
 const onSelectionDragStop = (event, nodes) => console.log('selection drag stop', nodes);
+const onSelectionContextMenu = (event, nodes) => {
+  event.preventDefault();
+  console.log('selection context menu', nodes);
+};
 const onElementClick = (event, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
 const onSelectionChange = (elements) => console.log('selection change', elements);
 const onLoad = (reactFlowInstance) => {
@@ -126,6 +130,7 @@ const OverviewFlow = () => {
       onSelectionDragStart={onSelectionDragStart}
       onSelectionDrag={onSelectionDrag}
       onSelectionDragStop={onSelectionDragStop}
+      onSelectionContextMenu={onSelectionContextMenu}
       onSelectionChange={onSelectionChange}
       onMoveEnd={onMoveEnd}
       onLoad={onLoad}

src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selectio  with on or several nodes
  */
 
-import React, { MouseEvent } from 'react';
+import React, { useMemo, useCallback, MouseEvent } from 'react';
 import ReactDraggable, { DraggableData } from 'react-draggable';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -14,9 +14,15 @@ export interface NodesSelectionProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
 }
 
-export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop }: NodesSelectionProps) => {
+export default ({
+  onSelectionDragStart,
+  onSelectionDrag,
+  onSelectionDragStop,
+  onSelectionContextMenu,
+}: NodesSelectionProps) => {
   const [tX, tY, tScale] = useStoreState((state) => state.transform);
   const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
   const selectedElements = useStoreState((state) => state.selectedElements);
@@ -32,31 +38,30 @@ export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop }:
     return null;
   }
 
-  const onStart = (event: MouseEvent) => {
+  const selectedNodes = useMemo(
-    const selectedNodes = selectedElements
+    () =>
-      ? selectedElements
+      selectedElements
-          .filter(isNode)
+        ? selectedElements
-          .map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node)
+            .filter(isNode)
-      : [];
+            .map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node)
+        : [],
+    [selectedElements]
+  );
 
-    if (onSelectionDragStart) {
+  const onStart = useCallback(
-      onSelectionDragStart(event, selectedNodes);
+    (event: MouseEvent) => {
-    }
+      onSelectionDragStart?.(event, selectedNodes);
-  };
+    },
-
+    [onSelectionDragStart, selectedNodes]
-  const onDrag = (event: MouseEvent, data: DraggableData) => {
+  );
-    if (selectedElements) {
-      const selectedNodes = selectedElements ? selectedElements.filter(isNode) : [];
 
+  const onDrag = useCallback(
+    (event: MouseEvent, data: DraggableData) => {
       if (onSelectionDrag) {
-        const selectionNodes = selectedNodes.map(
+        onSelectionDrag(event, selectedNodes);
-          (selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node
-        );
-
-        onSelectionDrag(event, selectionNodes);
       }
 
-      selectedNodes.forEach((node) => {
+      selectedNodes?.forEach((node) => {
         updateNodePosDiff({
           id: node.id,
           diff: {
@@ -65,26 +70,47 @@ export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop }:
           },
         });
       });
-    }
+    },
-  };
+    [onSelectionDrag, selectedNodes, updateNodePosDiff]
+  );
 
-  const onStop = (event: MouseEvent) => {
+  const onStop = useCallback(
-    if (selectedElements && onSelectionDragStop) {
+    (event: MouseEvent) => {
+      onSelectionDragStop?.(event, selectedNodes);
+    },
+    [selectedNodes, onSelectionDragStop]
+  );
+
+  const onContextMenu = useCallback(
+    (event: MouseEvent) => {
       const selectedNodes = selectedElements
         ? selectedElements.filter(isNode).map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)!)
         : [];
 
-      onSelectionDragStop(event, selectedNodes);
+      onSelectionContextMenu?.(event, selectedNodes);
-    }
+    },
-  };
+    [onSelectionContextMenu]
+  );
+
+  const style = useMemo(
+    () => ({
+      transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
+    }),
+    [tX, tY, tScale]
+  );
+
+  const innerStyle = useMemo(
+    () => ({
+      width: selectedNodesBbox.width,
+      height: selectedNodesBbox.height,
+      top: selectedNodesBbox.y,
+      left: selectedNodesBbox.x,
+    }),
+    [selectedNodesBbox]
+  );
 
   return (
-    <div
+    <div className="react-flow__nodesselection" style={style}>
-      className="react-flow__nodesselection"
-      style={{
-        transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
-      }}
-    >
       <ReactDraggable
         scale={tScale}
         grid={grid}
@@ -92,15 +118,7 @@ export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop }:
         onDrag={(event, data) => onDrag(event as MouseEvent, data)}
         onStop={(event) => onStop(event as MouseEvent)}
       >
-        <div
+        <div className="react-flow__nodesselection-rect" onContextMenu={onContextMenu} style={innerStyle} />
-          className="react-flow__nodesselection-rect"
-          style={{
-            width: selectedNodesBbox.width,
-            height: selectedNodesBbox.height,
-            top: selectedNodesBbox.y,
-            left: selectedNodesBbox.x,
-          }}
-        />
       </ReactDraggable>
     </div>
   );

src/container/GraphView/index.tsx

@@ -51,6 +51,7 @@ export interface GraphViewProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -93,6 +94,7 @@ const GraphView = ({
   onSelectionDragStart,
   onSelectionDrag,
   onSelectionDragStop,
+  onSelectionContextMenu,
   connectionLineType,
   connectionLineStyle,
   selectionKeyCode,
@@ -292,6 +294,7 @@ const GraphView = ({
           onSelectionDragStart={onSelectionDragStart}
           onSelectionDrag={onSelectionDrag}
           onSelectionDragStop={onSelectionDragStop}
+          onSelectionContextMenu={onSelectionContextMenu}
         />
       )}
       <div

src/container/ReactFlow/index.tsx

@@ -57,6 +57,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: MouseEvent) => void;
   onPaneContextMenu?: (event: MouseEvent) => void;
@@ -112,6 +113,7 @@ const ReactFlow = ({
   onSelectionDragStart,
   onSelectionDrag,
   onSelectionDragStop,
+  onSelectionContextMenu,
   connectionLineType,
   connectionLineStyle,
   deleteKeyCode,
@@ -191,6 +193,7 @@ const ReactFlow = ({
           onSelectionDragStart={onSelectionDragStart}
           onSelectionDrag={onSelectionDrag}
           onSelectionDragStop={onSelectionDragStop}
+          onSelectionContextMenu={onSelectionContextMenu}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}