Fix findUsages/undo/node-lookup bugs, split Viewport and Editor, share command and inspector helpers

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

src/editor/graph/GraphEditor.ts

@@ -5,12 +5,18 @@ import type { BehaviorAsset } from '../../core/model/Asset';
 import { findAsset } from '../../core/model/Project';
 import type { Trace } from '../../runtime/systems/BehaviorSystem';
 import { TRACE_FADE } from '../../runtime/systems/BehaviorSystem';
-import { Menu, type Size, Theme, textStyle, Widget } from '../../ui';
+import { clamp, drawGrid, Menu, type Size, Theme, textStyle, Widget, zoomFactor } from '../../ui';
 import type { EditorState } from '../state';
 import { NodePalette } from './NodePalette';
-import { NodeView, portColor } from './NodeView';
+import { NODE_WIDTH, NodeView, portColor, TITLE_HEIGHT } from './NodeView';
 
 const GRID_STEP = 24;
+/** Below this on-screen spacing the grid is noise rather than orientation, so it is dropped. */
+const MIN_GRID_STEP = 8;
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 2.5;
+/** Stand-in node height for centring the view – real nodes vary with their port count. */
+const NODE_HEIGHT_ESTIMATE = 80;
 
 interface PortAnchor {
   nodeId: string;
@@ -63,7 +69,7 @@ export class GraphEditor extends Widget {
     this.on('wheel', (e: FederatedWheelEvent) => {
       const local = this.toLocal(e.global);
       const before = this.screenToGraph(local.x, local.y);
-      this.zoom = Math.max(0.25, Math.min(2.5, this.zoom * Math.exp(-e.deltaY * 0.0015)));
+      this.zoom = clamp(this.zoom * zoomFactor(e.deltaY), MIN_ZOOM, MAX_ZOOM);
       const after = this.screenToGraph(local.x, local.y);
       this.pan.x += (after.x - before.x) * this.zoom;
       this.pan.y += (after.y - before.y) * this.zoom;
@@ -148,13 +154,13 @@ export class GraphEditor extends Widget {
     this.needsFit = false;
     const asset = this.asset();
     if (!asset || asset.graph.nodes.length === 0) {
-      this.pan = { x: this.w / 2 - 80, y: this.h / 3 };
+      this.pan = { x: this.w / 2 - NODE_WIDTH / 2, y: this.h / 3 };
       this.zoom = 1;
     } else {
       const xs = asset.graph.nodes.map((n) => n.x);
       const ys = asset.graph.nodes.map((n) => n.y);
-      const cx = (Math.min(...xs) + Math.max(...xs) + 176) / 2;
-      const cy = (Math.min(...ys) + Math.max(...ys) + 80) / 2;
+      const cx = (Math.min(...xs) + Math.max(...xs) + NODE_WIDTH) / 2;
+      const cy = (Math.min(...ys) + Math.max(...ys) + NODE_HEIGHT_ESTIMATE) / 2;
       this.zoom = 1;
       this.pan = { x: this.w / 2 - cx, y: this.h / 2 - cy };
     }
@@ -306,7 +312,7 @@ export class GraphEditor extends Widget {
     const c = Theme.colors;
     this.bg.clear().rect(0, 0, this.w, this.h).fill(c.graphBackground);
     this.clip.clear().rect(0, 0, this.w, this.h).fill(0xffffff);
-    this.drawGrid();
+    this.syncGrid();
     const asset = this.asset();
     this.canvas.visible = asset !== null;
     if (!asset) {
@@ -359,15 +365,13 @@ export class GraphEditor extends Widget {
     this.edges.stroke({ width: hot ? 4 : type === 'exec' ? 2.5 : 2, color: hot ? Theme.colors.hot : valid ? portColor(type) : Theme.colors.danger, alpha: type === 'exec' || hot ? 1 : 0.85 });
   }
 
-  private drawGrid(): void {
+  private syncGrid(): void {
     this.grid.clear();
     const step = GRID_STEP * this.zoom;
-    if (step < 8) return;
-    const startX = ((this.pan.x % step) + step) % step;
-    const startY = ((this.pan.y % step) + step) % step;
-    for (let x = startX; x < this.w; x += step) this.grid.moveTo(x, 0).lineTo(x, this.h);
-    for (let y = startY; y < this.h; y += step) this.grid.moveTo(0, y).lineTo(this.w, y);
-    this.grid.stroke({ width: 1, color: 0xffffff, alpha: 0.04 });
+    if (step < MIN_GRID_STEP) return;
+    // `pan` is where the graph origin sits on screen – but the graph has no origin worth
+    // marking, so no axis lines.
+    drawGrid(this.grid, { originX: this.pan.x, originY: this.pan.y, step, w: this.w, h: this.h, alpha: 0.04 });
   }
 
   // --- test hooks -----------------------------------------------------------------------------
@@ -385,7 +389,7 @@ export class GraphEditor extends Widget {
   nodeGlobal(nodeId: string): { x: number; y: number } | null {
     const view = this.views.get(nodeId);
     if (!view) return null;
-    const g = view.toGlobal({ x: view.w / 2, y: 12 });
+    const g = view.toGlobal({ x: view.w / 2, y: TITLE_HEIGHT / 2 });
     return { x: g.x, y: g.y };
   }
 }