Interface BaseNode

Position is set by picking a field from the inset family (left/right for X, top/bottom for Y) or by using centerX/centerY to centre. The chosen field also acts as the anchor - setting right means "right-anchored, distance from parent's right edge".

Both insets on the same axis may be set simultaneously: left: "10px", right: "20px" anchors both edges and derives the size on that axis from the parent - width = parent - left - right. In this dual-inset mode the derived size wins over any explicit width (or height for top+bottom); min/max clamping still applies to the derived result.

centerX/centerY is mutually exclusive with the inset fields on its axis - when an inset is set, centerX is ignored.

Default if nothing is set: left: 0 / top: 0.

interface BaseNode {
    alpha?: number;
    bottom?: Length;
    centerX?: Length;
    centerY?: Length;
    height?: Length;
    id?: string;
    left?: Length;
    margin?: Padding;
    mask?: string;
    maxHeight?: Length;
    maxWidth?: Length;
    minHeight?: Length;
    minWidth?: Length;
    right?: Length;
    top?: Length;
    visible?: boolean;
    width?: Length;
}

Hierarchy (view full)

Properties

alpha? bottom? centerX? centerY? height? id? left? margin? mask? maxHeight? maxWidth? minHeight? minWidth? right? top? visible? width?

Properties

Optional alpha

alpha?: number

0..1, default 1.

Optional bottom

bottom?: Length

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

Optional centerX

centerX?: Length

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

Optional centerY

centerY?: Length

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

Optional height

height?: Length

Optional id

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.

Optional left

left?: Length

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

Optional margin

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).

Optional mask

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.

Optional maxHeight

maxHeight?: Length

Optional maxWidth

maxWidth?: Length

Optional minHeight

minHeight?: Length

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

Optional 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).

Optional right

right?: Length

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

Optional top

top?: Length

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

Optional visible

visible?: boolean

Default true.

Optional width

width?: Length

Settings

Member Visibility

Theme

On This Page

alphabottomcenterXcenterYheightidleftmarginmaskmaxHeightmaxWidthminHeightminWidthrighttopvisiblewidth