bpmn-js 18.15.0 → 18.16.1

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.15.0
+ * bpmn-js - bpmn-modeler v18.16.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-04-22
+ * Date: 2026-05-05
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -17584,6 +17584,27 @@
 	  remove$2(this._container);
 	};
 
+	/**
+	 * @overlord
+	 *
+	 * Register an event listener for events with the given name.
+	 *
+	 * The callback will be invoked with `event, ...additionalArguments`
+	 * that have been passed to {@link EventBus#fire}.
+	 *
+	 * Returning false from a listener will prevent the events default action
+	 * (if any is specified). To stop an event from being processed further in
+	 * other listeners execute {@link Event#stopPropagation}.
+	 *
+	 * Returning anything but `undefined` from a listener will stop the listener propagation.
+	 *
+	 * @template {keyof EventMap<ServiceMap>} EventName
+	 *
+	 * @param {EventName} events to subscribe to
+	 * @param {number} [priority=1000] listen priority
+	 * @param {EventBusEventCallback<(EventMap<ServiceMap>)[EventName]>} callback
+	 * @param {any} [that] callback context
+	 */
 	/**
 	 * @overlord
 	 *
@@ -17617,12 +17638,10 @@
 	 *
 	 * Returning anything but `undefined` from a listener will stop the listener propagation.
 	 *
-	 * @template {keyof EventMap<ServiceMap>} EventName
-	 *
-	 * @param {EventName} events to subscribe to
-	 * @param {number} [priority=1000] listen priority
-	 * @param {EventBusEventCallback<(EventMap<ServiceMap>)[EventName]>} callback
-	 * @param {any} [that] callback context
+	 * @param {string|string[]} events The event(s) to listen to.
+	 * @param {number} [priority] The priority with which to listen.
+	 * @param {Function} callback The callback.
+	 * @param {any} [that] Value of `this` the callback will be called with.
 	 */
 	BaseViewer.prototype.on = function(events, priority, callback, that) {
 	  return this.get('eventBus').on(events, priority, callback, that);
@@ -18324,6 +18343,60 @@
 	  return isLabel(element) && isLabelExternal(element.labelTarget);
 	}
 
