Add walking circle animations to edges (#84)

* Update Graph.tsx * Add animation to lines * Update CustomEdgePath.tsx
WardAnalytics · Feb 27, 2024 · 51d8760 · 51d8760
1 parent ed5bbec
commit 51d8760
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git a/src/components/graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css b/src/components/graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.css
@@ -4,6 +4,15 @@
   }
 }
 
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+
 .animated-dotted-line {
   stroke-dasharray: 15, 15;
   stroke-dashoffset: 30;

diff --git a/src/components/graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx b/src/components/graph/custom_elements/edges/TransfershipEdge/CustomEdgePath.tsx
@@ -3,13 +3,13 @@ import { CSSProperties } from "react";
 import { RiskLevelColors } from "../../../../../utils/risk_levels";
 
 import "./CustomEdgePath.css";
+import { max } from "lodash";
 
 interface CustomEdgePathProps {
   id?: string;
   path: string;
   style?: CSSProperties;
   strokeWidth: number;
-  hoveredStyle?: CSSProperties;
   onClick?: () => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
@@ -25,7 +25,6 @@ const CustomEdgePath = ({
   path,
   strokeWidth,
   opacity,
-  hoveredStyle,
   edgeHandleID,
   isHidden,
   isClickable,
@@ -78,7 +77,6 @@ const CustomEdgePath = ({
           )}
         />
       </marker>
-
       <path
         id={id}
         d={path}
@@ -123,14 +121,58 @@ const CustomEdgePath = ({
         <path
           d={path}
           fill="none"
-          style={hoveredStyle}
           strokeWidth={Math.min(strokeWidth * 15, 20)}
           className="react-flow__edge-interaction opacity-0 hover:animate-pulse hover:cursor-pointer hover:opacity-90"
+          style={{
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            stroke: isHidden ? "#60a5fa" : "#9ca3af",
+            transition: "stroke 0.5s, opacity 0.2s ease-out",
+          }}
           onClick={onClick}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
         />
       )}
+      <circle
+        className={clsx(
+          riskVisionColors
+            ? riskVisionColors.fillColor
+            : edgeHandleID === "a"
+              ? "fill-blue-400"
+              : "fill-orange-400",
+        )}
+        cx="0"
+        cy="0"
+        r={max([strokeWidth * 2, 2.5])}
+      >
+        <animateMotion
+          dur="4.5s"
+          repeatCount="indefinite"
+          path={path}
+          rotate="auto"
+        />
+      </circle>
+      <circle
+        className={clsx(
+          "animate-ping",
+          riskVisionColors
+            ? riskVisionColors.fillColor
+            : edgeHandleID === "a"
+              ? "fill-blue-400"
+              : "fill-orange-400",
+        )}
+        cx="0"
+        cy="0"
+        r={max([strokeWidth * 2, 1.5])}
+      >
+        <animateMotion
+          dur="4.5s"
+          repeatCount="indefinite"
+          path={path}
+          rotate="auto"
+        />
+      </circle>
     </>
   );
 };

diff --git a/src/components/graph/custom_elements/edges/TransfershipEdge/TransfershipEdge.tsx b/src/components/graph/custom_elements/edges/TransfershipEdge/TransfershipEdge.tsx
@@ -77,11 +77,6 @@ const TransfershipEdge: FC<EdgeProps> = ({
     }
   }
 
-  const hoveredStyle = {
-    stroke: isHidden ? "#60a5fa" : "#9ca3af",
-    transition: "stroke 0.5s, opacity 0.2s ease-out",
-  };
-
   const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
@@ -99,7 +94,6 @@ const TransfershipEdge: FC<EdgeProps> = ({
         path={edgePath}
         strokeWidth={width}
         opacity={opacity}
-        hoveredStyle={hoveredStyle}
         isHidden={isHidden}
         isClickable={isClickable}
         riskVisionColors={riskVisionColors}