@bimetal/whiteboard-vanilla-components

Zero-framework whiteboard binding. mountWhiteboard(target, options) constructs the canonical createWhiteboardController from @bimetal/whiteboard-headless and renders its snapshot with plain DOM — no React, Vue, Svelte or Angular. It is a peer of the whiteboard-{react,vue,svelte,angular}-components packages: behaviourally identical and rendering the same bm-wb* DOM, so the shared @bimetal/whiteboard-themes CSS styles it identically.

This is the strictest port: with no framework reconciler, the binding does its own keyed reconciliation. On every snapshot change it diffs the shapes / connectors / comments / guides lists by id/key, reuses the existing DOM nodes and only patches the changed attributes — never an innerHTML rebuild, which would destroy the caret and focus of an open comment editor or text dialog.

The controller owns every interaction decision (tool FSM, create/drag/marquee, pan/zoom math, input policy, undo). This binding only turns snapshot → DOM and DOM event → intent. Its single piece of geometry is clientX/Y → boardPoint via screenToBoard; everything else (connector paths, freehand paths, dash arrays, comment anchors, screen positions) is derived through the headless helpers.

Usage

import { createWhiteboardStore, createCanvas } from '@bimetal/whiteboard-data';
import { mountWhiteboard } from '@bimetal/whiteboard-vanilla-components';
import '@bimetal/whiteboard-vanilla-components/styles';

const store = createWhiteboardStore();
await store.dispatch(createCanvas({ id: 'c1', shapes: {}, order: [], connectors: {}, comments: {} }));

const board = mountWhiteboard(document.getElementById('app')!, { store, canvasId: 'c1' });
// …
board.destroy();

Options

| Option | Type | Notes | | ----------- | ------------------------- | ------------------------------------------------ | | store | WhiteboardStore | The canvas store. Immutable after mount. | | canvasId | string | Which canvas to render. Immutable after mount. | | config | WhiteboardConfigInput? | Locale + metric overrides, merged with defaults. | | darkMode | boolean? | Apply the dark token set (data-theme="dark"). | | onError | (err: unknown) => void? | Surfaces infrastructure errors. |

mountWhiteboard returns { getController(), destroy() }.

License

Apache-2.0