Computed

type Computed<T> = T extends ElementRecord<infer ElementData> ? InternalElementRecord<ElementData> : T extends LinkRecord<infer LinkData> ? InternalLinkRecord<LinkData> : T extends ElementJSONInit ? InternalElementRecord<T["data"]> : T extends LinkJSONInit ? InternalLinkRecord<T["data"]> : T;

Resolves any input cell shape to its internal store form, the variant with framework-populated fields (id, position, size, angle, data for elements; id, source, target, data for links) required.

Distributes over unions, so a single utility covers every input flavor:

Input	Result
Computed<ElementRecord<D>>	element with required fields
Computed<LinkRecord<D>>	link with required fields
Computed<CellRecord<E, L>>	resolved element or resolved link

To keep a custom record's exact shape, compose it OUTSIDE the wrapper, e.g. Computed<CellRecord> | MyCustomRecord. Passing a custom element- or link-shaped record (any object with a type field) directly through Computed re-maps it to the internal element/link record, because it structurally matches the same branch as ElementRecord / LinkRecord.

Reading hooks (useCell, useCells) yield the Computed variant so consumers don't need ?? {} / ?? 0 fallbacks for fields the store always populates.

Type Parameters

Type Parameter	Description
T	the input cell shape (record or union) to resolve

Example

import { useCell } from '@joint/react';
import type { Computed, ElementRecord } from '@joint/react';

interface MyData {
  label: string;
}

const label = useCell((el: Computed<ElementRecord<MyData>>) => el.data.label);