bpmn-js 13.0.2 → 13.0.4

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v13.0.2
+ * bpmn-js - bpmn-viewer v13.0.4
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2023-04-20
+ * Date: 2023-04-24
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -735,7 +735,163 @@
   }
 
   /**
-   * @typedef { import('../../model').DiagramElement } DiagramElement
+   * @typedef {import('diagram-js/lib/util/Types').Point} Point
+   * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
+   *
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
+  var DEFAULT_LABEL_SIZE$1 = {
+    width: 90,
+    height: 20
+  };
+
+  var FLOW_LABEL_INDENT = 15;
+
+
+  /**
+   * Return true if the given semantic has an external label.
+   *
+   * @param {Element} semantic
+   *
+   * @return {boolean}
+   */
+  function isLabelExternal(semantic) {
+    return is$1(semantic, 'bpmn:Event') ||
+           is$1(semantic, 'bpmn:Gateway') ||
+           is$1(semantic, 'bpmn:DataStoreReference') ||
+           is$1(semantic, 'bpmn:DataObjectReference') ||
+           is$1(semantic, 'bpmn:DataInput') ||
+           is$1(semantic, 'bpmn:DataOutput') ||
+           is$1(semantic, 'bpmn:SequenceFlow') ||
+           is$1(semantic, 'bpmn:MessageFlow') ||
+           is$1(semantic, 'bpmn:Group');
+  }
+
+  /**
+   * Get the position of a sequence flow label.
+   *
+   * @param  {Point[]} waypoints
+   *
+   * @return {Point}
+   */
+  function getFlowLabelPosition(waypoints) {
+
+    // get the waypoints mid
+    var mid = waypoints.length / 2 - 1;
+
+    var first = waypoints[Math.floor(mid)];
+    var second = waypoints[Math.ceil(mid + 0.01)];
+
+    // get position
+    var position = getWaypointsMid(waypoints);
+
+    // calculate angle
+    var angle = Math.atan((second.y - first.y) / (second.x - first.x));
+
+    var x = position.x,
+        y = position.y;
+
+    if (Math.abs(angle) < Math.PI / 2) {
+      y -= FLOW_LABEL_INDENT;
+    } else {
+      x += FLOW_LABEL_INDENT;
+    }
+
+    return { x: x, y: y };
+  }
+
+
+  /**
+   * Get the middle of a number of waypoints.
+   *
+   * @param  {Point[]} waypoints
+   *
+   * @return {Point}
+   */
+  function getWaypointsMid(waypoints) {
+
+    var mid = waypoints.length / 2 - 1;
+
+    var first = waypoints[Math.floor(mid)];
+    var second = waypoints[Math.ceil(mid + 0.01)];
+
+    return {
+      x: first.x + (second.x - first.x) / 2,
+      y: first.y + (second.y - first.y) / 2
+    };
+  }
+
+  /**
+   * Get the middle of the external label of an element.
+   *
+   * @param {Element} element
+   *
+   * @return {Point}
+   */
+  function getExternalLabelMid(element) {
+
+    if (element.waypoints) {
+      return getFlowLabelPosition(element.waypoints);
+    } else if (is$1(element, 'bpmn:Group')) {
+      return {
+        x: element.x + element.width / 2,
+        y: element.y + DEFAULT_LABEL_SIZE$1.height / 2
+      };
+    } else {
+      return {
+        x: element.x + element.width / 2,
+        y: element.y + element.height + DEFAULT_LABEL_SIZE$1.height / 2
+      };
+    }
+  }
+
+
+  /**
+   * Return the bounds of an elements label, parsed from the elements DI or
+   * generated from its bounds.
+   *
+   * @param {ModdleElement} di
+   * @param {Element} element
+   *
+   * @return {Rect}
+   */
+  function getExternalLabelBounds(di, element) {
+
+    var mid,
+        size,
+        bounds,
+        label = di.label;
+
+    if (label && label.bounds) {
+      bounds = label.bounds;
+
+      size = {
+        width: Math.max(DEFAULT_LABEL_SIZE$1.width, bounds.width),
+        height: bounds.height
+      };
+
+      mid = {
+        x: bounds.x + bounds.width / 2,
+        y: bounds.y + bounds.height / 2
+      };
+    } else {
+
+      mid = getExternalLabelMid(element);
+
+      size = DEFAULT_LABEL_SIZE$1;
+    }
+
+    return assign$1({
+      x: mid.x - size.width / 2,
+      y: mid.y - size.height / 2
+    }, size);
+  }
+
+
+  /**
+   * @typedef { import('../model').DiagramElement } DiagramElement
    */
 
   function getLabelAttr(semantic) {
@@ -1476,7 +1632,7 @@
    */
 
   /**
-   * @param {Component[]} elements
+   * @param {Component[] | Component[][]} elements
    *
    * @return {string}
    */
@@ -1513,6 +1669,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;
 
@@ -1576,7 +1737,7 @@
 
   /**
    * @param {Point[]} points
-   * @param {any} [attrs]
+   * @param {number|Object} [attrs]
    * @param {number} [radius]
    *
    * @return {SVGElement}
@@ -1664,7 +1825,7 @@
   // color access //////////////////////
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} [defaultColor]
    *
    * @return {string}
@@ -1676,7 +1837,7 @@
   }
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} [defaultColor]
    *
    * @return {string}
@@ -1688,9 +1849,9 @@
   }
 
   /**
-   * @param {DiagramElement} element
-   * @param {string} defaultColor
-   * @param {string} defaultStrokeColor
+   * @param {Element} element
+   * @param {string} [defaultColor]
+   * @param {string} [defaultStrokeColor]
    *
    * @return {string}
    */
@@ -2369,8 +2530,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();
@@ -4518,7 +4679,7 @@
    *
    * @typedef { Partial<{
    *   align: AlignmentConfig;
-   *   style: Record<string, any>;
+   *   style: Record<string, number | string>;
    *   padding: PaddingConfig;
    * }> } BaseTextConfig
    *
@@ -4538,7 +4699,7 @@
 
   var DEFAULT_BOX_PADDING = 0;
 
-  var DEFAULT_LABEL_SIZE$1 = {
+  var DEFAULT_LABEL_SIZE = {
     width: 150,
     height: 50
   };
@@ -4625,6 +4786,8 @@
    * Alters the lines passed.
    *
    * @param {string[]} lines
+   * @param {number} maxWidth
+   * @param {SVGTextElement} fakeText
    *
    * @return {LineDescriptor} the line descriptor
    */
@@ -4778,7 +4941,7 @@
   function Text(config) {
 
     this._config = assign$1({}, {
-      size: DEFAULT_LABEL_SIZE$1,
+      size: DEFAULT_LABEL_SIZE,
       padding: DEFAULT_BOX_PADDING,
       style: {},
       align: 'center-top'
@@ -5591,165 +5754,15 @@
     translate: [ 'value', translate ]
   };
 
-  /**
-   * @typedef {import('diagram-js/lib/util/Types').Point} Point
-   * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
-   *
-   * @typedef {import('../model/Types').Element} Element
-   * @typedef {import('../model/Types').ModdleElement} ModdleElement
-   */
-
-  var DEFAULT_LABEL_SIZE = {
-    width: 90,
-    height: 20
-  };
-
-  var FLOW_LABEL_INDENT = 15;
-
-
-  /**
-   * Return true if the given semantic has an external label.
-   *
-   * @param {Element} semantic
-   *
-   * @return {boolean}
-   */
-  function isLabelExternal(semantic) {
-    return is$1(semantic, 'bpmn:Event') ||
-           is$1(semantic, 'bpmn:Gateway') ||
-           is$1(semantic, 'bpmn:DataStoreReference') ||
-           is$1(semantic, 'bpmn:DataObjectReference') ||
-           is$1(semantic, 'bpmn:DataInput') ||
-           is$1(semantic, 'bpmn:DataOutput') ||
-           is$1(semantic, 'bpmn:SequenceFlow') ||
-           is$1(semantic, 'bpmn:MessageFlow') ||
-           is$1(semantic, 'bpmn:Group');
-  }
-
-  /**
-   * Get the position of a sequence flow label.
-   *
-   * @param  {Point[]} waypoints
-   *
-   * @return {Point}
-   */
-  function getFlowLabelPosition(waypoints) {
-
-    // get the waypoints mid
-    var mid = waypoints.length / 2 - 1;
-
-    var first = waypoints[Math.floor(mid)];
-    var second = waypoints[Math.ceil(mid + 0.01)];
-
-    // get position
-    var position = getWaypointsMid(waypoints);
-
-    // calculate angle
-    var angle = Math.atan((second.y - first.y) / (second.x - first.x));
-
-    var x = position.x,
-        y = position.y;
-
-    if (Math.abs(angle) < Math.PI / 2) {
-      y -= FLOW_LABEL_INDENT;
-    } else {
-      x += FLOW_LABEL_INDENT;
-    }
-
-    return { x: x, y: y };
-  }
-
-
-  /**
-   * Get the middle of a number of waypoints.
-   *
-   * @param  {Point[]} waypoints
-   *
-   * @return {Point}
-   */
-  function getWaypointsMid(waypoints) {
-
-    var mid = waypoints.length / 2 - 1;
-
-    var first = waypoints[Math.floor(mid)];
-    var second = waypoints[Math.ceil(mid + 0.01)];
-
-    return {
-      x: first.x + (second.x - first.x) / 2,
-      y: first.y + (second.y - first.y) / 2
-    };
-  }
-
-  /**
-   * Get the middle of the external label of an element.
-   *
-   * @param {Element} element
-   *
-   * @return {Point}
-   */
-  function getExternalLabelMid(element) {
-
-    if (element.waypoints) {
-      return getFlowLabelPosition(element.waypoints);
-    } else if (is$1(element, 'bpmn:Group')) {
-      return {
-        x: element.x + element.width / 2,
-        y: element.y + DEFAULT_LABEL_SIZE.height / 2
-      };
-    } else {
-      return {
-        x: element.x + element.width / 2,
-        y: element.y + element.height + DEFAULT_LABEL_SIZE.height / 2
-      };
-    }
+  function getDefaultExportFromCjs (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
   }
 
-
   /**
-   * Return the bounds of an elements label, parsed from the elements DI or
-   * generated from its bounds.
-   *
-   * @param {ModdleElement} di
-   * @param {Element} element
+   * @param {Point} point
    *
-   * @return {Rect}
+   * @returns {Point}
    */
-  function getExternalLabelBounds(di, element) {
-
-    var mid,
-        size,
-        bounds,
-        label = di.label;
-
-    if (label && label.bounds) {
-      bounds = label.bounds;
-
-      size = {
-        width: Math.max(DEFAULT_LABEL_SIZE.width, bounds.width),
-        height: bounds.height
-      };
-
-      mid = {
-        x: bounds.x + bounds.width / 2,
-        y: bounds.y + bounds.height / 2
-      };
-    } else {
-
-      mid = getExternalLabelMid(element);
-
-      size = DEFAULT_LABEL_SIZE;
-    }
-
-    return assign$1({
-      x: mid.x - size.width / 2,
-      y: mid.y - size.height / 2
-    }, size);
-  }
-
-  function getDefaultExportFromCjs (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-  }
-
   function roundPoint(point) {
 
     return {
@@ -6266,6 +6279,15 @@
     ]
   };
 
+  /**
+   * @typedef {import('../util/Types').Point} Point
+   */
+
+  /**
+   * @param {import('../core/EventBus').Event} event
+   *
+   * @return {Event}
+   */
   function getOriginal(event) {
     return event.originalEvent || event.srcEvent;
   }
@@ -6274,22 +6296,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;
 
@@ -6305,7 +6348,11 @@
     }
   }
 
-
+  /**
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
+   */
   function hasSecondaryModifier(event) {
     var originalEvent = getOriginal(event) || event;
 
@@ -6870,7 +6917,13 @@
     };
   }
 
-
+  /**
+   * Get the element's type
+   *
+   * @param {Element} element
+   *
+   * @return {'connection' | 'shape' | 'root'}
+   */
   function getType(element) {
 
     if ('waypoints' in element) {
@@ -6884,8 +6937,12 @@
     return 'root';
   }
 
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
   function isFrameElement(element) {
-
     return !!(element && element.isFrame);
   }
 
@@ -7400,7 +7457,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) {
 
@@ -8508,6 +8565,7 @@
 
   /**
    * @param {string} str
+   *
    * @return {string}
    */
 
@@ -8519,6 +8577,11 @@
     '\'': '&#39;'
   };
 
+  /**
+   * @param {string} str
+   *
+   * @return {string}
+   */
   function escapeHTML(str) {
     str = '' + str;
 
@@ -9877,13 +9940,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);
@@ -9892,12 +9956,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) {
 
@@ -9913,6 +9978,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;
@@ -9961,7 +10037,7 @@
    *
    * @param {Array<Object>} collection
    * @param {Object} element
-   * @param {number} idx
+   * @param {number} [idx]
    */
   function add(collection, element, idx) {
 
@@ -10570,11 +10646,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.
@@ -10980,7 +11058,7 @@
      *
      * @memberOf Canvas
      *
-     * @event ShapeRemoved
+     * @event ShapeRemovedEvent
      * @type {Object}
      * @property {ShapeLike} element The shape.
      * @property {SVGElement} gfx The graphical element.
@@ -11017,7 +11095,7 @@
      *
      * @memberOf Canvas
      *
-     * @event connection.removed
+     * @event ConnectionRemovedEvent
      * @type {Object}
      * @property {ConnectionLike} element The connection.
      * @property {SVGElement} gfx The graphical element.
@@ -11076,6 +11154,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)
@@ -11103,6 +11182,7 @@
    *   width: zoomedAndScrolledViewbox.outer.width,
    *   height: zoomedAndScrolledViewbox.outer.height
    * });
