Types & Interfaces

All canonical data types, geometric primitives, and state models exported by the Canvus SDK.

Geometric Primitives

`Vec2`

A 2D point or vector.

interface Vec2 {
  readonly x: number
  readonly y: number
}

`Rect`

An axis-aligned bounding rectangle.

interface Rect {
  readonly x: number
  readonly y: number
  readonly width: number
  readonly height: number
}

`ViewportMatrix`

The current zoom/pan state of the workspace viewport.

interface ViewportMatrix {
  scale: number     // Zoom level (clamped between ZOOM_MIN and ZOOM_MAX)
  offsetX: number   // Horizontal pan translation
  offsetY: number   // Vertical pan translation
}

Node Models

`WebHTMLNode`

Input data for adding a content node to the workspace.

interface WebHTMLNode {
  id: string                          // Unique node identifier
  rawMarkup: string                   // The user's raw HTML markup
  currentRect: Rect | null            // Initial position/size (canvas-space)
  parentId?: string | null            // Parent node ID (null = root)
  childIds?: readonly string[]        // Ordered child node IDs
  layoutMode?: LayoutMode | null      // Display mode hint
  depth?: number                      // Tree depth (0 for root)
}

`ResolvedNode`

A fully-resolved node with all optional fields populated. Returned by ws.getNodes().

interface ResolvedNode {
  readonly id: string
  rawMarkup: string
  currentRect: Rect | null
  parentId: string | null
  childIds: string[]
  layoutMode: LayoutMode | null
  depth: number
}

Interaction State

`DragHandleState`

Tracks the current drag/resize interaction state.

interface DragHandleState {
  activeMode: InteractionMode
  targetNodeId: string | null
  selectedAnchor: ResizeAnchor | null
  initialPointerPos: Vec2
}

`Operation`

A serialized, discrete mutation payload for undo/redo integration.

interface Operation {
  type: OperationType
  nodeId: string
  payload: any
  undoPayload: any
}

`CanvusTool`

Supported drawing tool types.

type CanvusTool = "box" | "text" | null

Enumerations

`LayoutMode`

CSS display mode types detected by the layout introspection engine.

type LayoutMode = "block" | "flex" | "grid" | "inline" | "inline-flex" | "inline-grid" | "none"

`ResizeAnchor`

The eight directional resize handle positions.

type ResizeAnchor = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w"

`InteractionMode`

The current workspace interaction state.

type InteractionMode =
  | "pan"
  | "drag-node"
  | "resize-node"
  | "reparent"
  | "reorder"
  | "select-marquee"
  | "adjust-spacing"
  | "draw-node"
  | "resize-radius"
  | null

`OperationType`

The types of operations that can be generated by visual gestures.

type OperationType =
  | "update-style"
  | "update-classes"
  | "reparent"
  | "reorder"
  | "update-text"
  | "create-node"
  | "delete-node"

Constants

const ZOOM_MIN = 0.1   // Minimum zoom multiplier
const ZOOM_MAX = 4.0   // Maximum zoom multiplier

Factory Functions

`createIdleDragState()`

Returns a clean, non-active drag state.

function createIdleDragState(): DragHandleState

`createDefaultViewport()`

Returns the default viewport (scale: 1, offset: 0, 0).

function createDefaultViewport(): ViewportMatrix

`resolveNode(node)`

Normalizes a WebHTMLNode into a ResolvedNode by filling in defaults for optional fields.

function resolveNode(node: Readonly<WebHTMLNode>): ResolvedNode

Configuration & Callbacks Viewport Math