Repository navigation
Dragging a side of the spacing box sizes and labels the canvas band from the dragged value - #38
Merged
flowtricks merged 1 commit intoOct 13, 2026
Conversation
Dragging a side of the spacing box runs the panel's number through every
value on the way, but the band drawn over the page did not follow. Its
label came from the hover, which reads the file, so it kept the old value
for the whole drag ("2rem" under a number already at 3). Its size came
from the page as last measured: the value had to be written, laid out and
reported back, a few frames behind and skipping whatever the page had no
time to lay out.
The drag now tells the canvas its value on the frame the labels change
(`labels` and `live` on SpacingHover, for the sides Shift and Alt bring
in). The canvas turns it into pixels itself, with the units the page now
reports alongside its measurements (em is the element's font, rem the
root's, vw and vh the frame), and draws the band that size at once. A
percentage, a variable or a calc() keeps the measurement: only the page
can size those. An inset (`top` on a positioned element) is labelled but
measured.
The hover is silent while a drag reports, so a modifier pressed mid-drag
cannot put the file's value back on the band. On release the label stays
and the size is measured again, which by then is the same number.
`units` is optional in the rects message, so a page served by an older
preload still parses; its bands are measured, as before.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The problem
Dragging a side of the spacing box runs the panel's number through every value on the way, but the band drawn over the page does not follow:
The change
The drag tells the canvas its value on the frame the panel's labels change:
labelsand a newliveonSpacingHover, for the sides Shift and Alt bring in.The canvas turns that value into pixels itself and draws the band that size at once. The page now reports, alongside its measurements, what one
em,rem,vwandvhis worth for the element (units). A percentage, a variable or acalc()keeps the measurement, since only the page can size those. An inset (topon a positioned element) is labelled but measured.The hover is silent while a drag reports, so a modifier pressed mid-drag cannot put the file's value back on the band. On release the label stays and the size is measured again, which by then is the same number.
Contract
unitsis a new optional field on each spacing entry of theavb:rectsmessage, parsed inpreviewMessages.tsas a dictionary of nonnegative finite numbers. A page served by an older preload still parses; its bands are measured, as before.Tests
test/renderer/preview/spacingLive.test.js: the conversion to pixels, including the values that must not be guessed, and the band drawn from it.test/renderer/style/spacingDragReport.test.js: the realEmbedEditorin jsdom. A drag reports its value on each frame, with Shift bringing in the four sides, and no report between press and release carries the file's value.test/renderer/preview/previewMessages.test.js:unitsin the known-good message, and three malformed shapes that are refused.npm run check:changedpasses.🤖 Generated with Claude Code