bpmn-js 17.9.2 → 17.11.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v17.9.2
+ * bpmn-js - bpmn-modeler v17.11.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2024-08-05
+ * Date: 2024-09-12
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -94,9 +94,9 @@
    *
    * @param {Seed} seed
    */
-  function Ids(seed) {
-    if (!(this instanceof Ids)) {
-      return new Ids(seed);
+  function Ids$1(seed) {
+    if (!(this instanceof Ids$1)) {
+      return new Ids$1(seed);
     }
     seed = seed || [128, 36, 1];
     this._seed = seed.length ? hat_1.rack(seed[0], seed[1], seed[2]) : seed;
@@ -109,7 +109,7 @@
    *
    * @return {String} id
    */
-  Ids.prototype.next = function (element) {
+  Ids$1.prototype.next = function (element) {
     return this._seed(element || true);
   };
 
@@ -120,7 +120,7 @@
    *
    * @return {String} id
    */
-  Ids.prototype.nextPrefixed = function (prefix, element) {
+  Ids$1.prototype.nextPrefixed = function (prefix, element) {
     var id;
     do {
       id = prefix + this.next(true);
@@ -139,7 +139,7 @@
    * @param {String} id
    * @param {String} [element] element the id is claimed by
    */
-  Ids.prototype.claim = function (id, element) {
+  Ids$1.prototype.claim = function (id, element) {
     this._seed.set(id, element || true);
   };
 
@@ -149,7 +149,7 @@
    * @param  {String} id
    * @return {Boolean}
    */
-  Ids.prototype.assigned = function (id) {
+  Ids$1.prototype.assigned = function (id) {
     return this._seed.get(id) || false;
   };
 
@@ -158,14 +158,14 @@
    *
    * @param  {String} id the id to unclaim
    */
-  Ids.prototype.unclaim = function (id) {
+  Ids$1.prototype.unclaim = function (id) {
     delete this._seed.hats[id];
   };
 
   /**
    * Clear all claimed ids.
    */
-  Ids.prototype.clear = function () {
+  Ids$1.prototype.clear = function () {
     var hats = this._seed.hats,
       id;
     for (id in hats) {
@@ -5432,6 +5432,8 @@
       element = this._elementRegistry.get(element);
     }
 
+    element.markers = element.markers || new Set();
+
     // we need to access all
     container = this._elementRegistry._elements[element.id];
 
@@ -5444,8 +5446,10 @@
 
         // invoke either addClass or removeClass based on mode
         if (add) {
+          element.markers.add(marker);
           classes(gfx).add(marker);
         } else {
+          element.markers.delete(marker);
           classes(gfx).remove(marker);
         }
       }
@@ -5513,9 +5517,11 @@
       element = this._elementRegistry.get(element);
     }
 
-    const gfx = this.getGraphics(element);
+    if (!element.markers) {
+      return false;
+    }
 
-    return classes(gfx).has(marker);
+    return element.markers.has(marker);
   };
 
   /**
@@ -17873,7 +17879,7 @@
 
     // attach ids to moddle to be able to track and validated ids in the BPMN 2.0
     // XML document tree
-    moddle.ids = new Ids([ 32, 36, 1 ]);
+    moddle.ids = new Ids$1([ 32, 36, 1 ]);
 
     return moddle;
   };
@@ -18491,7 +18497,7 @@
     return has$1(overrides, 'height') ? overrides.height : bounds.height;
   }
 
-  var markerIds = new Ids();
+  var markerIds = new Ids$1();
 
   var ELEMENT_LABEL_DISTANCE$1 = 10,
       INNER_OUTER_DIST = 3,
@@ -18519,6 +18525,8 @@
 
   /**
    * @typedef { import('../model/Types').Element } Element
+   * @typedef { import('../model/Types').Shape } Shape
+   * @typedef { import('../model/Types').Connection } Connection
    */
 
   /**
@@ -20692,57 +20700,57 @@
    * Draw shape into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {Element} element
+   * @param {Shape} shape
    * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs = {}) {
-    var { type } = element;
+  BpmnRenderer.prototype.drawShape = function(parentGfx, shape, attrs = {}) {
+    var { type } = shape;
 
     var handler = this._renderer(type);
 
-    return handler(parentGfx, element, attrs);
+    return handler(parentGfx, shape, attrs);
   };
 
   /**
    * Draw connection into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {Element} element
+   * @param {Connection} connection
    * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs = {}) {
-    var { type } = element;
+  BpmnRenderer.prototype.drawConnection = function(parentGfx, connection, attrs = {}) {
+    var { type } = connection;
 
     var handler = this._renderer(type);
 
-    return handler(parentGfx, element, attrs);
+    return handler(parentGfx, connection, attrs);
   };
 
   /**
    * Get shape path.
    *
-   * @param {Element} element
+   * @param {Shape} shape
    *
    * @return {string} path
    */
-  BpmnRenderer.prototype.getShapePath = function(element) {
-    if (is$1(element, 'bpmn:Event')) {
-      return getCirclePath(element);
+  BpmnRenderer.prototype.getShapePath = function(shape) {
+    if (is$1(shape, 'bpmn:Event')) {
+      return getCirclePath(shape);
     }
 
-    if (is$1(element, 'bpmn:Activity')) {
-      return getRoundRectPath(element, TASK_BORDER_RADIUS);
+    if (is$1(shape, 'bpmn:Activity')) {
+      return getRoundRectPath(shape, TASK_BORDER_RADIUS);
     }
 
-    if (is$1(element, 'bpmn:Gateway')) {
-      return getDiamondPath(element);
+    if (is$1(shape, 'bpmn:Gateway')) {
+      return getDiamondPath(shape);
     }
 
-    return getRectPath(element);
+    return getRectPath(shape);
   };
 
   /**
@@ -24359,6 +24367,10 @@
   const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
   const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
 
+  /**
+   * @typedef { import('diagram-js/lib/util/Types').Dimensions} Dimensions
+   */
+
   /**
    * @type {Dimensions}
    */
@@ -24385,6 +24397,16 @@
     });
   }
 
+  /**
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').default } BaseOutlineProvider
+   *
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').Outline } Outline
+   *
+   * @typedef { import('diagram-js/lib/draw/Styles').default } Styles
+   *
+   * @typedef { import('diagram-js/lib/model/Types').Element } Element
+   */
+
   const DEFAULT_OFFSET = 5;
 
   /**
@@ -26946,6 +26968,133 @@
     alignElements: [ 'type', AlignElements$1 ]
   };
 
+  const Ids = new IdGenerator();
+
+
+  /**
+   * @typedef { {
+   *   promise: Promise<unknown>,
+   *   executionId: number
+   * } } ScheduledTask
+   */
+
+  /**
+   * A utility that allows you to schedule async tasks.
+   *
+   * @class
+   * @constructor
+   *
+   * @param { import('../core/EventBus').default } eventBus
+   */
+  function Scheduler(eventBus) {
+
+    /**
+     * @type { Record<string, ScheduledTask> }
+     */
+    this._scheduled = {};
+
+    eventBus.on('diagram.destroy', () => {
+      Object.keys(this._scheduled).forEach(id => {
+        this.cancel(id);
+      });
+    });
+  }
+
+  Scheduler.$inject = [ 'eventBus' ];
+
+  /**
+   * Schedule execution of a task in the next tick.
+   *
+   * Call with an id to ensure only the latest call will be executed.
+   *
+   * @template T
+
+   * @param {(...args: any[]) => T} taskFn function to be executed
+   * @param {string} [id] identifying the task to ensure uniqueness
+   *
+   * @return Promise<T> result of the executed task
+   */
+  Scheduler.prototype.schedule = function(taskFn, id = Ids.next()) {
+
+    this.cancel(id);
+
+    const newScheduled = this._schedule(taskFn, id);
+
+    this._scheduled[id] = newScheduled;
+
+    return newScheduled.promise;
+  };
+
+  Scheduler.prototype._schedule = function(taskFn, id) {
+
+    const {
+      promise,
+      resolve,
+      reject
+    } = defer();
+
+    const executionId = requestAnimationFrame(() => {
+      try {
+        resolve(taskFn());
+      } catch (error) {
+        reject(error);
+      }
+    });
+
+    return {
+      executionId,
+      promise
+    };
+  };
+
+  /**
+   * Cancel a previously scheduled task.
+   *
+   * @param {string} id
+   */
+  Scheduler.prototype.cancel = function(id) {
+
+    const scheduled = this._scheduled[id];
+
+    if (scheduled) {
+      this._cancel(scheduled);
+
+      this._scheduled[id] = null;
+    }
+  };
+
+  Scheduler.prototype._cancel = function(scheduled) {
+    cancelAnimationFrame(scheduled.executionId);
+  };
+
+  /**
+   * @return { {
+   *   promise: Promise,
+   *   resolve: Function,
+   *   reject: Function
+   * } }
+   */
+  function defer() {
+
+    let resolve;
+    let reject;
+
+    const promise = new Promise((_resolve, _reject) => {
+      resolve = _resolve;
+      reject = _reject;
+    });
+
+    return {
+      promise,
+      resolve,
+      reject
+    };
+  }
+
+  var SchedulerModule = {
+    scheduler: [ 'type', Scheduler ]
+  };
+
   var MARKER_HIDDEN$1 = 'djs-element-hidden';
 
   /**
@@ -26957,6 +27106,7 @@
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../scheduler/Scheduler').default} Scheduler
    *
    * @typedef {import('./ContextPadProvider').default} ContextPadProvider
    * @typedef {import('./ContextPadProvider').ContextPadEntries} ContextPadEntries
@@ -26982,12 +27132,14 @@
    * @param {Canvas} canvas
    * @param {ElementRegistry} elementRegistry
    * @param {EventBus} eventBus
+   * @param {Scheduler} scheduler
    */
-  function ContextPad(canvas, elementRegistry, eventBus) {
+  function ContextPad(canvas, elementRegistry, eventBus, scheduler) {
 
     this._canvas = canvas;
     this._elementRegistry = elementRegistry;
     this._eventBus = eventBus;
+    this._scheduler = scheduler;
 
     this._current = null;
 
@@ -26997,7 +27149,8 @@
   ContextPad.$inject = [
     'canvas',
     'elementRegistry',
-    'eventBus'
+    'eventBus',
+    'scheduler'
   ];
 
 
@@ -27032,12 +27185,12 @@
         return;
       }
 
-      var { target } = current;
+      var target = current.target;
 
       var targets = isArray$3(target) ? target : [ target ];
 
       var targetsChanged = targets.filter(function(element) {
-        return includes$7(elements, element);
+        return elements.includes(element);
       });
 
       if (targetsChanged.length) {
@@ -27058,11 +27211,25 @@
       }
     });
 
-    this._eventBus.on('canvas.viewbox.changed', () => {
-      this._updatePosition();
+    this._eventBus.on('canvas.viewbox.changed', function() {
+      self._updatePosition();
     });
 
     this._eventBus.on('element.marker.update', function(event) {
+      if (!self.isOpen()) {
+        return;
+      }
+
+      var element = event.element;
+
+      var current = self._current;
+
+      var targets = isArray$3(current.target) ? current.target : [ current.target ];
+
+      if (!targets.includes(element)) {
+        return;
+      }
+
       self._updateVisibility();
     });
 
@@ -27070,7 +27237,7 @@
   };
 
   ContextPad.prototype._createContainer = function() {
-    const container = domify$1('<div class="djs-context-pad-parent"></div>');
+    var container = domify$1('<div class="djs-context-pad-parent"></div>');
 
     this._canvas.getContainer().appendChild(container);
 
@@ -27154,6 +27321,7 @@
    * @param {boolean} [autoActivate=false]
    */
   ContextPad.prototype.trigger = function(action, event, autoActivate) {
+    var self = this;
 
     var entry,
         originalEvent,
@@ -27167,8 +27335,8 @@
     originalEvent = event.originalEvent || event;
 
     if (action === 'mouseover') {
-      this._timeout = setTimeout(() => {
-        this._mouseout = this.triggerEntry(entry, 'hover', originalEvent, autoActivate);
+      this._timeout = setTimeout(function() {
+        self._mouseout = self.triggerEntry(entry, 'hover', originalEvent, autoActivate);
       }, HOVER_DELAY);
 
       return;
@@ -27429,7 +27597,7 @@
       return (
         target.length === currentTarget.length &&
         every(target, function(element) {
-          return includes$7(currentTarget, element);
+          return currentTarget.includes(element);
         })
       );
     } else {
@@ -27489,12 +27657,12 @@
    */
   ContextPad.prototype._getPosition = function(target) {
     if (!isArray$3(target) && isConnection(target)) {
-      const viewbox = this._canvas.viewbox();
+      var viewbox = this._canvas.viewbox();
 
-      const lastWaypoint = getLastWaypoint(target);
+      var lastWaypoint = getLastWaypoint(target);
 
-      const x = lastWaypoint.x * viewbox.scale - viewbox.x * viewbox.scale,
-            y = lastWaypoint.y * viewbox.scale - viewbox.y * viewbox.scale;
+      var x = lastWaypoint.x * viewbox.scale - viewbox.x * viewbox.scale,
+          y = lastWaypoint.y * viewbox.scale - viewbox.y * viewbox.scale;
 
       return {
         left: x + CONTEXT_PAD_MARGIN * this._canvas.zoom(),
@@ -27518,29 +27686,34 @@
    * Update context pad position.
    */
   ContextPad.prototype._updatePosition = function() {
-    if (!this.isOpen()) {
-      return;
-    }
 
-    var html = this._current.html;
+    const updateFn = () => {
+      if (!this.isOpen()) {
+        return;
+      }
 
-    var position = this._getPosition(this._current.target);
+      var html = this._current.html;
 
-    if ('x' in position && 'y' in position) {
-      html.style.left = position.x + 'px';
-      html.style.top = position.y + 'px';
-    } else {
-      [
-        'top',
-        'right',
-        'bottom',
-        'left'
-      ].forEach(function(key) {
-        if (key in position) {
-          html.style[ key ] = position[ key ] + 'px';
-        }
-      });
-    }
+      var position = this._getPosition(this._current.target);
+
+      if ('x' in position && 'y' in position) {
+        html.style.left = position.x + 'px';
+        html.style.top = position.y + 'px';
+      } else {
+        [
+          'top',
+          'right',
+          'bottom',
+          'left'
+        ].forEach(function(key) {
+          if (key in position) {
+            html.style[ key ] = position[ key ] + 'px';
+          }
+        });
+      }
+    };
+
+    this._scheduler.schedule(updateFn, 'ContextPad#_updatePosition');
   };
 
   /**
@@ -27548,25 +27721,30 @@
    * using the `djs-element-hidden` or `djs-label-hidden` markers.
    */
   ContextPad.prototype._updateVisibility = function() {
-    if (!this.isOpen()) {
-      return;
-    }
 
-    var self = this;
+    const updateFn = () => {
+      if (!this.isOpen()) {
+        return;
+      }
 
-    var target = this._current.target;
+      var self = this;
 
-    var targets = isArray$3(target) ? target : [ target ];
+      var target = this._current.target;
 
-    var isHidden = targets.some(function(target) {
-      return self._canvas.hasMarker(target, MARKER_HIDDEN$1);
-    });
+      var targets = isArray$3(target) ? target : [ target ];
 
-    if (isHidden) {
-      self.hide();
-    } else {
-      self.show();
-    }
+      var isHidden = targets.some(function(target) {
+        return self._canvas.hasMarker(target, MARKER_HIDDEN$1);
+      });
+
+      if (isHidden) {
+        self.hide();
+      } else {
+        self.show();
+      }
+    };
+
+    this._scheduler.schedule(updateFn, 'ContextPad#_updateVisibility');
   };
 
   /**
@@ -27577,13 +27755,15 @@
    * @returns {Rect & RectTRBL}
    */
   ContextPad.prototype._getTargetBounds = function(target) {
+    var self = this;
+
     var elements = isArray$3(target) ? target : [ target ];
 
-    var elementsGfx = elements.map((element) => {
-      return this._canvas.getGraphics(element);
+    var elementsGfx = elements.map(function(element) {
+      return self._canvas.getGraphics(element);
     });
 
-    return elementsGfx.reduce((bounds, elementGfx) => {
+    return elementsGfx.reduce(function(bounds, elementGfx) {
       const elementBounds = elementGfx.getBoundingClientRect();
 
       bounds.top = Math.min(bounds.top, elementBounds.top);
@@ -27618,16 +27798,6 @@
     });
   }
 
-  /**
-   * @param {any[]} array
-   * @param {any} item
-   *
-   * @return {boolean}
-   */
-  function includes$7(array, item) {
-    return array.indexOf(item) !== -1;
-  }
-
   function getLastWaypoint(connection) {
     return connection.waypoints[connection.waypoints.length - 1];
   }
@@ -27654,6 +27824,7 @@
   var ContextPadModule$1 = {
     __depends__: [
       InteractionEventsModule$1,
+      SchedulerModule,
       OverlaysModule
     ],
     contextPad: [ 'type', ContextPad ]
@@ -28898,7 +29069,7 @@
    *
    * @typedef {import('../../model/Types').Element} Element
    * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').ContextPadEntries} ContextPadEntries
-   * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default} ContextPadProvider
+   * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default<Element>} ContextPadProvider
    */
 
   var LOW_PRIORITY$l = 900;
@@ -29673,6 +29844,7 @@
   };
 
   /**
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../../../model/Types').Element} Element
    */
 
@@ -29703,26 +29875,56 @@
    * Determines if the local modeling direction is vertical or horizontal.
    *
    * @param {Element} element
+   * @param {ElementRegistry} [elementRegistry] - provide to consider parent diagram direction
    *
    * @return {boolean} false for vertical pools, lanes and their children. true otherwise
    */
-  function isDirectionHorizontal(element) {
+  function isDirectionHorizontal(element, elementRegistry) {
+
+    var parent = getParent(element, 'bpmn:Process');
+    if (parent) {
+      return true;
+    }
 
     var types = [ 'bpmn:Participant', 'bpmn:Lane' ];
 
-    var parent = getParent(element, types);
+    parent = getParent(element, types);
     if (parent) {
       return isHorizontal$3(parent);
     } else if (isAny(element, types)) {
       return isHorizontal$3(element);
     }
 
-    return true;
+    var process;
+    for (process = getBusinessObject(element); process; process = process.$parent) {
+      if (is$1(process, 'bpmn:Process')) {
+        break;
+      }
+    }
+
+    if (!elementRegistry) {
+      return true;
+    }
+
+    // The direction may be specified in another diagram. We ignore that there
+    // could be multiple diagrams with contradicting properties based on the
+    // assumption that such BPMN files are unusual.
+    var pool = elementRegistry.find(function(shape) {
+      var businessObject = getBusinessObject(shape);
+      return businessObject && businessObject.get('processRef') === process;
+    });
+
+    if (!pool) {
+      return true;
+    }
+
+    return isHorizontal$3(pool);
   }
 
   /**
    * @typedef {import('../../model/Types').Shape} Shape
    *
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
    * @typedef {import('diagram-js/lib/util/Types').Point} Point
    * @typedef {import('diagram-js/lib/util/Types').DirectionTRBL} DirectionTRBL
    */
@@ -29733,21 +29935,24 @@
    *
    * @param  {Shape} source
    * @param  {Shape} element
+   * @param  {ElementRegistry} elementRegistry
    *
    * @return {Point}
    */
-  function getNewShapePosition(source, element) {
+  function getNewShapePosition(source, element, elementRegistry) {
+
+    var placeHorizontally = isDirectionHorizontal(source, elementRegistry);
 
     if (is$1(element, 'bpmn:TextAnnotation')) {
-      return getTextAnnotationPosition(source, element);
+      return getTextAnnotationPosition(source, element, placeHorizontally);
     }
 
     if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
-      return getDataElementPosition(source, element);
+      return getDataElementPosition(source, element, placeHorizontally);
     }
 
     if (is$1(element, 'bpmn:FlowNode')) {
-      return getFlowNodePosition(source, element);
+      return getFlowNodePosition(source, element, placeHorizontally);
     }
   }
 
@@ -29757,16 +29962,15 @@
    *
    * @param {Shape} source
    * @param {Shape} element
+   * @param {boolean} placeHorizontally Whether to place the new element horizontally
    *
    * @return {Point}
    */
-  function getFlowNodePosition(source, element) {
+  function getFlowNodePosition(source, element, placeHorizontally) {
 
     var sourceTrbl = asTRBL(source);
     var sourceMid = getMid(source);
 
-    var placeHorizontally = isDirectionHorizontal(source);
-
     var placement = placeHorizontally ? {
       directionHint: 'e',
       minDistance: 80,
@@ -29848,15 +30052,14 @@
    *
    * @param {Shape} source
    * @param {Shape} element
+   * @param {boolean} placeHorizontally Whether to place the new element horizontally
    *
    * @return {Point}
    */
-  function getTextAnnotationPosition(source, element) {
+  function getTextAnnotationPosition(source, element, placeHorizontally) {
 
     var sourceTrbl = asTRBL(source);
 
-    var placeHorizontally = isDirectionHorizontal(source);
-
     var position = placeHorizontally ? {
       x: sourceTrbl.right + element.width / 2,
       y: sourceTrbl.top - 50 - element.height / 2
@@ -29896,15 +30099,14 @@
    *
    * @param {Shape} source
    * @param {Shape} element
+   * @param {boolean} placeHorizontally Whether to place the new element horizontally
    *
    * @return {Point}
    */
-  function getDataElementPosition(source, element) {
+  function getDataElementPosition(source, element, placeHorizontally) {
 
     var sourceTrbl = asTRBL(source);
 
-    var placeHorizontally = isDirectionHorizontal(source);
-
     var position = placeHorizontally ? {
       x: sourceTrbl.right - 10 + element.width / 2,
       y: sourceTrbl.bottom + 40 + element.width / 2
@@ -29928,23 +30130,25 @@
 
   /**
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
    */
 
   /**
    * BPMN auto-place behavior.
    *
    * @param {EventBus} eventBus
+   * @param {ElementRegistry} elementRegistry
    */
-  function AutoPlace(eventBus) {
+  function AutoPlace(eventBus, elementRegistry) {
     eventBus.on('autoPlace', function(context) {
       var shape = context.shape,
           source = context.source;
 
-      return getNewShapePosition(source, shape);
+      return getNewShapePosition(source, shape, elementRegistry);
     });
   }
 
-  AutoPlace.$inject = [ 'eventBus' ];
+  AutoPlace.$inject = [ 'eventBus', 'elementRegistry' ];
 
   var AutoPlaceModule = {
     __depends__: [ AutoPlaceModule$1 ],
@@ -34937,7 +35141,7 @@
       const source = context.source,
             target = context.target;
 
-      if (isCompensationBoundaryEvent(source) && isForCompensation$1(target)) {
+      if (isCompensationBoundaryEvent$1(source) && isForCompensation$2(target)) {
         removeIsForCompensationProperty(target);
       }
     }
@@ -34950,7 +35154,7 @@
             source = context.source,
             target = context.target;
 
-      if (isCompensationBoundaryEvent(source) && isForCompensationAllowed(target)) {
+      if (isCompensationBoundaryEvent$1(source) && isForCompensationAllowed(target)) {
         addIsForCompensationProperty(target);
         removeExistingAssociations(source, [ connection ]);
       }
@@ -34966,12 +35170,12 @@
         const source = oldSource;
 
         // oldTarget perspective
-        if (isForCompensation$1(oldTarget)) {
+        if (isForCompensation$2(oldTarget)) {
           removeIsForCompensationProperty(oldTarget);
         }
 
         // newTarget perspective
-        if (isCompensationBoundaryEvent(source) && isForCompensationAllowed(newTarget)) {
+        if (isCompensationBoundaryEvent$1(source) && isForCompensationAllowed(newTarget)) {
           addIsForCompensationProperty(newTarget);
         }
       }
@@ -34980,7 +35184,7 @@
     function handlePropertiesUpdate(context) {
       const { element } = context;
 
-      if (isForCompensation$1(element)) {
+      if (isForCompensation$2(element)) {
         removeDisallowedConnections(element);
         removeAttachments(element);
       } else if (isForCompensationAllowed(element)) {
@@ -34999,12 +35203,12 @@
       } = context;
 
       // from compensate boundary event
-      if (isCompensationBoundaryEvent(context.oldShape) &&
+      if (isCompensationBoundaryEvent$1(context.oldShape) &&
         newData.eventDefinitionType !== 'bpmn:CompensateEventDefinition' ||
         newData.type !== 'bpmn:BoundaryEvent'
       ) {
         const targetConnection = oldShape.outgoing.find(
-          ({ target }) => isForCompensation$1(target)
+          ({ target }) => isForCompensation$2(target)
         );
 
         if (targetConnection && targetConnection.target) {
@@ -35014,7 +35218,7 @@
 
       // to compensate boundary event
       else if (
-        !isCompensationBoundaryEvent(context.oldShape) &&
+        !isCompensationBoundaryEvent$1(context.oldShape) &&
         newData.eventDefinitionType === 'bpmn:CompensateEventDefinition' &&
         newData.type === 'bpmn:BoundaryEvent'
       ) {
@@ -35064,7 +35268,7 @@
     function removeExistingAssociations(boundaryEvent, ignoredAssociations) {
       const associations = boundaryEvent.outgoing.filter(connection => is$1(connection, 'bpmn:Association'));
       const associationsToRemove = associations.filter(association => {
-        return isForCompensation$1(association.target) && !ignoredAssociations.includes(association);
+        return isForCompensation$2(association.target) && !ignoredAssociations.includes(association);
       });
 
       // remove existing associations
@@ -35083,7 +35287,7 @@
 
     function removeIncomingCompensationAssociations(element) {
       const compensationAssociations = element.incoming.filter(
-        connection => isCompensationBoundaryEvent(connection.source)
+        connection => isCompensationBoundaryEvent$1(connection.source)
       );
 
       modeling.removeElements(compensationAssociations);
@@ -35108,12 +35312,12 @@
 
   // helpers //////////
 
-  function isForCompensation$1(element) {
+  function isForCompensation$2(element) {
     const bo = getBusinessObject(element);
     return bo && bo.get('isForCompensation');
   }
 
-  function isCompensationBoundaryEvent(element) {
+  function isCompensationBoundaryEvent$1(element) {
     return element && is$1(element, 'bpmn:BoundaryEvent') &&
       hasEventDefinition$2(element, 'bpmn:CompensateEventDefinition');
   }
@@ -39456,10 +39660,25 @@
 
       var otherTrbl = asTRBL(other);
 
-      if (/n/.test(resizeDirection)) {
-        if (isHorizontalLane && otherTrbl.top < (laneTrbl.top - 10)) {
+      // lane flags
+      if (isHorizontalLane) {
+        if (otherTrbl.top < (laneTrbl.top - 10)) {
+          isFirst = false;
+        }
+        if (otherTrbl.bottom > (laneTrbl.bottom + 10)) {
+          isLast = false;
+        }
+      }
+      else {
+        if (otherTrbl.left < (laneTrbl.left - 10)) {
           isFirst = false;
         }
+        if (otherTrbl.right > (laneTrbl.right + 10)) {
+          isLast = false;
+        }
+      }
+
+      if (/n/.test(resizeDirection)) {
 
         // max top size (based on next element)
         if (balanced && abs$2(laneTrbl.top - otherTrbl.bottom) < 10) {
@@ -39474,10 +39693,6 @@
 
       if (/e/.test(resizeDirection)) {
 
-        if (!isHorizontalLane && otherTrbl.right > (laneTrbl.right + 10)) {
-          isLast = false;
-        }
-
         // max right size (based on previous element)
         if (balanced && abs$2(laneTrbl.right - otherTrbl.left) < 10) {
           addMin(maxTrbl, 'right', otherTrbl.right - minDimensions.width);
@@ -39491,10 +39706,6 @@
 
       if (/s/.test(resizeDirection)) {
 
-        if (isHorizontalLane && otherTrbl.bottom > (laneTrbl.bottom + 10)) {
-          isLast = false;
-        }
-
         // max bottom size (based on previous element)
         if (balanced && abs$2(laneTrbl.bottom - otherTrbl.top) < 10) {
           addMin(maxTrbl, 'bottom', otherTrbl.bottom - minDimensions.height);
@@ -39508,10 +39719,6 @@
 
       if (/w/.test(resizeDirection)) {
 
-        if (!isHorizontalLane && otherTrbl.left < (laneTrbl.left - 10)) {
-          isFirst = false;
-        }
-
         // max left size (based on next element)
         if (balanced && abs$2(laneTrbl.left - otherTrbl.right) < 10) {
           addMax(maxTrbl, 'left', otherTrbl.left + minDimensions.width);
@@ -39535,23 +39742,26 @@
 
       var flowElementTrbl = asTRBL(flowElement);
 
-      if (isFirst && /n/.test(resizeDirection)) {
+      // vertical lane will resize from top with respect to flow element irrespective of first or last lane
+      if (/n/.test(resizeDirection) && (!isHorizontalLane || isFirst)) {
         addMin(minTrbl, 'top', flowElementTrbl.top - padding.top);
       }
 
-      if (isLast && /e/.test(resizeDirection)) {
+      // horizonal lane will resize from right with respect to flow element irrespective of first or last lane
+      if (/e/.test(resizeDirection) && (isHorizontalLane || isLast)) {
         addMax(minTrbl, 'right', flowElementTrbl.right + padding.right);
       }
 
-      if (isLast && /s/.test(resizeDirection)) {
+      // vertical lane will resize from bottom with respect to flow element irrespective of first or last lane
+      if (/s/.test(resizeDirection) && (!isHorizontalLane || isLast)) {
         addMax(minTrbl, 'bottom', flowElementTrbl.bottom + padding.bottom);
       }
 
-      if (isFirst && /w/.test(resizeDirection)) {
+      // horizonal lane will resize from left with respect to flow element irrespective of first or last lane
+      if (/w/.test(resizeDirection) && (isHorizontalLane || isFirst)) {
         addMin(minTrbl, 'left', flowElementTrbl.left - padding.left);
       }
     });
-
     return {
       min: minTrbl,
       max: maxTrbl
@@ -41125,6 +41335,66 @@
     };
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('../../rules/BpmnRules').default} BpmnRules
+   * @typedef {import('../Modeling').default} Modeling
+   */
+
+
+  /**
+   * A behavior that sets the property of Compensation Activity after paste operation
+   *
+   * @param {EventBus} eventBus
+   * @param {Modeling} modeling
+   */
+  function SetCompensationActivityAfterPasteBehavior(eventBus, modeling) {
+
+    CommandInterceptor.call(this, eventBus);
+
+    this.postExecuted('elements.create', function(event) {
+      const context = event.context,
+            elements = context.elements;
+
+      // check if compensation activity is connected to compensation boundary event
+      for (const element of elements) {
+        if (isForCompensation$1(element) && !isConnectedToCompensationBoundaryEvent(element)) {
+          modeling.updateProperties(element, { isForCompensation: undefined });
+        }
+      }
+    });
+  }
+
+  e$2(SetCompensationActivityAfterPasteBehavior, CommandInterceptor);
+
+  SetCompensationActivityAfterPasteBehavior.$inject = [
+    'eventBus',
+    'modeling'
+  ];
+
+
+  // helpers //////////////////////
+
+  function isForCompensation$1(element) {
+    const bo = getBusinessObject(element);
+    return bo && bo.isForCompensation;
+  }
+
+  function isCompensationBoundaryEvent(element) {
+    return element && is$1(element, 'bpmn:BoundaryEvent') &&
+        hasEventDefinition$2(element, 'bpmn:CompensateEventDefinition');
+  }
+
+  function isConnectedToCompensationBoundaryEvent(element) {
+    const compensationAssociations = element.incoming.filter(
+      connection => isCompensationBoundaryEvent(connection.source)
+    );
+    if (compensationAssociations.length > 0) {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -41169,7 +41439,8 @@
       'toggleElementCollapseBehaviour',
       'unclaimIdBehavior',
       'updateFlowNodeRefsBehavior',
-      'unsetDefaultFlowBehavior'
+      'unsetDefaultFlowBehavior',
+      'setCompensationActivityAfterPasteBehavior'
     ],
     adaptiveLabelPositioningBehavior: [ 'type', AdaptiveLabelPositioningBehavior ],
     appendBehavior: [ 'type', AppendBehavior ],
@@ -41210,7 +41481,8 @@
     toggleElementCollapseBehaviour : [ 'type', ToggleElementCollapseBehaviour ],
     unclaimIdBehavior: [ 'type', UnclaimIdBehavior ],
     unsetDefaultFlowBehavior: [ 'type', DeleteSequenceFlowBehavior ],
-    updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ]
+    updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ],
+    setCompensationActivityAfterPasteBehavior: [ 'type', SetCompensationActivityAfterPasteBehavior ]
   };
 
   /**
@@ -52778,7 +53050,7 @@
   /**
    * @param {Element} source
    * @param {Element} target
-   * @param {Partial<Connection>} attrs
+   * @param {Partial<Connection>} [attrs]
    * @param {ModelingHints} [hints]
    *
    * @return {T}
@@ -53753,6 +54025,8 @@
   }
 
   /**
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
+   *
    * @typedef {import('diagram-js/lib/util/Types').Point} Point
    *
    * @typedef {import('../../model/Types').Connection} Connection
@@ -53835,7 +54109,9 @@
     left: 'l'
   };
 
-  function BpmnLayouter() {}
+  function BpmnLayouter(elementRegistry) {
+    this._elementRegistry = elementRegistry;
+  }
 
   e$2(BpmnLayouter, BaseLayouter);
 
@@ -53856,7 +54132,8 @@
         target = hints.target || connection.target,
         waypoints = hints.waypoints || connection.waypoints,
         connectionStart = hints.connectionStart,
-        connectionEnd = hints.connectionEnd;
+        connectionEnd = hints.connectionEnd,
+        elementRegistry = this._elementRegistry;
 
     var manhattanOptions,
         updatedWaypoints;
@@ -53877,7 +54154,7 @@
       }
     }
 
-    var layout = isDirectionHorizontal(source) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
+    var layout = isDirectionHorizontal(source, elementRegistry) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;
 
     if (is$1(connection, 'bpmn:MessageFlow')) {
       manhattanOptions = getMessageFlowManhattanOptions(source, target, layout);
@@ -54208,6 +54485,8 @@
     }
   }
 
+  BpmnLayouter.$inject = [ 'elementRegistry' ];
+
   /**
    * @typedef {import('../core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../core/GraphicsFactory').default} GraphicsFactory
@@ -54335,7 +54614,7 @@
    * @typedef {import('diagram-js/lib/layout/ConnectionDocking').default} ConnectionDocking
    * @typedef {import('../modeling/ElementFactory').default} ElementFactory
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
-   * @typedef {import('diagram-js/lib/layout/ManhattanLayout').default} ManhattanLayout
+   * @typedef {import('../modeling/BpmnLayouter').default} BpmnLayouter
    * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules
    *
    * @typedef {import('../../model/Types').Shape} Shape
@@ -54348,7 +54627,7 @@
    * @param {ConnectionDocking} connectionDocking
    * @param {ElementFactory} elementFactory
    * @param {EventBus} eventBus
-   * @param {ManhattanLayout} layouter
+   * @param {BpmnLayouter} layouter
    * @param {Rules} rules
    */
   function AppendPreview(complexPreview, connectionDocking, elementFactory, eventBus, layouter, rules) {
@@ -56740,6 +57019,7 @@
    * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').default} ContextPad
    * @typedef {import('../modeling/Modeling').default} Modeling
    * @typedef {import('../modeling/ElementFactory').default} ElementFactory
+   * @typedef {import('../append-preview/AppendPreview').default} AppendPreview
    * @typedef {import('diagram-js/lib/features/connect/Connect').default} Connect
    * @typedef {import('diagram-js/lib/features/create/Create').default} Create
    * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu
@@ -56774,6 +57054,7 @@
    * @param {Canvas} canvas
    * @param {Rules} rules
    * @param {Translate} translate
+   * @param {AppendPreview} appendPreview
    */
   function ContextPadProvider(
       config, injector, eventBus,
@@ -58786,6 +59067,7 @@
 
   /**
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
    * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping
    *
    * @typedef {import('diagram-js/lib/util/Types').Axis} Axis
@@ -58796,14 +59078,15 @@
   /**
    * @param {EventBus} eventBus
    * @param {GridSnapping} gridSnapping
+   * @param {ElementRegistry} elementRegistry
    */
-  function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping) {
+  function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping, elementRegistry) {
     eventBus.on('autoPlace', HIGH_PRIORITY$5, function(context) {
       var source = context.source,
           sourceMid = getMid(source),
           shape = context.shape;
 
-      var position = getNewShapePosition(source, shape);
+      var position = getNewShapePosition(source, shape, elementRegistry);
 
       [ 'x', 'y' ].forEach(function(axis) {
         var options = {};
@@ -58840,7 +59123,8 @@
 
   GridSnappingAutoPlaceBehavior.$inject = [
     'eventBus',
-    'gridSnapping'
+    'gridSnapping',
+    'elementRegistry'
   ];
 
   // helpers //////////
@@ -60697,7 +60981,8 @@
       } else if (is$1(element, 'bpmn:Task') ||
                  is$1(element, 'bpmn:CallActivity') ||
                  is$1(element, 'bpmn:SubProcess') ||
-                 is$1(element, 'bpmn:Participant')) {
+                 is$1(element, 'bpmn:Participant') ||
+                 is$1(element, 'bpmn:Lane')) {
         canvas.addMarker(element, MARKER_LABEL_HIDDEN);
       }
     });
@@ -64484,12 +64769,9 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../overlays/Overlays').default} Overlays
    * @typedef {import('../selection/Selection').default} Selection
    * @typedef {import('../../i18n/translate/translate.js').default} Translate
    *
-   * @typedef {import('../overlays/Overlays').OverlayAttrs} OverlayAttrs
-   *
    * @typedef {import('../../util/Types').Dimensions} Dimensions
    *
    * @typedef {import('./SearchPadProvider').default} SearchPadProvider
@@ -64502,18 +64784,20 @@
    *
    * @param {Canvas} canvas
    * @param {EventBus} eventBus
-   * @param {Overlays} overlays
    * @param {Selection} selection
    * @param {Translate} translate
    */
-  function SearchPad(canvas, eventBus, overlays, selection, translate) {
+  function SearchPad(canvas, eventBus, selection, translate) {
     this._open = false;
     this._results = [];
     this._eventMaps = [];
 
+    this._cachedRootElement = null;
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
+
     this._canvas = canvas;
     this._eventBus = eventBus;
-    this._overlays = overlays;
     this._selection = selection;
     this._translate = translate;
 
@@ -64525,15 +64809,19 @@
     // attach search pad
     this._canvas.getContainer().appendChild(this._container);
 
-    // cleanup on destroy
-    eventBus.on([ 'canvas.destroy', 'diagram.destroy' ], this.close, this);
+    // cleanup whenever appropriate
+    eventBus.on([
+      'canvas.destroy',
+      'diagram.destroy',
+      'drag.init',
+      'elements.changed'
+    ], this.close, this);
   }
 
 
   SearchPad.$inject = [
     'canvas',
     'eventBus',
-    'overlays',
     'selection',
     'translate'
   ];
@@ -64555,7 +64843,7 @@
 
     // close search on clicking anywhere outside
     listen(document, 'html', 'click', function(e) {
-      self.close();
+      self.close(false);
     });
 
     // stop event from propagating and closing search
@@ -64601,7 +64889,7 @@
       if (isKey('Enter', e)) {
         var selected = self._getCurrentResult();
 
-        return selected ? self._select(selected) : self.close();
+        return selected ? self._select(selected) : self.close(false);
       }
 
       if (isKey('ArrowUp', e)) {
@@ -64650,6 +64938,10 @@
 
     var searchResults = this._searchProvider.find(pattern);
 
+    searchResults = searchResults.filter(function(searchResult) {
+      return !self._canvas.getRootElements().includes(searchResult.element);
+    });
+
     if (!searchResults.length) {
       return;
     }
@@ -64721,8 +65013,6 @@
 
     this._results = [];
 
-    this._resetOverlay();
-
     this._eventBus.fire('searchPad.cleared');
   };
 
@@ -64791,10 +65081,15 @@
       return;
     }
 
+    this._cachedRootElement = this._canvas.getRootElement();
+    this._cachedSelection = this._selection.get();
+    this._cachedViewbox = this._canvas.viewbox();
+
     this._bindEvents();
 
     this._open = true;
 
+    classes$1(this._canvas.getContainer()).add('djs-search-open');
     classes$1(this._container).add('open');
 
     this._searchInput.focus();
@@ -64806,15 +65101,36 @@
   /**
    * Close search pad.
    */
-  SearchPad.prototype.close = function() {
+  SearchPad.prototype.close = function(restoreCached = true) {
     if (!this.isOpen()) {
       return;
     }
 
+    if (restoreCached) {
+      if (this._cachedRootElement) {
+        this._canvas.setRootElement(this._cachedRootElement);
+      }
+
+      if (this._cachedSelection) {
+        this._selection.select(this._cachedSelection);
+      }
+
+      if (this._cachedViewbox) {
+        this._canvas.viewbox(this._cachedViewbox);
+      }
+
+      this._eventBus.fire('searchPad.restored');
+    }
+
+    this._cachedRootElement = null;
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
+
     this._unbindEvents();
 
     this._open = false;
 
+    classes$1(this._canvas.getContainer()).remove('djs-search-open');
     classes$1(this._container).remove('open');
 
     this._clearResults();
@@ -64822,8 +65138,6 @@
     this._searchInput.value = '';
     this._searchInput.blur();
 
-    this._resetOverlay();
-
     this._eventBus.fire('searchPad.closed');
   };
 
@@ -64867,9 +65181,11 @@
 
     classes$1(node).add(SearchPad.RESULT_SELECTED_CLASS);
 
-    this._resetOverlay(element);
+    this._canvas.zoom(1);
 
-    this._canvas.scrollToElement(element, { top: 400 });
+    this._canvas.scrollToElement(element, {
+      top: 300
+    });
 
     this._selection.select(element);
 
@@ -64886,9 +65202,10 @@
     var id = attr$1(node, SearchPad.RESULT_ID_ATTRIBUTE);
     var element = this._results[id].element;
 
-    this.close();
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
 
-    this._resetOverlay();
+    this.close(false);
 
     this._canvas.scrollToElement(element, { top: 400 });
 
@@ -64898,24 +65215,6 @@
   };
 
 
-  /**
-   * Reset overlay removes and, optionally, set
-   * overlay to a new element.
-   *
-   * @param {HTMLElement} element
-   */
-  SearchPad.prototype._resetOverlay = function(element) {
-    if (this._overlayId) {
-      this._overlays.remove(this._overlayId);
-    }
-
-    if (element) {
-      var box = getBBox(element);
-      var overlay = constructOverlay(box);
-      this._overlayId = this._overlays.add(element, overlay);
-    }
-  };
-
   SearchPad.prototype._getBoxHtml = function() {
     const box = domify$1(SearchPad.BOX_HTML);
     const input = query(SearchPad.INPUT_SELECTOR, box);
@@ -64928,39 +65227,6 @@
   };
 
 
-  /**
-   * Construct overlay object for the given bounding box.
-   *
-   * @param {Dimensions} box
-   *
-   * @return {OverlayAttrs}
-   */
-  function constructOverlay(box) {
-
-    var offset = 6;
-    var w = box.width + offset * 2;
-    var h = box.height + offset * 2;
-
-    var styles = {
-      width: w + 'px',
-      height: h + 'px'
-    };
-
-    var html = domify$1('<div class="' + SearchPad.OVERLAY_CLASS + '"></div>');
-
-    assign(html, styles);
-
-    return {
-      position: {
-        bottom: h - offset,
-        right: w - offset
-      },
-      show: true,
-      html: html
-    };
-  }
-
-
   /**
    * Creates and appends child node from result tokens and HTML template.
    *
@@ -64988,7 +65254,7 @@
 
     tokens.forEach(function(t) {
       if (t.matched) {
-        htmlText += '<strong class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</strong>';
+        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</b>';
       } else {
         htmlText += escapeHTML(t.normal);
       }
@@ -65009,15 +65275,17 @@
   SearchPad.RESULT_SELECTED_SELECTOR = '.' + SearchPad.RESULT_SELECTED_CLASS;
   SearchPad.RESULT_ID_ATTRIBUTE = 'data-result-id';
   SearchPad.RESULT_HIGHLIGHT_CLASS = 'djs-search-highlight';
-  SearchPad.OVERLAY_CLASS = 'djs-search-overlay';
 
   SearchPad.BOX_HTML =
-    '<div class="djs-search-container djs-draggable djs-scrollable">' +
-      '<div class="djs-search-input">' +
-        '<input type="text"/>' +
-      '</div>' +
-      '<div class="djs-search-results"></div>' +
-    '</div>';
+`<div class="djs-search-container djs-scrollable">
+  <div class="djs-search-input">
+    <svg class="djs-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
+    </svg>
+    <input type="text" spellcheck="false" />
+  </div>
+  <div class="djs-search-results" />
+</div>`  ;
 
   SearchPad.RESULT_HTML =
     '<div class="djs-search-result"></div>';
@@ -65080,48 +65348,114 @@
     var rootElements = this._canvas.getRootElements();
 
     var elements = this._elementRegistry.filter(function(element) {
-      if (element.labelTarget) {
-        return false;
-      }
-      return true;
+      return !isLabel(element) && !rootElements.includes(element);
     });
 
-    // do not include root element
-    elements = filter(elements, function(element) {
-      return !rootElements.includes(element);
-    });
+    return elements
+      .reduce(function(results, element) {
+        var label = getLabel(element);
 
-    elements = map$1(elements, function(element) {
-      return {
-        primaryTokens: matchAndSplit(getLabel(element), pattern),
-        secondaryTokens: matchAndSplit(element.id, pattern),
-        element: element
-      };
-    });
+        var primaryTokens = findMatches(label, pattern),
+            secondaryTokens = findMatches(element.id, pattern);
 
-    // exclude non-matched elements
-    elements = filter(elements, function(element) {
-      return hasMatched(element.primaryTokens) || hasMatched(element.secondaryTokens);
-    });
-
-    elements = sortBy(elements, function(element) {
-      return getLabel(element.element) + element.element.id;
-    });
+        if (hasMatch(primaryTokens) || hasMatch(secondaryTokens)) {
+          return [
+            ...results,
+            {
+              primaryTokens,
+              secondaryTokens,
+              element
+            }
+          ];
+        }
 
-    return elements;
+        return results;
+      }, [])
+      .sort(function(a, b) {
+        return compareTokens(a.primaryTokens, b.primaryTokens)
+          || compareTokens(a.secondaryTokens, b.secondaryTokens)
+          || compareStrings(getLabel(a.element), getLabel(b.element))
+          || compareStrings(a.element.id, b.element.id);
+      })
+      .map(function(result) {
+        return {
+          element: result.element,
+          primaryTokens: result.primaryTokens.map(function(token) {
+            return omit(token, [ 'index' ]);
+          }),
+          secondaryTokens: result.secondaryTokens.map(function(token) {
+            return omit(token, [ 'index' ]);
+          })
+        };
+      });
   };
 
+  /**
+   * @param {Token} token
+   *
+   * @return {boolean}
+   */
+  function isMatch(token) {
+    return 'matched' in token;
+  }
+
   /**
    * @param {Token[]} tokens
    *
    * @return {boolean}
    */
-  function hasMatched(tokens) {
-    var matched = filter(tokens, function(token) {
-      return !!token.matched;
-    });
+  function hasMatch(tokens) {
+    return tokens.find(isMatch);
+  }
+
+  /**
+   * Compares two token arrays.
+   *
+   * @param {Token[]} tokensA
+   * @param {Token[]} tokensB
+   *
+   * @returns {number}
+   */
+  function compareTokens(tokensA, tokensB) {
+    const tokensAHasMatch = hasMatch(tokensA),
+          tokensBHasMatch = hasMatch(tokensB);
+
+    if (tokensAHasMatch && !tokensBHasMatch) {
+      return -1;
+    }
+
+    if (!tokensAHasMatch && tokensBHasMatch) {
+      return 1;
+    }
+
+    if (!tokensAHasMatch && !tokensBHasMatch) {
+      return 0;
+    }
+
+    const tokensAFirstMatch = tokensA.find(isMatch),
+          tokensBFirstMatch = tokensB.find(isMatch);
 
-    return matched.length > 0;
+    if (tokensAFirstMatch.index < tokensBFirstMatch.index) {
+      return -1;
+    }
+
+    if (tokensAFirstMatch.index > tokensBFirstMatch.index) {
+      return 1;
+    }
+
+    return 0;
+  }
+
+  /**
+   * Compares two strings.
+   *
+   * @param {string} a
+   * @param {string} b
+   *
+   * @returns {number}
+   */
+  function compareStrings(a, b) {
+    return a.localeCompare(b);
   }
 
   /**
@@ -65130,7 +65464,7 @@
    *
    * @return {Token[]}
    */
-  function matchAndSplit(text, pattern) {
+  function findMatches(text, pattern) {
     var tokens = [],
         originalText = text;
 
@@ -65141,27 +65475,31 @@
     text = text.toLowerCase();
     pattern = pattern.toLowerCase();
 
-    var i = text.indexOf(pattern);
+    var index = text.indexOf(pattern);
 
-    if (i > -1) {
-      if (i !== 0) {
+    if (index > -1) {
+      if (index !== 0) {
         tokens.push({
-          normal: originalText.substr(0, i)
+          normal: originalText.slice(0, index),
+          index: 0
         });
       }
 
       tokens.push({
-        matched: originalText.substr(i, pattern.length)
+        matched: originalText.slice(index, index + pattern.length),
+        index: index
       });
 
-      if (pattern.length + i < text.length) {
+      if (pattern.length + index < text.length) {
         tokens.push({
-          normal: originalText.substr(pattern.length + i, text.length)
+          normal: originalText.slice(index + pattern.length),
+          index: index + pattern.length
         });
       }
     } else {
       tokens.push({
-        normal: originalText
+        normal: originalText,
+        index: 0
       });
     }