Skip to content
D
Documentation

Ext — types

reference
1 min readUpdated

Types

Import these from @grafloria/renderer.

Types

AnchorFn

ts
type AnchorFn = (ctx: AnchorContext) => AnchorResult;

BuiltinToolId

The built-in gesture tools, by name. A registration may REPLACE any of them.

ts
type BuiltinToolId = 'select' | 'node-drag' | 'link-draw' | 'marquee' | 'pan';

CapabilityName

The names an extension may request. Mirrors the keys of {@link ExtensionCapabilities}.

ts
type CapabilityName =
  | 'shapes'
  | 'links'
  | 'routers'
  | 'templates'
  | 'animations'
  | 'tools'
  | 'panels';

ConnectionPointFn

Return null to decline and fall through to the default pipeline.

ts
type ConnectionPointFn = (ctx: ConnectionPointContext) => ConnectionPointResult | null;

ConnectionValidator

Return false (or a reason string) to veto.

ts
type ConnectionValidator = (candidate: ConnectionCandidate) => boolean | string;

ConnectorFn

Must return a complete SVG path d.

ts
type ConnectorFn = (ctx: ConnectorContext) => string;

Disposer

The universal teardown handle. Idempotent by contract.

ts
type Disposer = () => void;

ExtSide

ts
type ExtSide = 'left' | 'right' | 'top' | 'bottom';

LazyExtension

A lazily-loaded extension: nothing is imported until activate(id).

ts
type LazyExtension<C extends CapabilityName = CapabilityName> = () => Promise<
  Extension<C> | { default: Extension<C> }
>;

NodeComponentRegistry

type → component.

ts
type NodeComponentRegistry = Record<string, NodeComponent<never>>;

NodeRenderFn

A component's render function.

Return a VNode to have the renderer patch it (the framework-agnostic path), or take the HTMLElement and own it yourself (the React/Angular/Vue path — mount a portal into it and return void).

ts
type NodeRenderFn<D = Record<string, unknown>> = (
  props: NodeComponentProps<D>,
  element: HTMLElement
) => VNode | void;

PortalPlacement

Corner placements for a screen-space portal.

ts
type PortalPlacement =
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'
  | 'top-center'
  | 'bottom-center'
  | 'center'
  /** No positioning at all — you own `style`/`class`. */
  | 'none';

Selector

ts
type Selector<T> = (snapshot: DiagramSnapshot) => T;

ToolId

ts
type ToolId = BuiltinToolId | (string & {});

Was this page helpful?