bpmn-js 18.13.0 → 18.13.2

package/dist/assets/diagram-js.css

@@ -113,6 +113,10 @@
   background: var(--shape-drop-allowed-fill-color) !important;
 }
 
+.djs-container svg:focus {
+  outline-offset: -1px;
+}
+
 /**
  * outline styles
  */

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.13.0
+ * bpmn-js - bpmn-modeler v18.13.2
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-03-04
+ * Date: 2026-03-23
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -18,7 +18,7 @@
 
 	function e$2(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:false,writable:true,configurable:true}}));}
 
-	function getDefaultExportFromCjs$2 (x) {
+	function getDefaultExportFromCjs$1 (x) {
 		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 	}
 
@@ -95,7 +95,7 @@
 	}
 
 	var hatExports = requireHat();
-	var hat = /*@__PURE__*/getDefaultExportFromCjs$2(hatExports);
+	var hat = /*@__PURE__*/getDefaultExportFromCjs$1(hatExports);
 
 	/**
 	 * @typedef { [ number, number ] | [ number, number, number ] } Seed
@@ -956,101 +956,86 @@
 	  return result;
 	}
 
-	function getDefaultExportFromCjs$1 (x) {
-		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-	}
+	/* eslint-disable no-multi-assign */
 
-	var domify_1;
-	var hasRequiredDomify;
+	const wrapMap = {
+		legend: [1, '<fieldset>', '</fieldset>'],
+		tr: [2, '<table><tbody>', '</tbody></table>'],
+		col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+		_default: [0, '', ''],
+	};
 
