npm - @bpmnkit/canvas - Versions diffs - 0.0.8 - Mend

@bpmnkit/canvas 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/css.js ADDED Viewed

@@ -0,0 +1,226 @@
+/** ID used to prevent duplicate style injection. */
+export const STYLE_ID = "bpmnkit-canvas-styles-v1";
+/** Complete CSS for the BpmnCanvas component, injected once into `<head>`. */
+export const CANVAS_CSS = `
+.bpmnkit-canvas-host {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  background: var(--bpmnkit-bg, #f8f9fa);
+}
+.bpmnkit-canvas-host *,
+.bpmnkit-canvas-host *::before,
+.bpmnkit-canvas-host *::after {
+  box-sizing: border-box;
+}
+.bpmnkit-canvas-host > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+}
+.bpmnkit-canvas-host.is-panning > svg {
+  cursor: grabbing;
+}
+.bpmnkit-canvas-host > svg:focus {
+  outline: none;
+}
+/* ── Shapes ─────────────────────────────────────────────────────── */
+.bpmnkit-shape {
+  cursor: pointer;
+  outline: none;
+}
+.bpmnkit-shape:focus .bpmnkit-shape-body,
+.bpmnkit-shape:focus .bpmnkit-event-body,
+.bpmnkit-shape:focus .bpmnkit-gw-body,
+.bpmnkit-shape:focus .bpmnkit-pool-body,
+.bpmnkit-shape:focus .bpmnkit-lane-body {
+  stroke: var(--bpmnkit-focus, #0066cc);
+  stroke-width: 2.5;
+}
+.bpmnkit-shape.bpmnkit-selected .bpmnkit-shape-body,
+.bpmnkit-shape.bpmnkit-selected .bpmnkit-event-body,
+.bpmnkit-shape.bpmnkit-selected .bpmnkit-gw-body,
+.bpmnkit-shape.bpmnkit-selected .bpmnkit-pool-body,
+.bpmnkit-shape.bpmnkit-selected .bpmnkit-lane-body {
+  stroke: var(--bpmnkit-highlight, #0066cc);
+  stroke-width: 2.5;
+}
+.bpmnkit-shape-body,
+.bpmnkit-event-body,
+.bpmnkit-gw-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-end-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 3;
+}
+.bpmnkit-event-inner {
+  fill: none;
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-event-inner-dashed {
+  fill: none;
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-dasharray: 4 2;
+}
+.bpmnkit-eventsubprocess-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-dasharray: 5 3;
+}
+.bpmnkit-callactivity-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 3;
+}
+/* ── Icons ───────────────────────────────────────────────────────── */
+.bpmnkit-icon {
+  fill: none;
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.bpmnkit-icon-solid {
+  fill: var(--bpmnkit-shape-stroke, #404040);
+  stroke: none;
+  pointer-events: none;
+}
+.bpmnkit-gw-marker {
+  fill: var(--bpmnkit-shape-stroke, #404040);
+  stroke: none;
+  pointer-events: none;
+}
+.bpmnkit-gw-marker-stroke {
+  fill: none;
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+/* ── Pool / Lane ─────────────────────────────────────────────────── */
+.bpmnkit-pool-body,
+.bpmnkit-lane-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-pool-header,
+.bpmnkit-lane-header {
+  fill: var(--bpmnkit-pool-header, rgba(0,0,0,0.04));
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+[data-theme="dark"] .bpmnkit-pool-header,
+[data-theme="dark"] .bpmnkit-lane-header {
+  fill: rgba(255,255,255,0.06);
+}
+/* ── Message flow ─────────────────────────────────────────────────── */
+.bpmnkit-msgflow-path {
+  fill: none;
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-dasharray: 6 3;
+}
+/* ── Edges ───────────────────────────────────────────────────────── */
+.bpmnkit-edge {
+  cursor: pointer;
+}
+.bpmnkit-edge-path {
+  fill: none;
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-edge-assoc {
+  fill: none;
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-dasharray: 5 3;
+}
+.bpmnkit-edge-default-slash {
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-arrow-fill {
+  fill: var(--bpmnkit-flow-stroke, #404040);
+}
+/* ── Labels ─────────────────────────────────────────────────────── */
+.bpmnkit-label {
+  fill: var(--bpmnkit-text, #333333);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 11px;
+  text-anchor: middle;
+  dominant-baseline: central;
+  pointer-events: none;
+  /* White halo behind text so labels never visually merge with edge lines */
+  paint-order: stroke;
+  stroke: var(--bpmnkit-bg, #f8f9fa);
+  stroke-width: 4px;
+  stroke-linejoin: round;
+}
+/* ── Light theme (default) ───────────────────────────────────────── */
+.bpmnkit-canvas-host {
+  --bpmnkit-bg: #f8f9fa;
+  --bpmnkit-grid: rgba(0, 0, 0, 0.14);
+  --bpmnkit-shape-fill: #ffffff;
+  --bpmnkit-shape-stroke: #404040;
+  --bpmnkit-flow-stroke: #404040;
+  --bpmnkit-text: var(--bpmnkit-fg, #333333);
+  --bpmnkit-highlight: var(--bpmnkit-accent, #1a56db);
+  --bpmnkit-focus: #0066cc;
+  --bpmnkit-overlay-bg: rgba(248, 249, 250, 0.92);
+  --bpmnkit-overlay-border: rgba(0, 0, 0, 0.12);
+}
+/* ── Dark theme ──────────────────────────────────────────────────── */
+.bpmnkit-canvas-host[data-theme="dark"] {
+  --bpmnkit-bg: #0d0d16;
+  --bpmnkit-grid: rgba(255, 255, 255, 0.07);
+  --bpmnkit-shape-fill: #1e1e2e;
+  --bpmnkit-shape-stroke: #8888bb;
+  --bpmnkit-flow-stroke: #7777aa;
+  --bpmnkit-text: var(--bpmnkit-fg, #cdd6f4);
+  --bpmnkit-highlight: var(--bpmnkit-accent-bright, #89b4fa);
+  --bpmnkit-focus: #89b4fa;
+  --bpmnkit-overlay-bg: rgba(30, 30, 46, 0.92);
+  --bpmnkit-overlay-border: rgba(255, 255, 255, 0.1);
+}
+.bpmnkit-canvas-host[data-theme="dark"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-canvas-host[data-theme="dark"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }
+`;
+/**
+ * Injects the canvas stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export function injectStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CANVAS_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,72 @@
+/**
+ * @bpmnkit/canvas — a high-performance, accessible BPMN 2.0 diagram viewer.
+ *
+ * ## Features
+ * - **Zero external dependencies** (only `@bpmnkit/core` for XML parsing)
+ * - **Infinite canvas** with pan and zoom (mouse, touch, keyboard)
+ * - **Dot-grid background** for visual orientation
+ * - **Light / dark / auto theming** via CSS custom properties
+ * - **First-class accessibility** — ARIA roles, keyboard navigation, focus management
+ * - **Framework-agnostic** — plain DOM, works in React, Vue, Svelte, Angular, or vanilla JS
+ * - **Plugin system** — extend with editing, tooltips, minimap, custom shapes, and more
+ *
+ * ## Quick start
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,       // BPMN 2.0 XML string
+ *   theme: "auto",        // follows OS preference
+ *   grid: true,           // dot-grid background
+ *   fit: "contain",       // scale to fit on load
+ * });
+ *
+ * // Listen to events
+ * canvas.on("element:click", (id) => console.log("clicked", id));
+ *
+ * // Programmatic control
+ * canvas.fitView();
+ * canvas.zoomIn();
+ * canvas.setTheme("dark");
+ *
+ * // Always clean up
+ * canvas.destroy();
+ * ```
+ *
+ * ## Embedding in React
+ * ```tsx
+ * function BpmnViewer({ xml }: { xml: string }) {
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   useEffect(() => {
+ *     if (!ref.current) return;
+ *     const canvas = new BpmnCanvas({ container: ref.current, xml });
+ *     return () => canvas.destroy();
+ *   }, [xml]);
+ *   return <div ref={ref} style={{ width: "100%", height: "500px" }} />;
+ * }
+ * ```
+ *
+ * ## Plugin example
+ * ```typescript
+ * const tooltipPlugin: CanvasPlugin = {
+ *   name: "tooltips",
+ *   install(api) {
+ *     api.on("element:click", (id) => {
+ *       const shape = api.getShapes().find((s) => s.id === id);
+ *       alert(shape?.flowElement?.name ?? id);
+ *     });
+ *   },
+ * };
+ * const canvas = new BpmnCanvas({ container, plugins: [tooltipPlugin] });
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { BpmnCanvas } from "./canvas.js";
+export type { CanvasApi, CanvasEvents, CanvasOptions, CanvasPlugin, FitMode, RenderedEdge, RenderedShape, Theme, ViewportState, } from "./types.js";
+export { ViewportController } from "./viewport.js";
+export { render, computeDiagramBounds, createDefs, createGrid } from "./renderer.js";
+export { KeyboardHandler } from "./keyboard.js";
+export { injectStyles, CANVAS_CSS, STYLE_ID } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js ADDED Viewed

@@ -0,0 +1,72 @@
+/**
+ * @bpmnkit/canvas — a high-performance, accessible BPMN 2.0 diagram viewer.
+ *
+ * ## Features
+ * - **Zero external dependencies** (only `@bpmnkit/core` for XML parsing)
+ * - **Infinite canvas** with pan and zoom (mouse, touch, keyboard)
+ * - **Dot-grid background** for visual orientation
+ * - **Light / dark / auto theming** via CSS custom properties
+ * - **First-class accessibility** — ARIA roles, keyboard navigation, focus management
+ * - **Framework-agnostic** — plain DOM, works in React, Vue, Svelte, Angular, or vanilla JS
+ * - **Plugin system** — extend with editing, tooltips, minimap, custom shapes, and more
+ *
+ * ## Quick start
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,       // BPMN 2.0 XML string
+ *   theme: "auto",        // follows OS preference
+ *   grid: true,           // dot-grid background
+ *   fit: "contain",       // scale to fit on load
+ * });
+ *
+ * // Listen to events
+ * canvas.on("element:click", (id) => console.log("clicked", id));
+ *
+ * // Programmatic control
+ * canvas.fitView();
+ * canvas.zoomIn();
+ * canvas.setTheme("dark");
+ *
+ * // Always clean up
+ * canvas.destroy();
+ * ```
+ *
+ * ## Embedding in React
+ * ```tsx
+ * function BpmnViewer({ xml }: { xml: string }) {
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   useEffect(() => {
+ *     if (!ref.current) return;
+ *     const canvas = new BpmnCanvas({ container: ref.current, xml });
+ *     return () => canvas.destroy();
+ *   }, [xml]);
+ *   return <div ref={ref} style={{ width: "100%", height: "500px" }} />;
+ * }
+ * ```
+ *
+ * ## Plugin example
+ * ```typescript
+ * const tooltipPlugin: CanvasPlugin = {
+ *   name: "tooltips",
+ *   install(api) {
+ *     api.on("element:click", (id) => {
+ *       const shape = api.getShapes().find((s) => s.id === id);
+ *       alert(shape?.flowElement?.name ?? id);
+ *     });
+ *   },
+ * };
+ * const canvas = new BpmnCanvas({ container, plugins: [tooltipPlugin] });
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { BpmnCanvas } from "./canvas.js";
+// Internal exports for use by @bpmnkit/editor
+export { ViewportController } from "./viewport.js";
+export { render, computeDiagramBounds, createDefs, createGrid } from "./renderer.js";
+export { KeyboardHandler } from "./keyboard.js";
+export { injectStyles, CANVAS_CSS, STYLE_ID } from "./css.js";
+//# sourceMappingURL=index.js.map

package/dist/keyboard.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import type { RenderedShape } from "./types.js";
+import type { ViewportController } from "./viewport.js";
+/**
+ * Handles keyboard navigation for the BPMN canvas.
+ *
+ * ## Key bindings
+ * | Key | Action |
+ * |-----|--------|
+ * | `←` `→` `↑` `↓` | Pan viewport |
+ * | `+` / `=` | Zoom in |
+ * | `-` | Zoom out |
+ * | `0` / `Home` | Fit diagram to view |
+ * | `Tab` | Focus next element |
+ * | `Shift+Tab` | Focus previous element |
+ * | `Enter` / `Space` | Activate focused element (fires `element:click`) |
+ * | `Escape` | Return focus to canvas container |
+ *
+ * The canvas container uses `role="application"` so screen readers pass
+ * all key presses to the application rather than handling them natively.
+ */
+export declare class KeyboardHandler {
+    private readonly _container;
+    private readonly _viewport;
+    private readonly _onFit;
+    private readonly _onActivate;
+    private readonly _onFocus;
+    private readonly _onBlur;
+    private _shapes;
+    private _focusIndex;
+    constructor(_container: HTMLElement, _viewport: ViewportController, _onFit: () => void, _onActivate: (id: string) => void, _onFocus: (id: string) => void, _onBlur: () => void);
+    /** Updates the navigable shape list after a diagram (re)load. */
+    setShapes(shapes: RenderedShape[]): void;
+    /** Removes all keyboard event listeners. */
+    destroy(): void;
+    private _focusShape;
+    private _clearFocus;
+    private readonly _onKeyDown;
+    private readonly _onFocusOut;
+}
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.js ADDED Viewed

