feat(nodes): add enter, move, leave and context handler #301

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, memo, CSSProperties } from 'react';
+import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
 import classnames from 'classnames';
 import { ResizeObserver } from 'resize-observer';
 
@@ -28,6 +28,10 @@ export interface GraphViewProps {
   elements: Elements;
   onElementClick?: (element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
+  onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
+  onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Connection | Edge) => void;
@@ -56,6 +60,10 @@ const GraphView = memo(
     onMove,
     onLoad,
     onElementClick,
+    onNodeMouseEnter,
+    onNodeMouseMove,
+    onNodeMouseLeave,
+    onNodeContextMenu,
     onNodeDragStart,
     onNodeDragStop,
     connectionLineType,
@@ -176,6 +184,10 @@ const GraphView = memo(
         <NodeRenderer
           nodeTypes={nodeTypes}
           onElementClick={onElementClick}
+          onNodeMouseEnter={onNodeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
           onNodeDragStop={onNodeDragStop}
           onNodeDragStart={onNodeDragStart}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}

src/container/NodeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ComponentType } from 'react';
+import React, { memo, ComponentType, MouseEvent } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import { getNodesInside } from '../../utils/graph';
@@ -8,6 +8,10 @@ interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
   onElementClick?: (element: Node | Edge) => void;
+  onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
+  onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   onlyRenderVisibleNodes?: boolean;
@@ -37,6 +41,10 @@ function renderNode(
       xPos={node.__rf.position.x}
       yPos={node.__rf.position.y}
       onClick={props.onElementClick}
+      onMouseEnter={props.onNodeMouseEnter}
+      onMouseMove={props.onNodeMouseMove}
+      onMouseLeave={props.onNodeMouseLeave}
+      onContextMenu={props.onNodeContextMenu}
       onNodeDragStart={props.onNodeDragStart}
       onNodeDragStop={props.onNodeDragStop}
       transform={transform}

src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
+import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 import cx from 'classnames';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
@@ -37,6 +37,10 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   elements: Elements;
   onElementClick?: (element: Node | Edge) => void;
   onElementsRemove?: (elements: Elements) => void;
+  onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
+  onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
@@ -71,6 +75,10 @@ const ReactFlow = ({
   onMove,
   onElementsRemove,
   onConnect,
+  onNodeMouseEnter,
+  onNodeMouseMove,
+  onNodeMouseLeave,
+  onNodeContextMenu,
   onNodeDragStart,
   onNodeDragStop,
   onSelectionChange,
@@ -97,6 +105,10 @@ const ReactFlow = ({
           onLoad={onLoad}
           onMove={onMove}
           onElementClick={onElementClick}
+          onNodeMouseEnter={onNodeMouseEnter}
+          onNodeMouseMove={onNodeMouseMove}
+          onNodeMouseLeave={onNodeMouseLeave}
+          onNodeContextMenu={onNodeContextMenu}
           onNodeDragStart={onNodeDragStart}
           onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypesParsed}