refactor(edge-types): cleanup

example/src/UpdatableEdge/index.tsx

@@ -11,8 +11,8 @@ import ReactFlow, {
   Node,
   NodeChange,
   EdgeChange,
+  HandleType,
 } from 'react-flow-renderer';
-import {HandleType} from "../../../dist";
 
 const initialNodes: Node[] = [
   {
@@ -55,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, handleType: HandleType) => console.log(`start update ${handleType} handle`, edge);
-const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) => console.log(`end update ${handleType} handle`, 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,7 +141,7 @@ 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 handleType = isSourceHandle ? 'target' : 'source';
         const isValidConnection = () => true;
         const isTarget = isSourceHandle;
 
@@ -170,7 +170,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           isValidConnection,
           connectionMode,
           handleType,
-          _onEdgeUpdate
+          _onEdgeUpdate,
           store.getState
         );
       },

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