bpmn-js 18.19.0 → 18.20.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.19.0
+ * bpmn-js - bpmn-modeler v18.20.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-06-24
+ * Date: 2026-07-06
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2825,48 +2825,22 @@
 	 */
 	function getParents$1(elements) {
 
+	  var elementsSet = new Set(elements);
+
 	  // find elements that are not children of any other elements
 	  return filter(elements, function(element) {
-	    return !find(elements, function(e) {
-	      return e !== element && getParent$1(element, e);
-	    });
-	  });
-	}
-
-
-	function getParent$1(element, parent) {
-	  if (!parent) {
-	    return;
-	  }
-
-	  if (element === parent) {
-	    return parent;
-	  }
-
-	  if (!element.parent) {
-	    return;
-	  }
-
-	  return getParent$1(element.parent, parent);
-	}
-
+	    var parent = element.parent;
 
-	/**
-	 * Adds an element to a collection and returns true if the
-	 * element was added.
-	 *
-	 * @param {Object[]} elements
-	 * @param {Object} element
-	 * @param {boolean} [unique]
-	 */
-	function add$1(elements, element, unique) {
-	  var canAdd = !unique || elements.indexOf(element) === -1;
+	    while (parent) {
+	      if (elementsSet.has(parent)) {
+	        return false;
+	      }
 
-	  if (canAdd) {
-	    elements.push(element);
-	  }
+	      parent = parent.parent;
+	    }
 
-	  return canAdd;
+	    return true;
+	  });
 	}
 
 
@@ -2901,18 +2875,20 @@
 	/**
 	 * Collects self + child elements up to a given depth from a list of elements.
 	 *
+	 * The result is always a unique set of elements (no duplicates).
+	 *
 	 * @param {Element|Element[]} elements the elements to select the children from
-	 * @param {boolean} unique whether to return a unique result set (no duplicates)
+	 * @param {boolean} [unique] deprecated, ignored; the result is always unique
 	 * @param {number} maxDepth the depth to search through or -1 for infinite
 	 *
 	 * @return {Element[]} found elements
 	 */
 	function selfAndChildren(elements, unique, maxDepth) {
-	  var result = [],
-	      processedChildren = [];
+	  var result = new Set(),
+	      processedChildren = new Set();
 
 	  eachElement(elements, function(element, i, depth) {
-	    add$1(result, element, unique);
+	    result.add(element);
 
 	    var children = element.children;
 
@@ -2920,26 +2896,30 @@
 	    {
 
 	      // children exist && children not yet processed
-	      if (children && add$1(processedChildren, children, unique)) {
+	      if (children && !processedChildren.has(children)) {
+	        processedChildren.add(children);
+
 	        return children;
 	      }
 	    }
 	  });
 
-	  return result;
+	  return Array.from(result);
 	}
 
 
 	/**
-	 * Return self + ALL children for a number of elements
+	 * Return self + ALL children for a number of elements.
 	 *
-	 * @param {Element[]} elements to query
-	 * @param {boolean} [allowDuplicates] to allow duplicates in the result set
+	 * The result is always a unique set of elements (no duplicates).
+	 *
+	 * @param {Element|Element[]} elements to query
+	 * @param {boolean} [allowDuplicates] deprecated, ignored; the result is always unique
 	 *
 	 * @return {Element[]} the collected elements
 	 */
 	function selfAndAllChildren(elements, allowDuplicates) {
-	  return selfAndChildren(elements, !allowDuplicates);
+	  return selfAndChildren(elements);
 	}
 
 
@@ -8225,10 +8205,21 @@
 
 	    var childrenGfx = self._getChildrenContainer(parent);
 
-	    forEach(children.slice().reverse(), function(child) {
-	      var childGfx = elementRegistry.getGraphics(child);
+	    // only (re-)insert children that are not already in their expected
+	    // position; needlessly detaching and re-attaching siblings that did
+	    // not move breaks in-progress pointer interactions (the browser drops
+	    // the native `click` when the moused-down node is momentarily removed)
+	    // and causes unnecessary DOM churn
+	    var expected = childrenGfx.firstChild;
+
+	    forEach(children, function(child) {
+	      var childGfx = elementRegistry.getGraphics(child).parentNode;
 
-	      prependTo(childGfx.parentNode, childrenGfx);
+	      if (childGfx === expected) {
+	        expected = expected.nextSibling;
+	      } else {
+	        childrenGfx.insertBefore(childGfx, expected);
+	      }
 	    });
 	  });
 	};
