bpmn-js 13.0.3 → 13.0.5

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

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-navigated-viewer v13.0.3
+ * bpmn-js - bpmn-navigated-viewer v13.0.5
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2023-04-24
+ * Date: 2023-05-09
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -889,11 +889,11 @@
     }, size);
   }
 
-
   /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @param {ModdleElement} semantic
+   *
+   * @returns {string}
    */
-
   function getLabelAttr(semantic) {
     if (
       is$1(semantic, 'bpmn:FlowElement') ||
@@ -916,6 +916,11 @@
     }
   }
 
+  /**
+   * @param {ModdleElement} semantic
+   *
+   * @returns {string}
+   */
   function getCategoryValue(semantic) {
     var categoryValueRef = semantic['categoryValueRef'];
 
@@ -928,9 +933,9 @@
   }
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
-   * @return {string} label
+   * @return {string}
    */
   function getLabel(element) {
     var semantic = element.businessObject,
@@ -1632,7 +1637,7 @@
    */
 
   /**
-   * @param {Component[]} elements
+   * @param {Component[] | Component[][]} elements
    *
    * @return {string}
    */
@@ -1669,6 +1674,11 @@
     return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];
   }
 
+  /**
+   * @param {Point[]} waypoints
+   * @param {number} [cornerRadius]
+   * @return {Component[][]}
+   */
   function drawPath(waypoints, cornerRadius) {
     const pointCount = waypoints.length;
 
@@ -1732,7 +1742,7 @@
 
   /**
    * @param {Point[]} points
-   * @param {any} [attrs]
+   * @param {number|Object} [attrs]
    * @param {number} [radius]
    *
    * @return {SVGElement}
@@ -1820,7 +1830,7 @@
   // color access //////////////////////
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} [defaultColor]
    *
    * @return {string}
@@ -1832,7 +1842,7 @@
   }
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} [defaultColor]
    *
    * @return {string}
@@ -1844,9 +1854,9 @@
   }
 
   /**
-   * @param {DiagramElement} element
-   * @param {string} defaultColor
-   * @param {string} defaultStrokeColor
+   * @param {Element} element
+   * @param {string} [defaultColor]
+   * @param {string} [defaultStrokeColor]
    *
    * @return {string}
    */
@@ -2525,8 +2535,8 @@
    * @param {SVGElement} gfx
    * @param {number} x
    * @param {number} y
-   * @param {number} angle
-   * @param {number} amount
+   * @param {number} [angle]
+   * @param {number} [amount]
    */
   function transform(gfx, x, y, angle, amount) {
     var translate = createTransform();
@@ -2748,7 +2758,7 @@
    */
 
   /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @typedef { import('../model/Types').Element } Element
    */
 
   /**
@@ -4589,7 +4599,7 @@
 
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {boolean}
    */
@@ -4601,7 +4611,7 @@
    * Draw shape into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -4617,7 +4627,7 @@
    * Draw connection into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -4632,7 +4642,7 @@
   /**
    * Get shape path.
    *
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {string} path
    */
@@ -4674,7 +4684,7 @@
    *
    * @typedef { Partial<{
    *   align: AlignmentConfig;
-   *   style: Record<string, any>;
+   *   style: Record<string, number | string>;
    *   padding: PaddingConfig;
    * }> } BaseTextConfig
    *
@@ -4781,6 +4791,8 @@
    * Alters the lines passed.
    *
    * @param {string[]} lines
+   * @param {number} maxWidth
+   * @param {SVGTextElement} fakeText
    *
    * @return {LineDescriptor} the line descriptor
    */
@@ -5751,6 +5763,22 @@
   	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
   }
 
+  /**
+   * Checks whether a value is an instance of Connection.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isConnection(value) {
+    return isObject(value) && has$1(value, 'waypoints');
+  }
+
+  /**
+   * @param {Point} point
+   *
+   * @returns {Point}
+   */
   function roundPoint(point) {
 
     return {
@@ -5889,10 +5917,6 @@
     return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
   }
 
-  function isConnection(element) {
-    return !!element.waypoints;
-  }
-
   function elementToString(e) {
     if (!e) {
       return '<null>';
@@ -6267,11 +6291,24 @@
     ]
   };
 
+  /**
+   * @typedef {import('../util/Types').Point} Point
+   */
+
+  /**
+   * @param {import('../core/EventBus').Event} event
+   *
+   * @return {Event}
+   */
   function getOriginal(event) {
     return event.originalEvent || event.srcEvent;
   }
 
-
+  /**
+   * @param {Event} event
+   *
+   * @return {Point|null}
+   */
   function toPoint(event) {
 
     if (event.pointers && event.pointers.length) {
@@ -6292,22 +6329,43 @@
     return (/mac/i).test(navigator.platform);
   }
 
+  /**
+   * @param {MouseEvent} event
+   * @param {string} button
+   *
+   * @return {boolean}
+   */
   function isButton(event, button) {
     return (getOriginal(event) || event).button === button;
   }
 
+  /**
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
+   */
   function isPrimaryButton(event) {
 
     // button === 0 -> left áka primary mouse button
     return isButton(event, 0);
   }
 
+  /**
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
+   */
   function isAuxiliaryButton(event) {
 
     // button === 1 -> auxiliary áka wheel button
     return isButton(event, 1);
   }
 
+  /**
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
+   */
   function hasPrimaryModifier(event) {
     var originalEvent = getOriginal(event) || event;
 
@@ -6323,7 +6381,11 @@
     }
   }
 
-
+  /**
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
+   */
   function hasSecondaryModifier(event) {
     var originalEvent = getOriginal(event) || event;
 
@@ -6888,7 +6950,13 @@
     };
   }
 
-
+  /**
+   * Get the element's type
+   *
+   * @param {Element} element
+   *
+   * @return {'connection' | 'shape' | 'root'}
+   */
   function getType(element) {
 
     if ('waypoints' in element) {
@@ -6902,8 +6970,12 @@
     return 'root';
   }
 
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
   function isFrameElement(element) {
-
     return !!(element && element.isFrame);
   }
 
@@ -7418,7 +7490,7 @@
    *
    * The ids can be customized via a given prefix and contain a random value to avoid collisions.
    *
-   * @param {string} prefix a prefix to prepend to generated ids (for better readability)
+   * @param {string} [prefix] a prefix to prepend to generated ids (for better readability)
    */
   function IdGenerator(prefix) {
 
@@ -8526,6 +8598,7 @@
 
   /**
    * @param {string} str
+   *
    * @return {string}
    */
 
@@ -8537,6 +8610,11 @@
     '\'': '&#39;'
   };
 
+  /**
+   * @param {string} str
+   *
+   * @return {string}
+   */
   function escapeHTML(str) {
     str = '' + str;
 
@@ -9895,13 +9973,14 @@
     var self = this;
 
     /**
-     * Builds a style definition from a className, a list of traits and an object of additional attributes.
+     * Builds a style definition from a className, a list of traits and an object
+     * of additional attributes.
      *
      * @param {string} className
-     * @param {string[]} traits
-     * @param {Object} additionalAttrs
+     * @param {string[]} [traits]
+     * @param {Object} [additionalAttrs]
      *
-     * @return {Object} the style defintion
+     * @return {Object} the style definition
      */
     this.cls = function(className, traits, additionalAttrs) {
       var attrs = this.style(traits, additionalAttrs);
@@ -9910,12 +9989,13 @@
     };
 
     /**
-     * Builds a style definition from a list of traits and an object of additional attributes.
+     * Builds a style definition from a list of traits and an object of additional
+     * attributes.
      *
-     * @param {string[]} traits
+     * @param {string[]} [traits]
      * @param {Object} additionalAttrs
      *
-     * @return {Object} the style defintion
+     * @return {Object} the style definition
      */
     this.style = function(traits, additionalAttrs) {
 
@@ -9931,6 +10011,17 @@
       return additionalAttrs ? assign$1(attrs, additionalAttrs) : attrs;
     };
 
+
+    /**
+     * Computes a style definition from a list of traits and an object of
+     * additional attributes, with custom style definition object.
+     *
+     * @param {Object} custom
+     * @param {string[]} [traits]
+     * @param {Object} defaultStyles
+     *
+     * @return {Object} the style definition
+     */
     this.computeStyle = function(custom, traits, defaultStyles) {
       if (!isArray$2(traits)) {
         defaultStyles = traits;
@@ -9979,7 +10070,7 @@
    *
    * @param {Array<Object>} collection
    * @param {Object} element
-   * @param {number} idx
+   * @param {number} [idx]
    */
   function add(collection, element, idx) {
 
@@ -10588,11 +10679,13 @@
    *
    * @example
    *
+   * ```javascript
    * canvas.addMarker('foo', 'some-marker');
    *
    * const fooGfx = canvas.getGraphics('foo');
    *
    * fooGfx; // <g class="... some-marker"> ... </g>
+   * ```
    *
    * @param {ShapeLike|ConnectionLike|string} element The element or its ID.
    * @param {string} marker The marker.
@@ -10998,7 +11091,7 @@
      *
      * @memberOf Canvas
      *
-     * @event ShapeRemoved
+     * @event ShapeRemovedEvent
      * @type {Object}
      * @property {ShapeLike} element The shape.
      * @property {SVGElement} gfx The graphical element.
@@ -11035,7 +11128,7 @@
      *
      * @memberOf Canvas
      *
-     * @event connection.removed
+     * @event ConnectionRemovedEvent
      * @type {Object}
      * @property {ConnectionLike} element The connection.
      * @property {SVGElement} gfx The graphical element.
@@ -11094,6 +11187,7 @@
    *
    * @example
    *
+   * ```javascript
    * canvas.viewbox({ x: 100, y: 100, width: 500, height: 500 })
    *
    * // sets the visible area of the diagram to (100|100) -> (600|100)
@@ -11121,6 +11215,7 @@
    *   width: zoomedAndScrolledViewbox.outer.width,
    *   height: zoomedAndScrolledViewbox.outer.height
    * });
+   * ```
    *
    * @param {Rect} [box] The viewbox to be set.
    *
@@ -11628,9 +11723,11 @@
    *
    * @example
    *
+   * ```javascript
    * elementRegistry.get('SomeElementId_1');
    *
    * elementRegistry.get(gfx);
+   * ```
    *
    * @param {string|SVGElement} filter The elements ID or graphical representation.
    *
@@ -11724,11 +11821,13 @@
    *
    * @example
    *
+   * ```javascript
    * elementRegistry.getGraphics('SomeElementId_1');
    *
    * elementRegistry.getGraphics(rootElement); // <g ...>
    *
    * elementRegistry.getGraphics(rootElement, true); // <svg ...>
+   * ```
    *
    * @param {ElementLike|string} filter The element or its ID.
    * @param {boolean} [secondary=false] Whether to return the secondary graphical representation.
@@ -12308,7 +12407,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const root = Model.create('root', {
@@ -12324,6 +12423,7 @@
    *
    * @return {Root}
    */
+
   /**
    * Creates a connection.
    *
@@ -12331,7 +12431,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const connection = Model.create('connection', {
@@ -12347,6 +12447,7 @@
    *
    * @return {Connection}
    */
+
   /**
    * Creates a shape.
    *
@@ -12354,7 +12455,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const shape = Model.create('shape', {
@@ -12370,12 +12471,13 @@
    *
    * @return {Shape}
    */
+
   /**
    * Creates a label.
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const label = Model.create('label', {
@@ -12388,7 +12490,8 @@
    * ```
    *
    * @param {'label'} type
-   * @param {any} [attrs]
+   * @param {Object} [attrs]
+   *
    * @return {Label}
    */
   function create(type, attrs) {
@@ -12686,7 +12789,6 @@
     });
   };
 
-
   /**
    * Register an event listener that is called only once.
    *
@@ -12957,7 +13059,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {EventBusListener} listener
+   * @param {EventBusListener} newListener
    */
   EventBus.prototype._addListener = function(event, newListener) {
 
@@ -13555,9 +13657,11 @@
      *
      * @example
      *
+     * ```javascript
      * eventBus.on('diagram.init', function() {
      *   eventBus.fire('my-custom-event', { foo: 'BAR' });
      * });
+     * ```
      *
      * @type {Object}
      */
@@ -22857,6 +22961,7 @@
 
   /**
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isCmd(event) {
 
@@ -22874,6 +22979,7 @@
    *
    * @param {string|string[]} keys
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isKey(keys, event) {
     keys = isArray$2(keys) ? keys : [ keys ];
@@ -22888,18 +22994,30 @@
     return event.shiftKey;
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isCopy(event) {
     return isCmd(event) && isKey(KEYS_COPY, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isPaste(event) {
     return isCmd(event) && isKey(KEYS_PASTE, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isUndo(event) {
     return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isRedo(event) {
     return isCmd(event) && (
       isKey(KEYS_REDO, event) || (
@@ -22910,6 +23028,8 @@
 
   /**
    * @typedef {import('../../core/EventBus').default} EventBus
+   *
+   * @typedef {({ keyEvent: KeyboardEvent }) => any} Listener
    */
 
   var KEYDOWN_EVENT = 'keyboard.keydown',
@@ -22941,6 +23061,7 @@
    * `keyboard.bindTo` configuration option.
    *
    * @param {Object} config
+   * @param {EventTarget} [config.bindTo]
    * @param {EventBus} eventBus
    */
   function Keyboard(config, eventBus) {
@@ -23032,6 +23153,11 @@
     return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
   };
 
+  /**
+   * Bind keyboard events to the given DOM node.
+   *
+   * @param {EventTarget} node
+   */
   Keyboard.prototype.bind = function(node) {
 
     // make sure that the keyboard is only bound once to the DOM
@@ -23046,6 +23172,9 @@
     this._fire('bind');
   };
 
+  /**
+   * @return {EventTarget}
+   */
   Keyboard.prototype.getBinding = function() {
     return this._node;
   };
@@ -23064,6 +23193,9 @@
     this._node = null;
   };
 
+  /**
+   * @param {string} event
+   */
   Keyboard.prototype._fire = function(event) {
     this._eventBus.fire('keyboard.' + event, { node: this._node });
   };
@@ -23074,8 +23206,8 @@
    * provided, the default value of 1000 is used.
    *
    * @param {number} [priority]
-   * @param {Function} listener
-   * @param {string} type
+   * @param {Listener} listener
+   * @param {string} [type='keyboard.keydown']
    */
   Keyboard.prototype.addListener = function(priority, listener, type) {
     if (isFunction(priority)) {
@@ -23087,6 +23219,12 @@
     this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
   };
 
+  /**
+   * Remove a listener function.
+   *
+   * @param {Listener} listener
+   * @param {string} [type='keyboard.keydown']
+   */
   Keyboard.prototype.removeListener = function(listener, type) {
     this._eventBus.off(type || KEYDOWN_EVENT, listener);
   };
@@ -23359,15 +23497,21 @@
       }
     }
 
-    this.moveCanvas = function(opts) {
+    /**
+     * @param {{
+     *   direction: 'up' | 'down' | 'left' | 'right';
+     *   speed: number;
+     * }} options
+     */
+    this.moveCanvas = function(options) {
 
       var dx = 0,
           dy = 0,
-          speed = opts.speed;
+          speed = options.speed;
 
       var actualSpeed = speed / Math.min(Math.sqrt(canvas.viewbox().scale), 1);
 
-      switch (opts.direction) {
+      switch (options.direction) {
       case 'left': // Left
         dx = actualSpeed;
         break;
@@ -23410,7 +23554,9 @@
 
   var CURSOR_CLS_PATTERN = /^djs-cursor-.*$/;
 
-
+  /**
+   * @param {string} mode
+   */
   function set(mode) {
     var classes$1 = classes(document.body);
 
@@ -23425,12 +23571,19 @@
     set(null);
   }
 
+  /**
+   * @typedef {import('../core/EventBus').EventBus} EventBus
+   */
+
   var TRAP_PRIORITY = 5000;
 
   /**
    * Installs a click trap that prevents a ghost click following a dragging operation.
    *
-   * @return {Function} a function to immediately remove the installed trap.
+   * @param {EventBus} eventBus
+   * @param {string} [eventName='element.click']
+   *
+   * @return {() => void} a function to immediately remove the installed trap.
    */
   function install(eventBus, eventName) {
 
@@ -23447,6 +23600,17 @@
     };
   }
 
+  /**
+   * @typedef {import('../util/Types').Point} Point
+   * @typedef {import('../util/Types').Rect} Rect
+   */
+
+
+  /**
+   * @param {Point} a
+   * @param {Point} b
+   * @return {Point}
+   */
   function delta(a, b) {
     return {
       x: a.x - b.x,
@@ -23595,6 +23759,7 @@
    * @param {Object} range
    * @param {number} range.min
    * @param {number} range.max
+   * @param {number} steps
    */
   function getStepSize(range, steps) {
 
@@ -23606,6 +23771,12 @@
     return absoluteLinearRange / steps;
   }
 
+  /**
+   * @param {Object} range
+   * @param {number} range.min
+   * @param {number} range.max
+   * @param {number} scale
+   */
   function cap(range, scale) {
     return Math.max(range.min, Math.min(range.max, scale));
   }