From 8d5305d240e8cf6f002c20b2cf8b12c182a5009b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 11 Apr 2022 13:36:39 +0200
Subject: [PATCH] refactor(edge-types): cleanup

---
 example/src/UpdatableEdge/index.tsx | 8 +++++---
 src/components/Edges/wrapEdge.tsx   | 4 ++--
 src/types/component-props.ts        | 5 +++--
 src/types/edges.ts                  | 8 ++++----
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx
index cc50c2aa..0e835bc2 100644
--- a/example/src/UpdatableEdge/index.tsx
+++ b/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);
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index cc6d05c9..f799eed8 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/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
         );
       },
diff --git a/src/types/component-props.ts b/src/types/component-props.ts
index fa915184..f38d990e 100644
--- a/src/types/component-props.ts
+++ b/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;
diff --git a/src/types/edges.ts b/src/types/edges.ts
index d480ec15..a5e32b9c 100644
--- a/src/types/edges.ts
+++ b/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;
 }