refactor(edge-updater): add separate class name for source and target, cleanup

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}

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}
+            <EdgeAnchor
-            onMouseEnter={onEdgeUpdaterMouseEnter}
+              position={sourcePosition}
-            onMouseOut={onEdgeUpdaterMouseOut}
+              centerX={sourceX}
-          >
+              centerY={sourceY}
-            <EdgeAnchor position={sourcePosition} centerX={sourceX} centerY={sourceY} radius={edgeUpdaterRadius} />
+              radius={edgeUpdaterRadius}
-          </g>
+              onMouseDown={onEdgeUpdaterSourceMouseDown}
-        )}
+              onMouseEnter={onEdgeUpdaterMouseEnter}
-        {handleEdgeUpdate && (
+              onMouseOut={onEdgeUpdaterMouseOut}
-          <g
+              type="source"
-            onMouseDown={onEdgeUpdaterTargetMouseDown}
+            />
-            onMouseEnter={onEdgeUpdaterMouseEnter}
+            <EdgeAnchor
-            onMouseOut={onEdgeUpdaterMouseOut}
+              position={targetPosition}
-          >
+              centerX={targetX}
-            <EdgeAnchor position={targetPosition} centerX={targetX} centerY={targetY} radius={edgeUpdaterRadius} />
+              centerY={targetY}
-          </g>
+              radius={edgeUpdaterRadius}
+              onMouseDown={onEdgeUpdaterTargetMouseDown}
+              onMouseEnter={onEdgeUpdaterMouseEnter}
+              onMouseOut={onEdgeUpdaterMouseOut}
+              type="target"
+            />
+          </>
         )}
       </g>
     );