feat(edgeUpdate): add onEdgeUpdateStart handler closes #1120

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<Elements>(initialElements);
@@ -57,7 +58,14 @@ const UpdatableEdge = () => {
   const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
 
   return (
-    <ReactFlow elements={elements} onLoad={onLoad} snapToGrid={true} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect}>
+    <ReactFlow
+      elements={elements}
+      onLoad={onLoad}
+      snapToGrid={true}
+      onEdgeUpdate={onEdgeUpdate}
+      onConnect={onConnect}
+      onEdgeUpdateStart={onEdgeUpdateStart}
+    >
       <Controls />
     </ReactFlow>
   );

src/components/Edges/wrapEdge.tsx

@@ -44,6 +44,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     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<EdgeProps>) => {
         const isValidConnection = () => true;
         const isTarget = isSourceHandle;
 
+        onEdgeUpdateStart?.(event, edgeElement);
+
         onMouseDown(
           event,
           handleId,
@@ -150,7 +153,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           connectionMode
         );
       },
-      [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition]
+      [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement]
     );
 
     const onEdgeUpdaterSourceMouseDown = useCallback(

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}
     />
   );
 };

src/container/GraphView/index.tsx

@@ -92,6 +92,7 @@ const GraphView = ({
   onEdgeMouseMove,
   onEdgeMouseLeave,
   edgeUpdaterRadius,
+  onEdgeUpdateStart,
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
@@ -275,6 +276,7 @@ const GraphView = ({
         onEdgeMouseEnter={onEdgeMouseEnter}
         onEdgeMouseMove={onEdgeMouseMove}
         onEdgeMouseLeave={onEdgeMouseLeave}
+        onEdgeUpdateStart={onEdgeUpdateStart}
         edgeUpdaterRadius={edgeUpdaterRadius}
       />
     </FlowRenderer>

src/container/ReactFlow/index.tsx

@@ -115,6 +115,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, '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<ReactFlowRefType, ReactFlowProps>(
       onEdgeMouseEnter,
       onEdgeMouseMove,
       onEdgeMouseLeave,
+      onEdgeUpdateStart,
       edgeUpdaterRadius = 10,
       nodeTypesId = '1',
       edgeTypesId = '1',
@@ -270,6 +272,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onEdgeMouseEnter={onEdgeMouseEnter}
             onEdgeMouseMove={onEdgeMouseMove}
             onEdgeMouseLeave={onEdgeMouseLeave}
+            onEdgeUpdateStart={onEdgeUpdateStart}
             edgeUpdaterRadius={edgeUpdaterRadius}
           />
           <ElementUpdater elements={elements} />

src/types/index.ts

@@ -131,6 +131,7 @@ export interface WrapEdgeProps<T = any> {
   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<T = any> {