From 809de82eb71694a3b121e0f74805e69673678ae5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 Sep 2022 16:00:22 +0200
Subject: [PATCH] refactor(edge-updater): add separate class name for source
 and target, cleanup

---
 .../core/src/components/Edges/EdgeAnchor.tsx  | 20 +++++--
 .../core/src/components/Edges/wrapEdge.tsx    | 52 ++++++++++---------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/packages/core/src/components/Edges/EdgeAnchor.tsx b/packages/core/src/components/Edges/EdgeAnchor.tsx
index bad20972..a88ed364 100644
--- a/packages/core/src/components/Edges/EdgeAnchor.tsx
+++ b/packages/core/src/components/Edges/EdgeAnchor.tsx
@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
 import cc from 'classcat';
 
 import { Position } from '../../types';
@@ -15,22 +15,34 @@ const shiftY = (y: number, shift: number, position: Position): number => {
   return y;
 };
 
-export interface EdgeAnchorProps extends HTMLAttributes<HTMLDivElement> {
+export interface EdgeAnchorProps extends SVGAttributes<SVGGElement> {
   position: Position;
   centerX: number;
   centerY: number;
   radius?: number;
+  onMouseDown: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseEnter: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseOut: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
+  type: string;
 }
 
+const EdgeUpdaterClassName = 'react-flow__edgeupdater';
+
 export const EdgeAnchor: FC<EdgeAnchorProps> = ({
-  className,
   position,
   centerX,
   centerY,
   radius = 10,
+  onMouseDown,
+  onMouseEnter,
+  onMouseOut,
+  type,
 }: EdgeAnchorProps) => (
   <circle
-    className={cc(['react-flow__edgeupdater', className])}
+    onMouseDown={onMouseDown}
+    onMouseEnter={onMouseEnter}
+    onMouseOut={onMouseOut}
+    className={cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`])}
     cx={shiftX(centerX, radius, position)}
     cy={shiftY(centerY, radius, position)}
     r={radius}
diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx
index d19fbd42..4ce63466 100644
--- a/packages/core/src/components/Edges/wrapEdge.tsx
+++ b/packages/core/src/components/Edges/wrapEdge.tsx
@@ -129,12 +129,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     const inactive = !elementsSelectable && !onClick;
     const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
-    const edgeClasses = cc([
-      'react-flow__edge',
-      `react-flow__edge-${type}`,
-      className,
-      { selected, animated, inactive, updating: updateHover },
-    ]);
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (elementSelectionKeys.includes(event.key) && elementsSelectable) {
@@ -152,7 +146,12 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     return (
       <g
-        className={edgeClasses}
+        className={cc([
+          'react-flow__edge',
+          `react-flow__edge-${type}`,
+          className,
+          { selected, animated, inactive, updating: updateHover },
+        ])}
         onClick={onEdgeClick}
         onDoubleClick={onEdgeDoubleClickHandler}
         onContextMenu={onEdgeContextMenu}
@@ -196,24 +195,29 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             interactionWidth={interactionWidth}
           />
         )}
-
         {handleEdgeUpdate && (
-          <g
-            onMouseDown={onEdgeUpdaterSourceMouseDown}
-            onMouseEnter={onEdgeUpdaterMouseEnter}
-            onMouseOut={onEdgeUpdaterMouseOut}
-          >
-            <EdgeAnchor position={sourcePosition} centerX={sourceX} centerY={sourceY} radius={edgeUpdaterRadius} />
-          </g>
-        )}
-        {handleEdgeUpdate && (
-          <g
-            onMouseDown={onEdgeUpdaterTargetMouseDown}
-            onMouseEnter={onEdgeUpdaterMouseEnter}
-            onMouseOut={onEdgeUpdaterMouseOut}
-          >
-            <EdgeAnchor position={targetPosition} centerX={targetX} centerY={targetY} radius={edgeUpdaterRadius} />
-          </g>
+          <>
+            <EdgeAnchor
+              position={sourcePosition}
+              centerX={sourceX}
+              centerY={sourceY}
+              radius={edgeUpdaterRadius}
+              onMouseDown={onEdgeUpdaterSourceMouseDown}
+              onMouseEnter={onEdgeUpdaterMouseEnter}
+              onMouseOut={onEdgeUpdaterMouseOut}
+              type="source"
+            />
+            <EdgeAnchor
+              position={targetPosition}
+              centerX={targetX}
+              centerY={targetY}
+              radius={edgeUpdaterRadius}
+              onMouseDown={onEdgeUpdaterTargetMouseDown}
+              onMouseEnter={onEdgeUpdaterMouseEnter}
+              onMouseOut={onEdgeUpdaterMouseOut}
+              type="target"
+            />
+          </>
         )}
       </g>
     );