-	function requireDomify () {
-		if (hasRequiredDomify) return domify_1;
-		hasRequiredDomify = 1;
-		const wrapMap = {
-			legend: [1, '<fieldset>', '</fieldset>'],
-			tr: [2, '<table><tbody>', '</tbody></table>'],
-			col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
-			_default: [0, '', ''],
-		};
+	wrapMap.td
+	= wrapMap.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
 
-		wrapMap.td
-		= wrapMap.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
-
-		wrapMap.option
-		= wrapMap.optgroup = [1, '<select multiple="multiple">', '</select>'];
-
-		wrapMap.thead
-		= wrapMap.tbody
-		= wrapMap.colgroup
-		= wrapMap.caption
-		= wrapMap.tfoot = [1, '<table>', '</table>'];
-
-		wrapMap.polyline
-		= wrapMap.ellipse
-		= wrapMap.polygon
-		= wrapMap.circle
-		= wrapMap.text
-		= wrapMap.line
-		= wrapMap.path
-		= wrapMap.rect
-		= wrapMap.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">', '</svg>'];
-
-		function domify(htmlString, document = globalThis.document) {
-			if (typeof htmlString !== 'string') {
-				throw new TypeError('String expected');
-			}
-
-			// Handle comment nodes
-			const commentMatch = /^<!--(.*?)-->$/s.exec(htmlString);
-			if (commentMatch) {
-				return document.createComment(commentMatch[1]);
-			}
-
-			const tagName = /<([\w:]+)/.exec(htmlString)?.[1];
-
-			if (!tagName) {
-				return document.createTextNode(htmlString);
-			}
-
-			htmlString = htmlString.trim();
-
-			// Body support
-			if (tagName === 'body') {
-				const element = document.createElement('html');
-				element.innerHTML = htmlString;
-				const {lastChild} = element;
-				lastChild.remove();
-				return lastChild;
-			}
-
-			// Wrap map
-			let [depth, prefix, suffix] = Object.hasOwn(wrapMap, tagName) ? wrapMap[tagName] : wrapMap._default;
-			let element = document.createElement('div');
-			element.innerHTML = prefix + htmlString + suffix;
-			while (depth--) {
-				element = element.lastChild;
-			}
-
-			// One element
-			if (element.firstChild === element.lastChild) {
-				const {firstChild} = element;
-				firstChild.remove();
-				return firstChild;
-			}
-
-			// Several elements
-			const fragment = document.createDocumentFragment();
-			fragment.append(...element.childNodes);
-
-			return fragment;
+	wrapMap.option
+	= wrapMap.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+	wrapMap.thead
+	= wrapMap.tbody
+	= wrapMap.colgroup
+	= wrapMap.caption
+	= wrapMap.tfoot = [1, '<table>', '</table>'];
+
+	wrapMap.polyline
+	= wrapMap.ellipse
+	= wrapMap.polygon
+	= wrapMap.circle
+	= wrapMap.text
+	= wrapMap.line
+	= wrapMap.path
+	= wrapMap.rect
+	= wrapMap.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">', '</svg>'];
+
+	function domify(htmlString, document = globalThis.document) {
+		if (typeof htmlString !== 'string') {
+			throw new TypeError('String expected');
 		}
 
-		domify_1 = domify;
-		return domify_1;
-	}
+		// Handle comment nodes
+		const commentMatch = /^<!--(.*?)-->$/s.exec(htmlString);
+		if (commentMatch) {
+			return document.createComment(commentMatch[1]);
+		}
+
+		const tagName = /<([\w:]+)/.exec(htmlString)?.[1];
+
+		if (!tagName) {
+			return document.createTextNode(htmlString);
+		}
+
+		htmlString = htmlString.trim();
+
+		// Body support
+		if (tagName === 'body') {
+			const element = document.createElement('html');
+			element.innerHTML = htmlString;
+			const {lastChild} = element;
+			lastChild.remove();
+			return lastChild;
+		}
+
+		// Wrap map
+		let [depth, prefix, suffix] = Object.hasOwn(wrapMap, tagName) ? wrapMap[tagName] : wrapMap._default;
+		let element = document.createElement('div');
+		element.innerHTML = prefix + htmlString + suffix;
+		while (depth--) {
+			element = element.lastChild;
+		}
+
+		// One element
+		if (element.firstChild === element.lastChild) {
+			const {firstChild} = element;
+			firstChild.remove();
+			return firstChild;
+		}
 
-	var domifyExports = /*@__PURE__*/ requireDomify();
-	var domify = /*@__PURE__*/getDefaultExportFromCjs$1(domifyExports);
+		// Several elements
+		const fragment = document.createDocumentFragment();
+		fragment.append(...element.childNodes);
+
+		return fragment;
+	}
 
 	function _mergeNamespaces$1(n, m) {
 	  m.forEach(function (e) {
@@ -27827,7 +27812,7 @@
 	 * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
 	 * @typedef {import('./PopupMenuProvider').PopupMenuGroup} PopupMenuGroup
 	 *
-	 * @typedef {import('../search/search').default} search
+	 * @typedef {import('../search/search').default} searchFn
 	 *
 	 * @typedef {import('../../util/Types').Point} Point
 	 */
@@ -27847,7 +27832,7 @@
 	 * @param {boolean} [props.search]
 	 * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
 	 * @param {number} [props.width]
-	 * @param {search} props.searchFn
+	 * @param {searchFn} props.searchFn
 	 */
 	function PopupMenuComponent(props) {
 	  const {
@@ -27898,23 +27883,21 @@
 	    }).map(({ item }) => item);
 	  }, [ searchable ]);
 
-	  const [ entries, setEntries ] = p(filterEntries(originalEntries, searchValue));
+	  const entries = q(() => filterEntries(originalEntries, searchValue), [ originalEntries, searchValue, filterEntries ]);
 	  const [ selectedEntry, setSelectedEntry ] = p(entries[0]);
 
-	  const groupedEntries = q(() => groupEntries(entries), [ entries ]);
-
-	  const updateEntries = x((newEntries) => {
-
-	    // always select first
-	    setSelectedEntry(newEntries[0]);
+	  const groupedEntries = q(() => {
+	    if (searchValue.trim()) {
+	      return entries.length ? [ { id: 'default', entries } ] : [];
+	    }
 
-	    setEntries(newEntries);
-	  }, [ setEntries, setSelectedEntry ]);
+	    return groupEntries(entries);
+	  }, [ entries, searchValue ]);
 
-	  // filter entries on search value change
+	  // always select first entry when filtered entries change
 	  _(() => {
-	    updateEntries(filterEntries(originalEntries, searchValue));
-	  }, [ searchValue, originalEntries ]);
+	    setSelectedEntry(entries[0]);
+	  }, [ entries ]);
 
 	  // handle keyboard selection
 	  const keyboardSelect = x(direction => {
@@ -40324,6 +40307,58 @@
 	  }
 	}
 