@@ -18356,7 +18347,7 @@
 	function collectElementsAnnotations(elements) {
 	  const result = new Map();
 
-	  forEach(selfAndChildren(elements, true), (element) => {
+	  forEach(selfAndChildren(elements), (element) => {
 	    forEach(getElementAnnotations(element), (entry) => {
 	      if (!result.has(entry.annotation)) {
 	        result.set(entry.annotation, { annotation: entry.annotation, associations: [] });
@@ -25027,9 +25018,9 @@
 	  this._canvas = canvas;
 
 	  /**
-	   * @type {Object[]}
+	   * @type {Set<Object>}
 	   */
-	  this._selectedElements = [];
+	  this._selectedElements = new Set();
 
 	  var self = this;
 
@@ -25051,17 +25042,18 @@
 	 * @param {Object} element The element to deselect.
 	 */
 	Selection.prototype.deselect = function(element) {
-	  var selectedElements = this._selectedElements;
-
-	  var idx = selectedElements.indexOf(element);
+	  if (!this._selectedElements.has(element)) {
+	    return;
+	  }
 
-	  if (idx !== -1) {
-	    var oldSelection = selectedElements.slice();
+	  var oldSelection = this.get();
 
-	    selectedElements.splice(idx, 1);
+	  this._selectedElements.delete(element);
 
-	    this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
-	  }
+	  this._eventBus.fire('selection.changed', {
+	    oldSelection: oldSelection,
+	    newSelection: this.get()
+	  });
 	};
 
 	/**
@@ -25070,7 +25062,7 @@
 	 * @return {Object[]} The selected elements.
 	 */
 	Selection.prototype.get = function() {
-	  return this._selectedElements;
+	  return Array.from(this._selectedElements);
 	};
 
 	/**
@@ -25081,7 +25073,7 @@
 	 * @return {boolean} Whether the element is selected.
 	 */
 	Selection.prototype.isSelected = function(element) {
-	  return this._selectedElements.indexOf(element) !== -1;
+	  return this._selectedElements.has(element);
 	};
 
 
@@ -25093,8 +25085,7 @@
 	 * Defaults to `false`.
 	 */
 	Selection.prototype.select = function(elements, add) {
-	  var selectedElements = this._selectedElements,
-	      oldSelection = selectedElements.slice();
+	  var oldSelection = this.get();
 
 	  if (!isArray$2(elements)) {
 	    elements = elements ? [ elements ] : [];
@@ -25113,20 +25104,17 @@
 	  // selection may be cleared by passing an empty array or null
 	  // to the method
 	  if (add) {
-	    forEach(elements, function(element) {
-	      if (selectedElements.indexOf(element) !== -1) {
-
-	        // already selected
-	        return;
-	      } else {
-	        selectedElements.push(element);
-	      }
+	    forEach(elements, element => {
+	      this._selectedElements.add(element);
 	    });
 	  } else {
-	    this._selectedElements = selectedElements = elements.slice();
+	    this._selectedElements = new Set(elements);
 	  }
 
-	  this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
+	  this._eventBus.fire('selection.changed', {
+	    oldSelection: oldSelection,
+	    newSelection: this.get()
+	  });
 	};
 
 	/**
@@ -25177,20 +25165,20 @@
 	      addMarker(s, MARKER_SELECTED$1);
 	    }
 
-	    var oldSelection = event.oldSelection,
-	        newSelection = event.newSelection;
+	    var oldSelection = new Set(event.oldSelection),
+	        newSelection = new Set(event.newSelection);
 
-	    forEach(oldSelection, function(e) {
-	      if (newSelection.indexOf(e) === -1) {
+	    for (let e of oldSelection) {
+	      if (!newSelection.has(e)) {
 	        deselect(e);
 	      }
-	    });
+	    }
 
-	    forEach(newSelection, function(e) {
-	      if (oldSelection.indexOf(e) === -1) {
+	    for (let e of newSelection) {
+	      if (!oldSelection.has(e)) {
 	        select(e);
 	      }
-	    });
+	    }
 	  });
 	}
 
@@ -27838,6 +27826,7 @@
       class=${ clsx('entry', { selected, disabled: entry.disabled }) }
       data-id=${ entry.id }
       title=${ entry.title }
+      aria-label=${ entry.title || entry.label }
       aria-disabled=${ entry.disabled || undefined }
       tabIndex="0"
       onClick=${ handleClick }
@@ -27907,19 +27896,27 @@
 	 * @param {PopupMenuGroup[]} props.groupedEntries
 	 * @param {PopupMenuEntry} props.selectedEntry
 	 * @param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry
+	 * @param {import('@bpmn-io/diagram-js-ui').Ref<boolean>} props.keyboardSelection
 	 */
 	function PopupMenuList(props) {
 	  const {
 	    selectedEntry,
 	    setSelectedEntry,
 	    groupedEntries,
+	    keyboardSelection,
 	    ...restProps
 	  } = props;
 
 	  const resultsRef = A();
 
-	  // scroll to selected result
+	  // scroll selected entry into view when navigating by keyboard
 	  _(() => {
+	    if (!keyboardSelection || !keyboardSelection.current) {
+	      return;
+	    }
+
+	    keyboardSelection.current = false;
+
 	    const containerEl = resultsRef.current;
 
 	    if (!containerEl)
@@ -28080,6 +28077,13 @@
 	  const [ selectedEntry, setSelectedEntry ] = d(entriesToShow[0]);
 	  const restoreSelection = A(null);
 
+	  /**
+	   * Whether the current selection was made through keyboard navigation.
+	   *
+	   * @type {import('@bpmn-io/diagram-js-ui').Ref<boolean>}
+	   */
+	  const keyboardSelection = A(false);
+
 	  y(() => {
 	    const restore = restoreSelection.current;
 
@@ -28107,15 +28111,21 @@
 	      nextIdx = 0;
 	    }
 
+	    keyboardSelection.current = true;
+
 	    setSelectedEntry(entries[nextIdx]);
 	  }, [ groupedEntries, selectedEntry ]);
 
 	  const keyboardDrilldown = q((direction) => {
 	    if (direction > 0 && selectedEntry && selectedEntry.entries) {
+	      keyboardSelection.current = true;
+
 	      setNavigationStack(stack => [ ...stack, selectedEntry ]);
 	    }
 
 	    if (direction < 0 && navigationStack.length > 0) {
+	      keyboardSelection.current = true;
+
 	      restoreSelection.current = navigationStack[navigationStack.length + direction];
 	      setNavigationStack(stack => stack.slice(0, direction));
 	    }
@@ -28245,6 +28255,7 @@
             groupedEntries=${ groupedEntries }
             selectedEntry=${ selectedEntry }
             setSelectedEntry=${ setSelectedEntry }
+            keyboardSelection=${ keyboardSelection }
             onAction=${ handleEntryAction }
           />
         </div>
@@ -32692,6 +32703,9 @@
 
 	    translate$1(floating, point.x, point.y);
 
+	    // mark as positioned so it may be shown; keeping it hidden until then
+	    // avoids a ghost bendpoint appearing at (0, 0)
+	    classes(floating).add('positioned');
 	  }
 
 	  function updateSegmentDraggerPosition(parentGfx, intersection, waypoints) {
@@ -32815,6 +32829,28 @@
 	    }
 	  });
 
+	  eventBus.on('element.out', function(event) {
+	    var element = event.element;
+
+	    if (!element.waypoints) {
+	      return;
+	    }
+
+	    var bendpointsGfx = getBendpointsContainer(element);
+
+	    if (!bendpointsGfx) {
+	      return;
+	    }
+
+	    // reset floating bendpoint so it does not re-appear at a stale position
+	    // before being re-positioned on the next element.mousemove
+	    var floating = query('.floating', bendpointsGfx);
+
+	    if (floating) {
+	      classes(floating).remove('positioned');
+	    }
+	  });
+
 	  // update bendpoint container data attribute on element ID change
 	  eventBus.on('element.updateId', function(context) {
 	    var element = context.element,
@@ -34770,14 +34806,10 @@
 	  gfx = gfx || this.getGfx(element);
 
 	  var dragger = clone(gfx);
-	  var bbox = gfx.getBoundingClientRect();
 
 	  this._cloneMarkers(getVisual(dragger), className);
 
-	  attr(dragger, this._styles.cls(className, [], {
-	    x: bbox.top,
-	    y: bbox.left
-	  }));
+	  attr(dragger, this._styles.cls(className, []));
 
 	  append(group, dragger);
 
@@ -37204,7 +37236,7 @@
 	    shapes.forEach(function(shape, index) {
 	      var host = shape.host;
 
-	      if (shouldReplace(shape, includes$6(shapes, host) ? host : newHost)) {
+	      if (shouldReplace(shape, includes$3(shapes, host) ? host : newHost)) {
 	        shapes[ index ] = self._replaceShape(shape);
 	      }
 	    });
@@ -37250,7 +37282,7 @@
 	  return !isLabel(shape) && is(shape, 'bpmn:BoundaryEvent') && !host;
 	}
 
-	function includes$6(array, item) {
+	function includes$3(array, item) {
 	  return array.indexOf(item) !== -1;
 	}
 
@@ -37607,8 +37639,9 @@
 	    var rootElement = canvas.getRootElement();
 
 	    // ensure bpmn:Group and label elements are dropped
-	    // always onto the root
-	    if (hover !== rootElement && (shape.labelTarget || isAny(shape, [ 'bpmn:Group', 'bpmn:TextAnnotation' ]))) {
+	    // always onto the root; keep a missing hover (e.g. dropped outside
+	    // the canvas) untouched so it can be rejected by the rules
+	    if (hover && hover !== rootElement && (shape.labelTarget || isAny(shape, [ 'bpmn:Group', 'bpmn:TextAnnotation' ]))) {
 	      event.hover = rootElement;
 	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
 	    }
@@ -39546,7 +39579,7 @@
 	}
 
 	function getMessageFlows(parent) {
-	  var elements = selfAndAllChildren([ parent ], false);
+	  var elements = selfAndAllChildren([ parent ]);
 
 	  var incoming = [],
 	      outgoing = [];
@@ -41488,7 +41521,7 @@
 	 * @return {Element[]}
 	 */
 	function getExternalLabels(element) {
-	  return selfAndChildren(element.children || [], true)
+	  return selfAndChildren(element.children || [])
 	    .reduce(function(labels, child) {
 	      if (child.label && child.label.parent !== element) {
 	        labels.push(child.label);
@@ -43170,11 +43203,16 @@
 	    return false;
 	  }
 
-	  // allow default move check to start move operation
-	  if (!target) {
+	  // allow move to start when there is no target yet (`undefined`)
+	  if (target === undefined) {
 	    return true;
 	  }
 
+	  // disallow dropping outside the canvas (`null` target)
+	  if (target === null) {
+	    return false;
+	  }
+
 	  return elements.every(function(element) {
 	    return canDrop(element, target);
 	  });
@@ -43399,7 +43437,7 @@
 	 *
 	 * @return {boolean}
 	 */
-	function includes$5(elements, element) {
+	function includes$2(elements, element) {
 	  return (elements && element) && elements.indexOf(element) !== -1;
 	}
 
@@ -43414,7 +43452,7 @@
 	    return true;
 	  }
 
-	  if (is(element, 'bpmn:Lane') && !includes$5(elements, element.parent)) {
+	  if (is(element, 'bpmn:Lane') && !includes$2(elements, element.parent)) {
 	    return false;
 	  }
 
@@ -43465,7 +43503,7 @@
 	          elements,
 	          diElements;
 
-	      elements = selfAndAllChildren([ root ], false);
+	      elements = selfAndAllChildren([ root ]);
 
 	      // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
 	      elements = filter(elements, function(element) {
@@ -44468,19 +44506,15 @@
 	  eventBus.on('copyPaste.copyElement', function(context) {
 	    var descriptor = context.descriptor,
 	        element = context.element,
-	        elements = context.elements;
+	        elementsSet = context.elementsSet;
 
 	    // default priority (priority = 1)
 	    descriptor.priority = 1;
 
 	    descriptor.id = element.id;
 
-	    var parentCopied = find(elements, function(e) {
-	      return e === element.parent;
-	    });
-
 	    // do NOT reference parent if parent wasn't copied
-	    if (parentCopied) {
+	    if (elementsSet.has(element.parent)) {
 	      descriptor.parent = element.parent.id;
 	    }
 
@@ -44832,31 +44866,29 @@
 	};
 
 	/**
-	 * Check wether element has relations to other elements e.g. attachers, labels and connections.
+	 * Check whether element has relations to other elements e.g. attachers, labels and connections.
 	 *
 	 * @param {Object} element
 	 * @param {Element[]} elements
+	 * @param {Set<Element>} [elementsSet] pre-computed set of `elements`; pass it
+	 * to avoid a linear scan per invocation
 	 *
 	 * @return {boolean}
 	 */
-	CopyPaste.prototype.hasRelations = function(element, elements) {
-	  var labelTarget,
-	      source,
-	      target;
+	CopyPaste.prototype.hasRelations = function(element, elements, elementsSet) {
 
-	  if (isConnection(element)) {
-	    source = find(elements, matchPattern({ id: element.source.id }));
-	    target = find(elements, matchPattern({ id: element.target.id }));
+	  if (!elementsSet) {
+	    elementsSet = new Set(elements);
+	  }
 
-	    if (!source || !target) {
+	  if (isConnection(element)) {
+	    if (!elementsSet.has(element.source) || !elementsSet.has(element.target)) {
 	      return false;
 	    }
 	  }
 
 	  if (isLabel(element)) {
-	    labelTarget = find(elements, matchPattern({ id: element.labelTarget.id }));
-
-	    if (!labelTarget) {
+	    if (!elementsSet.has(element.labelTarget)) {
 	      return false;
 	    }
 	  }
@@ -44895,6 +44927,9 @@
 	  var tree = {},
 	      elementsData = [];
 
+	  // O(1) lookup of already added element data during the add phase
+	  var elementsDataMap = new Map();
+
 	  var parents = getParents$1(elements);
 
 	  function canCopy(element, elements) {
@@ -44906,17 +44941,18 @@
 
 	  function addElementData(element, depth) {
 
-	    // (1) check wether element has already been added
-	    var foundElementData = find(elementsData, function(elementsData) {
-	      return element === elementsData.element;
-	    });
+	    // (1) check whether element has already been added
+	    var foundElementData = elementsDataMap.get(element);
 
 	    // (2) add element if not already added
 	    if (!foundElementData) {
-	      elementsData.push({
+	      var elementData = {
 	        element: element,
 	        depth: depth
-	      });
+	      };
+
+	      elementsData.push(elementData);
+	      elementsDataMap.set(element, elementData);
 
 	      return;
 	    }
@@ -44925,10 +44961,13 @@
 	    if (foundElementData.depth < depth) {
 	      elementsData = removeElementData(foundElementData, elementsData);
 
-	      elementsData.push({
+	      var updatedElementData = {
 	        element: foundElementData.element,
 	        depth: depth
-	      });
+	      };
+
+	      elementsData.push(updatedElementData);
+	      elementsDataMap.set(element, updatedElementData);
 	    }
 	  }
 
@@ -44991,13 +45030,20 @@
 	  });
 
 	  // (2) copy elements
+	  //
+	  // build a Set of copied elements, kept in sync as unrelated elements are
+	  // pruned below, so both the `copyPaste.copyElement` listener and relation
+	  // checks resolve membership in O(1)
+	  var elementsSet = new Set(elements);
+
 	  elementsData = map(elementsData, function(elementData) {
 	    elementData.descriptor = {};
 
 	    self._eventBus.fire('copyPaste.copyElement', {
 	      descriptor: elementData.descriptor,
 	      element: elementData.element,
-	      elements: elements
+	      elements: elements,
+	      elementsSet: elementsSet
 	    });
 
 	    return elementData;
@@ -45016,14 +45062,16 @@
 	  forEach(elementsData, function(elementData) {
 	    var depth = elementData.depth;
 
-	    if (!self.hasRelations(elementData.element, elements)) {
+	    if (!self.hasRelations(elementData.element, elements, elementsSet)) {
 	      removeElement(elementData.element, elements);
+	      elementsSet.delete(elementData.element);
 
 	      return;
 	    }
 
 	    if (!canCopy(elementData.element, elements)) {
 	      removeElement(elementData.element, elements);
+	      elementsSet.delete(elementData.element);
 
 	      return;
 	    }
@@ -46235,7 +46283,15 @@
 	function getWaypointsUpdatingConnections(movingShapes, resizingShapes) {
 	  var waypointsUpdatingConnections = [];
 
-	  forEach(movingShapes.concat(resizingShapes), function(shape) {
+	  var adjustedShapes = new Set(movingShapes);
+
+	  forEach(resizingShapes, function(shape) {
+	    adjustedShapes.add(shape);
+	  });
+
+	  var seenConnections = new Set();
+
+	  adjustedShapes.forEach(function(shape) {
 	    var incoming = shape.incoming,
 	        outgoing = shape.outgoing;
 
@@ -46243,12 +46299,11 @@
 	      var source = connection.source,
 	          target = connection.target;
 
-	      if (includes$4(movingShapes, source) ||
-	        includes$4(movingShapes, target) ||
-	        includes$4(resizingShapes, source) ||
-	        includes$4(resizingShapes, target)) {
+	      if (adjustedShapes.has(source) || adjustedShapes.has(target)) {
+
+	        if (!seenConnections.has(connection)) {
+	          seenConnections.add(connection);
 
-	        if (!includes$4(waypointsUpdatingConnections, connection)) {
 	          waypointsUpdatingConnections.push(connection);
 	        }
 	      }
@@ -46258,10 +46313,6 @@
 	  return waypointsUpdatingConnections;
 	}
 
-	function includes$4(array, item) {
-	  return array.indexOf(item) !== -1;
-	}
-
 	/**
 	 * Resize bounds.
 	 *
@@ -46535,7 +46586,7 @@
 	  }
 
 	  var children = [
-	    ...selfAndAllChildren(root, true),
+	    ...selfAndAllChildren(root),
 	    ...(root.attachers || [])
 	  ];
 
@@ -46582,24 +46633,30 @@
 	  var movingShapes = [],
 	      resizingShapes = [];
 
+	  var movingShapesSet = new Set(),
+	      resizingShapesSet = new Set();
+
 	  var attachers = [],
 	      connections = [];
 
 	  function moveShape(shape) {
-	    if (!movingShapes.includes(shape)) {
+	    if (!movingShapesSet.has(shape)) {
+	      movingShapesSet.add(shape);
 	      movingShapes.push(shape);
 	    }
 
 	    var label = shape.label;
 
 	    // move external label if its label target is moving
-	    if (label && !movingShapes.includes(label)) {
+	    if (label && !movingShapesSet.has(label)) {
+	      movingShapesSet.add(label);
 	      movingShapes.push(label);
 	    }
 	  }
 
 	  function resizeShape(shape) {
-	    if (!resizingShapes.includes(shape)) {
+	    if (!resizingShapesSet.has(shape)) {
+	      resizingShapesSet.add(shape);
 	      resizingShapes.push(shape);
 	    }
 	  }
@@ -46658,27 +46715,23 @@
 	    }
 	  });
 
-	  var allShapes = movingShapes.concat(resizingShapes);
-
 	  // move attacher if its mid is after space tool and its host is moving or resizing
 	  forEach(attachers, function(attacher) {
 	    var host = attacher.host;
 
-	    if (includes$3(allShapes, host)) {
+	    if (movingShapesSet.has(host) || resizingShapesSet.has(host)) {
 	      moveShape(attacher);
 	    }
 	  });
 
-	  allShapes = movingShapes.concat(resizingShapes);
-
 	  // move external label if its label target's (connection) source and target are moving
 	  forEach(connections, function(connection) {
 	    var source = connection.source,
 	        target = connection.target,
 	        label = connection.label;
 
-	    if (includes$3(allShapes, source)
-	      && includes$3(allShapes, target)
+	    if ((movingShapesSet.has(source) || resizingShapesSet.has(source))
+	      && (movingShapesSet.has(target) || resizingShapesSet.has(target))
 	      && label) {
 	      moveShape(label);
 	    }
@@ -46773,6 +46826,9 @@
 	      min,
 	      max;
 
+	  var movingShapesSet = new Set(movingShapes),
+	      resizingShapesSet = new Set(resizingShapes);
+
 	  forEach(resizingShapes, function(resizingShape) {
 	    var attachers = resizingShape.attachers,
 	        children = resizingShape.children;
@@ -46783,13 +46839,13 @@
 	    var nonMovingResizingChildren = filter(children, function(child) {
 	      return !isConnection(child) &&
 	        !isLabel(child) &&
-	        !includes$3(movingShapes, child) &&
-	        !includes$3(resizingShapes, child);
+	        !movingShapesSet.has(child) &&
+	        !resizingShapesSet.has(child);
 	    });
 
 	    // find children that are moving
 	    var movingChildren = filter(children, function(child) {
-	      return !isConnection(child) && !isLabel(child) && includes$3(movingShapes, child);
+	      return !isConnection(child) && !isLabel(child) && movingShapesSet.has(child);
 	    });
 
 	    var minOrMax,
@@ -46840,7 +46896,7 @@
 
 	    if (attachers && attachers.length) {
 	      attachers.forEach(function(attacher) {
-	        if (includes$3(movingShapes, attacher)) {
+	        if (movingShapesSet.has(attacher)) {
 	          movingAttachers.push(attacher);
 	        } else {
 	          nonMovingAttachers.push(attacher);
@@ -46915,10 +46971,6 @@
 	  return spaceToolConstraints;
 	}
 
-	function includes$3(array, item) {
-	  return array.indexOf(item) !== -1;
-	}
-
 	function isAttacher$1(element) {
 	  return !!element.host;
 	}
@@ -47039,54 +47091,31 @@
 	      // shapes
 	      addPreviewGfx(movingShapes, dragGroup);
 
-	      // connections
-	      var movingConnections = context.movingConnections = elementRegistry.filter(function(element) {
-	        var sourceIsMoving = false;
-
-	        forEach(movingShapes, function(shape) {
-	          forEach(shape.outgoing, function(connection) {
-	            if (element === connection) {
-	              sourceIsMoving = true;
-	            }
-	          });
-	        });
+	      // connections whose source *and* target are moving or resizing
+	      var adjustedShapes = new Set(movingShapes);
 
-	        var targetIsMoving = false;
+	      forEach(resizingShapes, function(shape) {
+	        adjustedShapes.add(shape);
+	      });
 
-	        forEach(movingShapes, function(shape) {
-	          forEach(shape.incoming, function(connection) {
-	            if (element === connection) {
-	              targetIsMoving = true;
-	            }
-	          });
-	        });
+	      var seenConnections = new Set();
 
-	        var sourceIsResizing = false;
+	      var movingConnections = context.movingConnections = [];
 
-	        forEach(resizingShapes, function(shape) {
-	          forEach(shape.outgoing, function(connection) {
-	            if (element === connection) {
-	              sourceIsResizing = true;
-	            }
-	          });
-	        });
+	      adjustedShapes.forEach(function(shape) {
+	        forEach(shape.outgoing, function(connection) {
+	          if (seenConnections.has(connection)
+	            || !isConnection(connection)
+	            || !adjustedShapes.has(connection.target)) {
+	            return;
+	          }
 
-	        var targetIsResizing = false;
+	          seenConnections.add(connection);
 
-	        forEach(resizingShapes, function(shape) {
-	          forEach(shape.incoming, function(connection) {
-	            if (element === connection) {
-	              targetIsResizing = true;
-	            }
-	          });
+	          movingConnections.push(connection);
 	        });
-
-	        return isConnection(element)
-	          && (sourceIsMoving || sourceIsResizing)
-	          && (targetIsMoving || targetIsResizing);
 	      });
 
-
 	      addPreviewGfx(movingConnections, dragGroup);
 
 	      context.dragGroup = dragGroup;
@@ -47954,28 +47983,26 @@
 	  movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$8, function(e) {
 
 	    var context = e.context,
-	        shapes = context.shapes;
+	        shapeSet = new Set(context.shapes),
+	        labelSet = new Set();
 
-	    var labels = [];
+	    for (const shape of shapeSet) {
 
-	    forEach(shapes, function(element) {
-
-	      forEach(element.labels, function(label) {
+	      for (const label of shape.labels) {
 
-	        if (!label.hidden && context.shapes.indexOf(label) === -1) {
-	          labels.push(label);
+	        if (!label.hidden && !shapeSet.has(label)) {
+	          labelSet.add(label);
 	        }
 
-	        if (element.labelTarget) {
-	          labels.push(element);
+	        if (shape.labelTarget) {
+	          labelSet.add(shape);
 	        }
-	      });
-	    });
+	      }
+	    }
 
-	    forEach(labels, function(label) {
+	    for (const label of labelSet) {
 	      movePreview.makeDraggable(context, label, true);
-	    });
-
+	    }
 	  });
 
 	  // add all labels to move closure
@@ -48066,12 +48093,13 @@
 	 * @return {Element[]} filtered
 	 */
 	function removeLabels(elements) {
+	  var elementsSet = new Set(elements);
 
 	  return filter(elements, function(element) {
 
 	    // filter out labels that are move together
 	    // with their label targets
-	    return elements.indexOf(element.labelTarget) === -1;
+	    return !elementsSet.has(element.labelTarget);
 	  });
 	}
 
@@ -48210,7 +48238,7 @@
 	      attachers = filter(shapes, function(shape) {
 	        var host = shape.host;
 
-	        return isAttacher(shape) && !includes$2(shapes, host);
+	        return isAttacher(shape) && !includes$1(shapes, host);
 	      });
 	    }
 
@@ -48406,7 +48434,7 @@
 	  return !!shape.host;
 	}
 
-	function includes$2(array, item) {
+	function includes$1(array, item) {
 	  return array.indexOf(item) !== -1;
 	}
 
@@ -50027,7 +50055,7 @@
 	    });
 	  });
 
-	  var parents = getParents$1(elements);
+	  var parentsSet = new Set(getParents$1(elements));
 
 	  var cache = {};
 
@@ -50055,7 +50083,7 @@
 
 	    var createShapeHints = assign$1({}, hints);
 
-	    if (parents.indexOf(element) === -1) {
+	    if (!parentsSet.has(element)) {
 	      createShapeHints.autoResize = false;
 	    }
 
@@ -51475,7 +51503,8 @@
 	    oldBounds
 	) {
 	  var self = this,
-	      affectedShapes = movingShapes.concat(resizingShapes);
+	      movingShapesSet = new Set(movingShapes),
+	      resizingShapesSet = new Set(resizingShapes);
 
 	  forEach(connections, function(connection) {
 	    var source = connection.source,
@@ -51484,7 +51513,10 @@
 	        axis = getAxisFromDirection(direction),
 	        layoutHints = {};
 
-	    if (includes$1(affectedShapes, source) && includes$1(affectedShapes, target)) {
+	    var sourceAffected = movingShapesSet.has(source) || resizingShapesSet.has(source),
+	        targetAffected = movingShapesSet.has(target) || resizingShapesSet.has(target);
+
+	    if (sourceAffected && targetAffected) {
 
 	      // move waypoints
 	      waypoints = map(waypoints, function(waypoint) {
@@ -51506,18 +51538,18 @@
 	      self._modeling.updateWaypoints(connection, waypoints, {
 	        labelBehavior: false
 	      });
-	    } else if (includes$1(affectedShapes, source) || includes$1(affectedShapes, target)) {
+	    } else if (sourceAffected || targetAffected) {
 
 	      // re-layout connection with moved start/end
-	      if (includes$1(movingShapes, source)) {
+	      if (movingShapesSet.has(source)) {
 	        layoutHints.connectionStart = getMovedSourceAnchor(connection, source, delta);
-	      } else if (includes$1(movingShapes, target)) {
+	      } else if (movingShapesSet.has(target)) {
 	        layoutHints.connectionEnd = getMovedTargetAnchor(connection, target, delta);
-	      } else if (includes$1(resizingShapes, source)) {
+	      } else if (resizingShapesSet.has(source)) {
 	        layoutHints.connectionStart = getResizedSourceAnchor(
 	          connection, source, oldBounds[source.id]
 	        );
-	      } else if (includes$1(resizingShapes, target)) {
+	      } else if (resizingShapesSet.has(target)) {
 	        layoutHints.connectionEnd = getResizedTargetAnchor(
 	          connection, target, oldBounds[target.id]
 	        );
@@ -51571,10 +51603,6 @@
 	  }
 	}
 
-	function includes$1(array, item) {
-	  return array.indexOf(item) !== -1;
-	}
-
 	function getBounds(shape) {
 	  return {
 	    x: shape.x,
@@ -62325,6 +62353,7 @@
 	 *
 	 * @typedef {import('./OutlineProvider.js').default} OutlineProvider
 	 * @typedef {import('../../core/EventBus.js').default} EventBus
+	 * @typedef {import('../../core/ElementRegistry.js').default} ElementRegistry
 	 * @typedef {import('../../draw/Styles.js').default} Styles
 	 */
 
@@ -62334,68 +62363,124 @@
 	 * A plugin that adds an outline to shapes and connections that may be activated and styled
 	 * via CSS classes.
 	 *
+	 * The outline is created lazily, i.e. only once an element is hovered or selected
+	 * for the first time. This keeps importing large diagrams fast, as we avoid
+	 * creating (and laying out) an outline for every single element up front.
+	 *
 	 * @param {EventBus} eventBus
 	 * @param {Styles} styles
+	 * @param {ElementRegistry} elementRegistry
 	 */
-	function Outline$1(eventBus, styles) {
+	function Outline$1(eventBus, styles, elementRegistry) {
 
 	  this._eventBus = eventBus;
+	  this._elementRegistry = elementRegistry;
 
-	  this.offset = 5;
+	  this._outlineOffset = 5;
 
-	  var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+	  this._outlineStyle = styles.cls('djs-outline', [ 'no-fill' ]);
 
 	  var self = this;
 
 	  /**
-	   * @param {SVGElement} gfx
+	   * Lazily create the outline once an element is hovered or selected.
 	   *
-	   * @return {SVGElement} outline
+	   * @param {Element} element
 	   */
-	  function createOutline(gfx) {
-	    var outline = create$1('rect');
+	  function createElementOutline(element) {
+	    self.createOutline(element);
+	  }
 
-	    attr(outline, assign$1({
-	      x: 0,
-	      y: 0,
-	      rx: 4,
-	      width: 100,
-	      height: 100
-	    }, OUTLINE_STYLE));
+	  eventBus.on('element.hover', function(event) {
+	    createElementOutline(event.element);
+	  });
 
-	    return outline;
-	  }
+	  eventBus.on('selection.changed', function(event) {
+	    forEach(event.newSelection, createElementOutline);
+	  });
 
-	  // A low priortity is necessary, because outlines of labels have to be updated
+	  // Keep an already created outline in sync with its element. Elements that
+	  // have not been hovered or selected yet do not have an outline; those are
+	  // created (and updated) lazily via the handlers above.
+	  //
+	  // A low priority is necessary, because outlines of labels have to be updated
 	  // after the label bounds have been updated in the renderer.
-	  eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$3, function(event) {
+	  eventBus.on([ 'shape.changed', 'connection.changed' ], LOW_PRIORITY$3, function(event) {
 	    var element = event.element,
 	        gfx = event.gfx;
 
 	    var outline = query('.djs-outline', gfx);
 
-	    if (!outline) {
-	      outline = self.getOutline(element) || createOutline();
-	      append(gfx, outline);
+	    if (outline) {
+	      self.updateOutline(element, outline);
 	    }
-
-	    self.updateShapeOutline(outline, element);
 	  });
+	}
 
-	  eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
-	    var element = event.element,
-	        gfx = event.gfx;
+	/**
+	 * Ensure the outline for the given element is present, creating, appending
+	 * and updating it on first access.
+	 *
+	 * Outlines are created lazily, i.e. only once an element is hovered or
+	 * selected. Use this to force outline creation, e.g. for features or tests
+	 * that rely on the outline being present.
+	 *
+	 * @param {Element} element
+	 *
+	 * @return {SVGElement} the element's outline
+	 */
+	Outline$1.prototype.createOutline = function(element) {
+	  var gfx = this._elementRegistry.getGraphics(element);
 
-	    var outline = query('.djs-outline', gfx);
+	  if (!gfx) {
+	    throw new Error('cannot create outline for non-rendered element');
+	  }
 
-	    if (!outline) {
-	      outline = createOutline();
-	      append(gfx, outline);
-	    }
+	  var outline = query('.djs-outline', gfx);
 
-	    self.updateConnectionOutline(outline, element);
-	  });
-	}
+	  if (!outline) {
+	    outline = this.getOutline(element) || this._createOutlineGfx();
+	    append(gfx, outline);
+
+	    this.updateOutline(element, outline);
+	  }
+
+	  return outline;
+	};
+
+	/**
+	 * Create the default outline graphics.
+	 *
+	 * @return {SVGElement} outline
+	 */
+	Outline$1.prototype._createOutlineGfx = function() {
+	  var outline = create$1('rect');
+
+	  attr(outline, assign$1({
+	    x: 0,
+	    y: 0,
+	    rx: 4,
+	    width: 100,
+	    height: 100
+	  }, this._outlineStyle));
+
+	  return outline;
+	};
+
+	/**
+	 * Updates the outline of the given element, dispatching to the shape or
+	 * connection specific update depending on the element type.
+	 *
+	 * @param {Element} element
+	 * @param {SVGElement} outline
+	 */
+	Outline$1.prototype.updateOutline = function(element, outline) {
+	  if (element.waypoints) {
+	    this.updateConnectionOutline(outline, element);
+	  } else {
+	    this.updateShapeOutline(outline, element);
+	  }
+	};
 
 
 	/**
@@ -62418,10 +62503,10 @@
 
 	  if (!updated) {
 	    attr(outline, {
-	      x: -this.offset,
-	      y: -this.offset,
-	      width: element.width + this.offset * 2,
-	      height: element.height + this.offset * 2
+	      x: -this._outlineOffset,
+	      y: -this._outlineOffset,
+	      width: element.width + this._outlineOffset * 2,
+	      height: element.height + this._outlineOffset * 2
 	    });
 	  }
 	};
@@ -62438,10 +62523,10 @@
 	  var bbox = getBBox(connection);
 
 	  attr(outline, {
-	    x: bbox.x - this.offset,
-	    y: bbox.y - this.offset,
-	    width: bbox.width + this.offset * 2,
-	    height: bbox.height + this.offset * 2
+	    x: bbox.x - this._outlineOffset,
+	    y: bbox.y - this._outlineOffset,
+	    width: bbox.width + this._outlineOffset * 2,
+	    height: bbox.height + this._outlineOffset * 2
 	  });
 	};
 
@@ -62640,9 +62725,9 @@
 	    if (allowedElements.length === 1) {
 	      const element = allowedElements[0];
 	      if (isLabel(element)) {
-	        createLink(element, element.labelTarget, newSelection);
+	        createLink(element, element.labelTarget);
 	      } else if (element.labels?.length) {
-	        createLink(element.labels[0], element, newSelection);
+	        createLink(element.labels[0], element);
 	      }
 	    }
 
@@ -62651,7 +62736,7 @@
 	      const label = allowedElements.find(isLabel);
 	      const target = allowedElements.find(el => el.labels?.includes(label));
 	      if (label && target) {
-	        createLink(label, target, newSelection);
+	        createLink(label, target);
 	      }
 	    }
 	  });
@@ -62663,9 +62748,9 @@
 	    }
 
 	    if (isLabel(element)) {
-	      createLink(element, element.labelTarget, selection.get());
+	      createLink(element, element.labelTarget);
 	    } else if (element.labels?.length) {
-	      createLink(element.labels[0], element, selection.get());
+	      createLink(element.labels[0], element);
 	    }
 	  });
 
@@ -62674,9 +62759,8 @@
 	   *
 	   * @param {Element} label
 	   * @param {Element} target
-	   * @param {Element[]} selection
 	   */
-	  function createLink(label, target, selection = []) {
+	  function createLink(label, target) {
 
 	    // Create an auxiliary line between label and target mid points
 	    const line = createLine(
@@ -62686,7 +62770,7 @@
 	    const linePath = line.getAttribute('d');
 
 	    // Calculate the intersection point between line and label
-	    const labelSelected = selection.includes(label);
+	    const labelSelected = selection.isSelected(label);
 	    const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);
 	    const labelInter = getElementLineIntersection(labelPath, linePath);
 
@@ -62698,7 +62782,7 @@
 	    // Calculate the intersection point between line and label
 	    // If the target is a sequence flow, there is no intersection,
 	    // so we link to the middle of it.
-	    const targetSelected = selection.includes(target);
+	    const targetSelected = selection.isSelected(target);
 	    const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
 	    const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
 
@@ -62728,7 +62812,6 @@
 	   */
 	  function getElementOutlinePath(element) {
 	    const outlineShape = outline.getOutline(element);
-	    const outlineOffset = outline.offset;
 
 	    if (!outlineShape) {
 	      return getElementPath(element);
@@ -62746,11 +62829,13 @@
 	    }
 
 	    if (outlineShape.cx) {
+	      const radius = parseSvgNumAttr(outlineShape, 'r');
+
 	      const shape = {
-	        x: element.x - outlineOffset,
-	        y: element.y - outlineOffset,
-	        width: parseSvgNumAttr(outlineShape, 'r') * 2,
-	        height: parseSvgNumAttr(outlineShape, 'r') * 2,
+	        x: element.x + parseSvgNumAttr(outlineShape, 'cx') - radius,
+	        y: element.y + parseSvgNumAttr(outlineShape, 'cy') - radius,
+	        width: radius * 2,
+	        height: radius * 2,
 	      };
 
 	      return getCirclePath(shape);
@@ -62762,7 +62847,7 @@
 	  }
 
 	  function isElementSelected(element) {
-	    return selection.get().includes(element);
+	    return selection.isSelected(element);
 	  }
 	}
 
@@ -63546,7 +63631,7 @@
 	  }
 
 	  function getAllDraggedElements(shapes) {
-	    var allShapes = selfAndAllChildren(shapes, true);
+	    var allShapes = selfAndAllChildren(shapes);
 
 	    var allConnections = allShapes.flatMap(shape =>
 	      (shape.incoming || []).concat(shape.outgoing || [])
@@ -63722,6 +63807,12 @@
 	 */
 	function removeEdges(elements) {
 
+	  var elementIds = new Set();
+
+	  elements.forEach(function(element) {
+	    elementIds.add(element.id);
+	  });
+
 	  var filteredElements = filter(elements, function(element) {
 
 	    if (!isConnection(element)) {
@@ -63729,8 +63820,8 @@
 	    } else {
 
 	      return (
-	        find(elements, matchPattern({ id: element.source.id })) &&
-	        find(elements, matchPattern({ id: element.target.id }))
+	        elementIds.has(element.source.id) &&
+	        elementIds.has(element.target.id)
 	      );
 	    }
 	  });