JSVision

Appearance

@jsvision/ui / stack

Function: stack() ​

stack(...args): Group

Defined in: ui/src/view/dsl/stack.ts:197

Build a z-overlay stack: every layer shares the same box and paints back-to-front (a later layer draws over an earlier one). An untagged layer (or one placed to 'fill' on both axes) fills the whole box; a centered fixed box re-centers itself; a corner/edge layer (via topRight etc.) pins to its edge. Fill and centered layers re-solve lag-free on resize; corner/edge layers settle one frame later.

Pass an optional Flex props object first (e.g. a background), then the layers. The stack takes a flex share of 1 by default, so a bare stack(...) fills its parent. A falsy layer (null/undefined/false) is skipped, so stack(canvas, showBadge && topRight(badge, 5, 1)) composes without a manual .add() dance.

Note: a centered layer centers against the stack's full box, not its content box — keep a stack's padding at 0 for a true center.

Parameters ​

args ​

[Flex, ...Layer[]] | Layer[]

An optional Flex props object followed by the layer views (back-to-front); a falsy layer is skipped.

Returns ​

Group

A Group overlay containing the wired (truthy) layers.

Example ​

ts
import { View, stack, centered, topRight, type DrawContext } from '@jsvision/ui';

class Panel extends View {
  constructor(private readonly label: string) { super(); }
  draw(ctx: DrawContext) { ctx.fill(' ', ctx.color('window')); ctx.text(1, 0, this.label); }
}

// A full-box canvas with a centered dialog and a badge pinned to the top-right corner.
const canvas = new Panel('canvas');
const dialog = new Panel('dialog');
const badge = new Panel('NEW');
const screen = stack({ background: 'desktop' }, canvas, centered(dialog, 40, 12), topRight(badge, 5, 1));