test/cartesian/Line.animation.spec.tsx (1)

237-243: ⚠️ Potential issue | 🟡 Minor

Stale test description after expectation update

Line 237's it(...) description still says "100, 0" but the expectation was updated to "100px 100px" (line 243). Similarly, lines 379 and 387–388 contain comments referencing "0px hidden" that now contradict the updated expectations at lines 382 and 392.

📝 Proposed description and comment updates

-  it('should set the stroke-dasharray to 100, 0 when the animation is completed', async () => {
+  it('should set the stroke-dasharray to 100, 100 when the animation is completed', async () => {

-      // after travelling 100% of the path, the stroke-dasharray should be 100px visible and 0px hidden
+      // after travelling 100% of the path, the stroke-dasharray should be 100px visible and 100px gap (totalLength) to avoid float precision artifacts

-       * After the animation is completed, the stroke-dasharray should remain 100px visible and 0px hidden.
+       * After the animation is completed, the stroke-dasharray should remain 100px visible with a totalLength gap.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/cartesian/Line.animation.spec.tsx` around lines 237 - 243, Update the
stale test description and comments to match the changed expectation values:
change the it(...) description that currently references "100, 0" to reflect
"100px 100px" for the stroke-dasharray check in the test that uses
renderTestCase(), animationManager.setAnimationProgress(1) and getLine(), and
update the nearby comments that mention "0px hidden" to reflect the new expected
values used in the assertions (the lines around the other tests using getLine()
and animationManager). Ensure all human-readable strings and inline comments
match the actual assertions (e.g., "100px 100px" instead of "100, 0" and replace
"0px hidden" with the corresponding updated expectation).

src/cartesian/Line.tsx (2)

407-453: ⚠️ Potential issue | 🟠 Major

Odd-count strokeDasharray patterns animate incorrectly — 0-padding diverges from the SVG spec's duplication rule.

If an odd number of values are given, the entire value will be repeated in order to set an even number of values. Padding with 0 instead produces a visually different cycle:

User prop	SVG spec effective cycle	repeat with 0-padding
"4"	4 4 (dash 4 → gap 4)	4 0 (dash 4 → gap 0 = solid line)
"7 3 2"	7 3 2 7 3 2	7 3 2 0 (merges 2-dash and next 7-dash)

If a single value is set, both the dash length and gap length take that value and repeat the pattern. If two values are set, the first sets the dash and the second sets the gap. So strokeDasharray="4" must animate with gaps equal to the dash length, not zero.

There is a second, compounding issue: getStrokeDasharray computes lineLength from the original lines rather than the normalized (doubled) pattern. For lines=[4], lineLength=4 while the true SVG cycle is 8. This causes count to be double what's needed, so the animated pattern overlaps on itself.

The complete fix is to normalize lines in getStrokeDasharray before computing lineLength, after which repeat can drop its special-case:

🐛 Proposed fix

 function repeat(lines: number[], count: number): number[] {
-  const linesUnit = lines.length % 2 !== 0 ? [...lines, 0] : lines;
   const result: number[] = [];
   for (let i = 0; i < count; ++i) {
-    result.push(...linesUnit);
+    result.push(...lines);
   }
   return result;
 }

 const getStrokeDasharray = (length: number, totalLength: number, lines: number[]): string => {
-  const lineLength = lines.reduce((pre, next) => pre + next, 0);
+  // Per SVG spec, an odd-count list is duplicated to yield an even-count cycle
+  // e.g. "4" → [4, 4] (dash=4, gap=4), not [4, 0]
+  const normalizedLines = lines.length % 2 !== 0 ? [...lines, ...lines] : lines;
+  const lineLength = normalizedLines.reduce((pre, next) => pre + next, 0);

   if (!lineLength) {
     return generateSimpleStrokeDasharray(totalLength, length);
   }

   const count = Math.floor(length / lineLength);
   const remainLength = length % lineLength;
   let remainLines: number[] = [];
-  for (let i = 0, sum = 0; i < lines.length; sum += lines[i] ?? 0, ++i) {
-    const lineValue = lines[i];
+  for (let i = 0, sum = 0; i < normalizedLines.length; sum += normalizedLines[i] ?? 0, ++i) {
+    const lineValue = normalizedLines[i];
     if (lineValue != null && sum + lineValue > remainLength) {
-      remainLines = [...lines.slice(0, i), remainLength - sum];
+      remainLines = [...normalizedLines.slice(0, i), remainLength - sum];
       break;
     }
   }

   const emptyLines = remainLines.length % 2 === 0 ? [0, totalLength] : [totalLength];
-  return [...repeat(lines, count), ...remainLines, ...emptyLines].map(line => `${line}px`).join(', ');
+  return [...repeat(normalizedLines, count), ...remainLines, ...emptyLines].map(line => `${line}px`).join(', ');
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/cartesian/Line.tsx` around lines 407 - 453, Normalize the dash pattern to
an even-length sequence before any length math: in getStrokeDasharray, create a
normalizedLines = lines.length % 2 !== 0 ? [...lines, ...lines] : lines, use
normalizedLines (not the original lines) to compute lineLength and to drive the
loop that builds remainLines, and pass normalizedLines into repeat; then
simplify repeat(lines, count) to always repeat the provided array without
injecting a 0 for odd lengths (i.e., remove the zero-padding special-case),
keeping the rest of getStrokeDasharray logic (remainLines and emptyLines)
unchanged.

---

407-453: ⚠️ Potential issue | 🟠 Major

Odd-count strokeDasharray patterns animate incorrectly due to 0-padding instead of SVG-spec duplication.

The SVG spec states that if stroke-dasharray contains an odd number of values, the list is duplicated to make it even. The current code pads with 0 instead, violating the spec:

Input	SVG spec effective cycle	Current code (linesUnit)
"4"	4 4 (dash=4, gap=4)	4 0 (dash=4, gap=0 → solid line)
"7 3 2"	7 3 2 7 3 2	7 3 2 0 (merges 2 and 7 dashes)

Critically, lineLength in getStrokeDasharray is computed from the original lines, not the normalized linesUnit. For lines=[4], lineLength=4 while the correct SVG cycle is 8, causing count to double and the pattern to render as a continuous solid block during animation before snapping to the dashed pattern on completion.

Fix by normalizing lines before computing lineLength:

🐛 Proposed fix

 function repeat(lines: number[], count: number): number[] {
-  const linesUnit = lines.length % 2 !== 0 ? [...lines, 0] : lines;
   const result: number[] = [];
   for (let i = 0; i < count; ++i) {
-    result.push(...linesUnit);
+    result.push(...lines);
   }
   return result;
 }

 const getStrokeDasharray = (length: number, totalLength: number, lines: number[]): string => {
-  const lineLength = lines.reduce((pre, next) => pre + next, 0);
+  // Per SVG spec, odd-count dasharray is duplicated to make an even-count cycle
+  const normalizedLines = lines.length % 2 !== 0 ? [...lines, ...lines] : lines;
+  const lineLength = normalizedLines.reduce((pre, next) => pre + next, 0);

   if (!lineLength) {
     return generateSimpleStrokeDasharray(totalLength, length);
   }

   const count = Math.floor(length / lineLength);
   const remainLength = length % lineLength;
   let remainLines: number[] = [];
-  for (let i = 0, sum = 0; i < lines.length; sum += lines[i] ?? 0, ++i) {
-    const lineValue = lines[i];
+  for (let i = 0, sum = 0; i < normalizedLines.length; sum += normalizedLines[i] ?? 0, ++i) {
+    const lineValue = normalizedLines[i];
     if (lineValue != null && sum + lineValue > remainLength) {
-      remainLines = [...lines.slice(0, i), remainLength - sum];
+      remainLines = [...normalizedLines.slice(0, i), remainLength - sum];
       break;
     }
   }

   const emptyLines = remainLines.length % 2 === 0 ? [0, totalLength] : [totalLength];

-  return [...repeat(lines, count), ...remainLines, ...emptyLines].map(line => `${line}px`).join(', ');
+  return [...repeat(normalizedLines, count), ...remainLines, ...emptyLines].map(line => `${line}px`).join(', ');
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/cartesian/Line.tsx` around lines 407 - 453, The odd-length dash handling
is wrong: normalize the input pattern by duplicating the array when its length
is odd (replace linesUnit = [...lines, 0] with linesUnit = lines.length % 2 !==
0 ? [...lines, ...lines] : lines) and then use that normalized array everywhere
in getStrokeDasharray (compute lineLength from the normalized array, use
normalized array for count, remainLines loop and for repeat), ensuring
repeat(linesUnit, count) and subsequent logic reference the duplicated pattern
instead of the original lines so the SVG-spec cycle length is correct.