feat(props): add onEdgeUpdateEnd handler closes #1157

example/src/UpdatableEdge/index.tsx

@@ -51,6 +51,7 @@ const initialElements: Elements = [
 
 const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge);
+const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge) => console.log('end update', edge);
 
 const UpdatableEdge = () => {
   const [elements, setElements] = useState<Elements>(initialElements);
@@ -68,6 +69,7 @@ const UpdatableEdge = () => {
       onConnect={onConnect}
       onEdgeUpdateStart={onEdgeUpdateStart}
       onElementsRemove={onElementsRemove}
+      onEdgeUpdateEnd={onEdgeUpdateEnd}
     >
       <Controls />
     </ReactFlow>

src/components/Edges/wrapEdge.tsx

@@ -45,6 +45,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     onMouseLeave,
     edgeUpdaterRadius,
     onEdgeUpdateStart,
+    onEdgeUpdateEnd,
   }: WrapEdgeProps): JSX.Element | null => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -141,6 +142,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
         onEdgeUpdateStart?.(event, edgeElement);
 
+        const _onEdgeUpdate = onEdgeUpdateEnd
+          ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement)
+          : undefined;
+
         onMouseDown(
           event,
           handleId,
@@ -151,7 +156,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           isTarget,
           isValidConnection,
           connectionMode,
-          isSourceHandle ? 'target' : 'source'
+          isSourceHandle ? 'target' : 'source',
+          _onEdgeUpdate
         );
       },
       [id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement]

src/components/Handle/handler.ts

@@ -97,7 +97,8 @@ export function onMouseDown(
   isTarget: boolean,
   isValidConnection: ValidConnectionFunc,
   connectionMode: ConnectionMode,
-  elementEdgeUpdaterType?: HandleType | null,
+  elementEdgeUpdaterType?: HandleType,
+  onEdgeUpdateEnd?: (evt: MouseEvent) => void,
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
   onConnectEnd?: OnConnectEndFunc
@@ -178,6 +179,10 @@ export function onMouseDown(
 
     onConnectEnd?.(event);
 
+    if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
+      onEdgeUpdateEnd(event);
+    }
+
     resetRecentHandle(recentHoveredHandle);
     setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 

src/components/Handle/index.tsx

@@ -51,7 +51,8 @@ const Handle: FC<HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>> = ({
         isTarget,
         isValidConnection,
         connectionMode,
-        null,
+        undefined,
+        undefined,
         onConnectStart,
         onConnectStop,
         onConnectEnd

src/container/EdgeRenderer/index.tsx

@@ -35,6 +35,7 @@ interface EdgeRendererProps {
   onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
   onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
   onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
 }
 
@@ -177,6 +178,7 @@ const Edge = ({
       edgeUpdaterRadius={props.edgeUpdaterRadius}
       onEdgeDoubleClick={props.onEdgeDoubleClick}
       onEdgeUpdateStart={props.onEdgeUpdateStart}
+      onEdgeUpdateEnd={props.onEdgeUpdateEnd}
     />
   );
 };

src/container/GraphView/index.tsx

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

src/container/ReactFlow/index.tsx

@@ -1,4 +1,11 @@
-import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent, forwardRef } from 'react';
+import React, {
+  useMemo,
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+  WheelEvent,
+  forwardRef,
+} from 'react';
 import cc from 'classcat';
 
 import GraphView from '../GraphView';
@@ -51,16 +58,16 @@ const defaultEdgeTypes = {
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
-  onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
+  onElementClick?: (event: ReactMouseEvent, 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;
-  onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStart?: (event: MouseEvent, node: Node) => void;
-  onNodeDrag?: (event: MouseEvent, node: Node) => void;
-  onNodeDragStop?: (event: MouseEvent, node: Node) => void;
+  onNodeDoubleClick?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeMouseEnter?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeMouseMove?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeMouseLeave?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeContextMenu?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeDragStart?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeDrag?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeDragStop?: (event: ReactMouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
@@ -70,13 +77,13 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
-  onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
+  onSelectionDragStart?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionDragStop?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onPaneScroll?: (event?: WheelEvent) => void;
-  onPaneClick?: (event: MouseEvent) => void;
-  onPaneContextMenu?: (event: MouseEvent) => void;
+  onPaneClick?: (event: ReactMouseEvent) => void;
+  onPaneContextMenu?: (event: ReactMouseEvent) => void;
   nodeTypes?: NodeTypesType;
   edgeTypes?: EdgeTypesType;
   connectionMode?: ConnectionMode;
@@ -110,12 +117,13 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
-  onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeContextMenu?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeMouseEnter?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
   nodeTypesId?: string;
   edgeTypesId?: string;
@@ -194,6 +202,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onEdgeMouseMove,
       onEdgeMouseLeave,
       onEdgeUpdateStart,
+      onEdgeUpdateEnd,
       edgeUpdaterRadius = 10,
       nodeTypesId = '1',
       edgeTypesId = '1',
@@ -273,6 +282,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onEdgeMouseMove={onEdgeMouseMove}
             onEdgeMouseLeave={onEdgeMouseLeave}
             onEdgeUpdateStart={onEdgeUpdateStart}
+            onEdgeUpdateEnd={onEdgeUpdateEnd}
             edgeUpdaterRadius={edgeUpdaterRadius}
           />
           <ElementUpdater elements={elements} />

src/types/index.ts

@@ -132,6 +132,7 @@ export interface WrapEdgeProps<T = any> {
   onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
   onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
 }
 
 export interface EdgeProps<T = any> {