interfaces b–s

Import these from @grafloria/renderer.

Interfaces

BooleanPropertyDefinition

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

Boolean property definition

ts
Copy
interface BooleanPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: BooleanPropertyDefinition = {
  key: 'enabled',
  label: 'Enabled',
  editor: 'boolean',
  defaultValue: true
};

BoundingBox

Bounding box result.

ts
Copy
interface BoundingBox

Properties

CanvasRendererConfig

Canvas Renderer Configuration

ts
Copy
interface CanvasRendererConfig

Properties

ColorPalette

Color palette for theme

ts
Copy
interface ColorPalette

Properties

ColorPropertyDefinition

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

Color picker property definition

ts
Copy
interface ColorPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: ColorPropertyDefinition = {
  key: 'backgroundColor',
  label: 'Background Color',
  editor: 'color',
  defaultValue: '#FFFFFF'
};

ComplexPropertyCondition

Complex condition combining multiple simple conditions

ts
Copy
interface ComplexPropertyCondition

Properties

Example

AND condition

typescript
Copy
const condition: ComplexPropertyCondition = {
  and: [
    { property: 'enabled', operator: '==', value: true },
    { property: 'nodeCount', operator: '>', value: 10 }
  ]
};

Example

OR condition

typescript
Copy
const condition: ComplexPropertyCondition = {
  or: [
    { property: 'type', operator: '==', value: 'table' },
    { property: 'type', operator: '==', value: 'view' }
  ]
};

DatePropertyDefinition

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

Date picker property definition

ts
Copy
interface DatePropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: DatePropertyDefinition = {
  key: 'birthDate',
  label: 'Birth Date',
  editor: 'date',
  validation: { required: true }
};

DateTimePropertyDefinition

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

DateTime picker property definition

ts
Copy
interface DateTimePropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: DateTimePropertyDefinition = {
  key: 'createdAt',
  label: 'Created At',
  editor: 'datetime',
  defaultValue: new Date().toISOString()
};

Effects

Effects theme (shadows, border radius, opacity)

ts
Copy
interface Effects

Properties

FilePropertyDefinition

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

File upload property definition

ts
Copy
interface FilePropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: FilePropertyDefinition = {
  key: 'avatar',
  label: 'Avatar Image',
  editor: 'file',
  accept: 'image/*',
  multiple: false
};

HighlightConnectedOptions

How highlightConnected draws the selected nodes' lines. Every field is optional.

ts
Copy
interface HighlightConnectedOptions

Properties

IRenderer

Renderer interface — the contract for a DIAGRAM renderer: it turns the model plus a viewport into a visual representation (a VNode tree in SVG mode).

This is the only renderer interface. Nothing in production implemented it: the real VNode → DOM layer is the patcher in vnode/patch.ts. The stack is deleted; the useful vocabulary it defined is kept below, as OPTIONAL members here, so capability detection / export / hit-testing / text measurement have a home when a renderer actually implements them.

ts
Copy
interface IRenderer

Properties

Members

• render(viewport: Rectangle, zoom: number): VNode | void — Render diagram to visual representation
• getPerformanceMetrics(): PerformanceMetrics — Get performance metrics
• dispose(): void — Dispose renderer and clean up resources
• hitTest?(x: number, y: number): VNode | null — Optional: element at a coordinate (selection, hover, click routing).
• measureText?(text: string, style: TextStyle): TextMetrics — Optional: measure text for layout (wrapping, ellipsis, shape-fit). Implementations are expected to cache.
• export?(format: ExportFormat, options?: ExportOptions): Promise<string> — Optional: export the rendered diagram as an image or SVG string.

JsonPropertyDefinition

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

JSON editor property definition

ts
Copy
interface JsonPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: JsonPropertyDefinition = {
  key: 'metadata',
  label: 'Metadata',
  editor: 'json',
  defaultValue: { version: '1.0' }
};

LinkStyleTheme

Link style from theme

ts
Copy
interface LinkStyleTheme

Properties

MultiSelectPropertyDefinition

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

Multi-select property definition with options