+	var TEXT_ANNOTATION_PADDING = 7;
+
+	/**
+	 * @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() ];
+	}
+
 	var black = 'hsl(225, 10%, 15%)';
 	var white = 'white';
 
@@ -19561,15 +19634,14 @@
 
 	  function renderExternalLabel(parentGfx, element, attrs = {}) {
 	    var box = {
-	      width: 90,
-	      height: 30,
+	      width: element.width,
+	      height: element.height,
 	      x: element.width / 2 + element.x,
 	      y: element.height / 2 + element.y
 	    };
 
 	    return renderLabel(parentGfx, getLabel(element), {
 	      box: box,
-	      fitBox: true,
 	      style: assign$1(
 	        {},
 	        textRenderer.getExternalStyle(),
@@ -19986,7 +20058,7 @@
 
 	      drawPath(parentGfx, arrowPathData, {
 	        strokeWidth: 1,
-	        fill: getFillColor(element, defaultFillColor, attrs.fill),
+	        fill: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke)
 	      });
 
@@ -20653,9 +20725,7 @@
 	    'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {
 	      attrs = pickAttrs(attrs, [
 	        'fill',
-	        'stroke',
-	        'width',
-	        'height'
+	        'stroke'
 	      ]);
 
 	      var {
@@ -20689,7 +20759,7 @@
 	      renderLabel(parentGfx, text, {
 	        align: 'left-top',
 	        box: getBounds$1(element, attrs),
-	        padding: 7,
+	        padding: TEXT_ANNOTATION_PADDING,
 	        style: {
 	          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
 	        }
@@ -21363,7 +21433,7 @@
 	var DEFAULT_FONT_SIZE = 12;
 	var LINE_HEIGHT_RATIO = 1.2;
 
-	var MIN_TEXT_ANNOTATION_HEIGHT = 30;
+	var MIN_TEXT_ANNOTATION_HEIGHT = 40;
 
 	/**
 	 * @typedef { {
@@ -21419,20 +21489,20 @@
 	   */
 	  this.getExternalLabelBounds = function(bounds, text) {
 
-	    var layoutedDimensions = textUtil.getDimensions(text, {
-	      box: {
-	        width: 90,
-	        height: 30
-	      },
+	    var box = {
+	      width: Math.max(bounds.width, DEFAULT_LABEL_SIZE$1.width),
+	      height: 30
+	    };
+
+	    var dimensions = getTextboxDimensions(text, box, {
 	      style: externalStyle
 	    });
 
-	    // resize label shape to fit label text
 	    return {
-	      x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
-	      y: Math.round(bounds.y),
-	      width: Math.ceil(layoutedDimensions.width),
-	      height: Math.ceil(layoutedDimensions.height)
+	      x: Math.round(bounds.x + bounds.width / 2 - dimensions.width / 2),
+	      y: bounds.y,
+	      width: Math.ceil(dimensions.width),
+	      height: Math.ceil(dimensions.height)
 	    };
 
 	  };
@@ -21447,21 +21517,45 @@
 	   */
 	  this.getTextAnnotationBounds = function(bounds, text) {
 
-	    var layoutedDimensions = textUtil.getDimensions(text, {
-	      box: bounds,
+	    var dimensions = getTextboxDimensions(text, bounds, {
 	      style: defaultStyle,
 	      align: 'left-top',
-	      padding: 5
+	      padding: TEXT_ANNOTATION_PADDING
 	    });
 
 	    return {
 	      x: bounds.x,
 	      y: bounds.y,
 	      width: bounds.width,
-	      height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
+	      height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(dimensions.height))
 	    };
 	  };
 
+	  /**
+	   * Get the dimensions of a text element.
+	   *
+	   * @param {string} text
+	   * @param {TextLayoutConfig} [options]
+	   *
+	   * @return {import('diagram-js/lib/util/Types').Dimensions}
+	   */
+	  this.getDimensions = function(text, options) {
+	    return textUtil.getDimensions(text, options || {});
+	  };
+
+	  /**
+	   * Compute dimension of text fitted inside a box.
+	   *
+	   * @param {string} text
+	   * @param {Rect} box
+	   * @param {TextLayoutConfig} layoutOptions
+	   *
+	   * @return {import('diagram-js/lib/util/Types').Dimensions}
+	   */
+	  function getTextboxDimensions(text, box, layoutOptions) {
+	    return textUtil.getDimensions(text, assign$1({ box: box }, layoutOptions));
+	  }
+
 	  /**
 	   * Create a layouted text element.
 	   *
@@ -35032,7 +35126,12 @@
 
 	  // NOTHING TO DO; label already aligned a.O.K.
 	  if (freeAlignments.indexOf(labelOrientation) !== -1) {
-	    return;
+
+	    if (getOrientation(element.label, element) !== 'intersect') {
+	      return;
+	    }
+
+	    return labelOrientation;
 	  }
 
 	  return freeAlignments[0];
@@ -35087,7 +35186,6 @@
 	/**
 	 * @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
@@ -35105,13 +35203,11 @@
 	 * @param {Injector} injector
 	 * @param {EventBus} eventBus
 	 * @param {Canvas} canvas
-	 * @param {Modeling} modeling
 	 */
 	function ArtifactBehavior(
 	    injector,
 	    eventBus,
-	    canvas,
-	    modeling
+	    canvas
 	) {
 	  injector.invoke(CommandInterceptor, this);
 
@@ -35123,7 +35219,7 @@
 	    var enclosedArtifacts = getEnclosedArtifacts(elements);
 
 	    if (enclosedArtifacts.length) {
-	      modeling.removeElements(enclosedArtifacts);
+	      context.elements = elements.concat(enclosedArtifacts);
 	    }
 	  });
 
@@ -35188,8 +35284,7 @@
 	ArtifactBehavior.$inject = [
 	  'injector',
 	  'eventBus',
-	  'canvas',
-	  'modeling'
+	  'canvas'
 	];
 
 	/**
@@ -38751,28 +38846,56 @@
 	  });
 
 
+	  // snap label height to text content, preserving user-chosen width
+	  this.preExecute('shape.resize', function(event) {
+	    var context = event.context,
+	        shape = context.shape,
+	        hints = context.hints || {};
+
+	    if (!isLabel(shape) || hints.autoResize) {
+	      return;
+	    }
+
+	    var newBounds = context.newBounds;
+	    var dimensions = textRenderer.getDimensions(getLabel(shape) || '', {
+	      box: newBounds,
+	      style: textRenderer.getExternalStyle()
+	    });
+	    var height = Math.ceil(dimensions.height);
+
+	    // anchor to bottom edge if the top edge was moved, otherwise anchor to top
+	    var topEdgeMoved = newBounds.y !== shape.y;
+	    var bottom = shape.y + shape.height;
+
+	    context.newBounds = {
+	      width: newBounds.width,
+	      height: height,
+	      x: newBounds.x,
+	      y: topEdgeMoved ? bottom - height : newBounds.y
+	    };
+	  });
+
 	  // move external label after resizing
 	  this.postExecute('shape.resize', function(event) {
-
 	    var context = event.context,
 	        shape = context.shape,
 	        newBounds = context.newBounds,
 	        oldBounds = context.oldBounds;
 
-	    if (hasExternalLabel(shape)) {
+	    if (!hasExternalLabel(shape)) {
+	      return;
+	    }
 
-	      var label = shape.label,
-	          labelMid = getMid(label),
-	          edges = asEdges(oldBounds);
+	    var label = shape.label,
+	        labelMid = getMid(label),
+	        edges = asEdges(oldBounds);
 
-	      // get nearest border point to label as reference point
-	      var referencePoint = getReferencePoint$1(labelMid, edges);
+	    // get nearest border point to label as reference point
+	    var referencePoint = getReferencePoint$1(labelMid, edges);
 
-	      var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);
+	    var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);
 
-	      modeling.moveShape(label, delta);
-
-	    }
+	    modeling.moveShape(label, delta);
 
 	  });
 
@@ -39839,7 +39962,7 @@
 	/**
 	 * @type {Dimensions}
 	 */
-	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
+	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 100, height: 40 };
 
 	/**
 	 * Set minimum bounds/resize constraints on resize.
@@ -40480,58 +40603,6 @@
 	  }
 	}
 
-	/**
-	 * @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
@@ -41255,9 +41326,10 @@
 
 	/**
 	 * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+	 * @typedef {import('../../../draw/TextRenderer').default} TextRenderer
 	 */
 
-	function TextAnnotationBehavior(eventBus) {
+	function TextAnnotationBehavior(eventBus, textRenderer) {
 
 	  CommandInterceptor.call(this, eventBus);
 
@@ -41283,12 +41355,40 @@
 	      context.hints.autoResize = false;
 	    }
 	  }, true);
