@bpmnkit/editor 0.0.35 → 0.2.0

package/dist/ops.js

@@ -0,0 +1,82 @@
+import { applyAutoLayout } from "@bpmnkit/core";
+import { createIdFactory } from "./id.js";
+import { changeElementType, createAnnotation, createAnnotationWithLink, createBoundaryEvent, createConnection, createShape, deleteElements, insertEdgeWaypoint, insertShapeOnEdge, moveEdgeSegment, moveEdgeWaypoint, moveShapes, pasteElements, removeCollinearWaypoints, resizeShape, updateEdgeEndpoint, updateLabel, updateLabelPosition, updateShapeColor, } from "./modeling.js";
+/** Performs an op. The same op, on the same document, anywhere. */
+export function applyOp(defs, op) {
+    switch (op.kind) {
+        case "createShape": {
+            const r = createShape(defs, op.type, op.bounds, op.name, createIdFactory(op.seed));
+            // Dropping a shape onto a flow splices it into that flow.
+            const next = op.onEdge ? insertShapeOnEdge(r.defs, op.onEdge, r.id) : r.defs;
+            return { defs: next, created: [r.id] };
+        }
+        case "createBoundaryEvent": {
+            const r = createBoundaryEvent(defs, op.hostId, op.eventDefType, op.bounds, true, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createAnnotation": {
+            const r = createAnnotation(defs, op.bounds, op.text, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createAnnotationFor": {
+            const r = createAnnotationWithLink(defs, op.bounds, op.sourceId, op.sourceBounds, undefined, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.annotationId, r.associationId] };
+        }
+        case "createConnection": {
+            const r = createConnection(defs, op.sourceId, op.targetId, op.waypoints, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createConnected": {
+            // One factory for both halves, so the pair of ids is one sequence.
+            const ids = createIdFactory(op.seed);
+            const shape = createShape(defs, op.type, op.bounds, op.name, ids);
+            const flow = createConnection(shape.defs, op.sourceId, shape.id, op.waypoints, ids);
+            return { defs: flow.defs, created: [shape.id, flow.id] };
+        }
+        case "paste": {
+            const r = pasteElements(defs, op.clipboard, op.offsetX, op.offsetY, createIdFactory(op.seed));
+            return { defs: r.defs, created: r.topLevelIds };
+        }
+        case "move": {
+            const moved = moveShapes(defs, op.moves);
+            const next = op.onEdge ? insertShapeOnEdge(moved, op.onEdge.edgeId, op.onEdge.shapeId) : moved;
+            return { defs: next, created: [] };
+        }
+        case "resize":
+            return { defs: resizeShape(defs, op.id, op.bounds), created: [] };
+        case "delete":
+            return { defs: deleteElements(defs, op.ids), created: [] };
+        case "rename":
+            return { defs: updateLabel(defs, op.id, op.name), created: [] };
+        case "labelPosition":
+            return { defs: updateLabelPosition(defs, op.id, op.bounds), created: [] };
+        case "color":
+            return { defs: updateShapeColor(defs, op.id, op.color), created: [] };
+        case "changeType":
+            return { defs: changeElementType(defs, op.id, op.type), created: [] };
+        case "reconnect":
+            return { defs: updateEdgeEndpoint(defs, op.edgeId, op.isStart, op.port), created: [] };
+        // Every waypoint edit tidies the route afterwards, so a drag that leaves
+        // three points in a line does not leave the middle one behind.
+        case "insertWaypoint":
+            return {
+                defs: removeCollinearWaypoints(insertEdgeWaypoint(defs, op.edgeId, op.segIdx, op.point), op.edgeId),
+                created: [],
+            };
+        case "moveWaypoint":
+            return {
+                defs: removeCollinearWaypoints(moveEdgeWaypoint(defs, op.edgeId, op.wpIdx, op.point), op.edgeId),
+                created: [],
+            };
+        case "moveSegment":
+            return {
+                defs: removeCollinearWaypoints(moveEdgeSegment(defs, op.edgeId, op.segIdx, op.isHoriz, op.delta), op.edgeId),
+                created: [],
+            };
+        case "autoLayout":
+            return { defs: applyAutoLayout(defs), created: [] };
+        case "snapshot":
+            return { defs: op.defs, created: [] };
+    }
+}
+//# sourceMappingURL=ops.js.map

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import type { CanvasEvents, CanvasOptions } from "@bpmnkit/canvas";
 import type { BpmnDefinitions } from "@bpmnkit/core";
 import type { Translate } from "./i18n.js";
+import type { EditorOp } from "./ops.js";
 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>;
@@ -25,6 +26,21 @@ export type EditorOptions = CanvasOptions & {
 };
 export interface EditorEvents extends CanvasEvents {
     "diagram:change": (defs: BpmnDefinitions) => void;
+    /**
+     * The same change, described rather than materialised.
+     *
+     * Fires immediately after `diagram:change` for every change to the document,
+     * undo and redo included — those arrive as a whole-document `snapshot` op,
+     * because the stack records states rather than inverses and a relay that
+     * never heard about an undo would be silently wrong from then on.
+     *
+     * The exception is `loadDefinitions`, which is the host replacing the
+     * document rather than the user changing it, and says nothing.
+     *
+     * A listener relaying edits to other people wants this event; a listener that
+     * just needs the current document wants `diagram:change`.
+     */
+    "diagram:op": (op: EditorOp, defs: BpmnDefinitions) => void;
     "editor:select": (ids: string[]) => void;
     "editor:tool": (tool: Tool) => void;
     "editor:drag": (dragging: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/editor",
-  "version": "0.0.35",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,6 +8,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js"
     }
   },
   "files": [
@@ -17,8 +21,8 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.1.0",
-    "@bpmnkit/core": "0.3.0"
+    "@bpmnkit/canvas": "0.2.0",
+    "@bpmnkit/core": "0.4.0"
   },
   "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
   "keywords": [