@bpmnkit/editor 0.0.33 → 0.0.34

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/editor/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/editor/CHANGELOG.md)
 </div>
 
 ---

package/dist/editor.d.ts

@@ -3,10 +3,6 @@ import type { Theme } from "@bpmnkit/canvas";
 import type { BpmnDefinitions, DiColor } from "@bpmnkit/core";
 import type { Translate } from "./i18n.js";
 import type { CreateShapeType, EditorEvents, EditorOptions, LabelPosition, Tool } from "./types.js";
-/**
- * BpmnEditor — a full BPMN 2.0 diagram editor with create, move, resize,
- * connect, delete, label-edit, undo/redo, and copy/paste.
- */
 export declare class BpmnEditor {
     private readonly _id;
     private readonly _host;
@@ -28,6 +24,12 @@ export declare class BpmnEditor {
     private readonly _labelEditor;
     private readonly _plugins;
     private _shapes;
+    /** id → rendered shape/edge/flow, rebuilt with every render so lookups stay O(1). */
+    private readonly _shapeById;
+    private readonly _edgeById;
+    private readonly _flowById;
+    /** Equal-spacing snap candidates for the current drag; see _spacingCandidates. */
+    private _spacingIndex;
     private _edges;
     private _defs;
     private _selectedIds;
@@ -195,6 +197,13 @@ export declare class BpmnEditor {
     private _computeSnap;
     private _computeAlignGuides;
     private _computeSpacingSnap;
+    /**
+     * Candidate snap positions from every ordered pair (A, B) of static shapes
+     * where B lies right of / below A: the moving shape may sit right of B or
+     * left of A (below B / above A) at the same gap. Cached for the drag: it is
+     * rebuilt only when the rendered shapes or the selection change.
+     */
+    private _spacingCandidates;
     private _computeCreateSnap;
     private _computeCreateGuides;
     private _findCreateEdgeDrop;

package/dist/editor.js

@@ -195,10 +195,49 @@ function intermediateEventDefType(type) {
             return null;
     }
 }
+/** Sort by value and drop duplicate values, keeping the earliest pair for each. */
+function sortCandidates(entries) {
+    entries.sort((x, y) => x.value - y.value || x.ord - y.ord);
+    const out = [];
+    for (const e of entries) {
+        const last = out[out.length - 1];
+        if (last && last.value === e.value)
+            continue;
+        out.push(e);
+    }
+    return out;
+}
 /**
- * BpmnEditor — a full BPMN 2.0 diagram editor with create, move, resize,
- * connect, delete, label-edit, undo/redo, and copy/paste.
+ * The candidate strictly closer than `threshold` to its target, choosing the
+ * earliest pair on exact ties — the same winner the full pair scan produced.
  */
+function nearestCandidate(queries, threshold) {
+    let best = null;
+    for (const { list, target } of queries) {
+        // Binary search for the insertion point; only the two neighbours can be nearest.
+        let lo = 0;
+        let hi = list.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (list[mid].value < target)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        for (const i of [lo - 1, lo]) {
+            const entry = list[i];
+            if (!entry)
+                continue;
+            const dist = Math.abs(target - entry.value);
+            if (dist >= threshold)
+                continue;
+            if (!best || dist < best.dist || (dist === best.dist && entry.ord < best.entry.ord)) {
+                best = { entry, target, dist };
+            }
+        }
+    }
+    return best;
+}
 export class BpmnEditor {
     // ── DOM ────────────────────────────────────────────────────────────
     _id;
@@ -223,6 +262,12 @@ export class BpmnEditor {
     _plugins = [];
     // ── State ──────────────────────────────────────────────────────────
     _shapes = [];
+    /** id → rendered shape/edge/flow, rebuilt with every render so lookups stay O(1). */
+    _shapeById = new Map();
+    _edgeById = new Map();
+    _flowById = new Map();
+    /** Equal-spacing snap candidates for the current drag; see _spacingCandidates. */
+    _spacingIndex = null;
     _edges = [];
     _defs = null;
     _selectedIds = [];
@@ -367,7 +412,7 @@ export class BpmnEditor {
             cancelEndpointMove: () => {
                 this._overlay.setEndpointDragGhost(null);
                 if (this._selectedEdgeId) {
-                    const edge = this._edges.find((e) => e.id === this._selectedEdgeId);
+                    const edge = this._edgeById.get(this._selectedEdgeId);
                     this._overlay.setEdgeEndpoints(edge?.edge.waypoints ?? null, this._selectedEdgeId);
                 }
             },
@@ -430,7 +475,7 @@ export class BpmnEditor {
                 this._overlay.setEdgeHoverDot(null);
             },
             showEdgeWaypointBalls: (edgeId) => {
-                const edge = this._edges.find((e) => e.id === edgeId);
+                const edge = this._edgeById.get(edgeId);
                 if (edge)
                     this._overlay.setEdgeWaypointBalls(edge.edge.waypoints, edgeId);
             },
@@ -451,7 +496,7 @@ export class BpmnEditor {
         });
         // ── Keyboard ─────────────────────────────────────────────────
         this._keyboard = new KeyboardHandler(this._host, this._viewport, () => this.fitView(), (id) => {
-            const shape = this._shapes.find((s) => s.id === id);
+            const shape = this._shapeById.get(id);
             if (shape) {
                 this._emit("element:click", id, new PointerEvent("click"));
             }
@@ -585,7 +630,7 @@ export class BpmnEditor {
     _selectedShapeBounds() {
         const out = [];
         for (const id of this._selectedIds) {
-            const shape = this._shapes.find((s) => s.id === id);
+            const shape = this._shapeById.get(id);
             if (shape)
                 out.push({ id, ...shape.shape.bounds });
         }
@@ -807,7 +852,7 @@ export class BpmnEditor {
     }
     /** Pans the viewport to center on the element with the given id (preserves zoom). */
     scrollToElement(id) {
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return;
         const { x, y, width, height } = shape.shape.bounds;
@@ -904,6 +949,16 @@ export class BpmnEditor {
         this._shapes = result.shapes;
         this._edges = result.edges;
         this._defs = defs;
+        this._shapeById.clear();
+        for (const shape of this._shapes)
+            this._shapeById.set(shape.id, shape);
+        this._edgeById.clear();
+        for (const edge of this._edges)
+            this._edgeById.set(edge.id, edge);
+        this._flowById.clear();
+        for (const flow of defs.processes[0]?.sequenceFlows ?? [])
+            this._flowById.set(flow.id, flow);
+        this._spacingIndex = null;
         // Add transparent hit-area polylines for edge clicking
         for (const edge of this._edges) {
             const waypoints = edge.edge.waypoints;
@@ -920,7 +975,7 @@ export class BpmnEditor {
         this._overlay.setSelection(this._selectedIds, this._shapes, this._getResizableIds());
         // Restore edge selection if the edge still exists after re-render
         if (this._selectedEdgeId) {
-            const edge = this._edges.find((e) => e.id === this._selectedEdgeId);
+            const edge = this._edgeById.get(this._selectedEdgeId);
             if (edge) {
                 this._overlay.setEdgeEndpoints(edge.edge.waypoints, this._selectedEdgeId);
             }
@@ -962,7 +1017,7 @@ export class BpmnEditor {
     }
     /** Human-readable name for an element (its label, else its type). */
     _displayName(id) {
-        const el = this._shapes.find((s) => s.id === id)?.flowElement;
+        const el = this._shapeById.get(id)?.flowElement;
         return el?.name ?? el?.type ?? id;
     }
     /** Pushes `message` to the aria-live region for assistive technology. */
@@ -1004,7 +1059,7 @@ export class BpmnEditor {
         const finalDy = useSpacingY ? spacingResult.dy : alignSnap.dy;
         this._snapDelta = { dx: finalDx, dy: finalDy };
         for (const id of this._selectedIds) {
-            const shape = this._shapes.find((s) => s.id === id);
+            const shape = this._shapeById.get(id);
             if (!shape)
                 continue;
             const { x, y } = shape.shape.bounds;
@@ -1023,7 +1078,7 @@ export class BpmnEditor {
         this._overlay.setDistanceGuides([]);
         this._setEdgeDropHighlight(null);
         for (const id of this._selectedIds) {
-            const shape = this._shapes.find((s) => s.id === id);
+            const shape = this._shapeById.get(id);
             if (!shape)
                 continue;
             const { x, y } = shape.shape.bounds;
@@ -1159,7 +1214,7 @@ export class BpmnEditor {
         const boundaryHostId = this._boundaryHostId;
         this._setBoundaryHost(null);
         if (boundaryHostId && isIntermediateEventType(type) && this._defs) {
-            const hostShape = this._shapes.find((s) => s.id === boundaryHostId);
+            const hostShape = this._shapeById.get(boundaryHostId);
             if (hostShape) {
                 const hostBounds = hostShape.shape.bounds;
                 // Snap the event center to the nearest point on the host boundary
@@ -1186,8 +1241,8 @@ export class BpmnEditor {
         this._emit("editor:select", [result.id]);
     }
     _doConnect(srcId, tgtId) {
-        const srcShape = this._shapes.find((s) => s.id === srcId);
-        const tgtShape = this._shapes.find((s) => s.id === tgtId);
+        const srcShape = this._shapeById.get(srcId);
+        const tgtShape = this._shapeById.get(tgtId);
         if (!srcShape || !tgtShape)
             return;
         const srcType = srcShape.flowElement?.type;
@@ -1227,7 +1282,7 @@ export class BpmnEditor {
     _startLabelEdit(id) {
         if (this._readOnly || !id)
             return;
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return;
         const defs = this._defs;
@@ -1244,7 +1299,7 @@ export class BpmnEditor {
         const sourceId = this._connectSourceId();
         if (!sourceId)
             return null;
-        const shape = this._shapes.find((s) => s.id === sourceId);
+        const shape = this._shapeById.get(sourceId);
         return shape ? shape.shape.bounds : null;
     }
     _connectSourceId() {
@@ -1263,14 +1318,14 @@ export class BpmnEditor {
             return false;
         if (targetId === sourceId)
             return true;
-        const srcType = this._shapes.find((s) => s.id === sourceId)?.flowElement?.type;
-        const tgtType = this._shapes.find((s) => s.id === targetId)?.flowElement?.type;
+        const srcType = this._shapeById.get(sourceId)?.flowElement?.type;
+        const tgtType = this._shapeById.get(targetId)?.flowElement?.type;
         return srcType !== undefined && tgtType !== undefined && !canConnect(srcType, tgtType);
     }
     // ── New public helpers ─────────────────────────────────────────────
     /** Returns screen-space bounds of a shape (for positioning overlays). */
     getShapeBounds(id) {
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return null;
         const b = shape.shape.bounds;
@@ -1281,7 +1336,7 @@ export class BpmnEditor {
     }
     /** Returns the BPMN element type for a given id, or null if not found. */
     getElementType(id) {
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape) {
             if (this._edges.some((e) => e.id === id))
                 return "sequenceFlow";
@@ -1314,7 +1369,7 @@ export class BpmnEditor {
     addConnectedElement(sourceId, type, name) {
         if (!this._defs)
             return null;
-        const srcShape = this._shapes.find((s) => s.id === sourceId);
+        const srcShape = this._shapeById.get(sourceId);
         if (!srcShape)
             return null;
         const srcBounds = srcShape.shape.bounds;
@@ -1354,7 +1409,7 @@ export class BpmnEditor {
             for (const flow of process.sequenceFlows) {
                 if (flow.sourceRef !== sourceId)
                     continue;
-                const tgt = this._shapes.find((s) => s.id === flow.targetRef);
+                const tgt = this._shapeById.get(flow.targetRef);
                 if (!tgt)
                     continue;
                 const tCx = tgt.shape.bounds.x + tgt.shape.bounds.width / 2;
@@ -1434,7 +1489,7 @@ export class BpmnEditor {
      * Sets the external label position for an event or gateway shape.
      */
     setLabelPosition(shapeId, position) {
-        const shape = this._shapes.find((s) => s.id === shapeId);
+        const shape = this._shapeById.get(shapeId);
         if (!shape)
             return;
         const labelBounds = labelBoundsForPosition(shape.shape.bounds, position);
@@ -1454,7 +1509,7 @@ export class BpmnEditor {
      * The user then moves the mouse and clicks a target shape to complete the connection.
      */
     startConnectionFrom(sourceId) {
-        const shape = this._shapes.find((s) => s.id === sourceId);
+        const shape = this._shapeById.get(sourceId);
         if (!shape)
             return;
         this._viewport.lock(true);
@@ -1467,7 +1522,7 @@ export class BpmnEditor {
     createAnnotationFor(sourceId) {
         if (!this._defs)
             return;
-        const srcShape = this._shapes.find((s) => s.id === sourceId);
+        const srcShape = this._shapeById.get(sourceId);
         if (!srcShape)
             return;
         const srcBounds = srcShape.shape.bounds;
@@ -1501,7 +1556,7 @@ export class BpmnEditor {
         }
         this._selectedEdgeId = edgeId;
         if (edgeId) {
-            const edge = this._edges.find((e) => e.id === edgeId);
+            const edge = this._edgeById.get(edgeId);
             this._overlay.setEdgeEndpoints(edge?.edge.waypoints ?? null, edgeId);
             this._emit("editor:select", [edgeId]);
         }
@@ -1512,7 +1567,7 @@ export class BpmnEditor {
     }
     /** Changes a flow element's type (e.g. exclusiveGateway → parallelGateway). */
     changeElementType(id, newType) {
-        const current = this._shapes.find((s) => s.id === id)?.flowElement?.type;
+        const current = this._shapeById.get(id)?.flowElement?.type;
         if (current && !canMorph(current, newType))
             return;
         this._executeCommand((d) => changeElementTypeFn(d, id, newType), "Change type");
@@ -1523,7 +1578,7 @@ export class BpmnEditor {
         const id = this._selectedIds[0];
         if (!id || !this._defs)
             return null;
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return null;
         const b = shape.shape.bounds;
@@ -1534,7 +1589,7 @@ export class BpmnEditor {
             return null;
         const TOLERANCE = 20;
         for (const edge of this._edges) {
-            const flow = process.sequenceFlows.find((sf) => sf.id === edge.id);
+            const flow = this._flowById.get(edge.id);
             if (!flow)
                 continue;
             // Skip edges that are already connected to the shape being moved
@@ -1559,19 +1614,19 @@ export class BpmnEditor {
     }
     _setEdgeDropHighlight(edgeId) {
         if (this._edgeDropTarget) {
-            const prev = this._edges.find((e) => e.id === this._edgeDropTarget);
+            const prev = this._edgeById.get(this._edgeDropTarget);
             prev?.element.classList.remove("bpmnkit-edge-split-highlight");
         }
         this._edgeDropTarget = edgeId;
         if (edgeId) {
-            const edge = this._edges.find((e) => e.id === edgeId);
+            const edge = this._edgeById.get(edgeId);
             edge?.element.classList.add("bpmnkit-edge-split-highlight");
         }
     }
     _previewEndpointMove(edgeId, isStart, diagPoint) {
         if (!this._defs)
             return;
-        const edge = this._edges.find((e) => e.id === edgeId);
+        const edge = this._edgeById.get(edgeId);
         if (!edge)
             return;
         const flow = this._defs.processes[0]?.sequenceFlows.find((sf) => sf.id === edgeId);
@@ -1604,7 +1659,7 @@ export class BpmnEditor {
         if (!this._defs)
             return;
         this._overlay.setEndpointDragGhost(null);
-        const edge = this._edges.find((e) => e.id === edgeId);
+        const edge = this._edgeById.get(edgeId);
         if (!edge)
             return;
         const flow = this._defs.processes[0]?.sequenceFlows.find((sf) => sf.id === edgeId);
@@ -1623,7 +1678,7 @@ export class BpmnEditor {
         this._executeCommand((d) => updateEdgeEndpoint(d, edgeId, isStart, newPort), "Reconnect");
     }
     _isResizable(id) {
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (!shape)
             return false;
         if (shape.annotation !== undefined)
@@ -1743,81 +1798,98 @@ export class BpmnEditor {
         const moving = movingShape.shape.bounds;
         const scale = this._viewport.state.scale;
         const threshold = 8 / scale;
-        let bestDx = dx;
-        let bestDy = dy;
-        let minDistX = threshold;
-        let minDistY = threshold;
-        const hGuides = [];
-        const vGuides = [];
+        // Every candidate position derives from a pair of static shapes and is
+        // independent of the pointer, so the O(S²) pair scan runs once per drag
+        // and each move is a binary search over the sorted candidates.
+        const index = this._spacingCandidates(staticShapes);
+        const mx = moving.x + dx;
+        const my = moving.y + dy;
         const mCy = moving.y + dy + moving.height / 2;
         const mCx = moving.x + dx + moving.width / 2;
-        // Horizontal spacing: for each pair (A, B) where B is to the right of A
-        for (const A of staticShapes) {
-            const aRight = A.shape.bounds.x + A.shape.bounds.width;
-            for (const B of staticShapes) {
-                if (A.id === B.id)
-                    continue;
-                const bLeft = B.shape.bounds.x;
-                if (bLeft <= aRight)
-                    continue;
-                const gap = bLeft - aRight;
-                // Candidate: moving is to the right of B by the same gap
-                const bRight = B.shape.bounds.x + B.shape.bounds.width;
-                const candLeft = bRight + gap;
-                const distX = Math.abs(moving.x + dx - candLeft);
-                if (distX < minDistX) {
-                    minDistX = distX;
-                    bestDx = dx + (candLeft - (moving.x + dx));
-                    hGuides.length = 0;
-                    hGuides.push({ x1: aRight, y1: mCy, x2: bLeft, y2: mCy }, { x1: bRight, y1: mCy, x2: candLeft, y2: mCy });
-                }
-                // Candidate: moving is to the left of A by the same gap
-                const aLeft = A.shape.bounds.x;
-                const candRight = aLeft - gap;
-                const movRight = moving.x + dx + moving.width;
-                const distX2 = Math.abs(movRight - candRight);
-                if (distX2 < minDistX) {
-                    minDistX = distX2;
-                    bestDx = dx + (candRight - movRight);
-                    hGuides.length = 0;
-                    hGuides.push({ x1: candRight, y1: mCy, x2: aLeft, y2: mCy }, { x1: aRight, y1: mCy, x2: bLeft, y2: mCy });
-                }
+        const guides = [];
+        let bestDx = dx;
+        let bestDy = dy;
+        const bestX = nearestCandidate([
+            { list: index.h0, target: mx },
+            { list: index.h1, target: mx + moving.width },
+        ], threshold);
+        if (bestX) {
+            const { entry, target } = bestX;
+            bestDx = dx + (entry.value - target);
+            if (entry.kind === 0) {
+                guides.push({ x1: entry.a, y1: mCy, x2: entry.b, y2: mCy }, { x1: entry.c, y1: mCy, x2: entry.value, y2: mCy });
+            }
+            else {
+                guides.push({ x1: entry.value, y1: mCy, x2: entry.c, y2: mCy }, { x1: entry.a, y1: mCy, x2: entry.b, y2: mCy });
             }
         }
-        // Vertical spacing: for each pair (A, B) where B is below A
-        for (const A of staticShapes) {
-            const aBottom = A.shape.bounds.y + A.shape.bounds.height;
-            for (const B of staticShapes) {
-                if (A.id === B.id)
-                    continue;
-                const bTop = B.shape.bounds.y;
-                if (bTop <= aBottom)
+        const bestY = nearestCandidate([
+            { list: index.v0, target: my },
+            { list: index.v1, target: my + moving.height },
+        ], threshold);
+        if (bestY) {
+            const { entry, target } = bestY;
+            bestDy = dy + (entry.value - target);
+            if (entry.kind === 0) {
+                guides.push({ x1: mCx, y1: entry.a, x2: mCx, y2: entry.b }, { x1: mCx, y1: entry.c, x2: mCx, y2: entry.value });
+            }
+            else {
+                guides.push({ x1: mCx, y1: entry.value, x2: mCx, y2: entry.c }, { x1: mCx, y1: entry.a, x2: mCx, y2: entry.b });
+            }
+        }
+        return { dx: bestDx, dy: bestDy, guides };
+    }
+    /**
+     * Candidate snap positions from every ordered pair (A, B) of static shapes
+     * where B lies right of / below A: the moving shape may sit right of B or
+     * left of A (below B / above A) at the same gap. Cached for the drag: it is
+     * rebuilt only when the rendered shapes or the selection change.
+     */
+    _spacingCandidates(staticShapes) {
+        const key = this._selectedIds.join("\0");
+        const cached = this._spacingIndex;
+        if (cached && cached.shapes === this._shapes && cached.key === key)
+            return cached;
+        const h = [];
+        const v = [];
+        const count = staticShapes.length;
+        for (let ia = 0; ia < count; ia++) {
+            const A = staticShapes[ia].shape.bounds;
+            const aRight = A.x + A.width;
+            const aBottom = A.y + A.height;
+            for (let ib = 0; ib < count; ib++) {
+                if (ia === ib)
                     continue;
-                const gap = bTop - aBottom;
-                // Candidate: moving is below B by the same gap
-                const bBottom = B.shape.bounds.y + B.shape.bounds.height;
-                const candTop = bBottom + gap;
-                const distY = Math.abs(moving.y + dy - candTop);
-                if (distY < minDistY) {
-                    minDistY = distY;
-                    bestDy = dy + (candTop - (moving.y + dy));
-                    vGuides.length = 0;
-                    vGuides.push({ x1: mCx, y1: aBottom, x2: mCx, y2: bTop }, { x1: mCx, y1: bBottom, x2: mCx, y2: candTop });
+                const B = staticShapes[ib].shape.bounds;
+                const ord = (ia * count + ib) * 2;
+                const bLeft = B.x;
+                if (bLeft > aRight) {
+                    const gap = bLeft - aRight;
+                    const bRight = B.x + B.width;
+                    // kind 0: moving sits right of B; a→b is the reference gap, c→value the new one.
+                    h.push({ kind: 0, value: bRight + gap, ord, a: aRight, b: bLeft, c: bRight });
+                    // kind 1: moving sits left of A; value→c is the new gap, a→b the reference.
+                    h.push({ kind: 1, value: A.x - gap, ord: ord + 1, a: aRight, b: bLeft, c: A.x });
                 }
-                // Candidate: moving is above A by the same gap
-                const aTop = A.shape.bounds.y;
-                const candBottom = aTop - gap;
-                const movBottom = moving.y + dy + moving.height;
-                const distY2 = Math.abs(movBottom - candBottom);
-                if (distY2 < minDistY) {
-                    minDistY = distY2;
-                    bestDy = dy + (candBottom - movBottom);
-                    vGuides.length = 0;
-                    vGuides.push({ x1: mCx, y1: candBottom, x2: mCx, y2: aTop }, { x1: mCx, y1: aBottom, x2: mCx, y2: bTop });
+                const bTop = B.y;
+                if (bTop > aBottom) {
+                    const gap = bTop - aBottom;
+                    const bBottom = B.y + B.height;
+                    v.push({ kind: 0, value: bBottom + gap, ord, a: aBottom, b: bTop, c: bBottom });
+                    v.push({ kind: 1, value: A.y - gap, ord: ord + 1, a: aBottom, b: bTop, c: A.y });
                 }
             }
         }
-        return { dx: bestDx, dy: bestDy, guides: [...hGuides, ...vGuides] };
+        const index = {
+            shapes: this._shapes,
+            key,
+            h0: sortCandidates(h.filter((e) => e.kind === 0)),
+            h1: sortCandidates(h.filter((e) => e.kind === 1)),
+            v0: sortCandidates(v.filter((e) => e.kind === 0)),
+            v1: sortCandidates(v.filter((e) => e.kind === 1)),
+        };
+        this._spacingIndex = index;
+        return index;
     }
     // ── Create-mode helpers ────────────────────────────────────────────
     _computeCreateSnap(bounds) {
@@ -1892,7 +1964,7 @@ export class BpmnEditor {
             return null;
         const TOLERANCE = 20;
         for (const edge of this._edges) {
-            const flow = process.sequenceFlows.find((sf) => sf.id === edge.id);
+            const flow = this._flowById.get(edge.id);
             if (!flow)
                 continue;
             const wps = edge.edge.waypoints;
@@ -1916,7 +1988,7 @@ export class BpmnEditor {
             return;
         this._boundaryHostId = shapeId;
         if (shapeId) {
-            const shape = this._shapes.find((s) => s.id === shapeId);
+            const shape = this._shapeById.get(shapeId);
             this._overlay.setBoundaryHostHighlight(shape ? shape.shape.bounds : null);
         }
         else {
@@ -1927,12 +1999,12 @@ export class BpmnEditor {
         if (this._createEdgeDropTarget === edgeId)
             return;
         if (this._createEdgeDropTarget) {
-            const prev = this._edges.find((e) => e.id === this._createEdgeDropTarget);
+            const prev = this._edgeById.get(this._createEdgeDropTarget);
             prev?.element.classList.remove("bpmnkit-edge-split-highlight");
         }
         this._createEdgeDropTarget = edgeId;
         if (edgeId) {
-            const edge = this._edges.find((e) => e.id === edgeId);
+            const edge = this._edgeById.get(edgeId);
             edge?.element.classList.add("bpmnkit-edge-split-highlight");
         }
     }
@@ -1964,7 +2036,7 @@ export class BpmnEditor {
             this._setCreateEdgeDropHighlight(this._findCreateEdgeDrop(snapped));
             // Detect boundary event attachment target for intermediate event types
             if (isIntermediateEventType(mode.elementType) && hit.type === "shape") {
-                const shape = this._shapes.find((s) => s.id === hit.id);
+                const shape = this._shapeById.get(hit.id);
                 if (shape?.flowElement && canAttach(shape.flowElement.type)) {
                     this._setBoundaryHost(hit.id);
                 }
@@ -2234,8 +2306,7 @@ export class BpmnEditor {
     }
     /** Finds the SVG group for a shape or edge by BPMN id. */
     _elementById(id) {
-        return (this._shapes.find((s) => s.id === id)?.element ??
-            this._edges.find((e) => e.id === id)?.element);
+        return this._shapeById.get(id)?.element ?? this._edgeById.get(id)?.element;
     }
     /** Element bounding box in screen pixels relative to the host, or `null`. */
     _absoluteBBox(id) {
@@ -2252,12 +2323,12 @@ export class BpmnEditor {
     }
     /** Diagram-coordinate bounds of a shape (from DI) or edge (waypoint bbox). */
     _boundsById(id) {
-        const shape = this._shapes.find((s) => s.id === id);
+        const shape = this._shapeById.get(id);
         if (shape) {
             const { x, y, width, height } = shape.shape.bounds;
             return { x, y, width, height };
         }
-        const edge = this._edges.find((e) => e.id === id);
+        const edge = this._edgeById.get(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);

package/dist/overlay.js

@@ -67,7 +67,8 @@ export class OverlayRenderer {
     // ── Selection + handles ───────────────────────────────────────────
     setSelection(ids, shapes, resizableIds) {
         this._selectionG.innerHTML = "";
-        const selected = shapes.filter((s) => ids.includes(s.id));
+        const idSet = new Set(ids);
+        const selected = shapes.filter((s) => idSet.has(s.id));
         if (selected.length === 0)
             return;
         const isSingle = selected.length === 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/editor",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,8 +17,8 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.0.30",
-    "@bpmnkit/core": "0.1.2"
+    "@bpmnkit/canvas": "0.0.31",
+    "@bpmnkit/core": "0.2.0"
   },
   "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
   "keywords": [