+
+	  // snap annotation height to text content, preserving user-chosen width
+	  this.preExecute('shape.resize', function(event) {
+	    var context = event.context,
+	        shape = context.shape,
+	        hints = context.hints || {};
+
+	    if (!is(shape, 'bpmn:TextAnnotation') || hints.autoResize) {
+	      return;
+	    }
+
+	    var newBounds = context.newBounds;
+	    var resizeBounds = textRenderer.getTextAnnotationBounds(newBounds, getLabel(shape) || '');
+
+	    // anchor to bottom edge only when the top edge moved AND the bottom edge stayed
+	    // (i.e. a user drag from the top handle), not for programmatic repositioning
+	    var topEdgeMoved = newBounds.y !== shape.y &&
+	      Math.abs((newBounds.y + newBounds.height) - (shape.y + shape.height)) <= 1;
+	    var bottom = shape.y + shape.height;
+
+	    context.newBounds = {
+	      width: newBounds.width,
+	      height: resizeBounds.height,
+	      x: newBounds.x,
+	      y: topEdgeMoved ? bottom - resizeBounds.height : newBounds.y
+	    };
+	  });
 	}
 
 	e$2(TextAnnotationBehavior, CommandInterceptor);
 
 	TextAnnotationBehavior.$inject = [
-	  'eventBus'
+	  'eventBus',
+	  'textRenderer'
 	];
 
 	/**
@@ -41957,6 +42057,7 @@
 	 * @typedef {import('../../model/Types').Shape} Shape
 	 * @typedef {import('../../model/Types').ModdleElement} ModdleElement
 	 *
+	 * @typedef {import('diagram-js/lib/util/Types').Direction} Direction
 	 * @typedef {import('diagram-js/lib/util/Types').Point} Point
 	 * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
 	 *
@@ -42041,9 +42142,10 @@
 	  this.addRule('shape.resize', function(context) {
 
 	    var shape = context.shape,
-	        newBounds = context.newBounds;
+	        newBounds = context.newBounds,
+	        direction = context.direction;
 
-	    return canResize(shape, newBounds);
+	    return canResize(shape, newBounds, direction);
 	  });
 
 	  this.addRule('elements.create', function(context) {
@@ -42879,11 +42981,12 @@
 
 	/**
 	 * @param {Shape} shape
-	 * @param {Rect} newBounds
+	 * @param {Rect} [newBounds]
+	 * @param {Direction} [direction]
 	 *
 	 * @return {boolean}
 	 */
