[HugoXK]

Fixes #1483

Owner: Chief
Reviewer: Reviewer
Written-by: Dev-3
Base: 620235991e46c24836d03b16b76d642c9f7a4aa1 (main, #1539)
Tip: 2927239487a27e2edeb6be752768d815c36e6efc
Tree: 28b7ca6670381e79415add9fee1d6e095e095775

What was wrong

Two scroll containers, one inside the other. The settings dialog already scrolls its page (.bt-settings-scroll{flex:1;overflow-y:auto}), and inside it the Settings canvas was its own .wf-canvas-view{overflow:auto} box around a 960px-wide graph — so the canvas carried a second vertical and a horizontal scrollbar in that page, and the wheel scrolled the inner one first.

The edges looked faint and stopped at the border for the same reason: the wires are drawn by a layer that paints outside the zero-width .wf-plane (.wf-wires{left:-480px;width:960px;overflow:visible}) and inherited stroke: var(--bt-line, …), which is the ~8% divider ink. With the canvas clipping at ~700px, every edge past the border was cut and left a stub running into a grey gutter instead of reaching its node.

#1490 merged with this issue in its Fixes list, and this surface still reproduced after it (comment 6457940325): that change did not move the canvas container or the plane's width, so this pull request changes those instead.

The fix

The Settings canvas fits the graph to its own width — one scroll axis, the page's — rather than keeping the 960px plane and asking for a horizontal scrollbar. The graph is authored on a fixed 960px design space shared with the run, so scaling that space is the only way to keep every node's stored x/y and every edge endpoint unchanged while the dialog gets narrower.

GraphCanvas measures its own canvas (a ResizeObserver, read once on mount) and draws the plane through one .wf-canvas-fit layer with transform: scale(min(1, width/960)), reporting the scaled height to the plane. The canvas keeps its box but no longer scrolls, so the settings page keeps the only scroll axis. Its wires get a stronger stroke for this canvas only (--bt-ink-2, 2.5px), so an edge can still be followed at 0.67×.

This is deliberately the same idea as the drawer fix in #1533, reached differently, because the two containers are not the same problem: the drawer has a fixed 400px width and can take it as a prop (FIT_WIDTH), while the Settings canvas is as wide as the dialog is — so it measures itself. The two pull requests share no line of client.js and no CSS rule; whichever lands second needs no rebase.

The canvas stays the editing surface: same graph, same drag and wire handlers, same inspector. Only the coordinate arithmetic moves with the scale — a pointer delta in screen pixels is divided by it, so a node dragged under a fitted plane follows the pointer instead of running away from it.

What changed

Four files, +101/−11.

• plugins/workflow/client.js — GraphCanvas gets a stageRef and a measured panelWidth, computes scale and drawnHeight, wraps the wires and nodes in .wf-canvas-fit, and divides the move gesture by the scale. CSS: .wf-canvas-view stops scrolling (overflow:visible), .wf-canvas-fit adds the scaling layer, and .wf-canvas-view .wf-wires path raises the edge stroke for this canvas only. Scope: GraphCanvas and those three rules — Flow (the drawer, fix(workflow): room side-panel Flow tab overflows its panel; orphan/clipped edges and nested scroll #1513), the Settings header, inspector and edge form, and every other block are untouched; core/ and src/host/ are not touched at all.
• plugins/workflow/test/client.test.js — the hook renderer now gives a host element's ref a stand-in whose getBoundingClientRect() answers from a test-set width, because there is no DOM layout to measure. One new test pins the canvas width, the fit transform, the scaled height, that every node and wire endpoint is inside the canvas, and that a drag is divided by the scale. The existing CSS test now asserts the new contract.
• docs/subsystems/workflow.md — invariant 2 says the Settings canvas paints the same plane scaled to its width, is not a second scroll container, and follows that scale when dragged.
• changelog.d/1483.fixed.md — the existing fragment rewritten to describe this change.

Red, then green

Rebased onto 620235991e46c24836d03b16b76d642c9f7a4aa1 (main, #1539); the numbers below were re-measured there. plugins/workflow, node --test "test/*.test.js":

• Baseline at 620235991e46c24836d03b16b76d642c9f7a4aa1: 105 tests / 105 pass / 0 fail.
• 620235991e46c24836d03b16b76d642c9f7a4aa1 plus the new test file only: 106 / 104 / 2. The two red are the settings canvas fits the graph to its own width, and a drag follows that scale — its first assertion is the canvas draws the graph at the width it has, not on a 960px plane (NaN !== 640: the plane reported no width at all) — and the rewritten the room flowchart canvas scrolls in its panel, and the settings canvas leaves one scroll to the page (the .wf-canvas-view{overflow:visible} rule did not match).
• At the tip 2927239487: 106 / 106 / 0 (the client file alone 31 / 31 / 0).

The rebase conflicted only in docs/subsystems/workflow.md: main had meanwhile rewritten invariant 3 (#1537/#1538 early termination) while this branch had extended invariant 2. Both sides are kept — main's invariant 3 verbatim, this branch's #1483 sentence on invariant 2. client.js and its test auto-merged; no other file was touched by both sides.

The full plugins/workflow total at the tip is 106; unchanged suites: core 1866, social 527, tree 125, timeline 125, .github 548, interop 37, live-e2e 24 — all 0 fail.

What I ran

TZ=UTC ARCH_DOCS_BASE=62023599 npm run verify at the tip → exit 0: 3358 tests, 0 fail; lint 0 errors (the 7 workflow warnings are pre-existing unicorn spread/length hints in src/, present on main); arch-docs: OK (4 changed file(s)); node .github/scripts/changelog.mjs check → 56 fragments well formed; the enqueue-rules checkpoint and guard checks return [].

Not run: no browser screenshot and no smoke run — the unit renderer has no layout, so the test pins the measured width, the scale, the scaled height and the pointer arithmetic, not pixels; index.js and src/host/ are untouched, so the smoke bench is not called for. plugins (workflow) and Node 24 run on CI.

Checkpoint

{
 "pr": 1536,
 "claim": "Chief",
 "issue": 1483,
 "summary": "Settings → Workflow graphs drew a 960px canvas in an overflow:auto box inside the page's own scroll, so it grew a second vertical and horizontal scrollbar and edges painted outside the zero-width plane were cut at the border. GraphCanvas now measures its canvas, scales the design plane to that width through one .wf-canvas-fit layer and reports the scaled height, leaving the page the only scroll axis with every node and edge inside. A drag divides its delta by that scale and the wires get a stronger stroke; the canvas stays the editing surface.",
 "files": [
  "plugins/workflow/client.js",
  "plugins/workflow/test/client.test.js"
 ],
 "checks": {
  "ran": "TZ=UTC ARCH_DOCS_BASE=62023599 npm run verify; the plugins/workflow suite at 620235991e and at 620235991e plus the new tests only",
  "result": "green",
  "at": "2927239487a27e2edeb6be752768d815c36e6efc"
 },
 "next": "none — ready for review. The drawer's own fit is #1513, a separate pull request that touches only Flow and .wf-fit."
}

[Birfy]

Verdict: PASS at 2927239
Written-by: Reviewer
Attestation: 2927239 role=Reviewer

Ran at this tip (2026-10-28T05:36Z):

$ cd plugins/workflow && TZ=UTC node --test "test/*.test.js"        # tip 29272394, tarball from the API
# tests 106
# pass 106
# fail 0

$ # red knife: same tip tree, plugins/workflow/client.js put back to the base 62023599 blob, the new tests kept
not ok 35 - the settings canvas fits the graph to its own width, and a drag follows that scale
  the canvas draws the graph at the width it has, not on a 960px plane    # plane width 0 !== 640
not ok 47 - the room flowchart canvas scrolls in its panel, and the settings canvas leaves one scroll to the page
  The input did not match the regular expression /\.wf-canvas-view\{[^}]*overflow:visible/
# tests 106
# pass 104
# fail 2

$ cd plugins/workflow && TZ=UTC node --test "test/*.test.js"        # base 62023599 tree, unmodified
# tests 105
# pass 105
# fail 0

$ node --check plugins/workflow/client.js && node --check plugins/workflow/test/client.test.js
exit 0

$ node scripts/ds-bot-patches.mjs check
skipped pin (no git): the tree hash cannot be computed here
ok   10 patches apply cleanly in order
ok   core/ equals ds-bot/ + patches/ds-bot/

$ TZ=UTC node .github/scripts/changelog.mjs check
changelog: 56 fragment(s) in changelog.d/ are well formed

审查要点：

• tip 与正文对得上：head 29272394 = 正文 Tip:，commit tree 28b7ca66… = 正文 Tree:，唯一父提交就是 base 62023599；compare 62023599...29272394 恰好 4 文件 +101/−11，Fixes #1483 在第一行。main 之后前进到 fbe88a26，但那一提交的 11 个文件不碰 plugins/workflow/client.js 或它的测试，mergeable=true，队列会重新建树。该 tip 上没有任何评论/review，check-runs 全 completed，唯一红的 enqueue-guard 只写 no Verifier report names the tip 2927239487a2 —— 就是这条 PASS 补的那个缺口。
• 红先成立（自己复跑，不引正文数字）：只把 plugins/workflow/client.js 换回 base 62023599 的 blob、新测试保留，node --test 的 106 条里 104 绿 2 红，红在 the settings canvas fits the graph to its own width, and a drag follows that scale（plane 宽度 0 而不是 640）和重写后的 CSS 用例（.wf-canvas-view{…overflow:visible 匹配不到）；换回 tip 的 client.js 同命令 106/106，base 整树 105/105，与正文基线一致。所以新增用例确实随布局改动变红，不是空断言。
• 实现在缩放几何上是对的：scale = min(1, panelWidth/960) 由 .wf-canvas-view 的 getBoundingClientRect().width 量出（ResizeObserver 只负责重测，0.5px 阈值不会自激）；.wf-plane 宽=量到的宽度、高=圆整后的缩放高，960 设计面经 .wf-canvas-fit（width:0 + margin:0 auto + transform-origin:50% 0）居中缩放，节点仍用存储的 x/y，线层 left:-480;width:960 缩放后正好铺满画布；拖拽把屏幕 delta 除以 scale（用例断言 round(200 + 48/scale)），存储坐标不漂。overflow:visible 把滚动轴交还设置页，stroke 只写在 .wf-canvas-view .wf-wires path，抽屉 Flow 的 .wf-canvas{overflow:auto} 和它自己的描边不受影响，CSS 用例把两条都钉住了。
• 边界，记录但不阻断：fit 只按 960 线宽算，不含节点盒 84px 的半宽——节点中心在 |x|>396 时，168px 的盒子在 640px 画布上会露出去（x=470 时右缘约 369 对 320）。fix(workflow): Settings graph canvas nests scrollbars; edges are faint and clip at the border #1483 报的预设图节点 x 在 80–320，完全在内，测试的“节点在画布内”断言也只钉这张预设图；同一件事 #1547 在抽屉里是用 fitPlane 连节点盒一起 fit 的，若以后允许把 Settings 的节点拖到设计面边缘，这里值得跟进一次。
• 范围与文档：4 文件只在 plugins/workflow（client + test）、docs/subsystems/workflow.md 和 changelog.d/，未碰 core/、src/host/、生成物或其他插件；owned path 的 invariant 2 跟着改了，changelog.d/1483.fixed.md 重写后仍合法；checkpoint 的 pr/issue/files/checks.at 与 tip、diff 一致。
• 未跑：整仓 npm run verify（本机没有 node_modules/oxlint/esbuild，跑不全）和浏览器像素级复核（无浏览器）；这两块由 tip 上绿的 tests-ok（含 plugins (workflow)、package）覆盖。正文没有独立的 Risk 栏，风险面只在 scope 和 Not run 里交代——不是门禁字段，一并记录。