diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
index 27fd4137..f5233afc 100644
--- a/example/src/Overview/index.tsx
+++ b/example/src/Overview/index.tsx
@@ -41,6 +41,9 @@ 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 onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
const initialElements: Elements = [
{
@@ -179,6 +182,9 @@ const OverviewFlow = () => {
snapToGrid={true}
snapGrid={snapGrid}
onEdgeContextMenu={onEdgeContextMenu}
+ onEdgeMouseEnter={onEdgeMouseEnter}
+ onEdgeMouseMove={onEdgeMouseMove}
+ onEdgeMouseLeave={onEdgeMouseLeave}
>
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 3f2fc7c8..173f1821 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -39,6 +39,9 @@ export default (EdgeComponent: ComponentType) => {
handleEdgeUpdate,
onConnectEdge,
onContextMenu,
+ onMouseEnter,
+ onMouseMove,
+ onMouseLeave,
edgeUpdaterRadius,
}: WrapEdgeProps): JSX.Element | null => {
const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -99,6 +102,27 @@ export default (EdgeComponent: ComponentType) => {
[edgeElement, onContextMenu]
);
+ const onEdgeMouseEnter = useCallback(
+ (event: React.MouseEvent): void => {
+ onMouseEnter?.(event, edgeElement);
+ },
+ [edgeElement, onContextMenu]
+ );
+
+ const onEdgeMouseMove = useCallback(
+ (event: React.MouseEvent): void => {
+ onMouseMove?.(event, edgeElement);
+ },
+ [edgeElement, onContextMenu]
+ );
+
+ const onEdgeMouseLeave = useCallback(
+ (event: React.MouseEvent): void => {
+ onMouseLeave?.(event, edgeElement);
+ },
+ [edgeElement, onContextMenu]
+ );
+
const handleEdgeUpdater = useCallback(
(event: React.MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? target : source;
@@ -143,7 +167,14 @@ export default (EdgeComponent: ComponentType) => {
}
return (
-
+
{handleEdgeUpdate && (
void;
+ onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
+ onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
+ onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
+ onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
edgeUpdaterRadius?: number;
}
@@ -166,6 +169,9 @@ const Edge = ({
onConnectEdge={onConnectEdge}
handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
onContextMenu={props.onEdgeContextMenu}
+ onMouseEnter={props.onEdgeMouseEnter}
+ onMouseMove={props.onEdgeMouseMove}
+ onMouseLeave={props.onEdgeMouseLeave}
edgeUpdaterRadius={props.edgeUpdaterRadius}
/>
);
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 2355a1be..bd31e6a8 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -86,6 +86,9 @@ const GraphView = ({
onPaneContextMenu,
onEdgeUpdate,
onEdgeContextMenu,
+ onEdgeMouseEnter,
+ onEdgeMouseMove,
+ onEdgeMouseLeave,
edgeUpdaterRadius,
}: GraphViewProps) => {
const isInitialized = useRef(false);
@@ -265,6 +268,9 @@ const GraphView = ({
onEdgeUpdate={onEdgeUpdate}
onlyRenderVisibleElements={onlyRenderVisibleElements}
onEdgeContextMenu={onEdgeContextMenu}
+ onEdgeMouseEnter={onEdgeMouseEnter}
+ onEdgeMouseMove={onEdgeMouseMove}
+ onEdgeMouseLeave={onEdgeMouseLeave}
edgeUpdaterRadius={edgeUpdaterRadius}
/>
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index f1ed85df..fd2790c0 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -109,8 +109,11 @@ export interface ReactFlowProps extends Omit, 'on
panOnScrollMode?: PanOnScrollMode;
zoomOnDoubleClick?: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
- onEdgeContextMenu?: (event: MouseEvent, nodes: Edge) => void;
- edgeUpdaterRadius?: number
+ onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
+ onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
+ onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
+ onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
+ edgeUpdaterRadius?: number;
}
const ReactFlow = ({
@@ -176,6 +179,9 @@ const ReactFlow = ({
children,
onEdgeUpdate,
onEdgeContextMenu,
+ onEdgeMouseEnter,
+ onEdgeMouseMove,
+ onEdgeMouseLeave,
edgeUpdaterRadius = 10,
...rest
}: ReactFlowProps) => {
@@ -245,6 +251,9 @@ const ReactFlow = ({
onSelectionContextMenu={onSelectionContextMenu}
onEdgeUpdate={onEdgeUpdate}
onEdgeContextMenu={onEdgeContextMenu}
+ onEdgeMouseEnter={onEdgeMouseEnter}
+ onEdgeMouseMove={onEdgeMouseMove}
+ onEdgeMouseLeave={onEdgeMouseLeave}
edgeUpdaterRadius={edgeUpdaterRadius}
/>
diff --git a/src/types/index.ts b/src/types/index.ts
index 616abe80..7786503f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -125,7 +125,10 @@ export interface WrapEdgeProps {
isHidden?: boolean;
handleEdgeUpdate: boolean;
onConnectEdge: OnConnectFunc;
- onContextMenu: (event: React.MouseEvent, edge: Edge) => void;
+ onContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
+ onMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
+ onMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
+ onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
edgeUpdaterRadius?: number;
}