bpmn-js 18.13.2 → 18.15.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.13.2
+ * bpmn-js - bpmn-modeler v18.15.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-03-23
+ * Date: 2026-04-22
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -123,7 +123,7 @@
 	 *
 	 * @param {Object} [element] element to bind the id to
 	 *
-	 * @return {String} id
+	 * @return {string} id
 	 */
 	Ids$1.prototype.next = function(element) {
 	  return this._seed(element || true);
@@ -134,7 +134,7 @@
 	 *
 	 * @param {Object} [element] element to bind the id to
 	 *
-	 * @return {String} id
+	 * @return {string} id
 	 */
 	Ids$1.prototype.nextPrefixed = function(prefix, element) {
 	  var id;
@@ -153,8 +153,8 @@
 	/**
 	 * Manually claim an existing id.
 	 *
-	 * @param {String} id
-	 * @param {String} [element] element the id is claimed by
+	 * @param {string} id
+	 * @param {any} [element] element the id is claimed by
 	 */
 	Ids$1.prototype.claim = function(id, element) {
 	  this._seed.set(id, element || true);
@@ -163,8 +163,8 @@
 	/**
 	 * Returns true if the given id has already been assigned.
 	 *
-	 * @param  {String} id
-	 * @return {Boolean}
+	 * @param  {string} id
+	 * @return {boolean}
 	 */
 	Ids$1.prototype.assigned = function(id) {
 	  return this._seed.get(id) || false;
@@ -173,7 +173,7 @@
 	/**
 	 * Unclaim an id.
 	 *
-	 * @param  {String} id the id to unclaim
+	 * @param  {string} id the id to unclaim
 	 */
 	Ids$1.prototype.unclaim = function(id) {
 	  delete this._seed.hats[id];
@@ -3095,7 +3095,7 @@
 	 * @param {Element[]} elements List of Elements to search through
 	 * @param {Rect} bbox the enclosing bbox.
 	 *
-	 * @return {Element[]} enclosed elements
+	 * @return {Record<string, Element>} enclosed elements
 	 */
 	function getEnclosedElements(elements, bbox) {
 
@@ -20984,47 +20984,105 @@
 	  }
 	}
 
+	/** @type {CanvasRenderingContext2D | null} */
+	var _canvasContext = null;
+
 	/**
-	 * @param {string} text
-	 * @param {SVGTextElement} fakeText
+	 * @return {CanvasRenderingContext2D | null}
+	 */
+	function getCanvasContext() {
+	  if (!_canvasContext) {
+	    _canvasContext = document.createElement('canvas').getContext('2d');
+	  }
+
+	  return _canvasContext;
+	}
+
+	/**
+	 * Build a CSS font string from a style object for use with the canvas
+	 * measureText API.
 	 *
-	 * @return {import('../util/Types').Dimensions}
+	 * @param {Record<string, number | string>} style
+	 *
+	 * @return {string}
 	 */
-	function getTextBBox(text, fakeText) {
+	function buildFont(style) {
+	  var parts = [];
 
-	  fakeText.textContent = text;
+	  if (style.fontStyle) {
+	    parts.push(style.fontStyle);
+	  }
 
-	  var textBBox;
+	  if (style.fontVariant) {
+	    parts.push(style.fontVariant);
+	  }
 
-	  try {
-	    var bbox,
-	        emptyLine = text === '';
+	  if (style.fontWeight) {
+	    parts.push(style.fontWeight);
+	  }
 
-	    // add dummy text, when line is empty to
-	    // determine correct height
-	    fakeText.textContent = emptyLine ? 'dummy' : text;
+	  if (style.fontStretch) {
+	    parts.push(style.fontStretch);
+	  }
 
-	    textBBox = fakeText.getBBox();
+	  parts.push(buildLength(style.fontSize) || '12px');
+	  parts.push(style.fontFamily || 'sans-serif');
 
-	    // take text rendering related horizontal
-	    // padding into account
-	    bbox = {
-	      width: textBBox.width + textBBox.x * 2,
-	      height: textBBox.height
-	    };
+	  return parts.join(' ');
+	}
+
+	/**
+	 * Coerce a CSS length to a string with units, since canvas APIs
+	 * silently reject unitless lengths and keep the previous value.
+	 *
+	 * @param {number | string | undefined} value
+	 *
+	 * @return {string | undefined}
+	 */
+	function buildLength(value) {
+	  if (value == null) {
+	    return undefined;
+	  }
 
-	    if (emptyLine) {
+	  if (typeof value === 'number' || /^-?\d+(\.\d+)?$/.test(value)) {
+	    return value + 'px';
+	  }
 
-	      // correct width
-	      bbox.width = 0;
-	    }
+	  return value;
+	}
 
-	    return bbox;
-	  } catch (e) {
-	    console.log(e);
+	/**
+	 * @param {string} text
+	 * @param {Record<string, number | string>} style
+	 *
+	 * @return {import('../util/Types').Dimensions}
+	 */
+	function getTextBBox(text, style) {
+	  var ctx = getCanvasContext();
 
+	  if (!ctx) {
 	    return { width: 0, height: 0 };
 	  }
+
+	  ctx.font = buildFont(style);
+
+	  if ('letterSpacing' in ctx) {
+	    ctx.letterSpacing = buildLength(style.letterSpacing) || '0px';
+	  }
+
+	  var emptyLine = text === '';
+
+	  // strip trailing whitespace so measurement matches the browser's
+	  // native rendering used by direct editing
+	  var measurable = emptyLine ? 'dummy' : text.replace(/\s+$/, '');
+	  var metrics = ctx.measureText(measurable);
+
+	  return {
+	    width: emptyLine ? 0 : metrics.width,
+	    height: 'fontBoundingBoxAscent' in metrics
+	      ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent
+	      : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+	  };
 	}
 
 
@@ -21035,11 +21093,11 @@
 	 *
 	 * @param {string[]} lines
 	 * @param {number} maxWidth
-	 * @param {SVGTextElement} fakeText
+	 * @param {Record<string, number | string>} style
 	 *
 	 * @return {LineDescriptor} the line descriptor
 	 */
-	function layoutNext(lines, maxWidth, fakeText) {
+	function layoutNext(lines, maxWidth, style) {
 
 	  var originalLine = lines.shift(),
 	      fitLine = originalLine;
@@ -21047,7 +21105,7 @@
 	  var textBBox;
 
 	  for (;;) {
-	    textBBox = getTextBBox(fitLine, fakeText);
+	    textBBox = getTextBBox(fitLine, style);
 
 	    textBBox.width = fitLine ? textBBox.width : 0;
 
@@ -21154,33 +21212,6 @@
 	}
 
 
-	/**
-	 * @return {SVGSVGElement}
-	 */
-	function getHelperSvg() {
-	  var helperSvg = document.getElementById('helper-svg');
-
-	  if (!helperSvg) {
-	    helperSvg = create$1('svg');
-
-	    attr(helperSvg, {
-	      id: 'helper-svg'
-	    });
-
-	    assign(helperSvg, {
-	      visibility: 'hidden',
-	      position: 'fixed',
-	      width: 0,
-	      height: 0
-	    });
-
-	    document.body.appendChild(helperSvg);
-	  }
-
-	  return helperSvg;
-	}
-
-
 	/**
 	 * Creates a new label utility
 	 *
@@ -21247,17 +21278,8 @@
 
 	  var maxWidth = box.width - padding.left - padding.right;
 
-	  // ensure correct rendering by attaching helper text node to invisible SVG
-	  var helperText = create$1('text');
-	  attr(helperText, { x: 0, y: 0 });
-	  attr(helperText, style);
-
-	  var helperSvg = getHelperSvg();
-
-	  append(helperSvg, helperText);
-
 	  while (lines.length) {
-	    layouted.push(layoutNext(lines, maxWidth, helperText));
+	    layouted.push(layoutNext(lines, maxWidth, style));
 	  }
 
 	  if (align.vertical === 'middle') {
@@ -21320,8 +21342,6 @@
 	    append(textElement, tspan);
 	  });
 
-	  remove$1(helperText);
-
 	  var dimensions = {
 	    width: maxLineWidth,
 	    height: totalHeight
@@ -25050,7 +25070,7 @@
 	 */
 
 	var MARKER_HOVER = 'hover',
-	    MARKER_SELECTED = 'selected';
+	    MARKER_SELECTED$1 = 'selected';
 
 	/**
 	 * A plugin that adds a visible selection UI to shapes and connections
@@ -25085,11 +25105,11 @@
 	  eventBus.on('selection.changed', function(event) {
 
 	    function deselect(s) {
-	      removeMarker(s, MARKER_SELECTED);
+	      removeMarker(s, MARKER_SELECTED$1);
 	    }
 
 	    function select(s) {
-	      addMarker(s, MARKER_SELECTED);
+	      addMarker(s, MARKER_SELECTED$1);
 	    }
 
 	    var oldSelection = event.oldSelection,
@@ -28757,11 +28777,16 @@
 	/**
 	 * @typedef { {
 	 *   index: number;
-	 *   match: boolean;
-	 *   value: string;
-	 * } } Token
+	 *   value: string,
+	 *   match?: boolean;
+	 *   start?: boolean;
+	 *   end?: boolean;
+	 *   wordStart?: boolean;
+	 *   wordEnd?: boolean;
+	 *   all?: boolean;
+	 * } } BaseToken
 	 *
-	 * @typedef {Token[]} Tokens
+	 * @typedef { BaseToken | BaseToken[] } Token
 	 */
 
 	/**
@@ -28769,7 +28794,7 @@
 	 *
 	 * @typedef { {
 	 *   item: R,
-	 *   tokens: Record<string, Tokens>
+	 *   tokens: Record<string, Token[]>
 	 * } } SearchResult
 	 */
 
@@ -28780,15 +28805,15 @@
 	/**
 	 * Search items by query.
 	 *
-	 * @template {SearchItem} T
+	 * @template { SearchItem } T
 	 *
-	 * @param {T[]} items elements to search in
-	 * @param {string} pattern pattern to search for
+	 * @param { T[] } items elements to search in
+	 * @param { string } pattern pattern to search for
 	 * @param { {
 	 *   keys: string[];
 	 * } } options
 	 *
-	 * @returns {SearchResult<T>[]}
+	 * @returns { SearchResult<T>[] }
 	 */
 	function search(items, pattern, options) {
 
@@ -28804,7 +28829,7 @@
 
 	  const words = pattern.trim().toLowerCase().split(/\s+/);
 
-	  return items.flatMap((item) => {
+	  return items.flatMap((/** @type {T} */ item) => {
 	    const tokens = matchItem(item, words, keys);
 
 	    if (!tokens) {
@@ -28821,11 +28846,11 @@
 	/**
 	 * Match an item and return tokens in case of a match.
 	 *
-	 * @param {SearchItem} item element to be matched
-	 * @param {string[]} words words from search pattern to find
-	 * @param {string[]} keys keys to search in the item
+	 * @param { SearchItem } item element to be matched
+	 * @param { string[] } words words from search pattern to find
+	 * @param { string[] } keys keys to search in the item
 	 *
-	 * @returns {Record<string, Tokens>}
+	 * @returns { Record<string, Token[]> | null }
 	 */
 	function matchItem(item, words, keys) {
 
@@ -28852,8 +28877,8 @@
 	          };
 	        },
 	        {
-	          matchedWords: {},
-	          tokens: []
+	          matchedWords: /** @type { Record<string, boolean> } */ ({}),
+	          tokens: /** @type { Token[] } */ ([])
 	        }
 	      )
 	    ) : (
@@ -28886,15 +28911,17 @@
 	/**
 	 * Creates a compare function that can be used in Array.sort() based on a custom scoring function
 	 *
-	 * @param {string[]} keys
+	 * @template {SearchItem} T
+	 *
+	 * @param { string[] } keys
 	 *
-	 * @returns { (resultA: SearchResult, resultB: SearchResult) => number}
+	 * @returns { (resultA: SearchResult<T>, resultB: SearchResult<T>) => number }
 	 */
 	function createResultSorter(keys) {
 
 	  /**
-	   * @param {SearchResult} resultA
-	   * @param {SearchResult} resultB
+	   * @param { SearchResult<T> } resultA
+	   * @param { SearchResult<T> } resultB
 	   */
 	  return (resultA, resultB) => {
 	    let comparison = 0;
@@ -28911,7 +28938,7 @@
 
 	      if (tokenComparison !== 0) {
 	        comparison += tokenComparison * modifier;
-	        modifier *= 0.9;
+	        modifier *= DECAY_MODIFIER;
 	        continue;
 	      }
 
@@ -28922,7 +28949,7 @@
 
 	      if (stringComparison !== 0) {
 	        comparison += stringComparison * modifier;
-	        modifier *= 0.9;
+	        modifier *= DECAY_MODIFIER;
 	        continue;
 	      }
 	    }
@@ -28935,21 +28962,43 @@
 	/**
 	 * Compares two token arrays.
 	 *
-	 * @param {Token[]} [tokensA]
-	 * @param {Token[]} [tokensB]
+	 * @param { Token[] } tokensA
+	 * @param { Token[] } tokensB
 	 *
-	 * @returns {number}
+	 * @returns { number }
 	 */
 	function compareTokens(tokensA, tokensB) {
 	  return scoreTokens(tokensB) - scoreTokens(tokensA);
 	}
 
+	const DECAY_MODIFIER = 0.5;
+
+	const TOKEN_MATCH_SCORES = {
+	  FULL: 131.9,
+	  START_FULL_WORD: 8.0,
+	  START_WORD_PART: 7.87,
+	  WORD_START: 2.19,
+	  WORD_PART: 1,
+	  NO_MATCH: -0.07
+	};
+
 	/**
 	 * @param { Token[] } tokens
 	 * @returns { number }
 	 */
 	function scoreTokens(tokens) {
-	  return tokens.reduce((sum, token) => sum + scoreToken(token), 0);
+	  const baseScore = tokens.reduce((sum, token) => sum + scoreToken(token), 0);
+
+	  const flatTokens = tokens.flat();
+
+	  const totalLength = flatTokens.reduce((sum, token) => sum + token.value.length, 0);
+	  const matchedLength = flatTokens.reduce((sum, token) => sum + (token.match ? token.value.length : 0), 0);
+
+	  const density = totalLength ? matchedLength / totalLength : 0;
+
+	  const score = baseScore * (1 + density);
+
+	  return score;
 	}
 
 	/**
@@ -28968,28 +29017,30 @@
 	  const modifier = Math.log(token.value.length);
 
 	  if (!token.match) {
-	    return -0.07 * modifier;
+	    return TOKEN_MATCH_SCORES.NO_MATCH * modifier;
 	  }
 
 	  return (
 	    token.start
 	      ? (
 	        token.end
-	          ? 131.9
-	          : 7.87
+	          ? TOKEN_MATCH_SCORES.FULL
+	          : token.wordEnd
+	            ? TOKEN_MATCH_SCORES.START_FULL_WORD
+	            : TOKEN_MATCH_SCORES.START_WORD_PART
 	      )
 	      : (
 	        token.wordStart
-	          ? 2.19
-	          : 1
+	          ? TOKEN_MATCH_SCORES.WORD_START
+	          : TOKEN_MATCH_SCORES.WORD_PART
 	      )
 	  ) * modifier;
 	}
 
 	/**
-	 * @param {string|string[]} [str='']
+	 * @param { string|string[] } [str='']
 	 *
-	 * @return {string}
+	 * @return { string }
 	 */
 	function stringJoin(str = '') {
 	  return isArray$2(str) ? str.join(', ') : str;
@@ -28998,10 +29049,10 @@
 	/**
 	 * Compares two strings. also supports string arrays, which will be joined
 	 *
-	 * @param {string|string[]} [a]
-	 * @param {string|string[]} [b]
+	 * @param { string|string[] } [a]
+	 * @param { string|string[] } [b]
 	 *
-	 * @returns {number}
+	 * @returns { number }
 	 */
 	function compareStrings(a, b) {
 	  return stringJoin(a).localeCompare(stringJoin(b));
@@ -29011,11 +29062,11 @@
 	 * Match a given string against a set of words,
 	 * and return the result.
 	 *
-	 * @param {string} string
-	 * @param {string[]} words
+	 * @param { string } string
+	 * @param { string[] } words
 	 *
 	 * @return { {
-	 *   tokens: Token[],
+	 *   tokens: BaseToken[],
 	 *   matchedWords: Record<string, boolean>
 	 * } }
 	 */
@@ -29028,7 +29079,14 @@
 	    };
 	  }
 
+	  /**
+	   * @type { BaseToken[] }
+	   */
 	  const tokens = [];
+
+	  /**
+	   * @type { Record<string, boolean> }
+	   */
 	  const matchedWords = {};
 
 	  const wordsEscaped = words.map(escapeRegexp);
@@ -29053,7 +29111,7 @@
 	    const start = startIndex === 0;
 	    const end = endIndex === string.length;
 
-	    const all = !!match.groups.all;
+	    const all = !!match.groups?.all;
 
 	    const wordStart = start || /\s/.test(string.charAt(startIndex - 1));
 	    const wordEnd = end || /\s/.test(string.charAt(endIndex));
@@ -29102,6 +29160,13 @@
 	  };
 	}
 
+	/**
+	 * Escape string to not contain illegal regexp chars.
+	 *
+	 * @param { string } string
+	 *
+	 * @return { string }
+	 */
 	function escapeRegexp(string) {
 	  return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
 	}
@@ -30695,7 +30760,7 @@
 	 * @typedef {import('../../core/EventBus').default} EventBus
 	 */
 
-	var HIGH_PRIORITY$k = 1500;
+	var HIGH_PRIORITY$l = 1500;
 
 
 	/**
@@ -30763,7 +30828,7 @@
 	     */
 	    eventBus.on('drag.start', function(event) {
 
-	      eventBus.once('drag.move', HIGH_PRIORITY$k, function(event) {
+	      eventBus.once('drag.move', HIGH_PRIORITY$l, function(event) {
 
 	        ensureHover(event);
 
@@ -30794,7 +30859,7 @@
 	      hover = event.element;
 	    });
 
-	    eventBus.on('element.hover', HIGH_PRIORITY$k, function(event) {
+	    eventBus.on('element.hover', HIGH_PRIORITY$l, function(event) {
 
 	      // (3) am I on an element still?
 	      if (hover) {
@@ -32745,7 +32810,7 @@
 	    MARKER_CONNECT_UPDATING$1 = 'djs-updating',
 	    MARKER_DRAGGER = 'djs-dragging';
 
-	var HIGH_PRIORITY$j = 1100;
+	var HIGH_PRIORITY$k = 1100;
 
 	/**
 	 * Preview connection while moving bendpoints.
@@ -32813,7 +32878,7 @@
 	  eventBus.on([
 	    'bendpoint.move.out',
 	    'bendpoint.move.cleanup'
-	  ], HIGH_PRIORITY$j, function(event) {
+	  ], HIGH_PRIORITY$k, function(event) {
 	    var context = event.context,
 	        hover = context.hover,
 	        target = context.target;
@@ -32899,7 +32964,7 @@
 	  eventBus.on([
 	    'bendpoint.move.end',
 	    'bendpoint.move.cancel'
-	  ], HIGH_PRIORITY$j, function(event) {
+	  ], HIGH_PRIORITY$k, function(event) {
 	    var context = event.context,
 	        connection = context.connection,
 	        draggerGfx = context.draggerGfx,
@@ -33915,7 +33980,7 @@
 	 * @typedef {import('../../core/EventBus').default} EventBus
 	 */
 
-	var HIGH_PRIORITY$i = 1100,
+	var HIGH_PRIORITY$j = 1100,
 	    LOW_PRIORITY$k = 900;
 
 	var MARKER_OK$3 = 'connect-ok',
@@ -33976,7 +34041,7 @@
 	  eventBus.on([
 	    'connect.out',
 	    'connect.cleanup'
-	  ], HIGH_PRIORITY$i, function(event) {
+	  ], HIGH_PRIORITY$j, function(event) {
 	    var hover = event.hover;
 
 	    if (hover) {
@@ -35019,6 +35084,114 @@
 	  'eventBus'
 	];
 
+	/**
+	 * @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$i = 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
+	 */
+	function ArtifactBehavior(
+	    injector,
+	    eventBus,
+	    canvas,
+	    modeling
+	) {
+	  injector.invoke(CommandInterceptor, this);
+
+	  // enclosed artifacts are deleted with a container element
+	  this.preExecute('elements.delete', HIGH_PRIORITY$i, 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);
+	  }
+
+	}
+
+	e$2(ArtifactBehavior, CommandInterceptor);
+
+	ArtifactBehavior.$inject = [
+	  'injector',
+	  'eventBus',
+	  'canvas',
+	  'modeling'
+	];
+
 	/**
 	 * @typedef {import('didi').Injector} Injector
 	 * @typedef {import('../Modeling').default} Modeling
@@ -41668,6 +41841,7 @@
 	  __init__: [
 	    'adaptiveLabelPositioningBehavior',
 	    'appendBehavior',
+	    'artifactBehavior',
 	    'associationBehavior',
 	    'attachEventBehavior',
 	    'boundaryEventBehavior',
@@ -41712,6 +41886,7 @@
 	  appendBehavior: [ 'type', AppendBehavior ],
 	  associationBehavior: [ 'type', AssociationBehavior ],
 	  attachEventBehavior: [ 'type', AttachEventBehavior ],
+	  artifactBehavior: [ 'type', ArtifactBehavior ],
 	  boundaryEventBehavior: [ 'type', BoundaryEventBehavior ],
 	  compensateBoundaryEventBehaviour: [ 'type', CompensateBoundaryEventBehavior ],
 	  createBehavior: [ 'type', CreateBehavior ],
@@ -53075,149 +53250,155 @@
 	  return [];
 	};
 
-	/**
-	 * @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
-	 */
-	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$1(di, {
-	      'background-color': this._normalizeColor(colors.fill) });
-	  }
-
-	  if ('stroke' in colors) {
-	    assign$1(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'];
-	  }
+	/**
+	 * @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
+	 */
+	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$1(di, {
+	      'background-color': this._normalizeColor(colors.fill)
+	    });
+	  }
+
+	  if ('stroke' in colors) {
+	    assign$1(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'];
+	  }
 	}
 
 	var NULL_DIMENSIONS = {
@@ -61270,8 +61451,7 @@
 
 	  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);
 	    }
@@ -63733,10 +63913,23 @@
 	 * @typedef {import('../tool-manager/ToolManager').default} ToolManager
 	 *
 	 * @typedef {import('../../util/Types').Rect} Rect
+	 * @typedef {import('../../model/Types').Element} Element
+	 *
+	 * @typedef { {
+	 *   add?: boolean,
+	 *   bbox?: Rect,
+	 *   marked?: Set<Element>,
+	 *   lastMarked?: Set<Element>,
+	 *   initialMarked?: Set<Element>,
+	 *   frame?: SVGElement
+	 * } } LassoContext
 	 */
 
 	var LASSO_TOOL_CURSOR = 'crosshair';
 
+	var MARKER_SELECTED = 'selected';
+	var LASSO_ACTIVE_CLS = 'djs-dragging-active-lasso';
+
 	/**
 	 * @param {EventBus} eventBus
 	 * @param {Canvas} canvas
@@ -63764,11 +63957,13 @@
 	  */
 	  var visuals = {
 
+	    /**
+	     * @param {LassoContext} context
+	     */
 	    create: function(context) {
-	      var container = canvas.getActiveLayer(),
-	          frame;
+	      var container = canvas.getActiveLayer();
+	      var frame = context.frame = create$1('rect');
 
-	      frame = context.frame = create$1('rect');
 	      attr(frame, {
 	        class: 'djs-lasso-overlay',
 	        width:  1,
@@ -63778,28 +63973,79 @@
 	      });
 
 	      append(container, frame);
+
+	      toggleLassoMarkerClass(true);
+
+	      this.update(context);
 	    },
 
+	    /**
+	     * @param {LassoContext} context
+	     */
 	    update: function(context) {
 	      var frame = context.frame,
 	          bbox = context.bbox;
 
-	      attr(frame, {
-	        x: bbox.x,
-	        y: bbox.y,
-	        width: bbox.width,
-	        height: bbox.height
-	      });
+	      if (frame && bbox) {
+	        attr(frame, {
+	          x: bbox.x,
+	          y: bbox.y,
+	          width: bbox.width,
+	          height: bbox.height
+	        });
+	      }
+
+	      var currentlyMarked = context.marked,
+	          lastMarked = context.lastMarked;
+
+	      if (currentlyMarked && lastMarked) {
+	        for (const e of lastMarked) {
+	          if (!currentlyMarked.has(e)) {
+	            canvas.removeMarker(e, MARKER_SELECTED);
+	          }
+	        }
+
+	        for (const e of currentlyMarked) {
+	          if (!lastMarked.has(e)) {
+	            canvas.addMarker(e, MARKER_SELECTED);
+	          }
+	        }
+	      }
 	    },
 
+	    /**
+	     * @param {LassoContext} context
+	     */
 	    remove: function(context) {
 
+	      this.update(context);
+
 	      if (context.frame) {
 	        remove$1(context.frame);
 	      }
+
+	      toggleLassoMarkerClass(false);
 	    }
 	  };
 
+	  function toggleLassoMarkerClass(enabled) {
+	    classes(canvas.getContainer()).toggle(LASSO_ACTIVE_CLS, enabled);
+	  }
+
+	  /**
+	   * @param {Rect} bbox
+	   *
+	   * @return {Set<Element>}
+	   */
+	  function getAllEnclosedElements(bbox) {
+
+	    var allElements = elementRegistry.getAll();
+
+	    return new Set(
+	      values(getEnclosedElements(allElements, bbox))
+	    );
+	  }
+
 	  toolManager.registerTool('lasso', {
 	    tool: 'lasso.selection',
 	    dragging: 'lasso'
@@ -63823,42 +64069,66 @@
 
 	  eventBus.on('lasso.end', 0, function(event) {
 
+	    /**
+	     * @type {LassoContext}
+	     */
 	    var context = event.context;
 
-	    var bbox = toBBox(event);
-
-	    var elements = elementRegistry.filter(function(element) {
-	      return element;
-	    });
-
-	    var add = hasSecondaryModifier(event);
-
-	    self.select(elements, bbox, add ? context.selection : []);
+	    self._select(Array.from(context.marked));
 	  });
 
 	  eventBus.on('lasso.start', function(event) {
 
+	    /**
+	     * @type {LassoContext}
+	     */
 	    var context = event.context;
 
 	    context.bbox = toBBox(event);
-	    visuals.create(context);
+	    context.add = hasSecondaryModifier(event);
+	    context.lastMarked = new Set(selection.get());
+
+	    if (context.add) {
+	      context.marked = context.lastMarked;
+	    } else {
+	      context.marked = new Set();
+	    }
+
+	    context.initialMarked = context.marked;
 
-	    context.selection = selection.get();
+	    visuals.create(context);
 	  });
 
 	  eventBus.on('lasso.move', function(event) {
 
+	    /**
+	     * @type {LassoContext}
+	     */
 	    var context = event.context;
 
-	    context.bbox = toBBox(event);
+	    var bbox = context.bbox = toBBox(event);
+
+	    var enclosedElements = getAllEnclosedElements(bbox);
+
+	    var marked = context.initialMarked.union(enclosedElements);
+
+	    context.lastMarked = context.marked;
+	    context.marked = marked;
+
 	    visuals.update(context);
 	  });
 
 	  eventBus.on('lasso.cleanup', function(event) {
 
+	    /**
+	     * @type {LassoContext}
+	     */
 	    var context = event.context;
 
-	    visuals.remove(context);
+	    context.lastMarked = context.marked;
+	    context.marked = new Set(selection.get());
+
+	    visuals.remove(event.context);
 	  });
 
 
@@ -63900,7 +64170,8 @@
 	    cursor: LASSO_TOOL_CURSOR,
 	    data: {
 	      context: {}
-	    }
+	    },
+	    keepSelection: true
 	  });
 	};
 
@@ -63923,6 +64194,15 @@
 	  });
 	};
 
+	/**
+	 * Select elements.
+	 *
+	 * @param {Element[]} elements
+	 */
+	LassoTool.prototype._select = function(elements) {
+	  this._selection.select(elements);
+	};
+
 	/**
 	 * Select elements within the given bounds.
 	 *
@@ -63931,11 +64211,11 @@
 	 * @param {Element[]} [previousSelection]
 	 */
 	LassoTool.prototype.select = function(elements, bbox, previousSelection = []) {
-	  var selectedElements = getEnclosedElements(elements, bbox);
+	  var selectedElements = values(getEnclosedElements(elements, bbox));
 
-	  this._selection.select([
+	  this._select([
 	    ...previousSelection,
-	    ...values(selectedElements)
+	    ...selectedElements
 	  ]);
 	};
 
@@ -63964,6 +64244,11 @@
 	};
 
 
+	/**
+	 * @param {Event} event
+	 *
+	 * @return {Rect}
+	 */
 	function toBBox(event) {
 
 	  var start = {