Interface GroupNode

Structural container.

Sizing:

  • If width/height is set, the group has that size; children do not affect it.
  • If width/height is omitted, the group hugs the bounding box of its children including each child's margin. A child sized as a fraction/percent of that same axis (a plain number or "N%") does not contribute to the hug - that would be circular - so the group sizes from its "Npx" and intrinsic children (Text, or an omitted-size Rect). The fraction then resolves against the group's final size at layout, so e.g. a width: 1 rect fills the text-hugged group (a background plate) without inflating it.

GroupNode has no container-level padding: use margin on the child that needs breathing room. This keeps the "background plate" pattern unambiguous - an omitted-size Rect always fills the group's full border-box, and margin on its sibling controls how far the content sits inside that plate.

interface GroupNode {
    alpha?: number;
    bottom?: Length;
    centerX?: Length;
    centerY?: Length;
    children: Node[];
    height?: Length;
    id?: string;
    left?: Length;
    margin?: Padding;
    mask?: string;
    maxHeight?: Length;
    maxWidth?: Length;
    minHeight?: Length;
    minWidth?: Length;
    right?: Length;
    top?: Length;
    type: "group";
    visible?: boolean;
    width?: Length;
}

Hierarchy (view full)

Properties

alpha?: number

0..1, default 1.

bottom?: Length

Distance from parent's bottom edge to this node's bottom edge.

centerX?: Length

Horizontal offset from the centre of the parent. 0 = perfectly centred.

centerY?: Length

Vertical offset from the centre of the parent. 0 = perfectly centred.

children: Node[]
height?: Length
id?: string

Required if the node needs to be targeted by animations or runtime setters. "frame" is reserved - used by positional tweens as relativeTo: "frame" to reference the video frame.

left?: Length

Distance from parent's left edge to this node's left edge.

margin?: Padding

Reserves space on each side of the node by inflating its bounding box. Lives on the child rather than as container-level padding, so the parent needs no declaration to give one of its children breathing room.

  • In an auto-sized parent the parent hugs child + margin, so margin effectively enlarges the parent. This drives the "background plate" pattern: in an auto-sized group, put an omitted-size Rect next to a Text with margin: "10px" -- the group hugs text plus margin, the rect autofills the group, and the text sits visually inset 10 px inside the plate.
  • In an explicit-sized parent the parent's size is fixed, so margin only shifts this node's own placement inward.
  • In a StackNode margin is added to the child's flow slot on both sides and compounds with gap: two adjacent children with margin: "10px" separated by gap: "5px" produce a 25 px visual gap (10 + 5 + 10).
mask?: string

Id of a RectNode with isMask: true whose bounds clip this node. The mask rect may live anywhere in the tree; it is resolved by id at parse time. Only rects may be used as masks.

maxHeight?: Length
maxWidth?: Length
minHeight?: Length

Lower bound for the node's computed height. See minWidth.

minWidth?: Length

Lower bound for the node's computed width. Clamps the laid-out size from below - applies to both auto-sized nodes (hugged size lifted to minWidth) and explicit-sized nodes (if width < minWidth, wins minWidth, same as CSS).

right?: Length

Distance from parent's right edge to this node's right edge.

top?: Length

Distance from parent's top edge to this node's top edge.

type: "group"
visible?: boolean

Default true.

width?: Length