NavigatorElementStyleCallback

type NavigatorElementStyleCallback<T> = (payload) => NavigatorElementStyle;

Per-element styling hook for the mini-map. Receives the element's current size, its dia.Element model, and its resolved record, and returns a style map (NavigatorElementStyle) applied to the rendered node — handy for coloring or reshaping elements based on their data. Returned values are applied as inline CSS, except d, which is set as an attribute (the CSS d property is not reliably supported across browsers).

Type Parameters

Type Parameter	Description
T	Shape of the custom data payload carried on the element.

Parameters

Parameter	Type
payload	{ height: number; model: dia.Element; record: Computed<ElementRecord<T>>; width: number; }
payload.height	number
payload.model	dia.Element
payload.record	Computed<ElementRecord<T>>
payload.width	number

Returns

NavigatorElementStyle

Example

import type { NavigatorElementStyleCallback } from '@joint/react-plus';

const styleByStatus: NavigatorElementStyleCallback<{ status: string }> = ({ record }) => ({
  fill: record.data.status === 'error' ? '#e74c3c' : '#95a5a6',
});