+	/**
+	 * @typedef { import('../model/Types').Element } Element
+	 */
+
+	/**
+	 * Get text annotations connected to the given element.
+	 *
+	 * @param {Element} element
+	 *
+	 * @return { { annotation: Element, association: Element }[] }
+	 */
+	function getElementAnnotations(element) {
+	  let result = [];
+
+	  forEach(element.incoming, (connection) => {
+	    if (is(connection, 'bpmn:Association') && is(connection.source, 'bpmn:TextAnnotation')) {
+	      result.push({ annotation: connection.source, association: connection });
+	    }
+	  });
+
+	  forEach(element.outgoing, (connection) => {
+	    if (is(connection, 'bpmn:Association') && is(connection.target, 'bpmn:TextAnnotation')) {
+	      result.push({ annotation: connection.target, association: connection });
+	    }
+	  });
+
+	  return result;
+	}
+
+	/**
+	 * Recursively collect text annotations connected to the given elements and their descendants.
+	 * De-duplicates by annotation, collecting all associations per annotation.
+	 *
+	 * @param {Element[]} elements
+	 *
+	 * @return { { annotation: Element, associations: Element[] }[] }
+	 */
+	function collectElementsAnnotations(elements) {
+	  const result = new Map();
+
+	  forEach(selfAndChildren(elements, true), (element) => {
+	    forEach(getElementAnnotations(element), (entry) => {
+	      if (!result.has(entry.annotation)) {
+	        result.set(entry.annotation, { annotation: entry.annotation, associations: [] });
+	      }
+	      result.get(entry.annotation).associations.push(entry.association);
+	    });
+	  });
+
+	  return [ ...result.values() ];
+	}
+
 	/**
 	 * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
 	 * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
@@ -40346,7 +40381,6 @@
 	  y: 160
 	};
 
-
 	/**
 	 * Creates bpmndi:BPMNPlane elements and canvas planes when collapsed subprocesses are created.
 	 *
@@ -40412,17 +40446,26 @@
 	  }, true);
 
 
-	  this.postExecuted('shape.create', function(context) {
-	    var shape = context.shape,
-	        rootElement = context.newRootElement;
+	  this.postExecuted('elements.create', function(context) {
+	    var elements = context.elements;
 
-	    if (!rootElement || !shape.children) {
-	      return;
-	    }
+	    forEach(elements, function(element) {
+	      if (!isCollapsedSubProcess(element)) {
+	        return;
+	      }
+
+	      var rootElement = elementRegistry.get(getPlaneIdFromShape(element));
+
+	      if (!rootElement || !element.children || !element.children.length) {
+	        return;
+	      }
+
+	      var children = getSubProcessChildren(element);
 
-	    self._showRecursively(shape.children);
+	      self._showRecursively(children);
 
-	    self._moveChildrenToShape(shape, rootElement);
+	      self._moveChildrenToShape(children, rootElement);
+	    });
 	  }, true);
 
 
@@ -40436,6 +40479,20 @@
 	  }, true);
 
 
+	  // remove annotations connected to elements inside the subprocess
+	  this.preExecute('shape.delete', function(context) {
+	    var shape = context.shape;
+
+	    if (!is(shape, 'bpmn:SubProcess') || !isExpanded(shape)) {
+	      return;
+	    }
+
+	    forEach(collectElementsAnnotations([ shape ]), (entry) => {
+	      modeling.removeShape(entry.annotation);
+	    });
+	  }, true);
+
+
 	  this.preExecuted('shape.delete', function(context) {
 	    var shape = context.shape;
 	    if (!isCollapsedSubProcess(shape)) {
@@ -40641,11 +40698,27 @@
 
 	    if (!isExpanded(shape)) {
 
-	      // collapsed
-	      self._moveChildrenToShape(shape, rootElement);
+	      // if an annotation is attached to both the sub-process and elements inside it,
+	      // remove the inner associations, keeping only connections at the sub-process level,
+	      // since we can't keep both after collapsing
+	      self._disconnectSharedAnnotations(shape);
+
+	      var children = getSubProcessChildren(shape);
+
+	      self._moveChildrenToShape(children, rootElement);
 
 	    } else {
-	      self._moveChildrenToShape(rootElement, shape);
+	      self._moveChildrenToShape(rootElement.children.slice(), shape);
+
+	      // annotations live at process level by design;
+	      // move them back from the sub-process to the process root
+	      forEach(collectElementsAnnotations(shape.children), (entry) => {
+	        modeling.moveShape(entry.annotation, { x: 0, y: 0 }, shape.parent);
+
+	        forEach(entry.associations, (association) => {
+	          modeling.moveConnection(association, { x: 0, y: 0 }, shape.parent);
+	        });
+	      });
 	    }
 	  }, true);
 
@@ -40715,33 +40788,21 @@
 	e$2(SubProcessPlaneBehavior, CommandInterceptor);
 
 	/**
-	 * Moves the child elements from source to target.
+	 * Moves the given elements to the target.
 	 *
 	 * If the target is a plane, the children are moved to the top left corner.
 	 * Otherwise, the center of the target is used.
 	 *
-	 * @param {Root} source
+	 * @param {Element[]} children
 	 * @param {Root} target
 	 */
