reactiveLayout()

Create a graph-visible single-column text layout bundle.

Import

import { reactiveLayout } from "@graphrefly/ts/solutions/reactive-layout";

Signature

function reactiveLayout(opts: ReactiveLayoutOptions): ReactiveLayoutBundle

Parameters

Parameter	Type	Description
opts	ReactiveLayoutOptions	Requires a graph and a graph-visible measurements node, plus optional lineHeight, maxWidth, targetId, segmentAdapter, and bundle name.

Returns

A ReactiveLayoutBundle containing input nodes, setters, and graph-visible output nodes for segments, line breaks, height, and character positions.

Example

import { graph } from "@graphrefly/ts/graph";
import {
  cellTextMeasurements,
  reactiveLayout,
} from "@graphrefly/ts/solutions/reactive-layout";

const g = graph({ name: "article" });
const text = g.state("Hello GraphReFly", { name: "text" });
const font = g.state("16px system-ui", { name: "font" });
const measurements = cellTextMeasurements({ graph: g, text, font });

const layout = reactiveLayout({ graph: g, measurements, maxWidth: 320, lineHeight: 20 });
layout.setMaxWidth(280);

Remarks

• Graph-visible: This creates ordinary state/output nodes only; it does not add protocol behavior, hidden subscriptions, GraphSpec ownership, storage, or platform globals.

Source

packages/ts/src/solutions/reactive-layout/bundles.ts