From 6ef3f52083075f185124bfdf4f42cd0b3856e8cc Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 30 Nov 2020 11:03:16 +0100
Subject: [PATCH] style(edge-updater): add hover effect

---
 src/components/Edges/wrapEdge.tsx | 24 ++++++++++++++++++------
 src/style.css                     |  6 ++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 431032dc..afbea66a 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -1,4 +1,4 @@
-import React, { memo, ComponentType, useCallback } from 'react';
+import React, { memo, ComponentType, useCallback, useState } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
@@ -41,13 +41,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
     const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
+    const [updating, setUpdating] = useState<boolean>(false);
 
     const inactive = !elementsSelectable && !onClick;
     const edgeClasses = cc([
       'react-flow__edge',
       `react-flow__edge-${type}`,
       className,
-      { selected, animated, inactive },
+      { selected, animated, inactive, updating },
     ]);
 
     const onEdgeClick = useCallback(
@@ -104,6 +105,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       [id, target, targetHandleId, handleEdgeUpdater]
     );
 
+    const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
+    const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
+
     if (isHidden) {
       return null;
     }
@@ -111,12 +115,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     return (
       <g className={edgeClasses} onClick={onEdgeClick}>
         {handleEdgeUpdate && (
-          <g onMouseDown={onEdgeUpdaterSourceMouseDown}>
+          <g
+            onMouseDown={onEdgeUpdaterSourceMouseDown}
+            onMouseEnter={onEdgeUpdaterMouseEnter}
+            onMouseOut={onEdgeUpdaterMouseOut}
+          >
             <circle
               className="react-flow__edgeupdater"
               cx={sourceX}
               cy={sourceY}
-              r="12"
+              r={10}
               stroke="transparent"
               fill="transparent"
             />
@@ -146,12 +154,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           markerEndId={markerEndId}
         />
         {handleEdgeUpdate && (
-          <g onMouseDown={onEdgeUpdaterTargetMouseDown}>
+          <g
+            onMouseDown={onEdgeUpdaterTargetMouseDown}
+            onMouseEnter={onEdgeUpdaterMouseEnter}
+            onMouseOut={onEdgeUpdaterMouseOut}
+          >
             <circle
               className="react-flow__edgeupdater"
               cx={targetX}
               cy={targetY}
-              r="12"
+              r={10}
               stroke="transparent"
               fill="transparent"
             />
diff --git a/src/style.css b/src/style.css
index 9f6191e9..5f3a31b3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -60,6 +60,12 @@
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
+
+  &.updating {
+    .react-flow__edge-path {
+      stroke: #777;
+    }
+  }
 }
 
 @keyframes dashdraw {