Types — interfaces b–r

reference

10 min readUpdated 2026-10-05

Interfaces B–R

Import these from @grafloria/engine.

Interfaces

`BoundingBox`

ts
interface BoundingBox

Properties

Name	Type	Default	Description
`left`	`number`
`top`	`number`
`right`	`number`
`bottom`	`number`
`width`	`number`
`height`	`number`

`ClipboardEvent`

ts
interface ClipboardEvent

Properties

Name	Type	Default	Description
`nodeCount`	`number`
`linkCount`	`number`
`groupCount`	`number`
`operation`	`'copy' \| 'paste' \| 'duplicate'`

`CommandEvent`

ts
interface CommandEvent

Properties

Name	Type	Default	Description
`commandName`	`string`
`commandId`	`string`
`success?`	`boolean`
`error?`	`string`

`DiagramEvent`

ts
interface DiagramEvent<T = any>

Properties

Name	Type	Default	Description
`type`	`string`
`timestamp`	`number`
`data`	`T`
`source?`	`string`
`preventDefault?`	`() => void`
`stopPropagation?`	`() => void`

`EntityWithLOD`

Entity with Level of Detail information

ts
interface EntityWithLOD<T>

Properties

Name	Type	Default	Description
`entity`	`T`
`lod`	`LODLevel`

`EventSubscription`

ts
interface EventSubscription

Properties

Name	Type	Default	Description
`unsubscribe`	`() => void`

`FlexboxLayoutConfig`

Flexbox container configuration Maps directly to CSS Flexbox properties

ts
interface FlexboxLayoutConfig

Properties

Name	Type	Description
`direction`	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	Main axis direction
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	Whether items wrap to multiple lines
`justifyContent`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	Main axis alignment
`alignItems`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	Cross axis alignment
`alignContent`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'stretch'`	Multi-line cross axis alignment
`gap`	`number \| { row: number; column: number }`	Gap between items (px)
`padding?`	`number \| { top: number; right: number; bottom: number; left: number }`	Padding inside container (px)
`columns?`	`number`	Column-based layout (like Bootstrap 12-column grid)

`FlexItemConfig`

Flexbox item configuration Applied to nodes inside a flexbox container

ts
interface FlexItemConfig

Properties

Name	Type	Description
`order?`	`number`	Display order (default: 0)
`flexGrow?`	`number`	Growth factor (default: 0)
`flexShrink?`	`number`	Shrink factor (default: 1)
`flexBasis?`	`number \| 'auto'`	Base size before growing/shrinking (default: 'auto')
`alignSelf?`	`'auto' \| 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	Override container's align-items for this item

`GradientStop`

ts
interface GradientStop

Properties

Name	Type	Default	Description
`offset`	`number`
`color`	`string`
`opacity?`	`number`

`GridItemConfig`

Grid item configuration Applied to nodes inside a grid container

ts
interface GridItemConfig

Properties

Name	Type	Description
`columnStart?`	`number \| 'auto'`	Starting column line (1-based or 'auto')
`columnEnd?`	`number \| 'auto'`	Ending column line (1-based or 'auto')
`rowStart?`	`number \| 'auto'`	Starting row line (1-based or 'auto')
`rowEnd?`	`number \| 'auto'`	Ending row line (1-based or 'auto')
`gridArea?`	`string`	Named grid area to place item in
`justifySelf?`	`'auto' \| 'start' \| 'center' \| 'end' \| 'stretch'`	Override container's justify-items for this item
`alignSelf?`	`'auto' \| 'start' \| 'center' \| 'end' \| 'stretch'`	Override container's align-items for this item

`GridLayoutConfig`

Grid container configuration Maps directly to CSS Grid properties

ts
interface GridLayoutConfig

Properties

Name	Type	Description
`templateColumns`	`string`	Column track definitions (e.g., "repeat(3, 1fr)", "100px 200px auto")
`templateRows`	`string`	Row track definitions
`templateAreas?`	`string[]`	Named grid areas
`columnGap`	`number`	Gap between columns (px)
`rowGap`	`number`	Gap between rows (px)
`autoFlow`	`'row' \| 'column' \| 'dense'`	Auto-placement algorithm
`autoColumns?`	`string`	Auto-generated column size
`autoRows?`	`string`	Auto-generated row size
`justifyItems?`	`'start' \| 'center' \| 'end' \| 'stretch'`	Horizontal alignment of items within cells
`alignItems?`	`'start' \| 'center' \| 'end' \| 'stretch'`	Vertical alignment of items within cells
`justifyContent?`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	Horizontal alignment of grid within container
`alignContent?`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	Vertical alignment of grid within container
`padding?`	`number \| { top: number; right: number; bottom: number; left: number }`	Padding inside container (px)

