reactiveBlockLayout()

Create a graph-visible vertical block layout bundle over the same DOM-free core.

Import

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

Signature

function reactiveBlockLayout(opts: ReactiveBlockLayoutOptions): ReactiveBlockLayoutBundle

Parameters

Parameter	Type	Description
opts	ReactiveBlockLayoutOptions	Requires a graph and a graph-visible block measurements node, plus optional gap, targetId, and bundle name.

Returns

A ReactiveBlockLayoutBundle containing the gap input, measured block output, positioned block flow, and total height node.

Example

import { graph } from "@graphrefly/ts/graph";
import {
  blockAdaptersProvider,
  blockMeasurementProvider,
  reactiveBlockLayout,
  type MeasurementAdapter,
} from "@graphrefly/ts/solutions/reactive-layout";

const g = graph({ name: "cards" });
const blocks = g.state([{ id: "title", kind: "text", text: "Hello" }]);
const maxWidth = g.state(320);
const text = g.state<MeasurementAdapter>({
  measureSegment: (segment) => ({ width: segment.length * 8 }),
});
const measurements = blockMeasurementProvider({
  graph: g,
  blocks,
  maxWidth,
  adapters: blockAdaptersProvider({ graph: g, text }),
});

const layout = reactiveBlockLayout({ graph: g, measurements, gap: 12 });
layout.setGap(16);

Remarks

• DOM-free: Image/SVG sizing is explicit or injected; no async image loading or DOM SVG parsing occurs in the core layout bundle.

Source

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