bpmn-js 18.20.0 → 18.22.0

package/dist/bpmn-navigated-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-navigated-viewer v18.20.0
+ * bpmn-js - bpmn-navigated-viewer v18.22.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-07-06
+ * Date: 2026-07-23
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -381,8 +381,9 @@
   }
 
   /**
+   * @template {(...args: any[]) => any} T
    * @typedef { {
-   *   (...args: any[]): any;
+   *   (...args: Parameters<T>): void;
    *   flush: () => void;
    *   cancel: () => void;
    * } } DebouncedFunction
@@ -395,10 +396,12 @@
    * Lodash-style the function exposes methods to `#clear`
    * and `#flush` to control internal behavior.
    *
-   * @param  {Function} fn
-   * @param  {Number} timeout
+   * @template {(...args: any[]) => any} T
+   *
+   * @param  {T} fn
+   * @param  {number} timeout
    *
-   * @return {DebouncedFunction} debounced function
+   * @return {DebouncedFunction<T>} debounced function
    */
   function debounce(fn, timeout) {
 
@@ -445,7 +448,7 @@
     }
 
     /**
-     * @type { DebouncedFunction }
+     * @type {DebouncedFunction<T>}
      */
     function callback(...args) {
       lastNow = Date.now();
@@ -10385,6 +10388,8 @@
    * @typedef {import('./Types.js').ParentLike } ParentLike
    * @typedef {import('./Types.js').ShapeLike} ShapeLike
    *
+   * @typedef {ShapeLike|ConnectionLike|RootLike|string} ElementOrIdentifier
+   *
    * @typedef { {
    *   container?: HTMLElement;
    *   deferUpdate?: boolean;
@@ -10608,9 +10613,16 @@
     // debounce canvas.viewbox.changed events when deferUpdate is set
     // to help with potential performance issues
     if (config.deferUpdate) {
-      this._viewboxChanged = debounce(bind$1(this._viewboxChanged, this), 300);
+      this._viewboxChanged = debounce(this._viewboxChanged, 300);
     }
 
+    /**
+     * Schedule focus restoration.
+     *
+     * @type {import('min-dash').DebouncedFunction<typeof this.restoreFocus>}
+     */
+    this._restoreFocus = debounce(this._restoreFocus, 0);
+
     eventBus.on('diagram.init', () => {
 
       /**
@@ -10649,6 +10661,8 @@
   };
 
   Canvas.prototype._destroy = function() {
+    this._restoreFocus.cancel();
+
     this._eventBus.fire('canvas.destroy', {
       svg: this._svg,
       viewport: this._viewport
@@ -10712,9 +10726,17 @@
   };
 
   /**
-  * Sets focus on the canvas SVG element if `document.body` is currently focused.
-  */
+   * Restores focus on the canvas SVG element if `document.body` is
+   * currently focused.
+   *
+   * Safely executes on the next render cycle - never prevents pending
+   * (in flight) user clicks.
+   */
   Canvas.prototype.restoreFocus = function() {
+    this._restoreFocus();
+  };
+
+  Canvas.prototype._restoreFocus = function() {
     if (document.activeElement === document.body) {
       this.focus();
     }
@@ -10916,26 +10938,40 @@
 
 
   /**
-   * Returns the plane which contains the given element.
+   * Returns the plane which contains the given element(s).
    *
-   * @param {ShapeLike|ConnectionLike|string} element The element or its ID.
+   * If multiple elements are passed, the shared plane is returned
+   * (or undefined if no shared plane exists).
+   *
+   * @param {ElementOrIdentifier|ElementOrIdentifier[]} element
    *
    * @return {RootLike|undefined} The root of the element.
    */
   Canvas.prototype.findRoot = function(element) {
-    if (typeof element === 'string') {
-      element = this._elementRegistry.get(element);
-    }
 
-    if (!element) {
-      return;
-    }
+    const elements = this._resolveElements(element);
 
-    const plane = this._findPlaneForRoot(
-      findRoot(element)
-    ) || {};
+    let root;
+
+    for (const element of elements) {
+      const plane = this._findPlaneForRoot(
+        findRoot(element)
+      );
+
+      if (!plane) {
+        return;
+      }
 
-    return plane.rootElement;
+      if (root && plane.rootElement !== root) {
+
+        // no shared root
+        return undefined;
+      }
+
+      root = plane.rootElement;
+    }
+
+    return root;
   };
 
   /**
@@ -10955,6 +10991,33 @@
     });
   };
 
+  /**
+   * @param {ElementOrIdentifier} element
+   *
+   * @return {ShapeLike|ConnectionLike|RootLike|undefined}
+   */
+  Canvas.prototype._resolveElement = function(element) {
+
+    if (typeof element === 'string') {
+      return this._elementRegistry.get(element);
+    }
+
+    return element;
+  };
+
+  /**
+   * @param {ElementOrIdentifier|ElementOrIdentifier[]} elements
+   *
+   * @return {Array<ShapeLike|ConnectionLike|RootLike>}
+   */
+  Canvas.prototype._resolveElements = function(elements) {
+
+    if (!isArray$1(elements)) {
+      elements = [ elements ];
+    }
+
+    return elements.map(element => this._resolveElement(element)).filter(Boolean);
+  };
 
   /**
    * Returns the html element that encloses the
@@ -10972,9 +11035,7 @@
   Canvas.prototype._updateMarker = function(element, marker, add) {
     let container;
 
-    if (!element.id) {
-      element = this._elementRegistry.get(element);
-    }
+    element = this._resolveElement(element);
 
     element.markers = element.markers || new Set();
 
@@ -11057,9 +11118,7 @@
    * @param {string} marker The marker.
    */
   Canvas.prototype.hasMarker = function(element, marker) {
-    if (!element.id) {
-      element = this._elementRegistry.get(element);
-    }
+    element = this._resolveElement(element);
 
     if (!element.markers) {
       return false;
@@ -11156,9 +11215,7 @@
    */
   Canvas.prototype.removeRootElement = function(rootElement) {
 
-    if (typeof rootElement === 'string') {
-      rootElement = this._elementRegistry.get(rootElement);
-    }
+    rootElement = this._resolveElement(rootElement);
 
     const plane = this._findPlaneForRoot(rootElement);
 
@@ -11655,34 +11712,44 @@
   };
 
   /**
-   * Scrolls the viewbox to contain the given element.
+   * Scrolls the viewbox to contain the given element or elements.
    * Optionally specify a padding to be applied to the edges.
    *
-   * @param {ShapeLike|ConnectionLike|string} element The element to scroll to or its ID.
+   * The canvas navigates to the shared root of the element(s). If no shared
+   * root can be found, no navigation is performed.
+   *
+   * @param {ElementOrIdentifier|ElementOrIdentifier[]} element The element(s) to scroll to or their ID(s).
    * @param {RectTRBL|number} [padding=100] The padding to be applied. Can also specify top, bottom, left and right.
    */
   Canvas.prototype.scrollToElement = function(element, padding) {
     let defaultPadding = 100;
 
-    if (typeof element === 'string') {
-      element = this._elementRegistry.get(element);
+    const elements = this._resolveElements(element);
+
+    if (!elements.length) {
+      return;
     }
 
-    // set to correct rootElement
-    const rootElement = this.findRoot(element);
+    const rootElement = this.findRoot(elements);
+
+    if (!rootElement) {
+      return;
+    }
 
     if (rootElement !== this.getRootElement()) {
       this.setRootElement(rootElement);
     }
 
-    // element is rootElement, do not change viewport
-    if (rootElement === element) {
+    const visibleElements = elements.filter(e => e != rootElement);
+
+    if (!visibleElements.length) {
       return;
     }
 
     if (!padding) {
       padding = {};
     }
+
     if (typeof padding === 'number') {
       defaultPadding = padding;
     }
@@ -11694,7 +11761,7 @@
       left: padding.left || defaultPadding
     };
 
-    const elementBounds = getBBox(element),
+    const elementBounds = getBBox(visibleElements),
           elementTrbl = asTRBL(elementBounds),
           viewboxBounds = this.viewbox(),
           zoom = this.zoom();