JSVision

Appearance

@jsvision/ui / grow

Function: grow() ​

grow<V>(view, n?, opts?): V

Defined in: ui/src/view/dsl/flex.ts:202

Give a view a flex-grow size: it takes a share of the container's leftover main-axis space proportional to n. Mutates the view's layout.size (preserving its other layout props) and returns the same view, so it composes inline inside a col/row.

Pass { min } to add a cell floor: the view then never solves below min cells, even as the container shrinks (forwarding the engine's Size.fr.min). The floor binds only when it exceeds the view's fair share; a lone floored view is still capped at its track (the engine never overflows).

Re-tagging an already-mounted view requests a reflow for you — no manual invalidateLayout().

Type Parameters ​

V ​

V extends View

Parameters ​

view ​

V

The view to size.

n? ​

number = 1

The flex weight (default 1). Two grow(v, 1) children split the space evenly; a grow(v, 2) child gets twice the share of a grow(v, 1) sibling.

opts? ​

Optional { min } cell floor. A negative min is forwarded and the engine clamps it to 0 at solve time (no double-clamp here). There is no max — the engine has no ceiling.

min? ​

number

Returns ​

V

The same view, for inline chaining.

Example ​

ts
import { View, row, grow, 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); }
}

// `main` takes twice the width of `aside`; `aside` never shrinks below 12 cells.
const aside = new Panel('aside');
const main = new Panel('main');
const body = row(grow(aside, 1, { min: 12 }), grow(main, 2));