API › Canvas

Elenweave Canvas API

A client-only JavaScript library under canvas/lib/, framework-agnostic, shipped as ES modules. The surface is structured around Workspace, Graph, View, and Navigator.

Client-only ES modules Multi-board workspaces Export PNG + JSON HTML nodes (DOM overlay)

Structured interaction

Theme Options

Select a preset with options.themeName (blueprint, light, dark) and override values with options.theme.

JavaScript

const view = new ElenweaveView({
  canvas,
  workspace,
  options: {
    themeName: 'light',
    theme: {
      bg: '#061526',
      nodeStroke: '#6fe7ff',
      edge: '#78dbff',
      selection: '#41ffb4'
    }
  }
});

Interaction Defaults

Default interaction model for canvas nodes and navigation.

Drag to move nodes.
Resize from corners.
Shift+drag to link (or toggle setLinkMode(true)).
Wheel to zoom, Space+drag or middle mouse to pan.
Double-click to edit text nodes.
Set pulse: true on nodes or edges to enable a gentle border/edge pulse.
Set fixed: true on a node to disable dragging and resizing.

Context Menu

Right-click on empty canvas to open the context menu. Disable via options.contextMenu: false or view.disableContextMenu().

JavaScript

view.setContextMenuConfig({
  enabled: true,
  items: [
    { id: 'export-png', label: 'Export as PNG', action: 'export-png' },
    { id: 'export-json', label: 'Export as JSON', action: 'export-json' },
    { id: 'add', label: 'Add', submenu: 'add' }
  ],
  addItems: [
    { label: 'Editable Text', nodeType: 'html-text', size: { w: 320, h: 160 } },
    { label: 'Option Picker', nodeType: 'html', component: 'OptionPicker' }
  ],
  onAction: ({ item, result }) => console.log(item, result)
});

Add submenu items spawn a node at the click location (auto-placement still avoids overlap).

Virtualization

For large graphs, enable virtualization to render only nodes within the viewport bounds (plus padding).

JavaScript

view.setVirtualization({ enabled: true, padding: 240, edges: true });

edges: when true, draws edges if either endpoint is visible. When disabled, all edges render regardless of visibility.