RichLabel

Draws one label of inline content anchored at a point on an SVG surface.

@internote/canvas-sdk/reactComponent
On this page
import { RichLabel } from '@internote/canvas-sdk/react';

The label renders as HTML inside a foreignObject, so it carries everything a label's inline content can hold: bold, maths, symbols, live values. The box is deliberately roomy and transparent and takes no pointer; the flex alignment inside it puts the text exactly where align and baseline say. Nothing is clipped to it, so a label never loses a descender. A label with nothing to draw renders nothing.

#Props

Also takes className. Any other prop is passed to the rendered element.

align
Where the anchor sits along the label's width.
startmiddleend
Default'middle'
baseline
Where the anchor sits against the label's height.
abovebelowcentre
Default'above'
colour
The text colour as CSS. The label inherits the mark's when given.
string
contentRequired
The label's inline content, as an attribute value carries it, or a plain string.
unknown
maxWidth
A width the words must fit inside, wrapping onto further lines rather than running past it. Without it a label is one line however long it is, which is right for nearly all of them.
number
rotate
Degrees to turn the words about the anchor, for a name up the side of an axis.
number
sizeRequired
The font size in pixels, already scaled by the canvas unit, as labelPx gives it.
number
xRequired
The anchor's x, in the SVG's pixels.
number
yRequired
The anchor's y, in the SVG's pixels.
number

#Example

<RichLabel content={attrs.label} x={px} y={py - unit * 0.5} size={labelPx(attrs['text-size'], u)} colour={colourCss(attrs.colour)} align="middle" baseline="above" />

Declared in packages/canvas-sdk/src/react/surface-label.tsx:84.

Last updated