-	SubProcessPlaneBehavior.prototype._moveChildrenToShape = function(source, target) {
+	SubProcessPlaneBehavior.prototype._moveChildrenToShape = function(children, target) {
 	  var modeling = this._modeling;
 
-	  var children = source.children;
-	  var offset;
-
-	  if (!children) {
+	  if (!children.length) {
 	    return;
 	  }
 
-	  // add external labels that weren't children of sub process
-	  children = children.concat(children.reduce(function(labels, child) {
-	    if (child.label && child.label.parent !== source) {
-	      return labels.concat(child.label);
-	    }
-
-	    return labels;
-	  }, []));
-
 	  // only change plane if there are no visible children, but don't move them
 	  var visibleChildren = children.filter(function(child) {
 	    return !child.hidden;
@@ -40753,6 +40814,7 @@
 	  }
 
 	  var childrenBounds = getBBox(visibleChildren);
+	  var offset;
 
 	  // target is a plane
 	  if (!target.x) {
@@ -40778,6 +40840,32 @@
 	  modeling.moveElements(children, offset, target, { autoResize: false });
 	};
 
+	/**
+	 * Remove all associations between inner elements and annotations that are
+	 * also connected to the sub-process itself.
+	 *
+	 * @param {Element} shape
+	 */
+	SubProcessPlaneBehavior.prototype._disconnectSharedAnnotations = function(shape) {
+	  var modeling = this._modeling;
+
+	  var sharedAnnotations = new Set(
+	    getElementAnnotations(shape).map((entry) => entry.annotation)
+	  );
+
+	  if (!sharedAnnotations.size) {
+	    return;
+	  }
+
+	  forEach(collectElementsAnnotations(shape.children), (entry) => {
+	    if (sharedAnnotations.has(entry.annotation)) {
+	      forEach(entry.associations, (association) => {
+	        modeling.removeConnection(association);
+	      });
+	    }
+	  });
+	};
+
 	/**
 	 * Sets `hidden` property on all children of the given shape.
 	 *
@@ -40892,6 +40980,57 @@
 	  'elementRegistry'
 	];
 
+	/**
+	 * Collect text annotations and their associations connected to the given elements.
+	 *
+	 * @param {Element[]} elements
+	 *
+	 * @return {Element[]}
+	 */
+	function collectAnnotationElements(elements) {
+	  var result = [];
+
+	  forEach(collectElementsAnnotations(elements), (entry) => {
+	    result.push(entry.annotation);
+	    result.push.apply(result, entry.associations);
+	  });
+
+	  return result;
+	}
+
+	/**
+	 * Collect all children of a collapsed subprocess that need to be moved
+	 * to or from its plane, including annotations and external labels that
+	 * live at the process level by design(ref: https://github.com/camunda/camunda-modeler/issues/5163#issuecomment-3946571271)
+	 *
+	 * @param {Element} element
+	 *
+	 * @return {Element[]}
+	 */
+	function getSubProcessChildren(element) {
+	  return element.children.slice()
+	    .concat(collectAnnotationElements(element.children))
+	    .concat(getExternalLabels(element));
+	}
+
+	/**
+	 * Returns external labels of the given element's children and their descendants
+	 * that are not direct children of the element (i.e. parented elsewhere).
+	 *
+	 * @param {Element} element
+	 *
+	 * @return {Element[]}
+	 */
+	function getExternalLabels(element) {
+	  return selfAndChildren(element.children || [], true)
+	    .reduce(function(labels, child) {
+	      if (child.label && child.label.parent !== element) {
+	        labels.push(child.label);
+	      }
+	      return labels;
+	    }, []);
+	}
+
 	/**
 	 * @typedef {import('didi').Injector} Injector
 	 * @typedef {import('../Modeling').default} Modeling
@@ -41001,7 +41140,6 @@
 
 	  this.postExecuted('shape.toggleCollapse', 1500, function(context) {
 
-	    // var shape = context.shape;
 	    var shape = context.shape;
 
 	    // only change connections when collapsing
@@ -41032,6 +41170,12 @@
 	        return;
 	      }
 
+	      // don't reconnect TextAnnotation connections,
+	      // since they should stay connected and moved with its element to the subprocess plane
+	      if (is(c, 'bpmn:Association') && (is(c.source, 'bpmn:TextAnnotation') || is(c.target, 'bpmn:TextAnnotation'))) {
+	        return;
+	      }
+
 	      if (incoming) {
 	        modeling.reconnectEnd(c, shape, getMid(shape));
 	      } else {
@@ -44587,6 +44731,21 @@
 	    }
 	  });
 
+	  eventBus.on('copyPaste.createTree', function(context) {
+	    var element = context.element,
+	        children = context.children;
+
+	    if (!is(element, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    // add TextAnnotations to copy the closure,
+	    // since by default they are children of a global process, not subprocess
+	    forEach(collectElementsAnnotations(children), (entry) => {
+	      children.push(entry.annotation);
+	    });
+	  });
+
 	  // resolve references
 
 	  eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$b, function(context) {
@@ -54713,17 +54872,34 @@
 	    }
 	  }
 
-	  // attached to either top-right, top-left, bottom-right or bottom-left corner
-	  // and orientation is same on the counter-axis
+	  // attached to either top-right, top-left, bottom-right or bottom-left corner,
+	  // or strictly above/below or left/right of the target. In the corner case,
+	  // the orientation is compared on the counter-axis to decide the layout.
+
+	  var verticalAttachOrientation = getVerticalOrientation(attachOrientation),
+	      horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),
+	      verticalTargetOrientation = getVerticalOrientation(targetOrientation),
+	      horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);
+
+	  // If the target is strictly above/below (no horizontal orientation)
+	  if (verticalTargetOrientation && !horizontalTargetOrientation) {
+	    return 'v';
+	  }
+
+	  // If the target is strictly left/right (no vertical orientation)
+	  if (horizontalTargetOrientation && !verticalTargetOrientation) {
+	    return 'h';
+	  }
+
 
 	  if (isHorizontal) {
-	    if (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation))) {
+	    if (isSame(verticalAttachOrientation, verticalTargetOrientation)) {
 	      return 'h';
 	    } else {
 	      return 'v';
 	    }
 	  } else {
-	    if (isSame(getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation))) {
+	    if (isSame(horizontalAttachOrientation, horizontalTargetOrientation)) {
 	      return 'v';
 	    } else {
 	      return 'h';