Types

Import these from @grafloria/engine.

Types

Alignment

Also has every member of String, listed on its own entry.

ts
Copy
type Alignment = 'left' | 'right' | 'top' | 'bottom' | 'center';

DiagramEventType

Also has every member of String, listed on its own entry.

ts
Copy
type DiagramEventType = typeof DiagramEventTypes[keyof typeof DiagramEventTypes];

Direction

Also has every member of String, listed on its own entry.

ts
Copy
type Direction = 'horizontal' | 'vertical' | 'both';

EventHandler

ts
Copy
type EventHandler<T = any> = (event: DiagramEvent<T>) => void;

LayoutConfig

Also has every member of FlexboxLayoutConfig, listed on its own entry.

Union type for all layout configurations

ts
Copy
type LayoutConfig = FlexboxLayoutConfig | GridLayoutConfig;

LayoutType

Also has every member of String, listed on its own entry.

Layout type for containers

ts
Copy
type LayoutType = 'none' | 'flexbox' | 'grid';

LinkLabelSlot

Also has every member of String, listed on its own entry.

The three label SLOTS along an edge (ngx-vflow ships exactly these). A slot is shorthand for a position: start = 0.12, center = 0.5, end = 0.88 — pulled off the very endpoints so a slot label never sits under an arrowhead. An explicit position still wins.

ts
Copy
type LinkLabelSlot = 'start' | 'center' | 'end';

LODFeature

Also has every member of String, listed on its own entry.

A visual feature that a {@link LODTier} may gate on. Renderers ask diagram.shouldRender(feature, lod) instead of hardcoding zoom breakpoints.

THE ECONOMIC FEATURES. Everything above the divider gates a DECORATION: dropping it removes a few attributes or a child VNode at the very end of the pipeline, and the work that produced them ran anyway. That made LOD cosmetic, not economic: a 10k-node zoom-out frame took 63 SECONDS because the renderer was still routing every edge around every obstacle to place lines whose detours were sub-pixel on screen.

The three below gate WORK, not paint. They are what makes a far-zoom frame actually cheap, and they are the reason LODFeature is worth having at all.

ts
Copy
type LODFeature =

  | 'labels'
  | 'icons'
  | 'borders'
  | 'shadows'
  | 'ports'
  | 'decorations'
  | 'handles'

  | 'routing'

  | 'link-detail'

  | 'gradients';

LODLevel

Also has every member of String, listed on its own entry.

Level of Detail tier name.

Widened from the fixed 'high' | 'medium' | 'low' union to string so apps can register their own tiers through {@link LODConfig}. The three built-in tiers keep those exact names, so every historical lod === 'high' / lod !== 'low' style check keeps working unchanged.

ts
Copy
type LODLevel = string;

NodeSelectionLook

Also has every member of String, listed on its own entry.

How a selected node shows it is selected.

• 'both' (default): the body takes the theme's selected colours AND a ring is drawn 3px outside it.
• 'border': only the node's own border changes (the selected colour, 2px); its fill stays and no ring is drawn — the card look.
• 'ring': only the ring; the body keeps its own paint.

ts
Copy
type NodeSelectionLook = 'both' | 'border' | 'ring';

RoutingStrategy

Also has every member of String, listed on its own entry.

ts
Copy
type RoutingStrategy = 'direct' | 'orthogonal' | 'smooth' | 'smart';