+   * ```
    *
    * @param {Rect} [box] The viewbox to be set.
    *
@@ -11610,9 +11690,11 @@
    *
    * @example
    *
+   * ```javascript
    * elementRegistry.get('SomeElementId_1');
    *
    * elementRegistry.get(gfx);
+   * ```
    *
    * @param {string|SVGElement} filter The elements ID or graphical representation.
    *
@@ -11706,11 +11788,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.
@@ -12290,7 +12374,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const root = Model.create('root', {
@@ -12313,7 +12397,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const connection = Model.create('connection', {
@@ -12336,7 +12420,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const shape = Model.create('shape', {
@@ -12357,7 +12441,7 @@
    *
    * @example
    *
-   * ```
+   * ```javascript
    * import * as Model from 'diagram-js/lib/model';
    *
    * const label = Model.create('label', {
@@ -12370,7 +12454,7 @@
    * ```
    *
    * @param {'label'} type
-   * @param {any} [attrs]
+   * @param {Object} [attrs]
    * @return {Label}
    */
   function create(type, attrs) {
@@ -12668,7 +12752,6 @@
     });
   };
 
-
   /**
    * Register an event listener that is called only once.
    *
@@ -12939,7 +13022,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) {
 
@@ -13537,9 +13620,11 @@
      *
      * @example
      *
+     * ```javascript
      * eventBus.on('diagram.init', function() {
      *   eventBus.fire('my-custom-event', { foo: 'BAR' });
      * });
+     * ```
      *
      * @type {Object}
      */