Import these from @grafloria/renderer.
Interfaces
SelectPropertyDefinition
Also has every member of PropertyDefinition, listed on its own entry.
Select (dropdown) property definition with options
tsinterface SelectPropertyDefinition extends PropertyDefinition
Properties
| Name | Type | Default | Description |
|---|---|---|---|
editor | 'select' | Editor type to use for this property | |
options | SelectOption[] | ||
validation? | { required?: boolean; } | Validation rules for this property |
Example
typescriptconst 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.
tsinterface SemanticPalette
Properties
| Name | Type | Default | Description |
|---|---|---|---|
critical? | string | Blocking / fatal — the strongest attention colour. | |
warning? | string | Non-blocking problem. | |
success? | string | Healthy / passing. | |
info? | string | Neutral information. | |
neutral? | string | De-emphasised / inactive. | |
accent? | string | The host's brand accent. |
SliderPropertyDefinition
Also has every member of PropertyDefinition, listed on its own entry.
Slider (range) property definition
tsinterface SliderPropertyDefinition extends PropertyDefinition
Properties
| Name | Type | Default | Description |
|---|---|---|---|
editor | 'slider' | Editor type to use for this property | |
min | number | ||
max | number | ||
step? | number | ||
defaultValue? | number | Default value if property is not set |
Example
typescriptconst prop: SliderPropertyDefinition = {
key: 'opacity',
label: 'Opacity',
editor: 'slider',
min: 0,
max: 100,
step: 1,
defaultValue: 100
};
Spacing
Spacing theme (in pixels)
tsinterface Spacing
Properties
| Name | Type | Default | Description |
|---|---|---|---|
xs | number | ||
sm | number | ||
md | number | ||
lg | number | ||
xl | number |
StringPropertyDefinition
Also has every member of PropertyDefinition, listed on its own entry.
String property definition with string-specific validation
tsinterface StringPropertyDefinition extends PropertyDefinition
Properties
| Name | Type | Default | Description |
|---|---|---|---|
editor | 'string' | Editor type to use for this property | |
validation? | { required?: boolean; minLength?: number; maxLength?: number; pattern?: string; } | Validation rules for this property |
Example
typescriptconst 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
tsinterface TextAreaPropertyDefinition extends PropertyDefinition
Properties
| Name | Type | Default | Description |
|---|---|---|---|
editor | 'textarea' | Editor type to use for this property | |
validation? | { required?: boolean; minLength?: number; maxLength?: number; } | Validation rules for this property |
Example
typescriptconst prop: TextAreaPropertyDefinition = {
key: 'description',
label: 'Description',
editor: 'textarea',
validation: {
maxLength: 500
}
};
TextMetrics
Text measurement result.
tsinterface TextMetrics
Properties
| Name | Type | Default | Description |
|---|---|---|---|
width | number | ||
height | number | ||
baseline | number |
TextStyle
Text styling for measurement.
tsinterface TextStyle
Properties
| Name | Type | Default | Description |
|---|---|---|---|
fontFamily? | string | ||
fontSize? | number | ||
fontWeight? | string | number | ||
fontStyle? | string | ||
letterSpacing? | number | ||
lineHeight? | number |
Theme
Complete theme definition Supports both CSS Variables (SVG+HTML) and Programmatic (Canvas)
tsinterface Theme
Properties
| Name | Type | Default | Description |
|---|---|---|---|
name | string | Theme name (e.g., "Light", "Dark", "High Contrast") | |
version | string | Theme version | |
colors | ColorPalette | Color palette | |
typography | Typography | Typography settings | |
spacing | Spacing | Spacing scale | |
effects | Effects | Visual effects (shadows, border radius, opacity) | |
nodes | { default: NodeStyleTheme; [nodeType: string]: Partial<NodeStyleTheme>; } | Node type defaults - default: Base styles for all nodes - [nodeType]: Type-specific overrides | |
links | { default: LinkStyleTheme; [linkType: string]: Partial<LinkStyleTheme>; } | Link type defaults - default: Base styles for all links - [linkType]: Type-specific overrides | |
ports | PortThemeConfig | Port configuration | |
categories? | SemanticPalette | SEMANTIC / CATEGORY PALETTE — the caller's OWN vocabulary of colours. | |
numbers? | NumberScale | NAMED NUMERIC SCALE — the numeric analogue of {@link categories}. |
Typography
Typography theme
tsinterface Typography
Properties
| Name | Type | Default | Description |
|---|---|---|---|
fontFamily | { default: string; mono: string; } | Font families | |
fontSize | { xs: number; sm: number; md: number; lg: number; xl: number; } | Font sizes (in pixels) | |
fontWeight | { normal: number; medium: number; bold: number; } | Font weights | |
lineHeight | { tight: number; normal: number; relaxed: number; } | Line heights |
ValidationError
Validation error returned from validation functions
tsinterface ValidationError
Properties
| Name | Type | Default | Description |
|---|---|---|---|
message | string | Human-readable error message | |
code? | string | Optional error code for programmatic handling |
Example
typescriptconst error: ValidationError = {
message: 'Value must be positive',
code: 'POSITIVE_VALUE_REQUIRED'
};
ValidationResult
Result of running validation on a property value
tsinterface ValidationResult
Properties
| Name | Type | Default | Description |
|---|---|---|---|
valid | boolean | Whether the value is valid | |
errors | ValidationError[] | Array of validation errors (empty if valid) |
Example
typescriptconst result: ValidationResult = {
valid: false,
errors: [{ message: 'Required field is missing' }]
};
VNode
Virtual Node - Abstract representation of visual element Framework-agnostic, serializable, diffable
Supports both SVG and Canvas rendering modes, as well as HTML content via foreignObject for embedding rich components.
tsinterface VNode
Properties
| Name | Type | Default | Description |
|---|---|---|---|
type | VNodeType | Element type: 'svg', 'g', 'rect', 'circle', 'path', 'text', 'foreignObject', etc. | |
props | VNodeProps | Element properties (attributes, styles, event handlers) | |
children? | VNode[] | Optional children VNodes (for hierarchical structures) | |
key? | string | Optional unique key for diffing optimization Used by renderers to efficiently update only changed nodes |
Was this page helpful?