Merge pull request #2066 from wbkd/feature/edgeUpdateWithMoreInfo-1961

Feature/edge update with more info 1961

example/src/UpdatableEdge/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
   Node,
   NodeChange,
   EdgeChange,
+  HandleType,
 } from 'react-flow-renderer';
 
 const initialNodes: Node[] = [
@@ -54,8 +55,10 @@ const initialNodes: Node[] = [
 const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge);
-const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge) => console.log('end update', edge);
+const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
+  console.log(`start update ${handleType} handle`, edge);
+const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
+  console.log(`end update ${handleType} handle`, edge);
 
 const UpdatableEdge = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);

src/components/Edges/wrapEdge.tsx

@@ -141,13 +141,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
         const nodeId = isSourceHandle ? target : source;
         const handleId = isSourceHandle ? targetHandleId : sourceHandleId;
+        const handleType = isSourceHandle ? 'target' : 'source';
         const isValidConnection = () => true;
         const isTarget = isSourceHandle;
 
-        onEdgeUpdateStart?.(event, edgeElement);
+        onEdgeUpdateStart?.(event, edgeElement, handleType);
 
         const _onEdgeUpdate = onEdgeUpdateEnd
-          ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement)
+          ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement, handleType)
           : undefined;
 
         const onConnectEdge = (connection: Connection) => {
@@ -168,7 +169,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           isTarget,
           isValidConnection,
           connectionMode,
-          isSourceHandle ? 'target' : 'source',
+          handleType,
           _onEdgeUpdate,
           store.getState
         );

src/container/EdgeRenderer/index.tsx

@@ -13,6 +13,7 @@ import {
   ConnectionLineComponent,
   ConnectionMode,
   OnEdgeUpdateFunc,
+  HandleType,
   ReactFlowState,
 } from '../../types';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
@@ -31,8 +32,8 @@ 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;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   edgeUpdaterRadius?: number;
   noPanClassName?: string;
 }

src/types/component-props.ts

@@ -31,6 +31,7 @@ import {
   OnMoveStart,
   OnMoveEnd,
 } from '.';
+import { HandleType } from './handles';
 
 export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   nodes?: Node[];
@@ -106,8 +107,8 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   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;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   edgeUpdaterRadius?: number;
   noDragClassName?: string;
   noWheelClassName?: string;

src/types/edges.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
-import { HandleElement } from './handles';
+import { HandleElement, HandleType } from './handles';
 import { Node } from './nodes';
 import { Position } from './utils';
 
@@ -117,8 +117,8 @@ export interface WrapEdgeProps<T = any> {
   onMouseMove?: EdgeMouseHandler;
   onMouseLeave?: EdgeMouseHandler;
   edgeUpdaterRadius?: number;
-  onEdgeUpdateStart?: EdgeMouseHandler;
-  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   markerStart?: EdgeMarkerType;
   markerEnd?: EdgeMarkerType;
 }