Editor's Path Properties section has no 'self-intersection' detection — user creating a path that crosses itself (e.g., a figure-8) gets no warning, embroidery on self-intersecting paths is undefined #336

New issue

Closed

opened 2026-10-04 03:53:55 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:53:55 +00:00

Owner

Finding

grep -rn 'selfIntersect\|crossingPath' src/components/editor/ returns 0. The editor doesn't detect self-intersections.

A user drawing a path:

Creates a figure-8 (a path that crosses itself)
Doesn't realize this is problematic for embroidery
Exports and gets unexpected stitch order

The fix is self-intersection detection: a path that crosses itself is highlighted, and the user is warned.

Where

canvasRenderer: src/components/editor/canvasRenderer.ts
Geometry: src/components/editor/geometry.ts (where the algorithm lives)
No detection: grep -rn 'selfIntersect' src/components/editor/ returns 0

Suggested fix shape

Algorithm: detect pairs of segments that intersect:

function findSelfIntersections(nodes: PathNode[]): Array<{ segIndex1: number; segIndex2: number; point: Point }> {
  const intersections = [];
  for (let i = 0; i < nodes.length - 1; i++) {
    for (let j = i + 2; j < nodes.length - 1; j++) {
      if (i === 0 && j === nodes.length - 2) continue;  // skip closing segment
      const intersection = segmentIntersection(nodes[i], nodes[i + 1], nodes[j], nodes[j + 1]);
      if (intersection) {
        intersections.push({ segIndex1: i, segIndex2: j, point: intersection });
      }
    }
  }
  return intersections;
}

Visual highlight: intersections are drawn as small red circles.
Warning: in the Path Properties section, "X self-intersections detected" with a "View" button.
Auto-fix: a "Resolve" button that splits the path at the intersections (creates two separate paths).

Severity

Low. The user can spot intersections visually. Power users with complex shapes notice.

Discovered by

Gap analysis (2026-10-02) of editor validation.

#260 (open) — Hoop size mismatch. Same validation family.
#335 (open) — Sharp corner detection. Same family.
The auto-digitize output may have self-intersections; this catches them.
Figma/Illustrator have "Find intersections." The editor's gap is the parallel.

## Finding `grep -rn 'selfIntersect\|crossingPath' src/components/editor/` returns 0. The editor doesn't detect self-intersections. A user drawing a path: - Creates a figure-8 (a path that crosses itself) - Doesn't realize this is problematic for embroidery - Exports and gets unexpected stitch order The fix is self-intersection detection: a path that crosses itself is highlighted, and the user is warned. ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` - Geometry: `src/components/editor/geometry.ts` (where the algorithm lives) - No detection: `grep -rn 'selfIntersect' src/components/editor/` returns 0 ## Suggested fix shape 1. **Algorithm**: detect pairs of segments that intersect: ```ts function findSelfIntersections(nodes: PathNode[]): Array<{ segIndex1: number; segIndex2: number; point: Point }> { const intersections = []; for (let i = 0; i < nodes.length - 1; i++) { for (let j = i + 2; j < nodes.length - 1; j++) { if (i === 0 && j === nodes.length - 2) continue; // skip closing segment const intersection = segmentIntersection(nodes[i], nodes[i + 1], nodes[j], nodes[j + 1]); if (intersection) { intersections.push({ segIndex1: i, segIndex2: j, point: intersection }); } } } return intersections; } ``` 2. **Visual highlight**: intersections are drawn as small red circles. 3. **Warning**: in the Path Properties section, "X self-intersections detected" with a "View" button. 4. **Auto-fix**: a "Resolve" button that splits the path at the intersections (creates two separate paths). ## Severity Low. The user can spot intersections visually. Power users with complex shapes notice. ## Discovered by Gap analysis (2026-10-02) of editor validation. ## Related - #260 (open) — Hoop size mismatch. Same validation family. - #335 (open) — Sharp corner detection. Same family. - The auto-digitize output may have self-intersections; this catches them. - Figma/Illustrator have "Find intersections." The editor's gap is the parallel.