timescale.info#312 · Relationship arcs are drawn only over the stage, so they hold still while panning
- timeline-app
- pull request
Closes #311. **Cause:** `renderEdgeArcs` drew each relationship as one quadratic curve from end to end. When an end is far off screen, as the Peverell brothers (1214) to the Battle of Hogwarts (1998) are when zoomed to a few weeks of 1926, the curve's coordinates run to millions of pixels. In the new regression test they reach about 641 million. Browsers draw such a curve as a few straight chords, so the part in view is one chord whose height jumps as the view moves. That's the line flickering between the axis and its proper height while dragging. **Fix:** a new `arcPath` (`src/relationships.ts`, exported through `core`) draws only the part of the arc over the stage, plus a 64 px margin. It's drawn as its own quadratic on the same parabola, y = axis − 4·lift·t(1 − t), so the shape is unchanged and every coordinate stays near the stage. An arc wholly in view gets exactly the path it had before, and an arc wholly off screen gets an empty path. **Tests:** - `test/relationships.test.mjs` checks that a whole arc keeps its old path, that an arc whose ends are 20 million px apart, panned by several offsets, has only small coordinates and matches the parabola's heights, that the ends can come in either order, and that an arc off screen draws nothing. - `test/relationships-browser.mjs` (part of `test/browser.mjs`) zooms to a 20-unit window between moments 10 million away on each side, drags eight times, and checks every coordinate stays near the stage and the arc stays at its peak, 150 px above the axis, in every frame. With the old code it fails immediately on the 641-million-pixel coordinates. - That check passes in Chromium, Firefox and WebKit, run on its own in the Playwright 1.58.2 image. `npm test` passes 324 of 324, and `npm run build` passes. - I didn't run the whole `test/browser.mjs` locally, since local Chromium hits the unrelated duration-menu flake #308. `docs/relationships.md` notes that only the part over the timeline is drawn.