Update static/js/solar_animation.js

static/js/solar_animation.js

@@ -235,6 +235,7 @@ function drawLinearFlow(points, offset, arrowSize = 10, reverse = false) {
     // Tính toán tổng chiều dài đường dẫn
     let totalLength = 0;
     const segmentLengths = [];
+    const segmentStartLengths = [0]; // Lưu trữ điểm bắt đầu của mỗi đoạn
     for (let i = 0; i < points.length - 1; i++) {
         const segLen = Math.sqrt(
             Math.pow(points[i+1].x - points[i].x, 2) +
@@ -242,49 +243,62 @@ function drawLinearFlow(points, offset, arrowSize = 10, reverse = false) {
         );
         segmentLengths.push(segLen);
         totalLength += segLen;
+        segmentStartLengths.push(totalLength);
     }
 
     const numArrows = Math.floor(totalLength / (arrowSize * 2.5));
+    if (numArrows === 0) return; // Không vẽ mũi tên nếu đường quá ngắn
     const arrowSpacing = totalLength / numArrows;
 
     for (let i = 0; i < numArrows; i++) {
         let currentPathPos = (offset + i * arrowSpacing);
-        if (reverse) {
-            currentPathPos = totalLength - currentPathPos; // Đảo ngược hướng cho mũi tên
-        }
+        // Đảm bảo currentPathPos luôn dương và nằm trong phạm vi totalLength
         currentPathPos = currentPathPos % totalLength;
         if (currentPathPos < 0) currentPathPos += totalLength;
 
-        let segmentLengthAccumulated = 0;
+        // Nếu reverse, thì bắt đầu từ cuối đường và đi ngược lại
+        if (reverse) {
+            currentPathPos = totalLength - currentPathPos;
+            if (currentPathPos < 0) currentPathPos += totalLength; // Đảm bảo vẫn dương
+        }
+        
         let p1 = null, p2 = null;
-        let segmentIndex = -1;
+        let segmentRelativePos = 0;
+        let segLen = 0;
 
         // Tìm đoạn đường mà mũi tên đang ở trên
         for (let j = 0; j < points.length - 1; j++) {
-            const segLen = segmentLengths[j];
-            if (currentPathPos >= segmentLengthAccumulated && currentPathPos <= segmentLengthAccumulated + segLen) {
+            if (currentPathPos >= segmentStartLengths[j] && currentPathPos <= segmentStartLengths[j+1]) {
                 p1 = points[j];
                 p2 = points[j+1];
-                segmentIndex = j;
+                segLen = segmentLengths[j];
+                segmentRelativePos = currentPathPos - segmentStartLengths[j];
                 break;
             }
-            segmentLengthAccumulated += segLen;
         }
 
-        if (p1 && p2) {
+        if (p1 && p2 && segLen > 0) { // Đảm bảo tìm thấy đoạn đường và không phải đoạn có chiều dài 0
             const dx = p2.x - p1.x;
             const dy = p2.y - p1.y;
-            const segmentRelativePos = currentPathPos - segmentLengthAccumulated;
-            const ratio = segLen > 0 ? segmentRelativePos / segLen : 0;
+            const ratio = segmentRelativePos / segLen;
 
             const arrowX = p1.x + dx * ratio;
             const arrowY = p1.y + dy * ratio;
 
             let angle = Math.atan2(dy, dx);
-            if (reverse) {
-                angle += Math.PI; // Xoay mũi tên 180 độ nếu ngược chiều
-            }
-
+            // Angle is naturally set by dx, dy. If 'reverse' means arrow points opposite to path creation,
+            // then we should just use Math.atan2(p1.y - p2.y, p1.x - p2.x) if we need specific visual reverse.
+            // But with currentPathPos handled for reverse, the angle should be naturally correct from p1 to p2.
+            // If the arrow visually needs to point back, add Math.PI.
+            // My current reverse logic handles the *position* of the arrow, not its intrinsic direction.
+            // So if you *still* want the arrow symbol to point backward when reverse=true, you add Math.PI.
+            // For now, let's keep it consistent: the arrow's head points in the direction of path (p1 to p2).
+            // The 'reverse' parameter just makes it *move* against that direction on the path.
+            
+            // If the desired visual effect for 'reverse' is for the arrow HEAD to point backwards, uncomment this:
+            // if (reverse) {
+            //     angle += Math.PI; 
+            // }
 
             ctx.save();
             ctx.translate(arrowX, arrowY);