Skip to main content

Frame Shape

A frame (FrameElement, type "frame") is a labelled container. Shapes become members by sharing the frame's id through their frameId field โ€” distinct from parentId grouping. Moving a frame translates every shape whose frameId matches it, which makes frames convenient as export regions.

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

declare const frame: FrameElement;
declare const elements: { id: string; frameId?: string }[];
const members = elements.filter((e) => e.frameId === frame.id);

Frames are drawn interactively with the editor's draw-frame mode; the editor auto-numbers new frames ("Frame N") unless a name is set. Frame header geometry is tunable through the FRAME_HEADER_HEIGHT / FRAME_HEADER_PADDING_X / FRAME_HEADER_FONT_SIZE constants exported from @oh-just-another/scene.