ts
Copy
interface MultiSelectPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: MultiSelectPropertyDefinition = {
  key: 'tags',
  label: 'Tags',
  editor: 'multiselect',
  options: [
    { value: 'important', label: 'Important' },
    { value: 'urgent', label: 'Urgent' },
    { value: 'review', label: 'Needs Review' }
  ]
};

NodeStyleTheme

Node style from theme

ts
Copy
interface NodeStyleTheme

Properties

NumberPropertyDefinition

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

Number property definition with number-specific validation

ts
Copy
interface NumberPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: NumberPropertyDefinition = {
  key: 'port',
  label: 'Port Number',
  editor: 'number',
  validation: {
    required: true,
    min: 1,
    max: 65535,
    step: 1
  }
};

NumberScale

A named numeric scale (see {@link Theme.numbers}). Values are unitless — they are consumed as SVG lengths (stroke-width), which accept plain numbers.

ts
Copy
interface NumberScale

Properties

PerformanceMetrics

Performance metrics returned by renderer

ts
Copy
interface PerformanceMetrics

Properties

PortThemeConfig

Port theme configuration

ts
Copy
interface PortThemeConfig

Properties

PropertyCondition

Simple condition for property visibility

ts
Copy
interface PropertyCondition

Properties

Example

Equality condition

typescript
Copy
const condition: PropertyCondition = {
  property: 'useCustomColor',
  operator: '==',
  value: true
};

Example

Comparison condition

typescript
Copy
const condition: PropertyCondition = {
  property: 'nodeCount',
  operator: '>',
  value: 100
};

Example

Contains condition

typescript
Copy
const condition: PropertyCondition = {
  property: 'tags',
  operator: 'contains',
  value: 'important'
};

PropertyDisplayOptions

Display options for property editors

ts
Copy
interface PropertyDisplayOptions

Properties

PropertyGroup

Property group for organizing related properties

Groups allow properties to be organized into collapsible sections in the UI. Each group has a name (used for referencing in property definitions) and a label (displayed to the user).

ts
Copy
interface PropertyGroup

Properties

Example

Basic group

typescript
Copy
const group: PropertyGroup = {
  name: 'appearance',
  label: 'Appearance'
};

Example

Group with all options

typescript
Copy
const group: PropertyGroup = {
  name: 'advanced',
  label: 'Advanced Settings',
  description: 'Advanced configuration options',
  collapsed: true,
  order: 10,
  icon: 'settings'
};

PropertySchema

Complete property schema for a node type

A property schema defines how all properties of a node type should be edited in the UI. It includes:

• Property definitions (what to edit and how)
• Optional groups (for organization)
• Optional metadata (versioning, documentation)

ts
Copy
interface PropertySchema

Properties

Example

Simple schema

typescript
Copy
const schema: PropertySchema = {
  properties: [
    {
      key: 'name',
      label: 'Name',
      editor: 'string',
      validation: { required: true }
    },
    {
      key: 'enabled',
      label: 'Enabled',
      editor: 'boolean'
    }
  ]
};

Example

Complete schema with groups

typescript
Copy
const schema: PropertySchema = {
  properties: [
    {
      key: 'tableName',
      label: 'Table Name',
      editor: 'string',
      validation: { required: true },
      group: 'basic'
    },
    {
      key: 'columns',
      label: 'Columns',
      editor: 'json',
      group: 'schema'
    },
    {
      key: 'primaryKey',
      label: 'Primary Key',
      editor: 'select',
      options: [],
      group: 'schema'
    }
  ],
  groups: [
    { name: 'basic', label: 'Basic Information', order: 1 },
    { name: 'schema', label: 'Schema Definition', order: 2 }
  ],
  metadata: {
    version: '1.0.0',
    author: 'System',
    description: 'Property schema for database tables'
  }
};

Rectangle

Rectangle defined by position and size Used for viewport queries and rendering bounds

ts
Copy
interface Rectangle

Properties

RendererCapabilities

Renderer capability flags for runtime feature detection.

ts
Copy
interface RendererCapabilities

Properties

SelectOption

Select option for dropdown editors

ts
Copy
interface SelectOption

Properties