[danbarua]

Problem

• The graph view computed the same things several times each frame:
  • The camera rotation was written out three times: in the node projection, the compass axes and the framing's maths. The projection computed the cosines and sines of the yaw and pitch once per node.
  • The open node's neighbours were built by three separate loops over the edges. In the temporal colour overlay, each node's colour scanned every edge, so one frame cost nodes × edges steps.
  • The edge drawing and the label candidates each looked up both ends of every edge and each tested whether it joins the open or hovered node.
  • The palette read each record type's colour from the stylesheet once per node.
  • The starting pivot's depth came from a pass over every node, for each node projected before the pivot was set.
• On a touch screen, one finger already orbited the camera, through pointer events and touch-action: none. Two fingers did not zoom. Pressing the second finger restarted the drag from that finger, and each finger's move then set the camera's turn from its own offset, so the camera jumped between them. A touch the browser cancelled (pointercancel) left the drag running.

Change

Two commits:

Commit	What it does
Repeated computation	rotationOf and onScreen are the one rotation; the projection, the compass and the framing use them, with the cosines and sines computed once per frame or per candidate yaw. neighboursOf replaces the three loops. sceneOf finds each frame's edges in front of the camera, and whether each is hot, for both drawing and labels. The palette looks up a type's colour once per frame. The starting pivot's depth is the newest node's. edgeKey is the one spelling of an edge's identity. No behaviour change.
Touch	pressPointer, movePointer and releasePointer record the pointers pressed on the canvas. One pointer orbits, as before. Two pinch: the camera's distance scales with how much nearer or further apart they are than when the second was pressed, within the same 120 to 2200 as a scroll. Pressing or lifting a pointer restarts the gesture from where the pointers are, so the camera does not jump. A press that had two pointers opens no node. pointercancel releases a pointer as pointerup does.

What a person can see change

• On a touch screen, two fingers moving apart zoom in and moving together zoom out. Lifting one finger hands the orbit to the other without a jump.
• On a device whose main pointer cannot hover ((hover: none)), the hint reads "drag to orbit · pinch to zoom". Elsewhere it still reads "drag to orbit · scroll to zoom".
• A drag cancelled by the browser no longer keeps turning the camera when the next pointer moves.

Not done

• hitTest keeps its 18-pixel reach for a finger, as for a mouse: a 36-pixel target, above the 24-pixel minimum of WCAG 2.2's target size.

Not wanted

• A card preview on a touch screen. A finger cannot hover, so a tap opens the node, and the corner shows a card only during playback.
• A pan. The camera frames the open node by itself, which moves the view where a pan would.

Controls

• tests/graph-view.test.ts: the existing 35 tests pass unchanged after the refactor, apart from labelCandidates taking a Scene built by sceneOf. Eight new tests cover orbiting, the 4-pixel slop, pinching in and out, the zoom limits, the click after a pinch, lifting one of two fingers, and a pointer that was not pressed on the canvas.
• A new e2e test, run with hasTouch, sends a two-finger pinch through Chrome's touch input (Input.dispatchTouchEvent). It checks the hint and checks that the open node grows from at most 30 pixels across to fill a 41-pixel square. With the pinch's zoom line removed, the test fails.

Verification

• bun run check: all 28 passed; bun test 1113 pass, 0 fail.
• E2E_PORT_API=9019 E2E_PORT_DEV=8970 E2E_PORT_BUILT=8971 bun run e2e: 177 passed, 0 failed, 11 skipped. The 11 skipped tests are the development-only pages in the built project, as before; the new touch test passed in both projects.

Linked issues

None.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GVjyjkaADPAqLvtnf3xUNs