@bimetal/whiteboard-svelte-components

The default Svelte 5 whiteboard for BIMETAL — a thin binding over the canonical @bimetal/whiteboard-headless controller. Every interaction decision (the tool FSM, create/drag/marquee, resize/rotate math, pan/zoom, connector routing, smart-guide snapping, group cohesion, frame reparenting, input parsing) lives in the controller; this component only renders DOM, registers window listeners, hit-tests pointer drags, and normalizes keyboard events. It is behaviorally identical to the React and Vue ports and shares the same DOM classes and CSS (@bimetal/whiteboard-themes).

Features

• Infinite canvas — pan (wheel) and zoom (Ctrl/Cmd+wheel) with a grid that tracks the camera; reset to 100%.
• Shapes — note/rect/ellipse/diamond/text/frame, created by dragging an armed tool; real drag move, eight-handle resize, and a rotate knob (15°-snapped), all rotation-aware in the controller.
• Connectors with arrowheads, freehand draw, a laser pointer overlay, smart alignment guides, align/distribute, group/ungroup, frames with reparent-on-drop, comments with anchored pins + a thread editor.
• Style panel (fill/stroke/width/dash/opacity/font) that forwards raw input to the controller for one undo-able batch; lock, z-order, duplicate, an undo toast, light/dark.
• Keyboard a11y — the controller owns every hotkey (undo, delete, escape, …).

Event-sourced: the whole canvas is one aggregate, every change is an event, and undo + full history come for free.

Install

npm i @bimetal/whiteboard-svelte-components

Usage

<script lang="ts">
  import { Whiteboard } from '@bimetal/whiteboard-svelte-components';
  import '@bimetal/whiteboard-svelte-components/styles';
  import { createWhiteboardStore } from '@bimetal/whiteboard-data';

  const store = createWhiteboardStore();
  // …seed the canvas…
</script>

<Whiteboard {store} canvasId="canvas-1" />

Props

| Prop | Type | Default | Description | | ---------- | ------------------------- | ------- | ------------------------------------------------------------------------ | | store | WhiteboardStore | — | The canvas store. Immutable after mount (the controller is created once). | | canvasId | string | — | Which canvas to render. Immutable after mount. | | config | WhiteboardConfigInput | — | Locale + metric overrides, merged with the defaults. | | darkMode | boolean | false | Apply the dark token set (data-theme="dark"). | | onError | (err: unknown) => void | — | Surfaces infrastructure errors (a domain rejection is an undo toast). |

License

PolyForm-Noncommercial-1.0.0