JSVision

Appearance

@jsvision/ui / at

Function: at() ​

at<V>(view, ...spec): V

Defined in: ui/src/view/dsl/absolute.ts:50

Place a view absolutely at a parent-content-relative rectangle, and return the same view for inline composition. Accepts either four numbers (x, y, width, height) or a single Rect.

Merge-preserving: it sets only position:'absolute' and rect, keeping every other layout prop (e.g. a container's direction). Pure: it never adds the view to a parent; composition stays the caller's job (g.add(at(v, …)), or nest it inside a col/row/stack). An at()-placed view used as a col/row child is honored as an out-of-flow overlay — it paints over the content box and reserves no flow space (the engine already excludes absolute children from flex flow).

A degenerate rect (negative or fractional) is forwarded as-is; the engine clamps each side to a non-negative integer at solve time.

Type Parameters ​

V ​

V extends View

Parameters ​

view ​

V

The view to place.

spec ​

[number, number, number, number] | [Rect]

Either x, y, width, height (four numbers) or a single { x, y, width, height } rect.

Returns ​

V

The same view, for inline chaining.

Example ​

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

// An absolute toast overlay as an out-of-flow child of a column — it reserves no flow space.
const header = new Panel('header');
const body = new Panel('body');
const toast = new Panel('Saved!');
const screen = col(header, grow(body), at(toast, 2, 1, 30, 3));

// The rect form, for a site that already has a { x, y, width, height }.
const panel = new Panel('panel');
at(panel, { x: 0, y: 0, width: 80, height: 24 });