fix(map): a container has to be big enough for its own name - #583
Conversation
The name chip counter-scales by `1/k` so its text stays readable at 30% zoom, which means it *grows* in world units as the map zooms out while the cluster it names does not. `computeBoxes` sized the box off its members alone, so a user with one ball under them got a label wider than the container it belongs to — the chip hanging out past both edges, reading as though it had come loose. The box now reserves room for its own chip: the width floor is the chip's measured width, and the top padding is its measured height rather than a constant. `BOX_PAD_TOP` was that height at k=1 all along; below that the chip was already sitting on the cluster's top row. Measured, not estimated — the label is an email whose length nothing here controls — and measured at the UI cadence rather than per frame, because reading `offsetWidth` right after writing the transforms forces a synchronous layout, and the value only changes when the label does.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Code diff size+90 / −9 across 1 file (net +81)
Source files under |
`computeBoxes` sized a container off `radiusOf`, which describes the ball. A node is a ball *and* a caption, the caption is the wider of the two — it carries an agent's name or a user's email, up to a 132px `max-width`, and it has a `scale()` of its own on top of that — so every label along a container's left or bottom edge hung outside it. The extent now comes from what the browser actually laid out: the union of `.lm-node-in` and its `.lm-cap`, as offsets from the node's anchor. Reading it back beats arithmetic over the stylesheet, which would be a copy of the CSS that goes stale the first time someone touches it, and it is the only way to know how wide a caption ended up when it may have been ellipsised. The caption's `scale()` lands after layout and can spill past its parent's border box, hence the union rather than the parent alone. Measured on the same cadence as the chip and for the same reason. Unlike a chip this rides the map's zoom, so the world offsets hold at any `k` and the cache only goes stale when a label changes. A node the DOM has not laid out yet — or one mid-leave, whose rect describes where it is going rather than how big it is — falls back to `radiusOf`.
|
Second half of the same bug, reported on the first: a node's caption could still hang outside the container.
The extent now comes from what the browser laid out: the union of Same cadence as the chip measurement, same reason. Unlike a chip this one rides the map's zoom, so the world offsets hold at any Screenshots above are re-captured against this commit. The |
1 participant
Reported on #582: a container can come out narrower than the chip naming it, which
reads as the label having come loose from the box.
The chip counter-scales by
1/kso its text stays readable at 30% zoom — that isthe whole reason it is DOM and not canvas. Which means it grows in world units
as the map zooms out, while the cluster it names does not.
computeBoxessizedthe box off its members alone, so a user with a single ball under them and an
email for a name got a label hanging out past both edges. #582 made this easier
to hit twice over: services joined containers (so more users have a box at all),
and identity labels became emails rather than short IdP display names.
The box now reserves room for its own chip. The width floor is the chip's
measured width; the top padding is its measured height rather than a constant.
BOX_PAD_TOP = 26was that height at k=1 all along — below 100% zoom the chipwas already sitting on the cluster's top row, which is the same bug in the other
axis.
Measured rather than estimated, because the label is an email whose length
nothing here controls. Measured in
syncChipsat the UI cadence rather than incomputeBoxesper frame: readingoffsetWidthright after writing thetransforms forces a synchronous layout, and the value only changes when the
label does. A chip that has not been measured yet falls back to the old
constants for a frame or two.
The magic
10for the chip's inset from the left edge, which appeared in threeplaces, is now
CHIP_INSET.Verification
Real stack, a cluster whose owner's name is a long address next to one whose
name is short.
75%
36% — where the chip is at its widest in world units
Follow-up
Not in this PR, coming next: nothing stops a non-member — an org-level service,
another user's ball — from sitting inside a container, and collapsed containers
take no part in the box-vs-box separation, so a folded chip can land on top of an
open box.