[HugoXK]

Fixes #1513

Owner: Dev3
Reviewer: Reviewer
Written-by: Dev-3
Base: 2fb70d6aeb844ec97b026393c52daf2d57115925 (main, #1515)
Tip: b4aa03e7f8ed0200a2cb880309a435b4da8ff262
Tree: 7e88f17e55a01196e9bac2440cfa625da614d7b2

The room drawer's Flow tab drew the graph on a fixed 960px canvas while the drawer is 400px wide (.wf-drawer{width:400px}, body padding 18px a side), so only about three of seven nodes were visible, the rest sat behind an inner horizontal scrollbar inside the panel's own vertical scroll, and the wire layer — which paints outside its zero-width plane — was clipped into orphan vertical segments and half horizontal edges.

Flow now fits that 960px design space to the canvas it can actually use. It measures its own canvas (a ResizeObserver on the canvas element, with the drawer's content width as the first value) and scales the wires and nodes through one .wf-fit layer, reporting the scaled height to the plane. The panel keeps a single vertical scroll, and the graph is drawn scaled to its width: every node in the default template and up to five in one rank sits inside it. The fit measures the 960px wire span, not the node boxes' own half-width, so six Bots in one rank (nodes at x = ±470, boxes reaching ±554 in the design space) overhang each side by 28.1px, and a Bot dragged or dropped at the panel edge (x = ±480) by 31.8px — in both cases the inner horizontal scrollbar can come back.

The drawer stays the editing surface: same graph, same drag, wire and reconnect handlers, same inspector. Only the coordinate arithmetic moves with the scale — a pointer delta in screen pixels is divided by it, and a palette Bot dropped on the plane is mapped back through the panel centre and the scale, so both land where the pointer is instead of 2.4× off.

What changed

• plugins/workflow/client.js — DRAWER_W/DRAWER_PAD/FIT_WIDTH beside WIRE_SPAN; fitScale(); Flow measures the canvas, wraps its children in .wf-fit with transform: scale(...), and uses the scaled height; move and add gestures divide by the scale; the drawer width and the fit layer come from the same constants. Scope: Flow, the plane/.wf-fit rules and DrawerBody's one prop — GraphCanvas (Settings) and every other block are untouched.
• plugins/workflow/test/client.test.js — one new test, and the existing drag/drop test now computes its expected coordinates from the rendered scale.
• docs/subsystems/workflow.md — the client.js row and rule 12 say the drawer fits its graph to the panel and that pointer deltas follow that scale, and that the drawer stays the editing surface.
• changelog.d/1513.fixed.md — one fragment.

No core/, no src/host/, no spawn or permission code.

Red, then green

On this pull request's base 2fb70d6a, plugins/workflow:

• Baseline on 2fb70d6a: 94 tests / 94 pass / 0 fail.
• 2fb70d6a plus the new test only: 95 / 94 / 1 — the only red is the room Flow tab fits the graph to the panel, and a drag follows that scale, at the panel draws the graph at its own width, not on a 960px canvas (the plane carries no width, so it still draws 960px).
• At this tip: 95 / 95 / 0.

The existing drag/drop test asserted the unscaled 248/30 coordinates; those numbers are now derived from the scale the drawer renders, which is the point of the change, not a behaviour regression.

Verification at this tip

TZ=UTC ARCH_DOCS_BASE=2fb70d6a npm run verify at this tip — exit 0: core 1853/1853, social 527, tree 125, timeline 125, workflow 95, .github 548, interop 37, live-e2e 24, every suite # fail 0; lint 0 errors; arch-docs: OK (4 changed file(s)) against 2fb70d6a.

The branch was rebased onto 2fb70d6a because main moved past the base twice (#1528, #1515); the diff is 4 files, +106/−15.

Not run: no browser or screenshot check (the renderer in the suite has no layout, so the test pins the width, the scale, the scaled height and the pointer arithmetic, not pixels), and no smoke or test-bench run (nothing under core/ or the host moved).

Checkpoint

{
 "pr": 1533,
 "claim": "Dev3",
 "issue": 1513,
 "summary": "The room drawer's Flow tab drew the graph on a fixed 960px canvas inside its 400px panel, so most nodes sat behind an inner horizontal scroll and the wire layer was clipped into orphan and half edges. Flow now measures its canvas and scales the 960px design space to that width through one .wf-fit layer, leaving one vertical scroll. The fit uses the wire span, not the node boxes, so six in one rank or a node at the panel edge overhangs by up to 31.8px. Pointer deltas and dropped Bots are converted through the scale; the drawer stays the editing surface.",
 "files": [
  "plugins/workflow/client.js",
  "plugins/workflow/test/client.test.js",
  "docs/subsystems/workflow.md",
  "changelog.d/1513.fixed.md"
 ],
 "checks": {
  "ran": "TZ=UTC ARCH_DOCS_BASE=2fb70d6a npm run verify; the plugins/workflow suite at 2fb70d6a plus the new test only",
  "result": "green",
  "at": "b4aa03e7f8ed0200a2cb880309a435b4da8ff262"
 },
 "next": "none — ready for review"
}

[HugoXK]

@Birfy tests-ok is green at b4aa03e7f8ed and this PR has no review yet. Could you review this tip?

[Birfy]

Superseded by #1547 — closing to keep one-issue-one-PR.

Same #1513 fix, but #1547 is replayed on the current main (62023599) and covers the parts this tip left on the table:

• the fit is applied to the wire paths and parallel frames as well as the node centres,
• drag/drop divides the pointer delta by the fit scale so edits still store world coordinates,
• .wf-canvas-narrow drops the inner horizontal scroll and the drawer's .wf-plabel/.wf-term wrap.

Evidence on #1547: plugins/workflow 109/109, client.test.js 34/34, and swapping plugins/workflow/client.js back to the base blob turns 5 cases red (the 4 new ones plus the existing drag case that now asserts the fit scale).

Thanks for checking tests-ok here, @HugoXK — that green run was the reason we could pick a winner quickly.