FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Component | Plotband: Render the label with the Unovis text engine by rokotyan · Pull Request #120 · ExaForce/unovis · GitHub

Repository navigation

Component | Plotband: Render the label with the Unovis text engine - #120

Draft
rokotyan wants to merge 8 commits into
mainfrom
claude/plotline-bleed-labels-08d42b
Draft

rokotyan wants to merge 8 commits into
mainfrom
claude/plotline-bleed-labels-08d42b

Conversation

Copy link
Copy Markdown

What & why

Checklist

  • Dev examples
  • Dev gallery examples (pnpm dev:gallery)
  • Wrappers (regenerated via pnpm generate)
  • Gallery example
  • Docs
  • Lint passes on the files I changed
  • Builds locally (pnpm build)
  • All commands pass (pnpm cmds-report)

Screenshots / recordings

rokotyan force-pushed the claude/plotline-bleed-labels-08d42b branch from 4493a77 to 050fa70 Compare August 17, 2026 22:10
rokotyan and others added 7 commits August 17, 2026 21:30
`getWrappedTextAabb` resolves the alignment and rotation of wrapped text
blocks into the bounding box they would occupy when rendered with
`renderTextToSvgTextElement`, relative to the anchor point. Components that
place labels near the edges of the chart use it to measure a label from the
exact same text layout they render, so the estimate can't drift from what
ends up on the screen.

The new `getCachedFontFamily` exposes the font family from the font info
that `text-measure` already caches per class chain: text has to be measured
with the font it actually inherits, as the difference from the
`--vis-font-family` fallback can exceed 10% of the text width.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
`labelBboxToBleed` converts a label's bounding box into the bleed required
to fit it, i.e. the space reserved outside of a scale range. How much space
a label may claim is capped relative to the length of the range, so that a
long label can't collapse the plot area. It lives in a dedicated
`utils/bleed` module because it produces a `Spacing` for the container
layout system rather than shaping text.

`getRectFitTranslation` returns the translation needed to fit a rect into
the given bounds. Label-drawing components use it to keep a label visible
when the bleed alone can't fit it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The label was clipped by the container's clipping path whenever the plotline
was drawn close to the edge of the chart, e.g. at the top. The `bleed` getter
now reports the space the label needs outside of the scale range, along the
plotline's own axis only, since the other label coordinate is derived from
the component size and wouldn't move with the range. The bleed is capped at
a third of the range; beyond the cap, and across the plotline's axis where
bleeding can't help, the label is shifted into the chart area so that it
stays visible.

The label is rendered with the Unovis text engine, which replaces the
browser-quirky `dominant-baseline` positioning with explicit line offsets:
the layout maps express alignment with the `TextAlign` / `VerticalAlign`
enums, the text is rendered into a group whose `translate` + `rotate`
transform is transitioned, and the bleed is measured from the same wrapped
text layout the render uses. `labelText` accepts `UnovisText` blocks
alongside plain strings (which support `\n` line breaks now), enabling
styled multi-line labels: per-block font size, weight, color, font family,
margins and wrapping width. The `labelSize` / `labelColor` options and the
CSS variable values act as defaults for the blocks: values set on a text
block take priority over them.

Also fixes:
- Honour the `customDuration` passed to `_render`, so the line and the label
  no longer animate while the rest of the chart snaps on resize
- Hide the component when `value` isn't defined, instead of letting the scale
  coerce `null` to a number and drawing the line at zero
- Hide the label when the value is outside of the domain, so that it doesn't
  float in the chart while the plotline itself is clipped out
- Clear the label when `labelText` is removed

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Renders every combination of the label position, orientation and axis, so
that a plotline placed at the edge of the domain can be checked for clipping
in all of them at once. The label text, size and offsets are adjustable, and
a toggle swaps the plain string label for styled `UnovisText` blocks — a bold
main line with a smaller gray sub-label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Same treatment as the Plotline: the `bleed` getter reports the space the
label needs outside of the scale range along the band's own axis, capped at
a third of the range, and the label is shifted into the chart area when it
can't fit outside. It matters even more here, as the default
`top-left-outside` position places the label outside the band, where it used
to be clipped.

The label renders with the Unovis text engine (no `dominant-baseline`, the
layout maps use the `TextAlign` / `VerticalAlign` enums), and its position is
transitioned on a wrapping group. `labelText` accepts `UnovisText` blocks
alongside plain strings (which support `\n` line breaks now), enabling styled
multi-line labels; block-level font size, color and font family take priority
over the `labelSize` / `labelColor` options. The label is placed relative to
the visible part of the band, so a band extending beyond the domain keeps its
label in view, and no label is drawn when the band is fully out of view.

Also fixes:
- Honour the `customDuration` passed to `_render`, so the band and its label
  no longer animate while the rest of the chart snaps on resize
- Set the label text on render instead of inside the transition, where it was
  only applied once the transition started, a frame later
- Hide the component when `from` or `to` isn't defined, instead of leaving
  the previously rendered band on the chart
- Use a `--vis-plotband-cursor` variable rather than the Line component's
  one, and name the label's emotion class `plotband-label`

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Renders every combination of the label position, orientation and axis, with
the band placed at either end of the domain, in the middle, or extending
beyond it. The label text, size and offsets are adjustable, and a toggle
swaps the plain string label for styled `UnovisText` blocks — a bold main
line with a smaller gray sub-label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Update the `labelText` input type on the Angular Plotline and Plotband
wrappers to accept `UnovisText` blocks. Applied by hand to match the
generator output: the autogen currently emits broken `@/*` alias imports,
so a full regeneration would reintroduce them. The other wrappers forward
the config generically and need no changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
rokotyan force-pushed the claude/plotline-bleed-labels-08d42b branch from cad4c42 to e0e7094 Compare August 18, 2026 05:05
A text block following a larger one used to overlap it: the first line of
every block was advanced by `lineHeight` in the block's own `em` units, while
under the `hanging` baseline the space needed to clear the previous line is
the previous line's height. The advance is now computed from the previous
block's font size and line height, and the margin between blocks is applied
in true pixels instead of mixing the two blocks' `em` units. Blocks with
equal font sizes render pixel-identically to before.

The height estimation in `getWrappedText` mirrors the new advance model, so
measurement stays in lockstep with rendering. This also fixes its
`_estimatedHeight` accounting, which was off for three or more blocks (it
subtracted the previous block's height instead of the cumulative one), and
makes empty blocks contribute no height.

Co-Authored-By: Claude Opus 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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant


Back | FazBrowse Home | New Git URL