Show a wheel step or Fit as a short zoom transition (#309)

The wheel and the Fit button used to jump to the new view. Now the
view takes a short way there, 200 ms by default, everywhere the editor
zooms. The zoom steps stay the same, only the change is shown.

- viewTween: tweenView is the way between two views as a pure
  function. The scale moves by equal ratios, and the world point that
  sits at the same place on screen in both views stays there. After a
  wheel step that is the point under the pointer.
- ViewTween drives it on the ticker. A surface hands it reading,
  writing and drawing its own view and wraps its wheel and Fit code in
  change(). A step during a transition starts from where that one was
  heading, so quick steps add up to exactly as many steps.
- Anything else that moves the view ends the transition. A pan jumps
  to the target first, and saving a view saves the target.
- Wired into FreeViewport (Scene, Container, animation preview),
  SheetCanvas (Texture, Curve, Pixel art, Vector art), GraphCanvas,
  panAndZoom (Tile board, plugin node board) and the timeline.
- Menu > General settings... sets the time in ms, 0 jumps at once. It
  is kept in this browser like the panel sizes, not in the project,
  and it is not an undo step.
- A document that opens still comes up framed at once. The animation
  preview frames a new subject itself instead of calling fit().
- The pixel art readout names the step the view is heading for.

Measured in the scene view at 200 ms on melektaus-atx, where every
frame of the transition is a full redraw:

- 500 sprites: redraw 6.7 ms, 16 frames, mean 18 ms
- 1000 sprites: redraw 13.0 ms, 9 frames, mean 27 ms
- 2000 sprites: redraw 32.2 ms, 5 frames, mean 58 ms

Tests:
- The harness sets 0 ms on every load, so the existing modules read
  the step and not the way.
- e2e 46i samples one wheel step at 1000 ms a frame later: zoom 1.033
  between 1 and 2, the point under the pointer kept at (134, -40). It
  lands on the view a 0 ms jump reaches.
- e2e 46 and 49 expect the new menu entry.
- Gate (atx): 234 files, 3563 tests, CHECK EXIT 0 (+15)
- e2e 46,49 (atx): ALL PASSED, 43 checks (+3, sum 1735)
- Three counter-checks fail view-tween.test.ts as expected. e2e 46i
  fails when the scene view does not carry its centre along.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/graph/graphView.ts

@@ -1,6 +1,7 @@
 import type { Container, FederatedPointerEvent, FederatedWheelEvent, Graphics } from 'pixi.js';
 import { clamp, drawGrid, zoomFactor } from '../../ui';
 import type { Point } from '../framing';
+import { ViewTween } from '../viewTween';
 
 /**
  * What every surface that shows nodes shares with the graph editor: how far it zooms, how the grid
@@ -48,18 +49,34 @@ export function zoomedAbout(
 export type WheelZoom =
   { min: number; max: number } | ((view: GraphView, at: Point, deltaY: number) => GraphView | null);
 
+/** The transition (#309) of a board whose view is a `GraphView`. */
+export function graphViewTween(
+  get: () => GraphView,
+  put: (view: GraphView) => void,
+  draw: () => void,
+): ViewTween {
+  return new ViewTween({
+    read: () => ({ scale: get().zoom, x: get().pan.x, y: get().pan.y }),
+    write: (map) => put({ pan: { x: map.x, y: map.y }, zoom: map.scale }),
+    draw,
+  });
+}
+
 /**
  * Drag with any button to pan, wheel to zoom about the pointer – all a board does with the pointer
- * when its content takes none. `set` receives each new view and which gesture made it.
+ * when its content takes none. `set` receives each new view and which gesture made it; `tween`
+ * shows the wheel's views as a transition (#309).
  */
 export function panAndZoom(
   surface: Container,
   get: () => GraphView,
   set: (view: GraphView, gesture: 'pan' | 'zoom') => void,
   zoom: WheelZoom = ZOOM_LIMITS,
+  tween: ViewTween,
 ): void {
   let panning: { start: Point; pan: Point } | null = null;
   surface.on('pointerdown', (e: FederatedPointerEvent) => {
+    tween.finish();
     panning = { start: { x: e.global.x, y: e.global.y }, pan: { ...get().pan } };
   });
   surface.on('globalpointermove', (e: FederatedPointerEvent) => {
@@ -72,11 +89,13 @@ export function panAndZoom(
   surface.on('wheel', (e: FederatedWheelEvent) => {
     e.preventDefault();
     const at = surface.toLocal(e.global);
-    const view =
-      typeof zoom === 'function'
-        ? zoom(get(), at, e.deltaY)
-        : zoomedAbout(get(), at, zoomFactor(e.deltaY), zoom);
-    if (view) set(view, 'zoom');
+    tween.change(() => {
+      const view =
+        typeof zoom === 'function'
+          ? zoom(get(), at, e.deltaY)
+          : zoomedAbout(get(), at, zoomFactor(e.deltaY), zoom);
+      if (view) set(view, 'zoom');
+    });
   });
 }