@bpmnkit/editor 0.0.8

package/dist/state-machine.js

@@ -0,0 +1,588 @@
+import { applyResize } from "./geometry.js";
+// ── Helpers ───────────────────────────────────────────────────────────────────
+const DRAG_THRESHOLD = 4; // screen pixels
+function screenDist(ax, ay, bx, by) {
+    return Math.hypot(ax - bx, ay - by);
+}
+/**
+ * Discriminated-union state machine for the BPMN editor.
+ * Receives pointer + keyboard events from the editor and notifies the editor
+ * via injected `Callbacks`.
+ */
+export class EditorStateMachine {
+    _cb;
+    _mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+    constructor(_cb) {
+        this._cb = _cb;
+    }
+    get mode() {
+        return this._mode;
+    }
+    setMode(mode) {
+        this._mode = mode;
+    }
+    // ── Pointer down ─────────────────────────────────────────────────
+    onPointerDown(e, diag, hit) {
+        const mode = this._mode;
+        // Create mode: place shape and revert to select
+        if (mode.mode === "create") {
+            this._cb.commitCreate(mode.elementType, diag);
+            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            this._cb.setTool("select");
+            return;
+        }
+        // Space mode: lock viewport and begin drag
+        if (mode.mode === "space") {
+            this._cb.lockViewport(true);
+            this._mode = {
+                mode: "space",
+                sub: { name: "dragging", origin: diag, last: diag, axis: null },
+            };
+            return;
+        }
+        // Pan mode: viewport handles this
+        if (mode.mode === "pan")
+            return;
+        // If already in connecting mode (entered from contextual toolbar), a click commits or cancels
+        if (mode.sub.name === "connecting") {
+            this._cb.lockViewport(false);
+            if (hit.type === "shape" && hit.id !== mode.sub.sourceId) {
+                this._cb.commitConnect(mode.sub.sourceId, hit.id);
+            }
+            else {
+                this._cb.cancelConnect();
+            }
+            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            return;
+        }
+        // In label-editing mode: clicking elsewhere commits label (via blur) — do nothing here
+        if (mode.sub.name === "editing-label")
+            return;
+        switch (hit.type) {
+            case "handle": {
+                if (!this._cb.isResizable(hit.shapeId))
+                    break;
+                const shapes = this._cb.getShapes();
+                const shape = shapes.find((s) => s.id === hit.shapeId);
+                if (!shape)
+                    return;
+                this._cb.lockViewport(true);
+                this._mode = {
+                    mode: "select",
+                    sub: {
+                        name: "pointing-handle",
+                        origin: diag,
+                        id: hit.shapeId,
+                        handle: hit.handle,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    },
+                };
+                break;
+            }
+            case "port": {
+                this._cb.lockViewport(true);
+                this._mode = {
+                    mode: "select",
+                    sub: {
+                        name: "pointing-port",
+                        origin: diag,
+                        sourceId: hit.shapeId,
+                        port: hit.port,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    },
+                };
+                break;
+            }
+            case "shape": {
+                const selectedIds = this._cb.getSelectedIds();
+                if (e.shiftKey) {
+                    const newIds = selectedIds.includes(hit.id)
+                        ? selectedIds.filter((id) => id !== hit.id)
+                        : [...selectedIds, hit.id];
+                    this._cb.setSelection(newIds);
+                    this._mode = { mode: "select", sub: { name: "idle", hoveredId: hit.id } };
+                }
+                else {
+                    if (!selectedIds.includes(hit.id)) {
+                        this._cb.setSelection([hit.id]);
+                    }
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "pointing-shape",
+                            origin: diag,
+                            id: hit.id,
+                            screenX: e.clientX,
+                            screenY: e.clientY,
+                        },
+                    };
+                }
+                break;
+            }
+            case "edge": {
+                this._cb.setEdgeSelected(hit.id);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "edge-segment": {
+                this._cb.lockViewport(true);
+                this._mode = {
+                    mode: "select",
+                    sub: {
+                        name: "pointing-edge-segment",
+                        edgeId: hit.id,
+                        segIdx: hit.segIdx,
+                        isHoriz: hit.isHoriz,
+                        projPt: hit.projPt,
+                        origin: diag,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    },
+                };
+                break;
+            }
+            case "edge-waypoint": {
+                this._cb.lockViewport(true);
+                this._mode = {
+                    mode: "select",
+                    sub: {
+                        name: "pointing-edge-waypoint",
+                        edgeId: hit.id,
+                        wpIdx: hit.wpIdx,
+                        pt: hit.pt,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    },
+                };
+                break;
+            }
+            case "edge-endpoint": {
+                this._cb.lockViewport(true);
+                this._mode = {
+                    mode: "select",
+                    sub: {
+                        name: "pointing-edge-endpoint",
+                        edgeId: hit.edgeId,
+                        isStart: hit.isStart,
+                        origin: diag,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    },
+                };
+                break;
+            }
+            case "canvas": {
+                if (e.shiftKey) {
+                    this._cb.lockViewport(true);
+                    this._mode = {
+                        mode: "select",
+                        sub: { name: "rubber-band", origin: diag, current: diag },
+                    };
+                }
+                else {
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "pointing-canvas",
+                            origin: diag,
+                            screenX: e.clientX,
+                            screenY: e.clientY,
+                        },
+                    };
+                }
+                break;
+            }
+        }
+    }
+    // ── Pointer move ─────────────────────────────────────────────────
+    onPointerMove(e, diag, hit) {
+        const mode = this._mode;
+        // Space mode drag
+        if (mode.mode === "space" && mode.sub.name === "dragging") {
+            const sub = mode.sub;
+            const absDx = Math.abs(diag.x - sub.origin.x);
+            const absDy = Math.abs(diag.y - sub.origin.y);
+            let axis = sub.axis;
+            if (axis === null && (absDx > 4 || absDy > 4)) {
+                axis = absDx >= absDy ? "h" : "v";
+            }
+            this._mode = { mode: "space", sub: { ...sub, last: diag, axis } };
+            this._cb.previewSpace(sub.origin, diag, axis);
+            return;
+        }
+        if (mode.mode !== "select") {
+            if (mode.mode === "create") {
+                // Ghost create: update overlay (editor reads state.mode to update ghost)
+            }
+            return;
+        }
+        const sub = mode.sub;
+        switch (sub.name) {
+            case "idle": {
+                const hoveredId = hit.type === "shape" ? hit.id : null;
+                if (hoveredId !== sub.hoveredId) {
+                    this._cb.setHovered(hoveredId);
+                    this._mode = { mode: "select", sub: { name: "idle", hoveredId } };
+                }
+                if (hit.type === "edge-segment") {
+                    this._cb.showEdgeHoverDot(hit.projPt);
+                    this._cb.showEdgeWaypointBalls(hit.id);
+                }
+                else if (hit.type === "edge-waypoint") {
+                    this._cb.hideEdgeHoverDot();
+                    this._cb.showEdgeWaypointBalls(hit.id);
+                }
+                else {
+                    this._cb.hideEdgeHoverDot();
+                    this._cb.hideEdgeWaypointBalls();
+                }
+                break;
+            }
+            case "pointing-shape": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._cb.lockViewport(true);
+                    this._mode = {
+                        mode: "select",
+                        sub: { name: "translating", origin: sub.origin, last: diag },
+                    };
+                    const dx = diag.x - sub.origin.x;
+                    const dy = diag.y - sub.origin.y;
+                    this._cb.previewTranslate(dx, dy);
+                }
+                break;
+            }
+            case "translating": {
+                const dx = diag.x - sub.origin.x;
+                const dy = diag.y - sub.origin.y;
+                this._mode = { mode: "select", sub: { ...sub, last: diag } };
+                this._cb.previewTranslate(dx, dy);
+                break;
+            }
+            case "pointing-handle": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    const shapes = this._cb.getShapes();
+                    const shape = shapes.find((s) => s.id === sub.id);
+                    if (!shape)
+                        break;
+                    const newBounds = applyResize(shape.shape.bounds, sub.handle, diag.x, diag.y);
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "resizing",
+                            id: sub.id,
+                            handle: sub.handle,
+                            original: shape.shape.bounds,
+                            current: diag,
+                        },
+                    };
+                    this._cb.previewResize(newBounds);
+                }
+                break;
+            }
+            case "resizing": {
+                const newBounds = applyResize(sub.original, sub.handle, diag.x, diag.y);
+                this._mode = { mode: "select", sub: { ...sub, current: diag } };
+                this._cb.previewResize(newBounds);
+                break;
+            }
+            case "pointing-port": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._mode = {
+                        mode: "select",
+                        sub: { name: "connecting", sourceId: sub.sourceId, ghostEnd: diag },
+                    };
+                    this._cb.previewConnect(diag);
+                }
+                break;
+            }
+            case "connecting": {
+                this._mode = { mode: "select", sub: { ...sub, ghostEnd: diag } };
+                this._cb.previewConnect(diag);
+                break;
+            }
+            case "pointing-edge-endpoint": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "dragging-edge-endpoint",
+                            edgeId: sub.edgeId,
+                            isStart: sub.isStart,
+                            origin: sub.origin,
+                        },
+                    };
+                    this._cb.previewEndpointMove(sub.edgeId, sub.isStart, diag);
+                }
+                break;
+            }
+            case "dragging-edge-endpoint": {
+                this._cb.previewEndpointMove(sub.edgeId, sub.isStart, diag);
+                break;
+            }
+            case "pointing-edge-segment": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "dragging-edge-waypoint-new",
+                            edgeId: sub.edgeId,
+                            segIdx: sub.segIdx,
+                            origin: sub.origin,
+                        },
+                    };
+                    this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
+                }
+                break;
+            }
+            case "dragging-edge-waypoint-new": {
+                this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
+                break;
+            }
+            case "pointing-edge-waypoint": {
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._mode = {
+                        mode: "select",
+                        sub: {
+                            name: "dragging-edge-waypoint",
+                            edgeId: sub.edgeId,
+                            wpIdx: sub.wpIdx,
+                            origin: sub.pt,
+                        },
+                    };
+                    this._cb.previewWaypointMove(sub.edgeId, sub.wpIdx, diag);
+                }
+                break;
+            }
+            case "dragging-edge-waypoint": {
+                this._cb.previewWaypointMove(sub.edgeId, sub.wpIdx, diag);
+                break;
+            }
+            case "rubber-band": {
+                this._mode = { mode: "select", sub: { ...sub, current: diag } };
+                this._cb.previewRubberBand(sub.origin, diag);
+                break;
+            }
+            case "pointing-canvas": {
+                // Transition to rubber-band when drag threshold exceeded (no Shift required)
+                const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
+                if (dist > DRAG_THRESHOLD) {
+                    this._cb.lockViewport(true);
+                    this._mode = {
+                        mode: "select",
+                        sub: { name: "rubber-band", origin: sub.origin, current: diag },
+                    };
+                    this._cb.previewRubberBand(sub.origin, diag);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    // ── Pointer up ────────────────────────────────────────────────────
+    onPointerUp(_e, diag, hit) {
+        const mode = this._mode;
+        // Space mode commit
+        if (mode.mode === "space") {
+            if (mode.sub.name === "dragging") {
+                this._cb.lockViewport(false);
+                this._cb.commitSpace(mode.sub.origin, diag, mode.sub.axis);
+                this._mode = { mode: "space", sub: { name: "idle" } };
+            }
+            return;
+        }
+        if (mode.mode !== "select")
+            return;
+        const sub = mode.sub;
+        switch (sub.name) {
+            case "pointing-shape": {
+                this._cb.setSelection([sub.id]);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: sub.id } };
+                break;
+            }
+            case "translating": {
+                const dx = diag.x - sub.origin.x;
+                const dy = diag.y - sub.origin.y;
+                this._cb.lockViewport(false);
+                this._cb.commitTranslate(dx, dy);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-handle": {
+                this._cb.lockViewport(false);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "resizing": {
+                const newBounds = applyResize(sub.original, sub.handle, diag.x, diag.y);
+                this._cb.lockViewport(false);
+                this._cb.commitResize(sub.id, newBounds);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-port": {
+                this._cb.lockViewport(false);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "connecting": {
+                this._cb.lockViewport(false);
+                if (hit.type === "shape" && hit.id !== sub.sourceId) {
+                    this._cb.commitConnect(sub.sourceId, hit.id);
+                }
+                else {
+                    this._cb.cancelConnect();
+                }
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "rubber-band": {
+                this._cb.lockViewport(false);
+                this._cb.cancelRubberBand();
+                const minX = Math.min(sub.origin.x, sub.current.x);
+                const maxX = Math.max(sub.origin.x, sub.current.x);
+                const minY = Math.min(sub.origin.y, sub.current.y);
+                const maxY = Math.max(sub.origin.y, sub.current.y);
+                const shapes = this._cb.getShapes();
+                const ids = shapes
+                    .filter((s) => {
+                    const b = s.shape.bounds;
+                    return b.x + b.width > minX && b.x < maxX && b.y + b.height > minY && b.y < maxY;
+                })
+                    .map((s) => s.id);
+                this._cb.setSelection(ids);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-edge-endpoint": {
+                this._cb.lockViewport(false);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "dragging-edge-endpoint": {
+                this._cb.lockViewport(false);
+                this._cb.commitEndpointMove(sub.edgeId, sub.isStart, diag);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-edge-segment": {
+                this._cb.lockViewport(false);
+                // Tap without drag: select the edge
+                this._cb.setEdgeSelected(sub.edgeId);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "dragging-edge-waypoint-new": {
+                this._cb.lockViewport(false);
+                this._cb.commitWaypointInsert(sub.edgeId, sub.segIdx, diag);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-edge-waypoint": {
+                this._cb.lockViewport(false);
+                this._cb.setEdgeSelected(sub.edgeId);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "dragging-edge-waypoint": {
+                this._cb.lockViewport(false);
+                this._cb.commitWaypointMove(sub.edgeId, sub.wpIdx, diag);
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            case "pointing-canvas": {
+                if (!this._cb.viewportDidPan()) {
+                    this._cb.setSelection([]);
+                }
+                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    // ── Double-click ──────────────────────────────────────────────────
+    onDblClick(_e, _diag, hit) {
+        if (hit.type === "shape") {
+            this._mode = { mode: "select", sub: { name: "editing-label", id: hit.id } };
+            this._cb.startLabelEdit(hit.id);
+        }
+    }
+    // ── Key down ──────────────────────────────────────────────────────
+    onKeyDown(e) {
+        const mode = this._mode;
+        if (mode.mode === "create" && e.key === "Escape") {
+            e.preventDefault();
+            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            this._cb.setTool("select");
+            return;
+        }
+        if (mode.mode === "space" && e.key === "Escape") {
+            e.preventDefault();
+            if (mode.sub.name === "dragging") {
+                this._cb.lockViewport(false);
+                this._cb.cancelSpace();
+            }
+            this._mode = { mode: "space", sub: { name: "idle" } };
+            return;
+        }
+        if (mode.mode !== "select")
+            return;
+        const sub = mode.sub;
+        if (e.key === "Escape") {
+            e.preventDefault();
+            // Cancel in-progress operations
+            if (sub.name === "translating") {
+                this._cb.cancelTranslate();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "rubber-band" ||
+                sub.name === "pointing-handle" ||
+                sub.name === "resizing" ||
+                sub.name === "connecting" ||
+                sub.name === "pointing-port") {
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "pointing-edge-endpoint" || sub.name === "dragging-edge-endpoint") {
+                this._cb.lockViewport(false);
+                this._cb.cancelEndpointMove();
+            }
+            else if (sub.name === "pointing-edge-segment" || sub.name === "pointing-edge-waypoint") {
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "dragging-edge-waypoint-new") {
+                this._cb.lockViewport(false);
+                this._cb.cancelWaypointInsert();
+            }
+            else if (sub.name === "dragging-edge-waypoint") {
+                this._cb.lockViewport(false);
+                this._cb.cancelWaypointMove();
+            }
+            this._cb.setSelection([]);
+            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            return;
+        }
+        if (e.key === "Delete" || e.key === "Backspace") {
+            // Don't delete while label-editing
+            if (sub.name === "editing-label")
+                return;
+            e.preventDefault();
+            const ids = this._cb.getSelectedIds();
+            const edgeId = this._cb.getSelectedEdgeId();
+            const allIds = edgeId ? [...ids, edgeId] : ids;
+            if (allIds.length > 0) {
+                this._cb.executeDelete(allIds);
+            }
+            return;
+        }
+    }
+}
+//# sourceMappingURL=state-machine.js.map

package/dist/types.d.ts

@@ -0,0 +1,61 @@
+import type { CanvasEvents, CanvasOptions } from "@bpmnkit/canvas";
+import type { BpmnDefinitions } from "@bpmnkit/core";
+export type CreateShapeType = "startEvent" | "messageStartEvent" | "timerStartEvent" | "conditionalStartEvent" | "signalStartEvent" | "endEvent" | "messageEndEvent" | "escalationEndEvent" | "errorEndEvent" | "compensationEndEvent" | "signalEndEvent" | "terminateEndEvent" | "intermediateThrowEvent" | "intermediateCatchEvent" | "messageCatchEvent" | "messageThrowEvent" | "timerCatchEvent" | "escalationThrowEvent" | "conditionalCatchEvent" | "linkCatchEvent" | "linkThrowEvent" | "compensationThrowEvent" | "signalCatchEvent" | "signalThrowEvent" | "task" | "serviceTask" | "userTask" | "scriptTask" | "sendTask" | "receiveTask" | "businessRuleTask" | "manualTask" | "callActivity" | "subProcess" | "adHocSubProcess" | "transaction" | "exclusiveGateway" | "parallelGateway" | "inclusiveGateway" | "eventBasedGateway" | "complexGateway" | "textAnnotation";
+/** Element types that support resize handles. */
+export declare const RESIZABLE_TYPES: ReadonlySet<string>;
+export type Tool = "select" | "pan" | "space" | `create:${CreateShapeType}`;
+export type HandleDir = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
+export type PortDir = "top" | "right" | "bottom" | "left";
+export type EditorOptions = CanvasOptions & {
+    /**
+     * When true, the editor reads the initial theme from
+     * `localStorage.getItem("bpmnkit-theme")` and persists theme changes back to
+     * localStorage automatically. The stored key is `"bpmnkit-theme"`.
+     */
+    persistTheme?: boolean;
+};
+export interface EditorEvents extends CanvasEvents {
+    "diagram:change": (defs: BpmnDefinitions) => void;
+    "editor:select": (ids: string[]) => void;
+    "editor:tool": (tool: Tool) => void;
+    "editor:drag": (dragging: boolean) => void;
+}
+/** Label position options for events and gateways (external labels). */
+export type LabelPosition = "bottom" | "top" | "left" | "right" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
+export type HitResult = {
+    type: "canvas";
+} | {
+    type: "shape";
+    id: string;
+} | {
+    type: "handle";
+    shapeId: string;
+    handle: HandleDir;
+} | {
+    type: "port";
+    shapeId: string;
+    port: PortDir;
+} | {
+    type: "edge";
+    id: string;
+} | {
+    type: "edge-endpoint";
+    edgeId: string;
+    isStart: boolean;
+} | {
+    type: "edge-segment";
+    id: string;
+    segIdx: number;
+    isHoriz: boolean;
+    projPt: DiagPoint;
+} | {
+    type: "edge-waypoint";
+    id: string;
+    wpIdx: number;
+    pt: DiagPoint;
+};
+export interface DiagPoint {
+    x: number;
+    y: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.js

@@ -0,0 +1,17 @@
+/** Element types that support resize handles. */
+export const RESIZABLE_TYPES = new Set([
+    "task",
+    "serviceTask",
+    "userTask",
+    "scriptTask",
+    "sendTask",
+    "receiveTask",
+    "businessRuleTask",
+    "manualTask",
+    "callActivity",
+    "subProcess",
+    "adHocSubProcess",
+    "transaction",
+    "textAnnotation",
+]);
+//# sourceMappingURL=types.js.map