@bpmnkit/canvas 0.0.30 → 0.0.31

package/README.md

@@ -9,7 +9,7 @@
   [![ai-assisted](https://img.shields.io/badge/AI--assisted-claude-8b5cf6?style=flat-square)](https://github.com/bpmnkit/monorepo)
   [![experimental](https://img.shields.io/badge/status-experimental-f59e0b?style=flat-square)](https://github.com/bpmnkit/monorepo)
 
-  [Website](https://bpmnkit.com) · [Documentation](https://docs.bpmnkit.com) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
+  [Website](https://bpmnkit.com) · [Documentation](https://bpmnkit.com/docs) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
 </div>
 
 ---

package/dist/canvas.d.ts

@@ -237,9 +237,10 @@ export declare class BpmnCanvas {
     private _updateBreadcrumb;
     /**
      * Resolves the BPMN element id under a pointer/mouse event, or `null`.
-     * Prefers `elementFromPoint` (correct when native SVG hit-testing returns
-     * the root `<svg>` in flex/scroll containers) and falls back to the event
-     * target (for environments where `elementFromPoint` is unavailable).
+     * The event target answers directly for most moves; `elementFromPoint`
+     * (which forces a layout and hit-test flush) is only consulted when native
+     * SVG hit-testing handed us the root `<svg>`, as it does in some flex/scroll
+     * containers.
      */
     private _elementIdForEvent;
     /** Diagram-coordinate bounds of a shape (from DI) or edge (waypoint bbox). */

package/dist/canvas.js

@@ -445,7 +445,9 @@ export class BpmnCanvas {
         this._scene.updateElement(id);
         this._shapes = this._scene.getShapes();
         this._edges = this._scene.getEdges();
-        this._keyboard.setShapes(this._shapes);
+        const updated = this._scene.getElement(id);
+        if (updated && "shape" in updated)
+            this._keyboard.updateShape(updated);
         this._overlays.reposition();
     }
     /** Zooms in by 25% centred on the canvas. */
@@ -765,32 +767,45 @@ export class BpmnCanvas {
     }
     /**
      * Resolves the BPMN element id under a pointer/mouse event, or `null`.
-     * Prefers `elementFromPoint` (correct when native SVG hit-testing returns
-     * the root `<svg>` in flex/scroll containers) and falls back to the event
-     * target (for environments where `elementFromPoint` is unavailable).
+     * The event target answers directly for most moves; `elementFromPoint`
+     * (which forces a layout and hit-test flush) is only consulted when native
+     * SVG hit-testing handed us the root `<svg>`, as it does in some flex/scroll
+     * containers.
      */
     _elementIdForEvent(e) {
+        const fromTarget = e.target?.closest("[data-bpmnkit-id]");
+        if (fromTarget)
+            return fromTarget.getAttribute("data-bpmnkit-id");
         const fromPoint = document.elementFromPoint(e.clientX, e.clientY);
-        const target = fromPoint?.closest("[data-bpmnkit-id]") ??
-            e.target?.closest("[data-bpmnkit-id]");
-        return target?.getAttribute("data-bpmnkit-id") ?? null;
+        return fromPoint?.closest("[data-bpmnkit-id]")?.getAttribute("data-bpmnkit-id") ?? null;
     }
     /** Diagram-coordinate bounds of a shape (from DI) or edge (waypoint bbox). */
     _diagramBounds(id) {
-        const shape = this._shapes.find((s) => s.id === id);
-        if (shape) {
-            const { x, y, width, height } = shape.shape.bounds;
+        const el = this._scene.getElement(id);
+        if (!el)
+            return null;
+        if ("shape" in el) {
+            const { x, y, width, height } = el.shape.bounds;
             return { x, y, width, height };
         }
-        const edge = this._edges.find((e) => e.id === id);
-        if (edge && edge.edge.waypoints.length > 0) {
-            const xs = edge.edge.waypoints.map((w) => w.x);
-            const ys = edge.edge.waypoints.map((w) => w.y);
-            const minX = Math.min(...xs);
-            const minY = Math.min(...ys);
-            return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
+        const waypoints = el.edge.waypoints;
+        if (waypoints.length === 0)
+            return null;
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (const w of waypoints) {
+            if (w.x < minX)
+                minX = w.x;
+            if (w.y < minY)
+                minY = w.y;
+            if (w.x > maxX)
+                maxX = w.x;
+            if (w.y > maxY)
+                maxY = w.y;
         }
-        return null;
+        return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
     }
     _applyTheme(theme) {
         const resolved = theme === "auto"

package/dist/keyboard.d.ts

@@ -30,6 +30,11 @@ export declare class KeyboardHandler {
     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;
+    /**
+     * Swaps in the re-rendered graphics of one shape after an incremental
+     * update, keeping focus position and avoiding a DOM read per shape.
+     */
+    updateShape(shape: RenderedShape): void;
     /** Removes all keyboard event listeners. */
     destroy(): void;
     private _focusShape;

package/dist/keyboard.js

@@ -42,6 +42,26 @@ export class KeyboardHandler {
         this._shapes = shapes.filter((s) => s.element.getAttribute("tabindex") === "-1");
         this._focusIndex = -1;
     }
+    /**
+     * Swaps in the re-rendered graphics of one shape after an incremental
+     * update, keeping focus position and avoiding a DOM read per shape.
+     */
+    updateShape(shape) {
+        const focusable = shape.element.getAttribute("tabindex") === "-1";
+        const index = this._shapes.findIndex((s) => s.id === shape.id);
+        if (index === -1) {
+            if (focusable)
+                this._shapes.push(shape);
+            return;
+        }
+        if (focusable)
+            this._shapes[index] = shape;
+        else {
+            this._shapes.splice(index, 1);
+            if (this._focusIndex >= this._shapes.length)
+                this._focusIndex = -1;
+        }
+    }
     /** Removes all keyboard event listeners. */
     destroy() {
         this._container.removeEventListener("keydown", this._onKeyDown);

package/dist/renderer.js

@@ -763,8 +763,9 @@ function renderEdge(edge, flow, instanceId, isDefault, isConditional, waypoints)
     if (waypoints.length < 2)
         return g;
     const path = svgEl("path");
+    const d = waypointsToRoundedPath(waypoints);
     const pathAttrs = {
-        d: waypointsToRoundedPath(waypoints),
+        d,
         class: "bpmnkit-edge-path",
         "marker-end": `url(#${ids.arrow})`,
     };
@@ -777,7 +778,7 @@ function renderEdge(edge, flow, instanceId, isDefault, isConditional, waypoints)
     // Wide transparent stroke so the edge is easy to click
     const hitPath = svgEl("path");
     attr(hitPath, {
-        d: waypointsToRoundedPath(waypoints),
+        d,
         fill: "none",
         stroke: "transparent",
         "stroke-width": "12",

package/dist/scene.d.ts

@@ -23,6 +23,15 @@ export declare class Scene {
     private _defs;
     private _plane;
     private _drillableIds;
+    /**
+     * Model index and docking geometry, built once per {@link render}. The
+     * model is expected to be mutated in place between incremental updates
+     * (the scene already keeps `_defs`/`_plane` by reference), so rebuilding the
+     * whole index for every single-element update was pure waste.
+     */
+    private _ctx;
+    private readonly _shapeById;
+    private readonly _edgeById;
     constructor(_layers: SceneLayers, _instanceId: string);
     /** Renders a plane from scratch, replacing any current content. */
     render(defs: BpmnDefinitions, plane: BpmnDiPlane, drillableIds?: ReadonlySet<string>): void;

package/dist/scene.js

@@ -15,6 +15,15 @@ export class Scene {
     _defs = null;
     _plane = null;
     _drillableIds = new Set();
+    /**
+     * Model index and docking geometry, built once per {@link render}. The
+     * model is expected to be mutated in place between incremental updates
+     * (the scene already keeps `_defs`/`_plane` by reference), so rebuilding the
+     * whole index for every single-element update was pure waste.
+     */
+    _ctx = null;
+    _shapeById = new Map();
+    _edgeById = new Map();
     constructor(_layers, _instanceId) {
         this._layers = _layers;
         this._instanceId = _instanceId;
@@ -25,6 +34,11 @@ export class Scene {
         this._defs = defs;
         this._plane = plane;
         this._drillableIds = drillableIds;
+        this._ctx = null;
+        for (const shape of plane.shapes)
+            this._shapeById.set(shape.bpmnElement, shape);
+        for (const edge of plane.edges)
+            this._edgeById.set(edge.bpmnElement, edge);
         const ctx = this._context();
         for (const edge of plane.edges) {
             const g = renderEdgeGroup(edge, ctx);
@@ -50,6 +64,9 @@ export class Scene {
         this._layers.shapes.replaceChildren();
         this._layers.labels.replaceChildren();
         this._registry.clear();
+        this._shapeById.clear();
+        this._edgeById.clear();
+        this._ctx = null;
     }
     /** Returns the registered shape or edge for an id, or `undefined`. */
     getElement(id) {
@@ -96,7 +113,7 @@ export class Scene {
             .split(/\s+/)
             .filter(Boolean);
         if (entry.kind === "edge") {
-            const edge = this._plane.edges.find((e) => e.bpmnElement === id);
+            const edge = this._edgeById.get(id);
             if (!edge)
                 return;
             const g = renderEdgeGroup(edge, ctx);
@@ -106,9 +123,17 @@ export class Scene {
             this._registry.set(id, { rendered: { id, element: g, edge }, label: null, kind: "edge" });
             return;
         }
-        const shape = this._plane.shapes.find((s) => s.bpmnElement === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return;
+        // A moved or resized shape must dock its edges against its new bounds.
+        const geom = ctx.geomById.get(id);
+        if (geom) {
+            geom.x = shape.bounds.x;
+            geom.y = shape.bounds.y;
+            geom.width = shape.bounds.width;
+            geom.height = shape.bounds.height;
+        }
         const { group, layer, label, rendered } = renderShapeGroup(shape, ctx);
         for (const c of oldClasses)
             group.classList.add(c);
@@ -131,10 +156,13 @@ export class Scene {
         this._registry.delete(id);
     }
     _context() {
+        if (this._ctx)
+            return this._ctx;
         if (!this._defs || !this._plane) {
             throw new Error("Scene has no rendered plane");
         }
-        return buildRenderContext(this._defs, this._plane, this._drillableIds, this._instanceId);
+        this._ctx = buildRenderContext(this._defs, this._plane, this._drillableIds, this._instanceId);
+        return this._ctx;
     }
 }
 //# sourceMappingURL=scene.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/canvas",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/core": "0.1.2"
+    "@bpmnkit/core": "0.2.0"
   },
   "description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
   "keywords": [