From 9134812e3278b9581201b5c0b69566be976624d0 Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Thu, 9 Apr 2026 16:04:43 +0200
Subject: [PATCH] feat: add Basic edge animation with consistent downward
 direction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "basic" animation type that uses React Flow's native moving-dash
style — the entire stroke is animated dashes with no solid line underneath.
Direction is always physically downward (top node → bottom node) regardless
of which end was the source when the edge was drawn.
---
 .../src/components/canvas/edges/index.tsx     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/canvas/edges/index.tsx b/frontend/src/components/canvas/edges/index.tsx
index 630db31..00f9424 100644
--- a/frontend/src/components/canvas/edges/index.tsx
+++ b/frontend/src/components/canvas/edges/index.tsx
@@ -246,7 +246,28 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} style={style} interactionWidth={16} animated={animMode === 'basic'} />
+      <BaseEdge id={id} path={edgePath} style={animMode === 'basic' ? { ...style, stroke: 'transparent' } : style} interactionWidth={16} />
+
+      {animMode === 'basic' && (
+        <path
+          d={edgePath}
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={style.strokeWidth as number ?? 2}
+          strokeDasharray="5"
+          style={{ pointerEvents: 'none' }}
+        >
+          {/* Always animate physically downward: if source is above target the path
+              goes forward (source→target = down), otherwise reverse */}
+          <animate
+            attributeName="stroke-dashoffset"
+            from={sourceY <= targetY ? '10' : '0'}
+            to={sourceY <= targetY ? '0' : '10'}
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      )}
 
       {animMode === 'snake' && (
         <path