Merge pull request #1008 from kid-icarus/ki/support-element-double-click

Support element double click handler.

src/components/Nodes/wrapNode.tsx

@@ -20,6 +20,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     onMouseMove,
     onMouseLeave,
     onContextMenu,
+    onNodeDoubleClick,
     onNodeDragStart,
     onNodeDrag,
     onNodeDragStop,
@@ -169,6 +170,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, isDragging, selected]
     );
 
+    const onNodeDoubleClickHandler = useCallback((event: MouseEvent) => {
+      onNodeDoubleClick?.(event, node)
+    }, [node, onNodeDoubleClick])
+
     useEffect(() => {
       if (nodeElement.current && !isHidden) {
         updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]);
@@ -220,6 +225,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           onMouseLeave={onMouseLeaveHandler}
           onContextMenu={onContextMenuHandler}
           onClick={onSelectNodeHandler}
+          onDoubleClick={onNodeDoubleClickHandler}
           data-id={id}
         >
           <Provider value={id}>

src/container/GraphView/index.tsx

@@ -35,6 +35,7 @@ const GraphView = ({
   onMoveEnd,
   onLoad,
   onElementClick,
+  onNodeDoubleClick,
   onNodeMouseEnter,
   onNodeMouseMove,
   onNodeMouseLeave,
@@ -244,6 +245,7 @@ const GraphView = ({
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}
+        onNodeDoubleClick={onNodeDoubleClick}
         onNodeMouseEnter={onNodeMouseEnter}
         onNodeMouseMove={onNodeMouseMove}
         onNodeMouseLeave={onNodeMouseLeave}

src/container/NodeRenderer/index.tsx

@@ -7,6 +7,7 @@ interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
   onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
+  onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
   onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
   onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
   onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
@@ -93,6 +94,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             onMouseMove={props.onNodeMouseMove}
             onMouseLeave={props.onNodeMouseLeave}
             onContextMenu={props.onNodeContextMenu}
+            onNodeDoubleClick={props.onNodeDoubleClick}
             onNodeDragStart={props.onNodeDragStart}
             onNodeDrag={props.onNodeDrag}
             onNodeDragStop={props.onNodeDragStop}

src/container/ReactFlow/index.tsx

@@ -53,6 +53,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   elements: Elements;
   onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
+  onNodeDoubleClick?: (event: MouseEvent, node: Node) => void;
   onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
   onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
   onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;

src/types/index.ts

@@ -197,6 +197,7 @@ export interface NodeComponentProps<T = any> {
   targetPosition?: Position;
   sourcePosition?: Position;
   onClick?: (node: Node) => void;
+  onNodeDoubleClick?: (node: Node) => void;
   onMouseEnter?: (node: Node) => void;
   onMouseMove?: (node: Node) => void;
   onMouseLeave?: (node: Node) => void;
@@ -221,6 +222,7 @@ export interface WrapNodeProps<T = any> {
   isConnectable: boolean;
   selectNodesOnDrag: boolean;
   onClick?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeDoubleClick?: (event: ReactMouseEvent, node: Node) => void;
   onMouseEnter?: (event: ReactMouseEvent, node: Node) => void;
   onMouseMove?: (event: ReactMouseEvent, node: Node) => void;
   onMouseLeave?: (event: ReactMouseEvent, node: Node) => void;