`GroupEvent`

ts
interface GroupEvent

Properties

Name	Type	Default	Description
`groupId`	`string`
`group?`	`any`

`JumpPointConfig`

ts
interface JumpPointConfig

Properties

Name	Type	Default	Description
`enabled`	`boolean`
`size?`	`number`
`style?`	`'arc' \| 'gap' \| 'bridge'`
`detectMode?`	`'all' \| 'perpendicular' \| 'threshold'`
`threshold?`	`number`

`LabelStyle`

ts
interface LabelStyle

Properties

Name	Type	Default	Description
`fontSize?`	`number`
`fontFamily?`	`string`
`color?`	`string`
`background?`	`string`
`padding?`	`number`
`borderRadius?`	`number`
`fontWeight?`	`'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`
`fontStyle?`	`'normal' \| 'italic' \| 'oblique'`
`textDecoration?`	`'none' \| 'underline' \| 'overline' \| 'line-through'`
`border?`	`string`
`borderWidth?`	`number`
`shadow?`	`Shadow`
`opacity?`	`number`
`lineHeight?`	`number`

`LayoutEvent`

ts
interface LayoutEvent

Properties

Name	Type	Default	Description
`groupId`	`string`
`type`	`'flexbox' \| 'grid' \| 'none'`
`config?`	`any`

`LinearGradient`

ts
interface LinearGradient

Properties

Name	Type	Default	Description
`type`	`'linear'`
`x1`	`number`
`y1`	`number`
`x2`	`number`
`y2`	`number`
`stops`	`GradientStop[]`

`LinkAnimation`

ts
interface LinkAnimation

Properties

Name	Type	Default	Description
`type`	`'marching-ants' \| 'flow' \| 'pulse' \| 'dash-flow' \| 'none'`
`duration?`	`number`
`dashOffset?`	`number`
`speed?`	`'slow' \| 'normal' \| 'fast'`
`direction?`	`'forward' \| 'reverse'`

`LinkEvent`

ts
interface LinkEvent

Properties

Name	Type	Default	Description
`linkId`	`string`
`link?`	`any`

`LinkState`

ts
interface LinkState

Properties

Name	Type	Default	Description
`selected`	`boolean`
`hovered`	`boolean`
`highlighted`	`boolean`
`animated?`	`boolean`

`LODConfig`

A declarative, per-diagram Level-of-Detail policy. Replaces the hardcoded zoom breakpoints and per-tier feature gates that used to live inside DiagramModel.

ts
interface LODConfig

Properties

Name	Type	Default	Description
`tiers`	`LODTier[]`

`LODTier`

One rung of a Level-of-Detail policy.

ts
interface LODTier

Properties

Name	Type	Description
`name`	`string`	Tier name — returned by `getLODLevel()` and used as the render LOD key.
`minZoom`	`number`	Inclusive lower zoom bound. The active tier for a given zoom is the highest-`minZoom` tier whose `minZoom <= zoom`.
`features`	`Set<LODFeature>`	The set of features that render at this tier.

`Marker`

ts
interface Marker

Properties

Name	Type	Default	Description
`type`	`'arrow' \| 'circle' \| 'square' \| 'custom'`
`position`	`number`
`size?`	`number`
`color?`	`string`

`ModeEvent`

ts
interface ModeEvent

Properties

Name	Type	Default	Description
`mode`	`'design' \| 'runtime' \| 'readonly'`
`previousMode?`	`'design' \| 'runtime' \| 'readonly'`
`reason?`	`string`

`NodeBehavior`

ts
interface NodeBehavior

Properties

Name	Type	Default	Description
`selectable`	`boolean`
`draggable`	`boolean`
`resizable`	`boolean`
`rotatable`	`boolean`
`deletable`	`boolean`
`editable`	`boolean`
`connectable`	`boolean`
`groupable`	`boolean`
`cloneable`	`boolean`
`dragHandler?`	`{ isDragHandler: boolean; dragChildren?: boolean; }`

`NodeEvent`

ts
interface NodeEvent

Properties

Name	Type	Default	Description
`nodeId`	`string`
`node?`	`any`

