Canvas viewport
A design tool's canvas: content in its own units, which scrolling pans and ⌘ or Ctrl with scrolling (or a pinch) zooms about the pointer. Its zoom bar fits the content, shows it at 100%, and zooms in and out.
Examples
Props
CanvasViewport
A design tool's canvas: content drawn in its own units, which scrolling pans and ⌘ or Ctrl with scrolling (and a trackpad pinch) zooms about the pointer. Its zoom bar fits the content, shows it at 100%, and zooms in and out; with the canvas focused, + and − zoom, 0 fits and 1 shows 100%.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Names the canvas for screen readers. |
contentWidth | number | — | The content's size, in its own units, for fitting it. |
contentHeight | number | — | |
children | ReactNode | — | SVG elements in the content's units. |
onKeyDown? | ((event: KeyboardEvent<HTMLDivElement>) => void) | — | Keys pressed while the canvas has focus, after its own (zoom) have had their turn. |
Artboard
The surface a design sits on.
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | — | |
y | number | — | |
width | number | — | |
height | number | — |
CanvasInk
Outlined artwork: a path in the text colour, or the muted one.
| Prop | Type | Default | Description |
|---|---|---|---|
d | string | — | |
transform? | string | — | |
muted? | boolean | false | |
layer? | string | — | Names what it draws, for tests and tools that find it on the canvas. |
CanvasGuide
A horizontal guide across the artwork: a baseline, an x-height, a cap height.
| Prop | Type | Default | Description |
|---|---|---|---|
x1 | number | — | |
x2 | number | — | |
y | number | — |
CanvasBox
An outlined box: a glyph's bounds, or the clearspace.
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | — | |
y | number | — | |
width | number | — | |
height | number | — | |
selected? | boolean | false | Drawn in the focus colour: the thing an edit applies to, such as a selected letter. |
CanvasCaret
A text cursor: where a kerning edit applies.
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | — | |
y1 | number | — | |
y2 | number | — |
CanvasHitArea
An invisible area that takes clicks, such as the text a kerning cursor is placed in.
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | — | |
y | number | — | |
width | number | — | |
height | number | — | |
onClick | (event: MouseEvent<SVGRectElement, MouseEvent>) => void | — |
Keyboard
| Key | Does |
|---|---|
| + or − | Zoom in or out about the centre |
| 0 | Zoom to fit |
| 1 | Zoom to 100% |
Accessibility
- A focusable group described as a "canvas"; every zoom action is also a named button in its toolbar.