@bimetal/whiteboard-vue-components

@bimetal/whiteboard-vue-components

The default Vue 3 whiteboard for BIMETAL — a thin binding over the canonical @bimetal/whiteboard-headless controller. Every interaction decision (tool FSM, create/drag/marquee, pan/zoom math, input policy, lock) lives in the controller; this package owns only the DOM: converting clientX/Y → boardPoint through the viewport, wiring window pointer + wheel events, and rendering.

Features

• Infinite canvas — pan (wheel/trackpad) and zoom-to-cursor (Ctrl/⌘+wheel).
• Shape tools — rectangle, ellipse, diamond, text, sticky note, frame; create by dragging out the bounds (keyboard shortcuts v/r/o/d/t/n/f).
• Select + move — click, marquee, multi-select; drag a whole selection as one undo. Lock/unlock, bring-to-front / send-to-back.
• Transform — eight resize handles (rotation-aware) + a rotate knob on the single selection; a style panel (fill/stroke/width/dash/opacity/font).
• Connectors — bound edges between shapes; endpoints re-route automatically on move/resize/rotate (the path is derived, never stored).
• Freehand — a pen tool that captures a stroke and simplifies it (RDP).
• Smart guides + snapping — dragging snaps edges/centres to other shapes (zoom-aware threshold) and shows alignment guides.
• Align + distribute — align a multi-selection to its bounding box, or evenly distribute three-plus shapes — each one undo-able batch.
• Group / ungroup — group ≥2 shapes under a container (Ctrl/⌘+G, dragging it moves the whole group); ungroup dissolves it (Ctrl/⌘+Shift+G).
• Frames — drop a shape into a frame to nest it (one undo for move + reparent); drag it out to detach. The frame highlights as a drop target while dragging.
• Duplicate / copy / paste — clone the selection (and its group children) at an offset — Ctrl/⌘+D, or Ctrl/⌘+C then Ctrl/⌘+V — each one undo-able batch.
• Laser pointer — a transient fading trail for presenting (no shape, no undo).
• Comments — pin a thread to a shape or a free point; edit, resolve/reopen, delete. Shape-anchored comments track the shape; deleting it cascades them away.
• Edit text by double-click; undo toast; light/dark theming.

Event-sourced: the whole canvas is one aggregate — undo + full history for free.

Usage

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

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

<template>
  <Whiteboard :store="store" canvas-id="canvas-1" />
</template>

License

Apache-2.0