diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx index e8b856f7..1b0920e5 100644 --- a/example/src/UpdatableEdge/index.tsx +++ b/example/src/UpdatableEdge/index.tsx @@ -49,6 +49,7 @@ const initialElements: Elements = [ ]; const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); +const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge); const UpdatableEdge = () => { const [elements, setElements] = useState(initialElements); @@ -57,7 +58,14 @@ const UpdatableEdge = () => { const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els)); return ( - + ); diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index d5011184..db519135 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -44,6 +44,7 @@ export default (EdgeComponent: ComponentType) => { onMouseMove, onMouseLeave, edgeUpdaterRadius, + onEdgeUpdateStart, }: WrapEdgeProps): JSX.Element | null => { const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements); const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId); @@ -138,6 +139,8 @@ export default (EdgeComponent: ComponentType) => { const isValidConnection = () => true; const isTarget = isSourceHandle; + onEdgeUpdateStart?.(event, edgeElement); + onMouseDown( event, handleId, @@ -150,7 +153,7 @@ export default (EdgeComponent: ComponentType) => { connectionMode ); }, - [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition] + [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement] ); const onEdgeUpdaterSourceMouseDown = useCallback( diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 6c291786..e732dce8 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -34,6 +34,7 @@ interface EdgeRendererProps { onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; } @@ -175,6 +176,7 @@ const Edge = ({ onMouseLeave={props.onEdgeMouseLeave} edgeUpdaterRadius={props.edgeUpdaterRadius} onEdgeDoubleClick={props.onEdgeDoubleClick} + onEdgeUpdateStart={props.onEdgeUpdateStart} /> ); }; diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 23894ee8..646e5048 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -92,6 +92,7 @@ const GraphView = ({ onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, + onEdgeUpdateStart, }: GraphViewProps) => { const isInitialized = useRef(false); const setOnConnect = useStoreActions((actions) => actions.setOnConnect); @@ -275,6 +276,7 @@ const GraphView = ({ onEdgeMouseEnter={onEdgeMouseEnter} onEdgeMouseMove={onEdgeMouseMove} onEdgeMouseLeave={onEdgeMouseLeave} + onEdgeUpdateStart={onEdgeUpdateStart} edgeUpdaterRadius={edgeUpdaterRadius} /> diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 9323b985..236c624f 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -115,6 +115,7 @@ export interface ReactFlowProps extends Omit, 'on onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; nodeTypesId?: string; edgeTypesId?: string; @@ -192,6 +193,7 @@ const ReactFlow = forwardRef( onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, + onEdgeUpdateStart, edgeUpdaterRadius = 10, nodeTypesId = '1', edgeTypesId = '1', @@ -270,6 +272,7 @@ const ReactFlow = forwardRef( onEdgeMouseEnter={onEdgeMouseEnter} onEdgeMouseMove={onEdgeMouseMove} onEdgeMouseLeave={onEdgeMouseLeave} + onEdgeUpdateStart={onEdgeUpdateStart} edgeUpdaterRadius={edgeUpdaterRadius} /> diff --git a/src/types/index.ts b/src/types/index.ts index d2993b40..d7526c71 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -131,6 +131,7 @@ export interface WrapEdgeProps { onMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void; } export interface EdgeProps {