@bpmnkit/editor 0.0.31 → 0.0.33

package/dist/overlay.js

@@ -205,14 +205,14 @@ export class OverlayRenderer {
         this._resizePreviewG.appendChild(rect);
     }
     // ── Ghost connection ───────────────────────────────────────────────
-    setGhostConnection(waypoints) {
+    setGhostConnection(waypoints, invalid = false) {
         this._ghostConnG.innerHTML = "";
         if (!waypoints || waypoints.length < 2)
             return;
         const points = waypoints.map((wp) => `${wp.x},${wp.y}`).join(" ");
         const poly = svgEl("polyline");
         attr(poly, {
-            class: "bpmnkit-ghost-conn",
+            class: invalid ? "bpmnkit-ghost-conn bpmnkit-ghost-conn-invalid" : "bpmnkit-ghost-conn",
             points,
             "marker-end": `url(#${this._markerId})`,
         });

package/dist/rules.d.ts

@@ -1,10 +1,24 @@
-import type { BpmnElementType } from "@bpmnkit/core";
+/** True when `type` is an activity (task family, sub-process, call activity, …). */
+export declare function isActivity(type: string): boolean;
 /**
  * Returns true if a sequence flow from `sourceType` to `targetType` is valid.
  *
- * - endEvent cannot be a source
- * - startEvent cannot be a target
- * - boundaryEvent can only be a source
+ * BPMN defaults: an end event has no outgoing flow, a start event has no
+ * incoming flow, boundary events attach (they are never a flow *target*), data
+ * elements and annotations use associations rather than sequence flows, and an
+ * event-based gateway may only target intermediate catch events or receive tasks.
  */
-export declare function canConnect(sourceType: BpmnElementType, targetType: BpmnElementType): boolean;
+export declare function canConnect(sourceType: string, targetType: string): boolean;
+/** Returns true if a boundary event may attach to a host of `hostType` (activities only). */
+export declare function canAttach(hostType: string): boolean;
+/**
+ * Returns true if a `parentType` container may hold a `childType` element.
+ * Containers hold flow nodes; lanes and pools hold flow nodes but not other
+ * pools; data/annotation elements and flows are never containers.
+ */
+export declare function canContain(parentType: string, childType: string): boolean;
+/** Returns true if an element of `type` supports interactive resizing. */
+export declare function canResize(type: string): boolean;
+/** Returns true if an element may be morphed from `fromType` into `toType` (same category). */
+export declare function canMorph(fromType: string, toType: string): boolean;
 //# sourceMappingURL=rules.d.ts.map

package/dist/rules.js

@@ -1,17 +1,113 @@
+import { RESIZABLE_TYPES } from "./types.js";
+/**
+ * BPMN modeling rules — a small, dependency-free rule set matching the intent of
+ * bpmn-js's `BpmnRules`. Each predicate answers a single yes/no question and is
+ * consulted by the editor (state machine + HUD) before enabling or committing an
+ * action, so illegal edits are refused both visually and at commit time.
+ */
+const ACTIVITY_TYPES = new Set([
+    "task",
+    "serviceTask",
+    "userTask",
+    "scriptTask",
+    "sendTask",
+    "receiveTask",
+    "businessRuleTask",
+    "manualTask",
+    "callActivity",
+    "subProcess",
+    "adHocSubProcess",
+    "eventSubProcess",
+    "transaction",
+]);
+const CONTAINER_TYPES = new Set([
+    "process",
+    "subProcess",
+    "adHocSubProcess",
+    "eventSubProcess",
+    "transaction",
+    "participant",
+    "lane",
+]);
+const DATA_TYPES = new Set([
+    "dataObject",
+    "dataObjectReference",
+    "dataStoreReference",
+]);
+/** True when `type` is an activity (task family, sub-process, call activity, …). */
+export function isActivity(type) {
+    return ACTIVITY_TYPES.has(type);
+}
+function morphCategory(type) {
+    if (type.endsWith("Gateway"))
+        return "gateway";
+    if (type === "startEvent" || type.endsWith("StartEvent"))
+        return "startEvent";
+    if (type === "endEvent" || type.endsWith("EndEvent"))
+        return "endEvent";
+    if (type === "intermediateCatchEvent" ||
+        type === "intermediateThrowEvent" ||
+        type.endsWith("CatchEvent") ||
+        type.endsWith("ThrowEvent")) {
+        return "intermediateEvent";
+    }
+    if (ACTIVITY_TYPES.has(type))
+        return "activity";
+    return null;
+}
 /**
  * Returns true if a sequence flow from `sourceType` to `targetType` is valid.
  *
- * - endEvent cannot be a source
- * - startEvent cannot be a target
- * - boundaryEvent can only be a source
+ * BPMN defaults: an end event has no outgoing flow, a start event has no
+ * incoming flow, boundary events attach (they are never a flow *target*), data
+ * elements and annotations use associations rather than sequence flows, and an
+ * event-based gateway may only target intermediate catch events or receive tasks.
  */
 export function canConnect(sourceType, targetType) {
-    if (sourceType === "endEvent")
+    // End events never emit, start events never receive.
+    if (sourceType === "endEvent" || sourceType.endsWith("EndEvent"))
         return false;
-    if (targetType === "startEvent")
+    if (targetType === "startEvent" || targetType.endsWith("StartEvent"))
         return false;
     if (targetType === "boundaryEvent")
         return false;
+    // Data elements and text annotations are not sequence-flow endpoints.
+    if (DATA_TYPES.has(sourceType) || DATA_TYPES.has(targetType))
+        return false;
+    if (sourceType === "textAnnotation" || targetType === "textAnnotation")
+        return false;
+    // Event-based gateway → intermediate catch event or receive task only.
+    if (sourceType === "eventBasedGateway") {
+        return targetType === "intermediateCatchEvent" || targetType === "receiveTask";
+    }
+    return true;
+}
+/** Returns true if a boundary event may attach to a host of `hostType` (activities only). */
+export function canAttach(hostType) {
+    return isActivity(hostType);
+}
+/**
+ * Returns true if a `parentType` container may hold a `childType` element.
+ * Containers hold flow nodes; lanes and pools hold flow nodes but not other
+ * pools; data/annotation elements and flows are never containers.
+ */
+export function canContain(parentType, childType) {
+    if (!CONTAINER_TYPES.has(parentType))
+        return false;
+    // Pools/lanes and sub-processes never contain a participant (pool).
+    if (childType === "participant")
+        return false;
     return true;
 }
+/** Returns true if an element of `type` supports interactive resizing. */
+export function canResize(type) {
+    return RESIZABLE_TYPES.has(type);
+}
+/** Returns true if an element may be morphed from `fromType` into `toType` (same category). */
+export function canMorph(fromType, toType) {
+    if (fromType === toType)
+        return false;
+    const from = morphCategory(fromType);
+    return from !== null && from === morphCategory(toType);
+}
 //# sourceMappingURL=rules.js.map

package/dist/state-machine.d.ts

@@ -69,6 +69,7 @@ type SelectSub = {
     isHoriz: boolean;
     projPt: DiagPoint;
     origin: DiagPoint;
+    nearMidpoint: boolean;
     screenX: number;
     screenY: number;
 } | {
@@ -76,6 +77,12 @@ type SelectSub = {
     edgeId: string;
     segIdx: number;
     origin: DiagPoint;
+} | {
+    name: "dragging-edge-segment";
+    edgeId: string;
+    segIdx: number;
+    isHoriz: boolean;
+    origin: DiagPoint;
 } | {
     name: "pointing-edge-waypoint";
     edgeId: string;
@@ -127,7 +134,7 @@ export interface Callbacks {
     cancelTranslate(): void;
     previewResize(bounds: BpmnBounds): void;
     commitResize(id: string, bounds: BpmnBounds): void;
-    previewConnect(ghostEnd: DiagPoint): void;
+    previewConnect(ghostEnd: DiagPoint, targetId: string | null): void;
     cancelConnect(): void;
     commitConnect(sourceId: string, targetId: string): void;
     previewRubberBand(origin: DiagPoint, current: DiagPoint): void;
@@ -148,6 +155,9 @@ export interface Callbacks {
     previewWaypointMove(edgeId: string, wpIdx: number, pt: DiagPoint): void;
     commitWaypointMove(edgeId: string, wpIdx: number, pt: DiagPoint): void;
     cancelWaypointMove(): void;
+    previewSegmentMove(edgeId: string, segIdx: number, isHoriz: boolean, delta: number): void;
+    commitSegmentMove(edgeId: string, segIdx: number, isHoriz: boolean, delta: number): void;
+    cancelSegmentMove(): void;
     showEdgeHoverDot(pt: DiagPoint): void;
     hideEdgeHoverDot(): void;
     showEdgeWaypointBalls(edgeId: string): void;

package/dist/state-machine.js

@@ -148,6 +148,7 @@ export class EditorStateMachine {
                     isHoriz: hit.isHoriz,
                     projPt: hit.projPt,
                     origin: diag,
+                    nearMidpoint: hit.nearMidpoint,
                     screenX: e.clientX,
                     screenY: e.clientY,
                 });
@@ -290,13 +291,13 @@ export class EditorStateMachine {
                         sourceId: sub.sourceId,
                         ghostEnd: diag,
                     });
-                    this._cb.previewConnect(diag);
+                    this._cb.previewConnect(diag, hit.type === "shape" ? hit.id : null);
                 }
                 break;
             }
             case "connecting": {
                 this._mode = this._withSub({ ...sub, ghostEnd: diag });
-                this._cb.previewConnect(diag);
+                this._cb.previewConnect(diag, hit.type === "shape" ? hit.id : null);
                 break;
             }
             case "pointing-edge-endpoint": {
@@ -319,13 +320,28 @@ export class EditorStateMachine {
             case "pointing-edge-segment": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._mode = this._withSub({
-                        name: "dragging-edge-waypoint-new",
-                        edgeId: sub.edgeId,
-                        segIdx: sub.segIdx,
-                        origin: sub.origin,
-                    });
-                    this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
+                    if (sub.nearMidpoint) {
+                        // Near the segment midpoint → insert a new waypoint.
+                        this._mode = this._withSub({
+                            name: "dragging-edge-waypoint-new",
+                            edgeId: sub.edgeId,
+                            segIdx: sub.segIdx,
+                            origin: sub.origin,
+                        });
+                        this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
+                    }
+                    else {
+                        // Elsewhere on the segment → move the whole segment orthogonally.
+                        this._mode = this._withSub({
+                            name: "dragging-edge-segment",
+                            edgeId: sub.edgeId,
+                            segIdx: sub.segIdx,
+                            isHoriz: sub.isHoriz,
+                            origin: sub.origin,
+                        });
+                        const delta = sub.isHoriz ? diag.y - sub.origin.y : diag.x - sub.origin.x;
+                        this._cb.previewSegmentMove(sub.edgeId, sub.segIdx, sub.isHoriz, delta);
+                    }
                 }
                 break;
             }
@@ -333,6 +349,11 @@ export class EditorStateMachine {
                 this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
                 break;
             }
+            case "dragging-edge-segment": {
+                const delta = sub.isHoriz ? diag.y - sub.origin.y : diag.x - sub.origin.x;
+                this._cb.previewSegmentMove(sub.edgeId, sub.segIdx, sub.isHoriz, delta);
+                break;
+            }
             case "pointing-edge-waypoint": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
@@ -482,6 +503,13 @@ export class EditorStateMachine {
                 this._mode = this._idle();
                 break;
             }
+            case "dragging-edge-segment": {
+                this._cb.lockViewport(false);
+                const delta = sub.isHoriz ? diag.y - sub.origin.y : diag.x - sub.origin.x;
+                this._cb.commitSegmentMove(sub.edgeId, sub.segIdx, sub.isHoriz, delta);
+                this._mode = this._idle();
+                break;
+            }
             case "pointing-edge-waypoint": {
                 this._cb.lockViewport(false);
                 this._cb.setEdgeSelected(sub.edgeId);
@@ -557,6 +585,10 @@ export class EditorStateMachine {
                 this._cb.cancelWaypointMove();
                 this._cb.lockViewport(false);
             }
+            else if (sub.name === "dragging-edge-segment") {
+                this._cb.cancelSegmentMove();
+                this._cb.lockViewport(false);
+            }
         }
         this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
     }

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import type { CanvasEvents, CanvasOptions } from "@bpmnkit/canvas";
 import type { BpmnDefinitions } from "@bpmnkit/core";
+import type { Translate } from "./i18n.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>;
@@ -13,6 +14,14 @@ export type EditorOptions = CanvasOptions & {
      * localStorage automatically. The stored key is `"bpmnkit-theme"`.
      */
     persistTheme?: boolean;
+    /**
+     * Optional translation hook for the editor's HUD strings (palette labels,
+     * banners, keyboard-shortcut names, context-menu actions). Receives the
+     * English template as the key plus optional `{name}` interpolation vars and
+     * returns the localized string. Defaults to identity (English); return
+     * unlocalized keys unchanged.
+     */
+    translate?: Translate;
 };
 export interface EditorEvents extends CanvasEvents {
     "diagram:change": (defs: BpmnDefinitions) => void;
@@ -48,6 +57,8 @@ export type HitResult = {
     segIdx: number;
     isHoriz: boolean;
     projPt: DiagPoint;
+    /** True when the press is near the segment midpoint (→ insert a waypoint). */
+    nearMidpoint: boolean;
 } | {
     type: "edge-waypoint";
     id: string;

package/package.json

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