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

Overview

Elenweave is a client-only canvas workspace library. It provides a multi-graph workspace layer, a low-level graph model, a renderer/controller view for a canvas, and a navigator for camera + selection.

Workspace

Creates, renames, switches, and exports boards. Moves nodes across graphs.

Graph

Low-level nodes + edges model with ordering helpers and serialization.

View

Renders a single canvas, handles interaction, selection, export, and components.

Navigator

Camera control and traversal: pan/zoom, fit, focus, directional selection, keymap.

Scope: no backend is implied; network adapters are intentionally excluded.

Architecture

The Canvas library is split across canvas/lib/ and canvas/components/. The dev app in canvas/ is a test harness; canvas/v0/ is legacy.

Scope and responsibilities

  • Core library: data model, rendering, and interaction (no backend adapters).
  • Components: HTML-rendered widgets (inputs, charts, dashboards).
  • Dev-app: validates API changes and UI behavior.

Core modules

ElenweaveGraph

Owns nodes, edges, notifications, ordering, ID generation, overlap-avoid placement, and GraphJson serialization.

ElenweaveWorkspace

Manages multiple graphs, tracks the active board, moves nodes between graphs, and exports WorkspaceJson.

ElenweaveView

Renders the active graph, owns interaction state, and blends canvas + DOM overlays for HTML nodes.

ElenweaveNavigator

Two-tier navigation: camera pan/zoom plus graph traversal with optional UI + keyboard bindings.

Rendering layers

  • Canvas layer: grid/background, edges, text nodes, selection, and SVG nodes.
  • HTML overlay: component nodes and html-text nodes (contenteditable).
  • Link anchors opt-in via data-ew-link; drag/select via data-ew-drag and data-ew-select.

Component system

  • Register via view.registerComponent(name, { render | loader }).
  • Renderers return an element or { el, update, cleanup }.
  • Data flows through node.props (config) and node.data (state).
  • Component API includes setData, setProps, updateNode, and emit.

Import/export and theming

  • Graph/workspace import/export are JSON-only; no migration layer.
  • Notifications are included in GraphJson and WorkspaceJson.
  • Presets: blueprint, light, dark; view applies tokens to HTML overlays and nav UI.

Quick Start

Minimal setup: instantiate a workspace, mount a view, create a board, add nodes, connect an edge.

JavaScript
import { ElenweaveWorkspace, ElenweaveView } from 'elenweave';
import 'elenweave/styles.css';

const workspace = new ElenweaveWorkspace();
const view = new ElenweaveView({
  canvas: document.querySelector('#bp'),
  workspace
});

const boardId = workspace.createGraph('Board 01');
workspace.setActiveGraph(boardId);

const a = view.addNode({ text: 'Start', x: 120, y: 120 });
const b = view.addNode({ text: 'Next', x: 420, y: 200 });
view.addEdge(a, b);

Using the Bundles

Install from npm for bundlers/Node, or use the CDN IIFE for a single global. Local dist/ files are only needed if you build from source.

Install (npm)

Shell
npm i elenweave

CDN / IIFE (single global, recommended)

HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elenweave.iife.min.js"></script>
<script>
  const { ElenweaveWorkspace, ElenweaveView } = Elenweave;
  const workspace = new ElenweaveWorkspace();
  const view = new ElenweaveView({ canvas: document.querySelector('#bp'), workspace });
</script>

Local build (fallback, no CDN)

HTML
<script src="./dist/elenweave.iife.min.js"></script>

ESM/CJS (bundler or Node)

JavaScript
import { ElenweaveWorkspace, ElenweaveView } from 'elenweave';
import 'elenweave/styles.css';