-	function canResize(shape, newBounds) {
+	function canResize(shape, newBounds, direction) {
 	  if (is(shape, 'bpmn:SubProcess')) {
 	    return (
 	      isExpanded(shape) && (
@@ -42901,6 +43004,9 @@
 	  }
 
 	  if (isTextAnnotation(shape)) {
+	    if (direction) {
+	      return direction === 'e' || direction === 'w';
+	    }
 	    return true;
 	  }
 
@@ -42908,11 +43014,18 @@
 	    return true;
 	  }
 
+	  if (isLabel(shape)) {
+	    if (direction) {
+	      return direction === 'e' || direction === 'w';
+	    }
+	    return true;
+	  }
+
 	  return false;
 	}
 
 	/**
-	 * Check whether one of of the elements to be connected is a text annotation.
+	 * Check whether one of the elements to be connected is a text annotation.
 	 *
 	 * @param {Element} source
 	 * @param {Element} target
@@ -49327,7 +49440,7 @@
 	  }
 
 	  if (is(bo, 'bpmn:TextAnnotation')) {
-	    return { width: 100, height: 30 };
+	    return { width: 100, height: 40 };
 	  }
 
 	  if (is(bo, 'bpmn:Group')) {
@@ -61255,12 +61368,14 @@
 	ResizeHandles.prototype.addResizer = function(element) {
 	  var self = this;
 
-	  if (isConnection(element) || !this._resize.canResize({ shape: element })) {
+	  if (isConnection(element)) {
 	    return;
 	  }
 
 	  forEach(directions, function(direction) {
-	    self.createResizer(element, direction);
+	    if (self._resize.canResize({ shape: element, direction: direction })) {
+	      self.createResizer(element, direction);
+	    }
 	  });
 	};
 
@@ -61529,7 +61644,8 @@
 	  // external labels
 	  if (isLabelExternal(element)) {
 	    assign$1(options, {
-	      autoResize: true
+	      resizable: true,
+	      autoResize: true,
 	    });
 
 	    // keep background and border for external labels
@@ -61694,24 +61810,23 @@
 	    });
 	  }
 
-	  var width = 90 * zoom,
-	      paddingTop = 7 * zoom,
-	      paddingBottom = 4 * zoom;
+	  // making sure that editing box is correct
+	  var BORDER_WIDTH = 1;
+
+	  var width = bbox.width + 2 * BORDER_WIDTH;
 
 	  // external labels for events, data elements, gateways, groups and connections
 	  if (target.labelTarget) {
 	    assign$1(bounds, {
 	      width: width,
-	      height: bbox.height + paddingTop + paddingBottom,
-	      x: mid.x - width / 2,
-	      y: bbox.y - paddingTop
+	      height: bbox.height + 2 * BORDER_WIDTH,
+	      x: bbox.x - BORDER_WIDTH,
+	      y: bbox.y - BORDER_WIDTH
 	    });
 
 	    assign$1(style, {
 	      fontSize: externalFontSize + 'px',
-	      lineHeight: externalLineHeight,
-	      paddingTop: paddingTop + 'px',
-	      paddingBottom: paddingBottom + 'px'
+	      lineHeight: externalLineHeight
 	    });
 	  }
 
@@ -61729,38 +61844,39 @@
 	      height: 0
 	    });
 
-	    var height = externalFontSize + paddingTop + paddingBottom;
+	    var height = externalFontSize;
+	    var newLabelWidth = DEFAULT_LABEL_SIZE$1.width * zoom + 2 * BORDER_WIDTH;
 
 	    assign$1(bounds, {
-	      width: width,
-	      height: height,
-	      x: absoluteBBox.x - width / 2,
-	      y: absoluteBBox.y - height / 2
+	      width: newLabelWidth,
+	      height: height + 2 * BORDER_WIDTH,
+	      x: absoluteBBox.x - newLabelWidth / 2,
+	      y: absoluteBBox.y - height / 2 - BORDER_WIDTH
 	    });
 
 	    assign$1(style, {
 	      fontSize: externalFontSize + 'px',
-	      lineHeight: externalLineHeight,
-	      paddingTop: paddingTop + 'px',
-	      paddingBottom: paddingBottom + 'px'
+	      lineHeight: externalLineHeight
 	    });
 	  }
 
 	  // text annotations
 	  if (is(element, 'bpmn:TextAnnotation')) {
 	    assign$1(bounds, {
-	      width: bbox.width,
-	      height: bbox.height,
+	      width: bbox.width + 2 * BORDER_WIDTH,
+	      height: bbox.height + 2 * BORDER_WIDTH,
+	      x: bbox.x - BORDER_WIDTH,
+	      y: bbox.y - BORDER_WIDTH,
 	      minWidth: 30 * zoom,
 	      minHeight: 10 * zoom
 	    });
 
 	    assign$1(style, {
 	      textAlign: 'left',
-	      paddingTop: (5 * zoom) + 'px',
-	      paddingBottom: (7 * zoom) + 'px',
-	      paddingLeft: (7 * zoom) + 'px',
-	      paddingRight: (5 * zoom) + 'px',
+	      paddingTop: (TEXT_ANNOTATION_PADDING * zoom) + 'px',
+	      paddingBottom: (TEXT_ANNOTATION_PADDING * zoom) + 'px',
+	      paddingLeft: (TEXT_ANNOTATION_PADDING * zoom) + 'px',
+	      paddingRight: (TEXT_ANNOTATION_PADDING * zoom) + 'px',
 	      fontSize: defaultFontSize + 'px',
 	      lineHeight: defaultLineHeight
 	    });