`NodeState`

ts
interface NodeState

Properties

Name	Type	Description
`visible`	`boolean`
`locked`	`boolean`
`selected`	`boolean`
`hovered`	`boolean`
`highlighted?`	`boolean`	Draw attention to the node without selecting it (search hits, traversal highlights, "related" emphasis). Independent of `selected`; when both are set, `selected` wins in the renderer's state precedence.
`focused`	`boolean`
`expanded`	`boolean`
`enabled`	`boolean`
`error?`	`string`
`warning?`	`string`
`status?`	`'idle' \| 'pending' \| 'running' \| 'completed' \| 'error' \| 'warning'`
`animateStatus?`	`boolean`

`ParallelLinkConfig`

Auto-separation of PARALLEL links (two or more links between the same pair of nodes). Without it, ERD / BPMN / state-machine diagrams stack every relationship between the same two entities on top of each other.

The links in a pair are fanned out symmetrically around the un-separated route: with 2 links and spacing 16 the offsets are -8 and +8; with 3 they are -16, 0, +16. Direction of the fan is the left/right normal of the source → target vector, so both directions of a bidirectional pair fan consistently.

ts
interface ParallelLinkConfig

Properties

Name	Type	Description
`enabled?`	`boolean`	Turn separation off for this link (it stays on the un-separated route).
`spacing?`	`number`	Distance between adjacent links in the group, in px. Default 16.
`offset?`	`number`	Extra offset added on top of the computed fan offset (px, signed). Lets an author nudge one member of a bundle without touching the others.

`Path`

ts
interface Path

Properties

Name	Type	Default	Description
`points`	`Point[]`
`segments`	`PathSegment[]`

`PathSegment`

ts
interface PathSegment

Properties

Name	Type	Default	Description
`type`	`'move' \| 'line' \| 'curve' \| 'arc'`
`from`	`Point`
`to`	`Point`
`control1?`	`Point`
`control2?`	`Point`
`radius?`	`number`

`Pattern`

ts
interface Pattern

Properties

Name	Type	Default	Description
`type`	`'dots' \| 'lines' \| 'grid' \| 'hatch' \| 'crosshatch'`
`color?`	`string`
`backgroundColor?`	`string`
`size?`	`number`
`spacing?`	`number`

`Plugin`

ts
interface Plugin

Properties

Name	Type	Default	Description
`metadata`	`PluginMetadata`

Members

install(context: PluginContext): void | Promise<void>
uninstall?(context: PluginContext): void | Promise<void>
onActivate?(context: PluginContext): void
onDeactivate?(context: PluginContext): void

`PluginConfig`

ts
interface PluginConfig

Properties

Name	Type	Default	Description
`enabled`	`boolean`
`config?`	`Record<string, any>`

`PluginContext`

ts
interface PluginContext

Properties

Name	Type	Default	Description
`engine`	`any`
`eventBus`	`any`
`config`	`Record<string, any>`

`PluginMetadata`

ts
interface PluginMetadata

Properties

Name	Type	Default	Description
`name`	`string`
`version`	`string`
`author?`	`string`
`description?`	`string`
`dependencies?`	`string[]`

`PluginRegistry`

ts
interface PluginRegistry

Members

register(plugin: Plugin): void
unregister(pluginName: string): void
get(pluginName: string): Plugin | undefined
has(pluginName: string): boolean
list(): PluginMetadata[]

`Point`

ts
interface Point

Properties

Name	Type	Default	Description
`x`	`number`
`y`	`number`
`z?`	`number`

`PortAlignment`

ts
interface PortAlignment

Properties

Name	Type	Default	Description
`side`	`'left' \| 'right' \| 'top' \| 'bottom'`
`offset`	`number`

`PortPosition`

ts
interface PortPosition

Properties

Name	Type	Default	Description
`x`	`number`
`y`	`number`

`RadialGradient`

ts
interface RadialGradient

Properties

Name	Type	Default	Description
`type`	`'radial'`
`cx`	`number`
`cy`	`number`
`r`	`number`
`stops`	`GradientStop[]`

`Rectangle`

Rectangle defined by position and size Used for viewport queries and spatial indexing

ts
interface Rectangle

Properties

Name	Type	Default	Description
`x`	`number`
`y`	`number`
`width`	`number`
`height`	`number`

Was this page helpful?

ADocs generated by Atloria — from the code, always in sync →