@bimetal/whiteboard-angular-components

The default Angular 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, snap guides, align/distribute, group cohesion, input parsing) lives in the controller; this package owns only the DOM: it converts the single piece of geometry (screenToBoard), wires pointer + wheel events, and renders the snapshot. Ships as standalone components.

Features

• Infinite canvas — pan (wheel/trackpad) and zoom (Ctrl/Cmd + wheel), a grid that tracks the camera, reset-to-100%.
• Shapes — rect / ellipse / diamond / text / note / frame, real drag-move, eight-handle resize, and a 15°-snapped rotate knob.
• Connectors with routed elbow paths + arrowheads, freehand draw, a laser pointer (transient top overlay), and smart guides while dragging.
• Align / distribute, group / ungroup, frames with reparent-on-drop, comments (pins + thread editor), a style panel, a text dialog, undo.
• Keyboard a11y — the full key map is forwarded to the controller.

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

Usage

import { Component } from '@angular/core';
import { WhiteboardComponent } from '@bimetal/whiteboard-angular-components';
import { createWhiteboardStore } from '@bimetal/whiteboard-data';
import '@bimetal/whiteboard-angular-components/styles';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WhiteboardComponent],
  template: `<bm-whiteboard [store]="store" canvasId="canvas-1"></bm-whiteboard>`,
})
export class AppComponent {
  store = createWhiteboardStore();
  // …seed the canvas…
}

The component is bm-whiteboard. Pass [darkMode]="true" for the dark token set, [config] for locale/metric overrides, and [onError] to surface infrastructure errors.

License

PolyForm-Noncommercial-1.0.0