@@ -0,0 +1,166 @@
+const PAN_STEP = 60; // pixels per arrow key press
+const ZOOM_STEP = 1.25; // factor per +/- key press
+/**
+ * Handles keyboard navigation for the BPMN canvas.
+ *
+ * ## Key bindings
+ * | Key | Action |
+ * |-----|--------|
+ * | `←` `→` `↑` `↓` | Pan viewport |
+ * | `+` / `=` | Zoom in |
+ * | `-` | Zoom out |
+ * | `0` / `Home` | Fit diagram to view |
+ * | `Tab` | Focus next element |
+ * | `Shift+Tab` | Focus previous element |
+ * | `Enter` / `Space` | Activate focused element (fires `element:click`) |
+ * | `Escape` | Return focus to canvas container |
+ *
+ * The canvas container uses `role="application"` so screen readers pass
+ * all key presses to the application rather than handling them natively.
+ */
+export class KeyboardHandler {
+    _container;
+    _viewport;
+    _onFit;
+    _onActivate;
+    _onFocus;
+    _onBlur;
+    _shapes = [];
+    _focusIndex = -1; // -1 = container has focus
+    constructor(_container, _viewport, _onFit, _onActivate, _onFocus, _onBlur) {
+        this._container = _container;
+        this._viewport = _viewport;
+        this._onFit = _onFit;
+        this._onActivate = _onActivate;
+        this._onFocus = _onFocus;
+        this._onBlur = _onBlur;
+        this._container.addEventListener("keydown", this._onKeyDown);
+        this._container.addEventListener("focusout", this._onFocusOut);
+    }
+    /** Updates the navigable shape list after a diagram (re)load. */
+    setShapes(shapes) {
+        this._shapes = shapes.filter((s) => s.element.getAttribute("tabindex") === "-1");
+        this._focusIndex = -1;
+    }
+    /** Removes all keyboard event listeners. */
+    destroy() {
+        this._container.removeEventListener("keydown", this._onKeyDown);
+        this._container.removeEventListener("focusout", this._onFocusOut);
+    }
+    // ── Internals ─────────────────────────────────────────────────────
+    _focusShape(index) {
+        const shape = this._shapes[index];
+        if (!shape)
+            return;
+        this._focusIndex = index;
+        shape.element.focus();
+        shape.element.classList.add("bpmnkit-selected");
+        this._onFocus(shape.id);
+    }
+    _clearFocus() {
+        if (this._focusIndex >= 0) {
+            this._shapes[this._focusIndex]?.element.classList.remove("bpmnkit-selected");
+        }
+        this._focusIndex = -1;
+        this._onBlur();
+    }
+    _onKeyDown = (e) => {
+        // Don't intercept keys typed into form controls or editable elements
+        const target = e.target;
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+            return;
+        const svgRect = this._container.getBoundingClientRect();
+        const cx = svgRect.width / 2;
+        const cy = svgRect.height / 2;
+        switch (e.key) {
+            // ── Pan ────────────────────────────────────────────────────
+            case "ArrowLeft":
+                e.preventDefault();
+                this._viewport.set({
+                    tx: this._viewport.state.tx + PAN_STEP,
+                    ty: this._viewport.state.ty,
+                });
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                this._viewport.set({
+                    tx: this._viewport.state.tx - PAN_STEP,
+                    ty: this._viewport.state.ty,
+                });
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                this._viewport.set({
+                    tx: this._viewport.state.tx,
+                    ty: this._viewport.state.ty + PAN_STEP,
+                });
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                this._viewport.set({
+                    tx: this._viewport.state.tx,
+                    ty: this._viewport.state.ty - PAN_STEP,
+                });
+                break;
+            // ── Zoom ───────────────────────────────────────────────────
+            case "+":
+            case "=":
+                e.preventDefault();
+                this._viewport.zoomAt(cx, cy, ZOOM_STEP);
+                break;
+            case "-":
+                e.preventDefault();
+                this._viewport.zoomAt(cx, cy, 1 / ZOOM_STEP);
+                break;
+            // ── Fit ────────────────────────────────────────────────────
+            case "0":
+            case "Home":
+                e.preventDefault();
+                this._onFit();
+                break;
+            // ── Element navigation ─────────────────────────────────────
+            case "Tab": {
+                if (this._shapes.length === 0)
+                    break;
+                e.preventDefault();
+                const next = e.shiftKey
+                    ? this._focusIndex <= 0
+                        ? this._shapes.length - 1
+                        : this._focusIndex - 1
+                    : this._focusIndex >= this._shapes.length - 1
+                        ? 0
+                        : this._focusIndex + 1;
+                this._clearFocus();
+                this._focusShape(next);
+                break;
+            }
+            // ── Activate ───────────────────────────────────────────────
+            case "Enter":
+            case " ": {
+                if (this._focusIndex < 0)
+                    break;
+                const shape = this._shapes[this._focusIndex];
+                if (shape) {
+                    e.preventDefault();
+                    this._onActivate(shape.id);
+                }
+                break;
+            }
+            // ── Escape ─────────────────────────────────────────────────
+            case "Escape":
+                if (this._focusIndex >= 0) {
+                    e.preventDefault();
+                    this._clearFocus();
+                    this._container.focus();
+                }
+                break;
+        }
+    };
+    _onFocusOut = (e) => {
+        // Only clear focus when leaving the container entirely
+        if (!this._container.contains(e.relatedTarget)) {
+            this._clearFocus();
+        }
+    };
+}
+//# sourceMappingURL=keyboard.js.map

