Components

Canvas

A fixed-size surface where items sit anywhere, like the cards of a stream overlay: drag, resize and select several, by pointer, touch or keyboard, with snapping, a grid, undo and a fit-to-width scale.

Live in 5 minutes

Layers

BackdropLocked

Title

Shift keeps a card's shape as you resize; draw a box to select several.

Import

import { Canvas, CanvasItem } from '@rinzai/zen';

Examples

Dashboard

A dashboard you lay out yourself: widgets on a 20-unit grid, lining up with each other as you drag (snap), with minSize so none gets too small. Widgets are any content; here Stat, Meter and Sparkline. onChangeEnd is the moment to save the layout.

Spent$2,742

Left to spend$1,258

Budgets

Groceries$207 / $600

Dining out$170 / $150

Transport$64 / $120

Bills$310 / $340

Balance$18,400

Drag a widget, or a handle to resize it

Notes

Sticky notes with a field in each: typing, selecting text and the × button work as usual, because presses on fields and buttons inside an item go to them. Drag a note by its edge or top strip.

Snapping

Off: items go where you drop them. Guides (snap): edges and centres line up with the surface and each other. Grid (grid, here with snap): they keep to a 20-unit grid, its dots showing while you drag.

Snapping

OffGuidesGrid

20, 20

210, 70

330, 30

API reference

<Canvas>

A fixed-size surface where items sit anywhere, such as the cards of a stream overlay or a slide. Drag an item to move it, and the handles of the selected one to resize it (Shift keeps its shape); Escape mid-drag puts it back. Shift- or Cmd-click, or drag a box on empty space, to select several and move them together. From the keyboard, Tab reaches each item, the arrow keys move the selection (Shift by 10), Alt and the arrow keys resize, Cmd or Ctrl+A selects all, and Escape deselects; each change is announced.

Items stay on the surface; with snap they line up with its edges and centre and with each other, and with grid they keep to a grid. scale shows the design larger or smaller, or "fit" fills the width it's given. onChange gets the items with every step of a change; onChangeEnd, once it's made, with the items before it, for undo or saving.

Prop	Type	Default
`height`Required	`number`	`—`
`items`Required Where each item is (other fields are kept); render a CanvasItem for each.	`readonly T[]`	`—`
`onChange`Required The items, with every step of a move or resize.	`(items: T[]) => void`	`—`
`width`Required The surface's size, in your design's units (px at scale 1).	`number`	`—`
`grid` Keep positions and sizes to multiples of this (design units) when no line is in reach.	`number`	`—`
`minSize` Smallest width and height an item can be resized to.	`number`	`8`
`onChangeEnd` The items once a change is made (a drag let go, a key pressed), and as they were before: for undo or saving.	`((items: T[], before: readonly T[]) => void)`	`—`
`onSelect`	`((ids: string[]) => void)`	`—`
`scale` How large to show it: 2 shows a 400×120 design 800×240; "fit" fills the width it's given. Positions stay in design units.	`"fit" \| number`	`1`
`selected` The selected items' ids.	`readonly string[]`	`[]`
`snap` Line items up with the surface and each other: true, or how close counts, in screen px (true is 6).	`boolean \| number`	`false`

<CanvasItem>

One item on a Canvas, placed where the canvas's items say for its id; later items sit on top of earlier ones. label names it ("Title") in what's announced. Its content is yours: fields and buttons in it work as usual, and pressing them doesn't drag it (nor anything with data-canvas-no-drag).

Prop	Type	Default
`id`Required	`string`	`—`
`label`Required The item's name, e.g. "Title", for what's announced.	`string`	`—`