bpmn-js 18.13.2 → 18.15.0

package/lib/features/label-editing/LabelEditingProvider.js

@@ -149,8 +149,7 @@ export default function LabelEditingProvider(
 
   function activateDirectEdit(element, force) {
     if (force ||
-        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Participant' ]) ||
-        isCollapsedSubProcess(element)) {
+        isAny(element, [ 'bpmn:Activity', 'bpmn:Event', 'bpmn:TextAnnotation', 'bpmn:Participant' ])) {
 
       directEditing.activate(element);
     }

package/lib/features/modeling/behavior/ArtifactBehavior.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A behavior that ensures that visually enclosed artifacts are affected
+ * by container element behavior:
+ *
+ *  * removed when the container is removed
+ *  * moved when the container is moved
+ *
+ */
+export default class ArtifactBehavior extends CommandInterceptor {
+    /**
+     * @param injector
+     * @param eventBus
+     * @param canvas
+     * @param modeling
+     */
+    constructor(injector: Injector, eventBus: EventBus, canvas: Canvas, modeling: Modeling);
+}
+
+type EventBus = import("diagram-js/lib/core/EventBus").default;
+type Canvas = import("diagram-js/lib/core/Canvas").default;
+type Modeling = import("../Modeling").default;
+type Injector = import("didi").Injector;
+type Element = import("../../../model/Types").Element;
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';

package/lib/features/modeling/behavior/ArtifactBehavior.js

@@ -0,0 +1,120 @@
+import inherits from 'inherits-browser';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import { getBBox, getEnclosedElements } from 'diagram-js/lib/util/Elements';
+
+import {
+  is
+} from '../../../util/ModelUtil';
+
+import { filter, forEach, values } from 'min-dash';
+
+
+/**
+ * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+ * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+ * @typedef {import('../Modeling').default} Modeling
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../../../model/Types').Element} Element
+ */
+
+var HIGH_PRIORITY = 1500;
+
+/**
+ * A behavior that ensures that visually enclosed artifacts are affected
+ * by container element behavior:
+ *
+ *  * removed when the container is removed
+ *  * moved when the container is moved
+ *
+ * @param {Injector} injector
+ * @param {EventBus} eventBus
+ * @param {Canvas} canvas
+ * @param {Modeling} modeling
+ */
+export default function ArtifactBehavior(
+    injector,
+    eventBus,
+    canvas,
+    modeling
+) {
+  injector.invoke(CommandInterceptor, this);
+
+  // enclosed artifacts are deleted with a container element
+  this.preExecute('elements.delete', HIGH_PRIORITY, function(event) {
+    var context = event.context,
+        elements = context.elements;
+
+    var enclosedArtifacts = getEnclosedArtifacts(elements);
+
+    if (enclosedArtifacts.length) {
+      modeling.removeElements(enclosedArtifacts);
+    }
+  });
+
+  // enclosed artifacts are moved with container element
+  eventBus.on('shape.move.start', function(event) {
+
+    var shapes = event.context.shapes;
+
+    var enclosedArtifacts = getEnclosedArtifacts(shapes);
+
+    if (enclosedArtifacts.length) {
+      event.context.shapes = shapes.concat(enclosedArtifacts);
+    }
+  });
+
+
+  /**
+   * @param { Element[] } elements
+   *
+   * @return { Element[] }
+   */
+  function getEnclosedArtifacts(elements) {
+
+    var containerElements = filter(
+      elements, e => is(e, 'bpmn:Participant') || is(e, 'bpmn:SubProcess')
+    );
+
+    if (!containerElements.length) {
+      return [];
+    }
+
+    var canvasRoot = canvas.getRootElement();
+
+    // artifacts that still need to be checked for being enclosed
+    var remainingArtifacts = new Set(canvasRoot.children.filter(
+      (child) => is(child, 'bpmn:Artifact')
+    ));
+
+    // artifacts that are definitely enclosed
+    var enclosedArtifacts = new Set();
+
+    // we need to verify for all container elements, all artifacts <m:n>
+    forEach(containerElements, containerElement => {
+      const newEnclosedArtifacts = new Set(values(
+        getEnclosedElements(
+          Array.from(remainingArtifacts),
+          getBBox(containerElement)
+        )
+      ));
+
+      enclosedArtifacts = enclosedArtifacts.union(newEnclosedArtifacts);
+      remainingArtifacts = remainingArtifacts.difference(newEnclosedArtifacts);
+    });
+
+    return Array.from(enclosedArtifacts);
+  }
+
+}
+
+inherits(ArtifactBehavior, CommandInterceptor);
+
+ArtifactBehavior.$inject = [
+  'injector',
+  'eventBus',
+  'canvas',
+  'modeling'
+];

package/lib/features/modeling/behavior/index.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   appendBehavior: (string | typeof AppendBehavior)[];
   associationBehavior: (string | typeof AssociationBehavior)[];
   attachEventBehavior: (string | typeof AttachEventBehavior)[];
+  artifactBehavior: (string | typeof ArtifactBehavior)[];
   boundaryEventBehavior: (string | typeof BoundaryEventBehavior)[];
   compensateBoundaryEventBehaviour: (string | typeof CompensateBoundaryEventBehavior)[];
   createBehavior: (string | typeof CreateBehavior)[];
@@ -46,6 +47,7 @@ import AdaptiveLabelPositioningBehavior from './AdaptiveLabelPositioningBehavior
 import AppendBehavior from './AppendBehavior';
 import AssociationBehavior from './AssociationBehavior';
 import AttachEventBehavior from './AttachEventBehavior';
+import ArtifactBehavior from './ArtifactBehavior';
 import BoundaryEventBehavior from './BoundaryEventBehavior';
 import CompensateBoundaryEventBehavior from './CompensateBoundaryEventBehavior';
 import CreateBehavior from './CreateBehavior';

package/lib/features/modeling/behavior/index.js

@@ -1,5 +1,6 @@
 import AdaptiveLabelPositioningBehavior from './AdaptiveLabelPositioningBehavior';
 import AppendBehavior from './AppendBehavior';
+import ArtifactBehavior from './ArtifactBehavior';
 import AssociationBehavior from './AssociationBehavior';
 import AttachEventBehavior from './AttachEventBehavior';
 import BoundaryEventBehavior from './BoundaryEventBehavior';
@@ -47,6 +48,7 @@ export default {
   __init__: [
     'adaptiveLabelPositioningBehavior',
     'appendBehavior',
+    'artifactBehavior',
     'associationBehavior',
     'attachEventBehavior',
     'boundaryEventBehavior',
@@ -91,6 +93,7 @@ export default {
   appendBehavior: [ 'type', AppendBehavior ],
   associationBehavior: [ 'type', AssociationBehavior ],
   attachEventBehavior: [ 'type', AttachEventBehavior ],
+  artifactBehavior: [ 'type', ArtifactBehavior ],
   boundaryEventBehavior: [ 'type', BoundaryEventBehavior ],
   compensateBoundaryEventBehaviour: [ 'type', CompensateBoundaryEventBehavior ],
   createBehavior: [ 'type', CreateBehavior ],

package/lib/features/modeling/cmd/SetColorHandler.js

@@ -1,162 +1,169 @@
-import {
-  assign,
-  forEach,
-  isString,
-  pick
-} from 'min-dash';
-
-import {
-  getDi,
-  isAny
-} from '../../../util/ModelUtil';
-
-import {
-  isLabel
-} from '../../../util/LabelUtil';
-
-import { isConnection } from 'diagram-js/lib/util/ModelUtil';
-
-/**
- * @typedef {import('diagram-js/lib/command/CommandHandler').default} CommandHandler
- *
- * @typedef {import('diagram-js/lib/command/CommandStack').default} CommandStack
- *
- * @typedef {import('../../../model/Types').ModdleElement} ModdleElement
- */
-
-var DEFAULT_COLORS = {
-  fill: undefined,
-  stroke: undefined
-};
-
-/**
- * @implements {CommandHandler}
- *
- * @param {CommandStack} commandStack
- */
-export default function SetColorHandler(commandStack) {
-  this._commandStack = commandStack;
-
-  this._normalizeColor = function(color) {
-
-    // Remove color for falsy values.
-    if (!color) {
-      return undefined;
-    }
-
-    if (isString(color)) {
-      var hexColor = colorToHex(color);
-
-      if (hexColor) {
-        return hexColor;
-      }
-    }
-
-    throw new Error(`invalid color value: ${ color }`);
-  };
-}
-
-SetColorHandler.$inject = [
-  'commandStack'
-];
-
-
-SetColorHandler.prototype.postExecute = function(context) {
-  var elements = context.elements,
-      colors = context.colors || DEFAULT_COLORS;
-
-  var self = this;
-
-  var di = {};
-
-  if ('fill' in colors) {
-    assign(di, {
-      'background-color': this._normalizeColor(colors.fill) });
-  }
-
-  if ('stroke' in colors) {
-    assign(di, {
-      'border-color': this._normalizeColor(colors.stroke) });
-  }
-
-  forEach(elements, function(element) {
-    var assignedDi = isConnection(element) ? pick(di, [ 'border-color' ]) : di,
-        elementDi = getDi(element);
-
-    // TODO @barmac: remove once we drop bpmn.io properties
-    ensureLegacySupport(assignedDi);
-
-    if (isLabel(element)) {
-
-      // set label colors as bpmndi:BPMNLabel#color
-      self._commandStack.execute('element.updateModdleProperties', {
-        element: element,
-        moddleElement: elementDi.label,
-        properties: {
-          color: di['border-color']
-        }
-      });
-    } else {
-
-      // ignore non-compliant di
-      if (!isAny(elementDi, [ 'bpmndi:BPMNEdge', 'bpmndi:BPMNShape' ])) {
-        return;
-      }
-
-      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
-      self._commandStack.execute('element.updateProperties', {
-        element: element,
-        properties: {
-          di: assignedDi
-        }
-      });
-    }
-  });
-
-};
-
-/**
- * Convert color from rgb(a)/hsl to hex. Returns `null` for unknown color names
- * and for colors with alpha less than 1.0. This depends on `<canvas>`
- * serialization of the `context.fillStyle`.
- * Cf. https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle
- *
- * @example
- *
- * ```javascript
- * colorToHex('fuchsia'); // "#ff00ff"
- *
- * colorToHex('rgba(1, 2, 3, 0.4)'); // null
- * ```
- *
- * @param {string} color
- *
- * @return {string|null}
- */
-function colorToHex(color) {
-  var context = document.createElement('canvas').getContext('2d');
-
-  // (0) Start with transparent to account for browser default values.
-  context.fillStyle = 'transparent';
-
-  // (1) Assign color so that it's serialized.
-  context.fillStyle = color;
-
-  // (2) Return null for non-hex serialization result.
-  return /^#[0-9a-fA-F]{6}$/.test(context.fillStyle) ? context.fillStyle : null;
-}
-
-/**
- * Add legacy properties if required.
- *
- * @param {ModdleElement} di
- */
-function ensureLegacySupport(di) {
-  if ('border-color' in di) {
-    di.stroke = di['border-color'];
-  }
-
-  if ('background-color' in di) {
-    di.fill = di['background-color'];
-  }
-}
+import {
+  assign,
+  forEach,
+  isString,
+  pick
+} from 'min-dash';
+
+import {
+  getDi,
+  is,
+  isAny
+} from '../../../util/ModelUtil';
+
+import {
+  isLabel
+} from '../../../util/LabelUtil';
+
+import { isConnection } from 'diagram-js/lib/util/ModelUtil';
+
+/**
+ * @typedef {import('diagram-js/lib/command/CommandHandler').default} CommandHandler
+ *
+ * @typedef {import('diagram-js/lib/command/CommandStack').default} CommandStack
+ *
+ * @typedef {import('../../../model/Types').ModdleElement} ModdleElement
+ */
+
+var DEFAULT_COLORS = {
+  fill: undefined,
+  stroke: undefined
+};
+
+/**
+ * @implements {CommandHandler}
+ *
+ * @param {CommandStack} commandStack
+ */
+export default function SetColorHandler(commandStack) {
+  this._commandStack = commandStack;
+
+  this._normalizeColor = function(color) {
+
+    // Remove color for falsy values.
+    if (!color) {
+      return undefined;
+    }
+
+    if (isString(color)) {
+      var hexColor = colorToHex(color);
+
+      if (hexColor) {
+        return hexColor;
+      }
+    }
+
+    throw new Error(`invalid color value: ${ color }`);
+  };
+}
+
+SetColorHandler.$inject = [
+  'commandStack'
+];
+
+
+SetColorHandler.prototype.postExecute = function(context) {
+  var elements = context.elements,
+      colors = context.colors || DEFAULT_COLORS;
+
+  var self = this;
+
+  var di = {};
+
+  if ('fill' in colors) {
+    assign(di, {
+      'background-color': this._normalizeColor(colors.fill)
+    });
+  }
+
+  if ('stroke' in colors) {
+    assign(di, {
+      'border-color': this._normalizeColor(colors.stroke)
+    });
+  }
+
+  forEach(elements, function(element) {
+    var assignedDi = isConnection(element) ? pick(di, [ 'border-color' ]) : di,
+        elementDi = getDi(element);
+
+    // TODO @barmac: remove once we drop bpmn.io properties
+    ensureLegacySupport(assignedDi);
+
+    if (isLabel(element)) {
+
+      if (!elementDi || !is(elementDi.label, 'bpmndi:BPMNLabel')) {
+        return;
+      }
+
+      // set label colors as bpmndi:BPMNLabel#color
+      self._commandStack.execute('element.updateModdleProperties', {
+        element: element,
+        moddleElement: elementDi.label,
+        properties: {
+          color: di['border-color']
+        }
+      });
+    } else {
+
+      // ignore non-compliant di
+      if (!isAny(elementDi, [ 'bpmndi:BPMNEdge', 'bpmndi:BPMNShape' ])) {
+        return;
+      }
+
+      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+      self._commandStack.execute('element.updateProperties', {
+        element: element,
+        properties: {
+          di: assignedDi
+        }
+      });
+    }
+  });
+
+};
+
+/**
+ * Convert color from rgb(a)/hsl to hex. Returns `null` for unknown color names
+ * and for colors with alpha less than 1.0. This depends on `<canvas>`
+ * serialization of the `context.fillStyle`.
+ * Cf. https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle
+ *
+ * @example
+ *
+ * ```javascript
+ * colorToHex('fuchsia'); // "#ff00ff"
+ *
+ * colorToHex('rgba(1, 2, 3, 0.4)'); // null
+ * ```
+ *
+ * @param {string} color
+ *
+ * @return {string|null}
+ */
+function colorToHex(color) {
+  var context = document.createElement('canvas').getContext('2d');
+
+  // (0) Start with transparent to account for browser default values.
+  context.fillStyle = 'transparent';
+
+  // (1) Assign color so that it's serialized.
+  context.fillStyle = color;
+
+  // (2) Return null for non-hex serialization result.
+  return /^#[0-9a-fA-F]{6}$/.test(context.fillStyle) ? context.fillStyle : null;
+}
+
+/**
+ * Add legacy properties if required.
+ *
+ * @param {ModdleElement} di
+ */
+function ensureLegacySupport(di) {
+  if ('border-color' in di) {
+    di.stroke = di['border-color'];
+  }
+
+  if ('background-color' in di) {
+    di.fill = di['background-color'];
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "18.13.2",
+  "version": "18.15.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "lib/index.js",
   "files": [
@@ -63,25 +63,25 @@
     "*.css"
   ],
   "devDependencies": {
-    "@babel/core": "^7.28.5",
+    "@babel/core": "^7.29.0",
     "@bpmn-io/a11y": "^0.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-terser": "^1.0.0",
-    "babel-loader": "^10.0.0",
-    "babel-plugin-istanbul": "^7.0.1",
+    "babel-loader": "^10.1.1",
+    "babel-plugin-istanbul": "^8.0.0",
     "bio-dts": "^0.11.0",
     "bpmn-font": "^0.12.1",
     "camunda-bpmn-moddle": "^4.0.1",
     "chai": "4.1.2",
     "chai-match": "^1.1.1",
-    "cpy": "^13.0.0",
-    "cross-env": "^10.0.0",
+    "cpy": "^13.2.1",
+    "cross-env": "^10.1.0",
     "del": "^8.0.0",
     "del-cli": "^7.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-plugin-bpmn-io": "^2.2.0",
     "execa": "^9.0.0",
     "file-drops": "^0.7.0",
@@ -98,25 +98,25 @@
     "mocha": "^10.8.2",
     "mocha-test-container-support": "0.2.0",
     "npm-run-all2": "^8.0.4",
-    "puppeteer": "~24.36.0",
+    "puppeteer": "^24.42.0",
     "remark-cli": "^12.0.1",
     "remark-preset-bpmn-io": "^0.4.0",
-    "rollup": "^4.55.1",
-    "rollup-plugin-license": "^3.6.0",
+    "rollup": "^4.60.2",
+    "rollup-plugin-license": "^3.7.1",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "ts-expect": "^1.3.0",
     "typescript": "^5.9.3",
-    "webpack": "^5.104.1"
+    "webpack": "^5.106.2"
   },
   "dependencies": {
     "bpmn-moddle": "^10.0.0",
-    "diagram-js": "^15.10.0",
+    "diagram-js": "^15.13.0",
     "diagram-js-direct-editing": "^3.3.0",
-    "ids": "^3.0.0",
+    "ids": "^3.0.2",
     "inherits-browser": "^0.1.0",
     "min-dash": "^5.0.0",
-    "min-dom": "^5.2.0",
+    "min-dom": "^5.3.0",
     "tiny-svg": "^4.1.4"
   },
   "remarkConfig": {