Repository navigation
fix(canvas): Pool, Register and Parameter value rows sit too close to node silhouettes #332
Description
Activity
- changed the title
[-]fix(canvas): value and detail rows can cross node silhouettes[/-][+]fix(canvas): Pool, Register and Parameter value rows sit too close to node silhouettes[/+]on Oct 7, 2026 Scope narrowed during implementation, from measurement. Applying the contract to every value and detail row widened 37 template nodes by up to 49 px and made the title clearance worse on 33 of them, almost all from the Source, Drain and Converter mode lines: their pointed and notched silhouettes grow in proportion to the node's width, so 8 px of clearance comes back only slowly.
This issue now covers the Pool, Register and Parameter rows only. The mode lines are kept in the body as measured and deferred; they need a silhouette with fixed-px point and notch depths, which is separate structural work. The v0.21.2 plan is unchanged.
Shipped in v0.21.2 by #333, squash-merged as
c5e7d8fon 2026-10-07 at 23:53 Seoul time (14:53 UTC). Its tree is identical to the approved pull request head8e05244.- Scope delivered: a Pool's value and capacity, a Parameter's value and unit, and a Register's result and
= exprpreview start where the title text starts and stay at least 8 px inside the drawn outline at both ends. A node widens only by the minimum a whole row needs, up to 260 px; otherwise the row ends in a visible "…". Node heights, positions, files, digests and simulation results are unchanged. - Pull request CI: the third run at
8e05244passed every job without a retry; the five shards ran exactly the 2,013 listed tests, each once (2,006 passed, 7 skipped by design, 0 failed, 0 retried); the production bundle 16 of 16, the PWA 19 of 19. The two earlier failed runs are recorded in fix(canvas): Pool, Register and Parameter value rows sit inside the node (v0.21.2) #333. - Main CI (run 37640510667 at
c5e7d8f): every job that ran (checks, the five shards, the production bundle and the PWA) and every test passed: the 2,013 listed tests each ran once, 0 failed, 0 retried; the production bundle 16 of 16, the PWA 19 of 19. GitHub did not create the final aggregatee2ejob, so the workflow alone ended as failure. One approved re-run of the failed jobs was refused by GitHub with an HTTP 500 (likely because no job had failed), and no further re-run was made. This is recorded as a GitHub aggregation exception; if it repeats on the nextmainrun, it gets its own CI issue. - Production: https://cozy-loop-studio.pages.dev serves
v0.21.2 · build c5e7d8f(the desktop toolbar label and the phone's ⋯ menu). An automated check through the UI only, in fresh Chrome contexts, passed 25 of 25: no dev bridge, no page error, and every Pool, Parameter and Register row in view (a synthetic graph and the three templates; light, dark, forced colours and a phone; 120 rows) at least 8 px inside the outline and starting at the title, the smallest clearance 8.06 px.
Deferred, as decided in this issue: the Source, Drain and Converter mode lines, the Gate's rows and two-line Pool titles, which need fixed-depth silhouettes and are separate work.
- Scope delivered: a Pool's value and capacity, a Parameter's value and unit, and a Register's result and
Summary
In a Pool, a Register and a Parameter, the title starts after its kind chip, but the rows under it start at the content edge. A Pool's value sits 14 px before its title text and, on the Pool's slanted side, on or across the outline; a Register's value sits 13 to 28 px before its title text and inside the keyboard-focus ring. This has been so since the first implementation; it is not a regression of #325 or v0.21.0. Planned as v0.21.2: Option C plus minimal widening, with no residual overlap, for these three kinds.
Measured
Read-only, on
main7e66da2(dev server) and productionv0.21.1 · build 7e66da2(real UI; the two agree within 0.6 px on every node), in Chrome, desktop and phone, light, dark and forced colours. Per row: the glyphs' real extent (a DOM Range), the silhouette's fill edge at that row's height (isPointInFill), the clearance between them, and the start relative to the title text. A synthetic graph with every kind and the values0,90,189,-12.5,3.14,1234567.89, a long unit and an invalid Register, plus every node of the Coffee, gacha and early MMO templates (183 nodes).≤ N)= exprdocs/localization.md§L9.2), soarmeasures the same; a row can still resolve its own text direction to RTL (an Arabic unit withdir="auto").Measured, deferred
The silhouette is drawn with
preserveAspectRatio="none", so its arrow point, notches and slant grow in proportion to the node's width. Applying the contract below to these rows widened 37 template nodes by up to 49 px and made the title clearance worse on 33 of them. They need a silhouette whose point, notch and slant depths stay a fixed number of px, which is separate structural work.Contract: Option C plus minimal widening
It applies only to these rows: a Pool's current value and capacity, a Register's result and its
= exprpreview, a Parameter's value and unit.dir="auto"direction.= exprincluded, still follows the existing 260 px maximum width and ellipsis rules; nothing widens without bound. At the maximum width, no glyph may cross the silhouette. A row that would not fit whole even at 260 px does not widen its node; it ends in its ellipsis at the current width.max(8 px, its clearance − 0.5 px); a title that had less than 8 px loses none of it.1234567.89shows as12345…). Only the display is cut; the stored value, the file and every calculation are unchanged.Implementation constraint
NodeFramemeasurement, and cached there. Any change of a row's actual text (digits, unit, sign, decimal point, expression) is read again at the next settle; a playback animation frame never is.Expected impact
r_income, by 5.66 px (126.84 to 132.5 px). The estimate before implementation was 4 Registers by up to about 14 px; rule 6 keeps the rest at their width. Node heights, positions and every drawn connection in the templates are unchanged.Tests
main's, and widths equalmain's except the pinned list; the same selected, focused, invalid and in Focus mode; an Arabic case; a measurement counter that does not move per animation frame.Out of scope
+Nbadges, arrival and conversion cues #330).