Pan with the middle button, select several nodes, and fit properly

Three things the graph view did differently from the scene view, or not
at all:

Panning moves to the middle button, which works from anywhere – a node
under the pointer included, since NodeView now lets that one button
bubble up. Shift-drag on empty canvas pans too. The left button pulls a
rubber band instead and no longer pans.

Nodes can be selected several at a time: by band, by ctrl/shift-click,
moved together, deleted together, each as one undo step. The selection
model gains `nodeIds` alongside the objects' `objectIds`.

Fit really fits. It used to pin the zoom at 1 and merely centre, so a
graph larger than the view always left nodes hanging out, and it sized
every node with one guessed height although real ones vary with their
port count. Both sums now live in editor/graph/framing.ts as pure
functions, which is what made the defect testable at all.

The band selects any node it overlaps rather than one whose position it
contains, unlike the scene view: nodes are large rectangles, and a band
drawn visibly across one has to catch it.
This commit is contained in:
root committed 2026-09-09 14:29:30 +02:00
1 parent ed1fe31c77
commit e0d43e12aa
12 files changed
+656 -61

No files matched your search

+11 -4
View File
@@ -88,8 +88,14 @@ shown on the node and editable in the inspector.
`On key down (Space)` sets `vy = −jumpSpeed` when `onGround`.
- **Editing**: right-click the canvas for the searchable palette, drag port → port to connect
(types are checked; a data input holds one link and is replaced), drag nodes, right-click a
node or port to delete/disconnect, `Delete` removes the selected node, wheel zooms, dragging
the empty canvas pans. Everything is undoable.
node or port to delete/disconnect, `Delete` removes the selection, wheel zooms. Everything is
undoable.
- **Mouse and selection work as in the scene view.** The **middle button pans** from anywhere,
a node under the pointer included (shift-drag on empty canvas does too); the left button never
pans. Dragging on empty canvas pulls a **rubber band** instead, which selects every node it
touches – nodes are large rectangles, so touching counts, unlike the scene view's test of an
object's position. Ctrl/Shift-click adds or removes single nodes, dragging any node of a
selection moves all of them, and `Delete` removes all of them – one undo step either way.
- **Dragging an edge tells you where it would land** before you let go: the port it would connect
to wears a white ring and the line snaps to it. Dropping on a node's *body* rather than a port
takes that node's first free compatible port – or, when none is free, the last compatible one,
@@ -100,7 +106,8 @@ shown on the node and editable in the inspector.
still visible while its node is chosen.
- **Header bar** (the same one the Texture and Container tabs have): the behavior picker,
**Add node…** (the palette, dropping the node in the middle of the view – the right-click nobody
finds), **Fit**, and the size of the graph as "N nodes · M links".
finds), **Fit** (which zooms out far enough to hold every node, measuring each by its own drawn
height – `editor/graph/framing.ts`), and the size of the graph as "N nodes · M links".
- **Selection-following, not selection-bound**: selecting a behavior asset, a placed behavior
or one of its nodes shows that graph; a selection about anything else (a sprite, nothing at
all) leaves the tab on the behavior you were editing, because checking a sprite's position
@@ -433,7 +440,7 @@ npm run format # Prettier over src, tests and tools
npm run check # typecheck + lint + format:check + tests, what CI would run
npm run build # writes dist/ and regenerates index.html
export GM_REMOTE=user@host # where the browser runs; see below
node tools/seed-e2e.mjs && node tools/e2e.mjs # 299 editor checks, screenshots in /tmp/gm-e2e-*.png
node tools/seed-e2e.mjs && node tools/e2e.mjs # 312 editor checks, screenshots in /tmp/gm-e2e-*.png
node tools/seed-jumprun.mjs && node tools/smoke-jumprun.mjs # 24 checks: the example game, played end to end
```