package/dist/minimap.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import type { BpmnDefinitions } from "@bpmn-sdk/core";
+import type { ViewportState } from "./types.js";
+/**
+ * A scaled-down overview of the BPMN diagram that shows the current viewport
+ * position as a highlighted rectangle.
+ *
+ * Clicking the minimap pans the canvas to that position.
+ */
+export declare class Minimap {
+    /** Invoked when the user clicks the minimap to request a viewport pan. */
+    private readonly _onNavigate;
+    private readonly _host;
+    private readonly _svg;
+    private readonly _shapesG;
+    private readonly _edgesG;
+    private readonly _viewportRect;
+    private _scale;
+    private _offsetX;
+    private _offsetY;
+    private _diagramMinX;
+    private _diagramMinY;
+    private _diagramW;
+    private _diagramH;
+    private readonly _mmW;
+    private readonly _mmH;
+    constructor(container: HTMLElement,
+    /** Invoked when the user clicks the minimap to request a viewport pan. */
+    _onNavigate: (tx: number, ty: number) => void);
+    /** Updates the minimap with shapes and edges from a newly loaded diagram. */
+    update(defs: BpmnDefinitions): void;
+    /** Syncs the viewport indicator rectangle with the current pan/zoom state. */
+    syncViewport(state: ViewportState, svgWidth: number, svgHeight: number): void;
+    /** Removes the minimap from the DOM. */
+    destroy(): void;
+    private readonly _onClick;
+}
+//# sourceMappingURL=minimap.d.ts.map