fix(ui): F8-07 cargo-route picker — torus-wrap overlay + thinner arrows
Tests · UI / test (push) Successful in 3m4s

Pick overlay (anchor ring, cursor line, hover outline) was drawn into a
single Pixi container — copies[ORIGIN_COPY_INDEX] — so any view of a wrap
copy lost it: picker from A1/A2 to the right (across the seam) showed no
hover highlight on A3's wrap copy, and the picker on A3 (x≈1.44, near the
left edge) put its anchor far left of the viewport. Fix replicates the
overlay across all nine torus copies (matching how primitives and fog
already render) and switches the cursor-line endpoint to torus-shortest
geometry via torusShortestDelta. Anchor and hover-outline coordinates
stay canonical; the per-copy replication renders them under the user's
view in whatever tile is on screen.

Also reduces cargo-route arrow strokes: COL/CAP/MAT 2->0.6 wu and EMP
1->0.4 wu (~3 / ~2 screen px at typical zoom) per the owner's request.

Tests cover the new torus path: source near the left edge with cursor on
the wrap copy across the seam (x axis), source near the top edge with
cursor across the y seam, and a guard that anchor / hover-outline coords
stay canonical regardless of the world argument.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-27 09:49:48 +02:00
parent 3153a95292
commit 3d8aa91973
4 changed files with 198 additions and 52 deletions
+95 -1
View File
@@ -100,7 +100,7 @@ describe("computePickOverlay", () => {
expect(spec.line).toBeNull();
});
test("line endpoints follow the cursor when present", () => {
test("line endpoints follow the cursor when present (no-wrap)", () => {
const spec = computePickOverlay(
makeOptions(),
{ x: 250, y: 320 },
@@ -116,6 +116,100 @@ describe("computePickOverlay", () => {
});
});
test("torus line endpoint uses torusShortestDelta — short path matches direct cursor", () => {
// Source at (100,100), cursor at (150,120). Wrap world 201×201
// — the direct delta is already the shortest, so the endpoint
// equals the cursor.
const spec = computePickOverlay(
makeOptions(),
{ x: 150, y: 120 },
null,
points,
allIds,
{ width: 201, height: 201 },
);
expect(spec.line).toEqual({ x1: 100, y1: 100, x2: 150, y2: 120 });
});
test("torus line endpoint wraps when the short path crosses the seam (x axis)", () => {
// Issue #50 repro: source A3 near the left edge (x=1.44) of a
// 201-wide world, cursor over a wrap copy of an A1-like planet
// at world x ≈ -15 (the user is panned to the left side, seeing
// the wrap copy that A1's canonical x=184 produces at x=184-201
// = -17 in the screen-space the renderer paints in the -W tile).
// torusShortestDelta(1.44, -15, 201) is -16.44 — the line endpoint
// is the source + that delta, extending left past x=0.
const spec = computePickOverlay(
makeOptions({ sourceX: 1.44, sourceY: 146 }),
{ x: -15, y: 137 },
null,
points,
allIds,
{ width: 201, height: 201 },
);
expect(spec.line).not.toBeNull();
expect(spec.line!.x1).toBe(1.44);
expect(spec.line!.y1).toBe(146);
expect(spec.line!.x2).toBeCloseTo(-15);
expect(spec.line!.y2).toBe(137);
});
test("torus line endpoint wraps the long-way cursor back through the seam (x axis)", () => {
// Source at x=184 (canonical A1), cursor at x=200 (just inside
// the [0, W) tile near the right edge). Direct delta is +16
// (no wrap), but if the cursor sits in a wrap copy of an
// A3-like planet at world x ≈ 202.44, the torus-shortest delta
// from 184 is +18.44 and the endpoint extends past the seam.
const spec = computePickOverlay(
makeOptions({ sourceX: 184, sourceY: 137 }),
{ x: 202.44, y: 146 },
null,
points,
allIds,
{ width: 201, height: 201 },
);
expect(spec.line!.x1).toBe(184);
expect(spec.line!.x2).toBeCloseTo(202.44);
});
test("torus line endpoint wraps when the short path crosses the seam (y axis)", () => {
// Symmetric coverage on the y axis — source near the bottom,
// cursor pulled across the seam via the negative-y wrap.
const spec = computePickOverlay(
makeOptions({ sourceX: 50, sourceY: 3 }),
{ x: 50, y: -10 },
null,
points,
allIds,
{ width: 100, height: 50 },
);
expect(spec.line!.y1).toBe(3);
expect(spec.line!.y2).toBeCloseTo(-10);
expect(spec.line!.x1).toBe(50);
expect(spec.line!.x2).toBe(50);
});
test("torus mode preserves canonical anchor and hover-outline coords", () => {
// The renderer paints the overlay into every torus copy with
// its own offset, so the spec stays in canonical coords; the
// torus argument must only affect the cursor line. This test
// guards the contract for the future-careless reader.
const spec = computePickOverlay(
makeOptions(),
{ x: 250, y: 320 },
2,
points,
allIds,
{ width: 400, height: 400 },
);
expect(spec.anchor).toEqual({ x: 100, y: 100, radius: 6 + ANCHOR_PADDING_WORLD });
expect(spec.hoverOutline).toEqual({
x: 200,
y: 100,
radius: 5 + HOVER_PADDING_WORLD,
});
});
test("hoverOutline is null when nothing is hovered", () => {
const spec = computePickOverlay(
makeOptions(),