Skip to content

fix(canvas): ellipsize overflowing frame labels #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Luna Qiu (lunaqiu) wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(canvas): ellipsize overflowing frame labels #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/web/src/components/Nodes/frame/FrameNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,7 +510,9 @@ export const FrameNode = memo(
tooltipOffset={0}
size={1}
className={clsx(
'nodrag col-start-1 row-start-1 w-full min-w-0! bg-transparent px-1.5 text-xs font-medium outline-none',
// `text-ellipsis` only paints on an unfocused input, so the
// idle label shows "…" while editing still scrolls normally.
'nodrag col-start-1 row-start-1 w-full min-w-0! bg-transparent px-1.5 text-xs font-medium text-ellipsis outline-none',
isEditingLabel
? 'text-fg-default cursor-text'
: 'text-fg-muted hover:text-fg-default cursor-pointer',
Expand Down
2 changes: 1 addition & 1 deletion docs/architecture/canvas-zoom-rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ When frame labels collide, the higher-priority label wins:

The first three interaction states force the affected label to remain visible and use matching overlay layers in descending order. With no interaction, the outer frame wins because zoomed-out views prioritize structural context over nested detail; the inner label returns after sufficient screen-space separation.

Frame label width is capped to the transformed frame width with a 48 px usability floor. Overflowing names truncate visually while the input title retains access to the complete name.
Frame label width is capped to the transformed frame width with a 48 px usability floor. An overflowing name truncates with an ellipsis so the clipped remainder is visible as such; the ellipsis disappears while the label is being edited, where the input scrolls instead.

`FrameNode` owns the hierarchy and collision policy because it is frame-specific. `NodeWrapper` remains generic: it converts node coordinates to screen coordinates, applies owner-provided semantic visibility and width, handles interaction reveal, and performs opacity/FLIP transitions.

Expand Down
Loading