fix(canvas): ellipsize overflowing frame labels - #102
Open
Luna Qiu (lunaqiu) wants to merge 1 commit into
Open
Conversation
The frame label input had no `text-overflow`, so a name wider than the frame's capped screen width was hard-clipped mid-character with no sign that more text followed. Zooming out made it worse, since the label cap tracks `nodeWidth * zoom` while the text stays 12px. Add `text-ellipsis` to the label input. It only paints while the input is unfocused, so the idle label truncates with an ellipsis and editing still scrolls normally. Refs microsoft#101
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
1 participant
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.
Refs #101 (leaving the issue open for now).
Problem
The frame label is an
<input>capped to the frame's on-screen width (overlayMaxWidth = nodeWidth * zoom) with notext-overflow, so a name wider than that cap is hard-clipped mid-character. Nothing indicates the name continues. Zooming out makes it worse: the cap shrinks with the zoom while the label stays at a fixed 12px.Change
Add
text-ellipsisto the frame label input. Chromium only paintstext-overflowon an unfocused input, so the idle label truncates with…while editing keeps the normal scrolling behavior.Also corrects
docs/architecture/canvas-zoom-rendering.md§4, which claimed "the input title retains access to the complete name". It never did — thetitleis the statict('node.editFrameName')hint.Verification
Checked against a running dev build with a frame label forced past its cap:
clientWidthscrollWidthtext-overflowreadOnly)ellipsisStep 4: Lighting Reference …ellipsis(not painted)pnpm typecheck,pnpm format, andpnpm lint:fixare all clean.