🚧 Shape Clipping

The grouping primitive closest to clipping is the frame. A FrameElement is a named rectangular region drawn as a dashed box with a header title. Frames don't own their children through parentId; instead, member shapes carry a frameId that matches the frame's id. Moving a frame by drag translates every shape whose frameId matches, and the export pipeline can crop output to the frame's bounds.

import { isFrame, type FrameElement } from "@oh-just-another/scene";

So a frame already gives you the two behaviours people usually want from clipping at export time — a bounded region and "crop to this region" on export. Membership is reconciled automatically as you drag shapes: a shape whose centre lands over a frame is adopted, and one whose centre leaves is released.

Planned — not yet available: true render-time clipping, where content that extends past a frame's (or any container's) edges is visually masked on the live canvas. FrameElement today has no clip flag, and the renderer does not mask children to a parent's bounds — overflow is drawn in full. Frames are a logical grouping and export-crop mechanism, not a render mask.

If you need hard masking now, crop on export to the frame bounds, or keep off-frame content on a separate hidden layer.