Interfaces B–T

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

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

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'
};

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

SelectPropertyDefinition

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

Select (dropdown) property definition with options

ts
Copy
interface SelectPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: SelectPropertyDefinition = {
  key: 'nodeType',
  label: 'Node Type',
  editor: 'select',
  options: [
    { value: 'table', label: 'Table' },
    { value: 'view', label: 'View' },
    { value: 'procedure', label: 'Stored Procedure', disabled: true }
  ],
  validation: { required: true }
};

SemanticPalette

The host's semantic colour vocabulary (see {@link Theme.categories}). Open-ended: the built-in themes ship the names below, and callers add theirs.

ts
Copy
interface SemanticPalette

Properties

SliderPropertyDefinition

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

Slider (range) property definition

ts
Copy
interface SliderPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: SliderPropertyDefinition = {
  key: 'opacity',
  label: 'Opacity',
  editor: 'slider',
  min: 0,
  max: 100,
  step: 1,
  defaultValue: 100
};

Spacing

Spacing theme (in pixels)

ts
Copy
interface Spacing

Properties

StringPropertyDefinition

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

String property definition with string-specific validation

ts
Copy
interface StringPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: StringPropertyDefinition = {
  key: 'tableName',
  label: 'Table Name',
  editor: 'string',
  validation: {
    required: true,
    minLength: 3,
    maxLength: 50,
    pattern: '^[a-zA-Z][a-zA-Z0-9_]*$'
  }
};

TextAreaPropertyDefinition

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

Textarea (multi-line text) property definition

ts
Copy
interface TextAreaPropertyDefinition extends PropertyDefinition

Properties

Example

typescript
Copy
const prop: TextAreaPropertyDefinition = {
  key: 'description',
  label: 'Description',
  editor: 'textarea',
  validation: {
    maxLength: 500
  }
};

TextMetrics

Text measurement result.

ts
Copy
interface TextMetrics

Properties