bpmn-js 12.1.0 → 13.0.0

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v12.1.0
+ * bpmn-js - bpmn-viewer v13.0.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2023-04-04
+ * Date: 2023-04-19
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -21,9 +21,11 @@
   /**
    * Flatten array, one level deep.
    *
-   * @param {Array<?>} arr
+   * @template T
    *
-   * @return {Array<?>}
+   * @param {T[][]} arr
+   *
+   * @return {T[]}
    */
 
   const nativeToString$1 = Object.prototype.toString;
@@ -49,6 +51,11 @@
     return nativeToString$1.call(obj) === '[object Number]';
   }
 
+  /**
+   * @param {any} obj
+   *
+   * @return {boolean}
+   */
   function isFunction(obj) {
     const tag = nativeToString$1.call(obj);
 
@@ -77,22 +84,74 @@
     return nativeHasOwnProperty$1.call(target, key);
   }
 
+  /**
+   * @template T
+   * @typedef { (
+   *   ((e: T) => boolean) |
+   *   ((e: T, idx: number) => boolean) |
+   *   ((e: T, key: string) => boolean) |
+   *   string |
+   *   number
+   * ) } Matcher
+   */
+
+  /**
+   * @template T
+   * @template U
+   *
+   * @typedef { (
+   *   ((e: T) => U) | string | number
+   * ) } Extractor
+   */
+
+
+  /**
+   * @template T
+   * @typedef { (val: T, key: any) => boolean } MatchFn
+   */
+
+  /**
+   * @template T
+   * @typedef { T[] } ArrayCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { { [key: string]: T } } StringKeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { { [key: number]: T } } NumberKeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { StringKeyValueCollection<T> | NumberKeyValueCollection<T> } KeyValueCollection
+   */
+
+  /**
+   * @template T
+   * @typedef { KeyValueCollection<T> | ArrayCollection<T> } Collection
+   */
+
   /**
    * Find element in collection.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function|Object} matcher
+   * @template T
+   * @param {Collection<T>} collection
+   * @param {Matcher<T>} matcher
    *
    * @return {Object}
    */
   function find(collection, matcher) {
 
-    matcher = toMatcher(matcher);
+    const matchFn = toMatcher(matcher);
 
     let match;
 
     forEach$1(collection, function(val, key) {
-      if (matcher(val, key)) {
+      if (matchFn(val, key)) {
         match = val;
 
         return false;
@@ -107,19 +166,20 @@
   /**
    * Find element index in collection.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function} matcher
+   * @template T
+   * @param {Collection<T>} collection
+   * @param {Matcher<T>} matcher
    *
-   * @return {Object}
+   * @return {number}
    */
   function findIndex(collection, matcher) {
 
-    matcher = toMatcher(matcher);
+    const matchFn = toMatcher(matcher);
 
     let idx = isArray$2(collection) ? -1 : undefined;
 
     forEach$1(collection, function(val, key) {
-      if (matcher(val, key)) {
+      if (matchFn(val, key)) {
         idx = key;
 
         return false;
@@ -131,19 +191,22 @@
 
 
   /**
-   * Find element in collection.
+   * Filter elements in collection.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function} matcher
+   * @template T
+   * @param {Collection<T>} collection
+   * @param {Matcher<T>} matcher
    *
-   * @return {Array} result
+   * @return {T[]} result
    */
   function filter(collection, matcher) {
 
+    const matchFn = toMatcher(matcher);
+
     let result = [];
 
     forEach$1(collection, function(val, key) {
-      if (matcher(val, key)) {
+      if (matchFn(val, key)) {
         result.push(val);
       }
     });
@@ -156,10 +219,11 @@
    * Iterate over collection; returning something
    * (non-undefined) will stop iteration.
    *
-   * @param  {Array|Object} collection
-   * @param  {Function} iterator
+   * @template T
+   * @param {Collection<T>} collection
+   * @param { ((item: T, idx: number) => (boolean|void)) | ((item: T, key: string) => (boolean|void)) } iterator
    *
-   * @return {Object} return result that stopped the iteration
+   * @return {T} return result that stopped the iteration
    */
   function forEach$1(collection, iterator) {
 
@@ -190,11 +254,14 @@
   /**
    * Reduce collection, returning a single result.
    *
-   * @param  {Object|Array} collection
-   * @param  {Function} iterator
-   * @param  {Any} result
+   * @template T
+   * @template V
    *
-   * @return {Any} result returned from last iterator
+   * @param {Collection<T>} collection
+   * @param {(result: V, entry: T, index: any) => V} iterator
+   * @param {V} result
+   *
+   * @return {V} result returned from last iterator
    */
   function reduce(collection, iterator, result) {
 
@@ -264,13 +331,17 @@
    *
    * @example
    *
+   * ```javascript
    * const matcher = matchPattern({ id: 1 });
    *
    * let element = find(elements, matcher);
+   * ```
    *
-   * @param  {Object} pattern
+   * @template T
    *
-   * @return {Function} matcherFn
+   * @param {T} pattern
+   *
+   * @return { (el: any) =>  boolean } matcherFn
    */
   function matchPattern(pattern) {
 
@@ -284,6 +355,12 @@
   }
 
 
+  /**
+   * @template T
+   * @param {Matcher<T>} matcher
+   *
+   * @return {MatchFn<T>}
+   */
   function toMatcher(matcher) {
     return isFunction(matcher) ? matcher : (e) => {
       return e === matcher;
@@ -299,6 +376,16 @@
     return Number(arg);
   }
 
+  /* global setTimeout clearTimeout */
+
+  /**
+   * @typedef { {
+   *   (...args: any[]): any;
+   *   flush: () => void;
+   *   cancel: () => void;
+   * } } DebouncedFunction
+   */
+
   /**
    * Debounce fn, calling it only once if the given time
    * elapsed between calls.
@@ -309,7 +396,7 @@
    * @param  {Function} fn
    * @param  {Number} timeout
    *
-   * @return {Function} debounced function
+   * @return {DebouncedFunction} debounced function
    */
   function debounce(fn, timeout) {
 
@@ -355,6 +442,9 @@
       clear();
     }
 
+    /**
+     * @type { DebouncedFunction }
+     */
     function callback(...args) {
       lastNow = Date.now();
 
@@ -398,12 +488,15 @@
   }
 
   /**
-   * Pick given properties from the target object.
+   * Pick properties from the given target.
    *
-   * @param {Object} target
-   * @param {Array} properties
+   * @template T
+   * @template {any[]} V
+   *
+   * @param {T} target
+   * @param {V} properties
    *
-   * @return {Object} target
+   * @return Pick<T, V>
    */
   function pick(target, properties) {
 
@@ -424,10 +517,13 @@
   /**
    * Pick all target properties, excluding the given ones.
    *
-   * @param {Object} target
-   * @param {Array} properties
+   * @template T
+   * @template {any[]} V
    *
-   * @return {Object} target
+   * @param {T} target
+   * @param {V} properties
+   *
+   * @return {Omit<T, V>} target
    */
   function omit(target, properties) {
 
@@ -448,9 +544,9 @@
   var DEFAULT_RENDER_PRIORITY$1 = 1000;
 
   /**
-   * @typedef {import('../model').Base} Base
-   * @typedef {import('../model').Connection} Connection
-   * @typedef {import('../model').Shape} Shape
+   * @typedef {import('../core/Types').ElementLike} Element
+   * @typedef {import('../core/Types').ConnectionLike} Connection
+   * @typedef {import('../core/Types').ShapeLike} Shape
    *
    * @typedef {import('../core/EventBus').default} EventBus
    */
@@ -495,9 +591,9 @@
   /**
    * Checks whether an element can be rendered.
    *
-   * @param {Base} element The element to be rendered.
+   * @param {Element} element The element to be rendered.
    *
-   * @returns {boolean} Whether the element can be rendered.
+   * @return {boolean} Whether the element can be rendered.
    */
   BaseRenderer.prototype.canRender = function(element) {};
 
@@ -507,7 +603,7 @@
    * @param {SVGElement} visuals The SVG element to draw the shape into.
    * @param {Shape} shape The shape to be drawn.
    *
-   * @returns {SVGElement} The SVG element of the shape drawn.
+   * @return {SVGElement} The SVG element of the shape drawn.
    */
   BaseRenderer.prototype.drawShape = function(visuals, shape) {};
 
@@ -517,7 +613,7 @@
    * @param {SVGElement} visuals The SVG element to draw the connection into.
    * @param {Connection} connection The connection to be drawn.
    *
-   * @returns {SVGElement} The SVG element of the connection drawn.
+   * @return {SVGElement} The SVG element of the connection drawn.
    */
   BaseRenderer.prototype.drawConnection = function(visuals, connection) {};
 
@@ -539,10 +635,15 @@
    */
   BaseRenderer.prototype.getConnectionPath = function(connection) {};
 
+  /**
+   * @typedef { import('../model/Types').Element } Element
+   * @typedef { import('../model/Types').ModdleElement } ModdleElement
+   */
+
   /**
    * Is an element of the given BPMN type?
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param  {Element|ModdleElement} element
    * @param  {string} type
    *
    * @return {boolean}
@@ -557,8 +658,8 @@
   /**
    * Return true if element has any of the given types.
    *
-   * @param {djs.model.Base} element
-   * @param {Array<string>} types
+   * @param {Element|ModdleElement} element
+   * @param {string[]} types
    *
    * @return {boolean}
    */
@@ -571,7 +672,7 @@
   /**
    * Return the business object for a given element.
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param {Element|ModdleElement} element
    *
    * @return {ModdleElement}
    */
@@ -582,7 +683,7 @@
   /**
    * Return the di object for a given element.
    *
-   * @param  {djs.model.Base} element
+   * @param {Element} element
    *
    * @return {ModdleElement}
    */
@@ -590,6 +691,17 @@
     return element && element.di;
   }
 
+  /**
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
+  /**
+   * @param {Element} element
+   * @param {ModdleElement} di
+   *
+   * @return {boolean}
+   */
   function isExpanded(element, di) {
 
     if (is$1(element, 'bpmn:CallActivity')) {
@@ -613,10 +725,19 @@
     return true;
   }
 
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
   function isEventSubProcess(element) {
     return element && !!getBusinessObject(element).triggeredByEvent;
   }
 
+  /**
+   * @typedef { import('../../model').DiagramElement } DiagramElement
+   */
+
   function getLabelAttr(semantic) {
     if (
       is$1(semantic, 'bpmn:FlowElement') ||
@@ -650,6 +771,11 @@
     return categoryValueRef.value || '';
   }
 
+  /**
+   * @param {DiagramElement} element
+   *
+   * @return {string} label
+   */
   function getLabel(element) {
     var semantic = element.businessObject,
         attr = getLabelAttr(semantic);
@@ -1358,14 +1484,31 @@
     return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');
   }
 
+  /**
+   * @param {Point} point
+   *
+   * @return {Component[]}
+   */
   function move(point) {
     return [ 'M', point.x, point.y ];
   }
 
+  /**
+   * @param {Point} point
+   *
+   * @return {Component[]}
+   */
   function lineTo(point) {
     return [ 'L', point.x, point.y ];
   }
 
+  /**
+   * @param {Point} p1
+   * @param {Point} p2
+   * @param {Point} p3
+   *
+   * @return {Component[]}
+   */
   function curveTo(p1, p2, p3) {
     return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];
   }
@@ -1433,7 +1576,7 @@
 
   /**
    * @param {Point[]} points
-   * @param {*} [attrs]
+   * @param {any} [attrs]
    * @param {number} [radius]
    *
    * @return {SVGElement}
@@ -1482,54 +1625,75 @@
   /**
    * Checks if eventDefinition of the given element matches with semantic type.
    *
-   * @return {boolean} true if element is of the given semantic type
+   * @param {ModdleElement} event
+   * @param {string} eventDefinitionType
+   *
+   * @return {boolean}
    */
-  function isTypedEvent(event, eventDefinitionType, filter) {
-
-    function matches(definition, filter) {
-      return every(filter, function(val, key) {
-
-        // we want a == conversion here, to be able to catch
-        // undefined == false and friends
-        /* jshint -W116 */
-        return definition[key] == val;
-      });
-    }
-
+  function isTypedEvent(event, eventDefinitionType) {
     return some(event.eventDefinitions, function(definition) {
-      return definition.$type === eventDefinitionType && matches(event, filter);
+      return definition.$type === eventDefinitionType;
     });
   }
 
+  /**
+   * Check if element is a throw event.
+   *
+   * @param {ModdleElement} event
+   *
+   * @return {boolean}
+   */
   function isThrowEvent(event) {
     return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
   }
 
+  /**
+   * Check if element is a throw event.
+   *
+   * @param {ModdleElement} element
+   *
+   * @return {boolean}
+   */
   function isCollection(element) {
     var dataObject = element.dataObjectRef;
 
     return element.isCollection || (dataObject && dataObject.isCollection);
   }
 
-  function getSemantic(element) {
-    return element.businessObject;
-  }
-
 
   // color access //////////////////////
 
+  /**
+   * @param {DiagramElement} element
+   * @param {string} defaultColor
+   *
+   * @return {string}
+   */
   function getFillColor(element, defaultColor) {
     var di = getDi(element);
 
     return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
   }
 
+  /**
+   * @param {DiagramElement} element
+   * @param {string} defaultColor
+   *
+   * @return {string}
+   */
   function getStrokeColor(element, defaultColor) {
     var di = getDi(element);
 
     return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
   }
 
+  /**
+   * @param {DiagramElement} element
+   * @param {string} defaultColor
+   * @param {string} defaultStrokeColor
+   *
+   * @return {string}
+   */
   function getLabelColor(element, defaultColor, defaultStrokeColor) {
     var di = getDi(element),
         label = di.get('label');
@@ -1540,6 +1704,11 @@
 
   // cropping path customizations //////////////////////
 
+  /**
+   * @param {ShapeLike} shape
+   *
+   * @return {string} path
+   */
   function getCirclePath(shape) {
 
     var cx = shape.x + shape.width / 2,
@@ -1557,6 +1726,11 @@
     return componentsToPath(circlePath);
   }
 
+  /**
+   * @param {ShapeLike} shape
+   *
+   * @return {string} path
+   */
   function getRoundRectPath(shape, borderRadius) {
 
     var x = shape.x,
@@ -1580,6 +1754,11 @@
     return componentsToPath(roundRectPath);
   }
 
+  /**
+   * @param {ShapeLike} shape
+   *
+   * @return {string} path
+   */
   function getDiamondPath(shape) {
 
     var width = shape.width,
@@ -1600,6 +1779,11 @@
     return componentsToPath(diamondPath);
   }
 
+  /**
+   * @param {ShapeLike} shape
+   *
+   * @return {string} path
+   */
   function getRectPath(shape) {
     var x = shape.x,
         y = shape.y,
@@ -1943,9 +2127,13 @@
 
   var componentEvent = {};
 
-  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-      unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-      prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';
+  var bind$1, unbind$1, prefix$6;
+
+  function detect () {
+    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
+    prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';
+  }
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -1959,6 +2147,7 @@
    */
 
   var bind_1 = componentEvent.bind = function(el, type, fn, capture){
+    if (!bind$1) detect();
     el[bind$1](prefix$6 + type, fn, capture || false);
     return fn;
   };
@@ -1975,6 +2164,7 @@
    */
 
   var unbind_1 = componentEvent.unbind = function(el, type, fn, capture){
+    if (!unbind$1) detect();
     el[unbind$1](prefix$6 + type, fn, capture || false);
     return fn;
   };
@@ -2175,7 +2365,7 @@
   }
 
   /**
-   * @param {SVGElement} element
+   * @param {SVGElement} gfx
    * @param {number} x
    * @param {number} y
    * @param {number} angle
@@ -2196,7 +2386,7 @@
 
 
   /**
-   * @param {SVGElement} element
+   * @param {SVGElement} gfx
    * @param {number} x
    * @param {number} y
    */
@@ -2209,7 +2399,7 @@
 
 
   /**
-   * @param {SVGElement} element
+   * @param {SVGElement} gfx
    * @param {number} angle
    */
   function rotate(gfx, angle) {
@@ -2392,6 +2582,29 @@
 
   var ELEMENT_LABEL_DISTANCE = 10;
 
+  /**
+   * @typedef { Partial<{
+   *   defaultFillColor: string,
+   *   defaultStrokeColor: string,
+   *   defaultLabelColor: string
+   * }> } BpmnRendererConfig
+   */
+
+  /**
+   * @typedef { import('../model').DiagramElement } DiagramElement
+   */
+
+  /**
+   * A renderer for BPMN elements
+   *
+   * @param {BpmnRendererConfig} config
+   * @param {import('diagram-js/lib/core/EventBus').default} eventBus
+   * @param {import('diagram-js/lib/draw/Styles').default} styles
+   * @param {import('./PathMap').default} pathMap
+   * @param {import('diagram-js/lib/core/Canvas').default} canvas
+   * @param {import('./TextRenderer').default} textRenderer
+   * @param {number} [priority]
+   */
   function BpmnRenderer(
       config, eventBus, styles, pathMap,
       canvas, textRenderer, priority) {
@@ -2751,7 +2964,7 @@
 
     function renderEventContent(element, parentGfx) {
 
-      var event = getSemantic(element);
+      var event = getBusinessObject(element);
       var isThrowing = isThrowEvent(event);
 
       if (event.eventDefinitions && event.eventDefinitions.length > 1) {
@@ -2824,7 +3037,7 @@
     }
 
     function renderEmbeddedLabel(parentGfx, element, align) {
-      var semantic = getSemantic(element);
+      var semantic = getBusinessObject(element);
 
       return renderLabel(parentGfx, semantic.name, {
         box: element,
@@ -2890,7 +3103,7 @@
           stroke: getStrokeColor(element, defaultStrokeColor)
         };
 
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         if (!semantic.isInterrupting) {
           attrs = {
@@ -3351,7 +3564,7 @@
         return task;
       },
       'bpmn:ReceiveTask' : function(parentGfx, element) {
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         var task = renderer('bpmn:Task')(parentGfx, element);
         var pathData;
@@ -3507,12 +3720,12 @@
             stroke: getStrokeColor(element, defaultStrokeColor),
             strokeWidth
           });
-          var text = getSemantic(element).name;
+          var text = getBusinessObject(element).name;
           renderLaneLabel(parentGfx, text, element);
         } else {
 
           // collapsed pool draw text inline
-          var text2 = getSemantic(element).name;
+          var text2 = getBusinessObject(element).name;
           renderLabel(parentGfx, text2, {
             box: element, align: 'center-middle',
             style: {
@@ -3521,7 +3734,7 @@
           });
         }
 
-        var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
+        var participantMultiplicity = !!(getBusinessObject(element).participantMultiplicity);
 
         if (participantMultiplicity) {
           renderer('ParticipantMultiplicityMarker')(parentGfx, element);
@@ -3538,7 +3751,7 @@
           ...attrs
         });
 
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         if (semantic.$type === 'bpmn:Lane') {
           var text = semantic.name;
@@ -3629,7 +3842,7 @@
       },
       'bpmn:EventBasedGateway': function(parentGfx, element) {
 
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
@@ -3711,7 +3924,7 @@
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
-        var sequenceFlow = getSemantic(element);
+        var sequenceFlow = getBusinessObject(element);
 
         var source;
 
@@ -3738,7 +3951,7 @@
       },
       'bpmn:Association': function(parentGfx, element, attrs) {
 
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor(element, defaultStrokeColor);
@@ -3778,7 +3991,7 @@
       },
       'bpmn:MessageFlow': function(parentGfx, element) {
 
-        var semantic = getSemantic(element),
+        var semantic = getBusinessObject(element),
             di = getDi(element);
 
         var fill = getFillColor(element, defaultFillColor),
@@ -3853,7 +4066,7 @@
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
-        var semantic = getSemantic(element);
+        var semantic = getBusinessObject(element);
 
         if (isCollection(semantic)) {
           renderDataItemCollection(parentGfx, element);
@@ -3909,7 +4122,7 @@
       },
       'bpmn:BoundaryEvent': function(parentGfx, element) {
 
-        var semantic = getSemantic(element),
+        var semantic = getBusinessObject(element),
             cancel = semantic.cancelActivity;
 
         var attrs = {
@@ -3975,7 +4188,7 @@
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
 
-        var text = getSemantic(element).text || '';
+        var text = getBusinessObject(element).text || '';
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
@@ -4124,7 +4337,7 @@
     };
 
     function attachTaskMarkers(parentGfx, element, taskMarkers) {
-      var obj = getSemantic(element);
+      var obj = getBusinessObject(element);
 
       var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
       var position;
@@ -4218,10 +4431,23 @@
   ];
 
 
+  /**
+   * @param {DiagramElement} element
+   *
+   * @return {boolean}
+   */
   BpmnRenderer.prototype.canRender = function(element) {
     return is$1(element, 'bpmn:BaseElement');
   };
 
+  /**
+   * Draw shape into parentGfx.
+   *
+   * @param {SVGElement} parentGfx
+   * @param {DiagramElement} element
+   *
+   * @return {SVGElement} mainGfx
+   */
   BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
     var type = element.type;
     var h = this._renderer(type);
@@ -4230,6 +4456,14 @@
     return h(parentGfx, element);
   };
 
+  /**
+   * Draw connection into parentGfx.
+   *
+   * @param {SVGElement} parentGfx
+   * @param {DiagramElement} element
+   *
+   * @return {SVGElement} mainGfx
+   */
   BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
     var type = element.type;
     var h = this._renderer(type);
@@ -4238,6 +4472,13 @@
     return h(parentGfx, element);
   };
 
+  /**
+   * Get shape path.
+   *
+   * @param {DiagramElement} element
+   *
+   * @return {string} path
+   */
   BpmnRenderer.prototype.getShapePath = function(element) {
 
     if (is$1(element, 'bpmn:Event')) {
@@ -4257,6 +4498,41 @@
 
   /**
    * @typedef {import('../util/Types').Dimensions} Dimensions
+   *
+   * @typedef { {
+   *   top: number;
+   *   left: number;
+   *   right: number;
+   *   bottom: number;
+   * } } Padding
+   *
+   * @typedef { number | Partial<Padding> } PaddingConfig
+   *
+   * @typedef { {
+   *   horizontal: 'center' | 'left';
+   *   vertical: 'top' | 'center';
+   * } } Alignment
+   *
+   *  @typedef { 'center-middle' | 'center-top' } AlignmentConfig
+   *
+   * @typedef { Partial<{
+   *   align: AlignmentConfig;
+   *   style: Record<string, any>;
+   *   padding: PaddingConfig;
+   * }> } BaseTextConfig
+   *
+   * @typedef { BaseTextConfig & Partial<{
+   *   size: Dimensions;
+   * }> } TextConfig
+   *
+   * @typedef { BaseTextConfig & Partial<{
+   *   box: Dimensions;
+   *   fitBox: boolean;
+   * }> } TextLayoutConfig
+   *
+   *  @typedef { Dimensions & {
+   *  text: string;
+   * } } LineDescriptor
    */
 
   var DEFAULT_BOX_PADDING = 0;
@@ -4267,6 +4543,10 @@
   };
 
 
+  /**
+   * @param {AlignmentConfig} align
+   * @return {Alignment}
+   */
   function parseAlign(align) {
 
     var parts = align.split('-');
@@ -4277,6 +4557,11 @@
     };
   }
 
+  /**
+   * @param {PaddingConfig} padding
+   *
+   * @return {Padding}
+   */
   function parsePadding(padding) {
 
     if (isObject(padding)) {
@@ -4291,6 +4576,12 @@
     }
   }
 
+  /**
+   * @param {string} text
+   * @param {SVGTextElement} fakeText
+   *
+   * @return {import('../util/Types').Dimensions}
+   */
   function getTextBBox(text, fakeText) {
 
     fakeText.textContent = text;
@@ -4334,7 +4625,7 @@
    *
    * @param {string[]} lines
    *
-   * @return {Object} the line descriptor, an object { width, height, text }
+   * @return {LineDescriptor} the line descriptor
    */
   function layoutNext(lines, maxWidth, fakeText) {
 
@@ -4357,6 +4648,14 @@
     }
   }
 
+  /**
+   * @param {string[]} lines
+   * @param {string} fitLine
+   * @param {string} originalLine
+   * @param {Dimensions} textBBox
+   *
+   * @return {LineDescriptor}
+   */
   function fit(lines, fitLine, originalLine, textBBox) {
     if (fitLine.length < originalLine.length) {
       var remainder = originalLine.slice(fitLine.length).trim();
@@ -4420,6 +4719,13 @@
   }
 
 
+  /**
+   * @param {string} line
+   * @param {number} width
+   * @param {number} maxWidth
+   *
+   * @return {string}
+   */
   function shortenLine(line, width, maxWidth) {
     var length = Math.max(line.length * (maxWidth / width), 1);
 
@@ -4436,6 +4742,9 @@
   }
 
 
+  /**
+   * @return {SVGSVGElement}
+   */
   function getHelperSvg() {
     var helperSvg = document.getElementById('helper-svg');
 
@@ -4463,11 +4772,7 @@
   /**
    * Creates a new label utility
    *
-   * @param {Object} config
-   * @param {Dimensions} config.size
-   * @param {number} config.padding
-   * @param {Object} config.style
-   * @param {string} config.align
+   * @param {TextConfig} config
    */
   function Text(config) {
 
@@ -4483,7 +4788,7 @@
    * Returns the layouted text as an SVG element.
    *
    * @param {string} text
-   * @param {Object} options
+   * @param {TextLayoutConfig} options
    *
    * @return {SVGElement}
    */
@@ -4495,7 +4800,7 @@
    * Returns a labels layouted dimensions.
    *
    * @param {string} text to layout
-   * @param {Object} options
+   * @param {TextLayoutConfig} options
    *
    * @return {Dimensions}
    */
@@ -4506,18 +4811,13 @@
   /**
    * Creates and returns a label and its bounding box.
    *
-   * @method Text#createText
-   *
    * @param {string} text the text to render on the label
-   * @param {Object} options
-   * @param {string} options.align how to align in the bounding box.
-   *                               Any of { 'center-middle', 'center-top' },
-   *                               defaults to 'center-top'.
-   * @param {string} options.style style to be applied to the text
-   * @param {boolean} options.fitBox indicates if box will be recalculated to
-   *                                 fit text
+   * @param {TextLayoutConfig} options
    *
-   * @return {Object} { element, dimensions }
+   * @return { {
+   *   element: SVGElement,
+   *   dimensions: Dimensions
+   * } }
    */
   Text.prototype.layoutText = function(text, options) {
     var box = assign$1({}, this._config.size, options.box),
@@ -4633,7 +4933,30 @@
 
   var MIN_TEXT_ANNOTATION_HEIGHT = 30;
 
+  /**
+   * @typedef { {
+   *   fontFamily: string;
+   *   fontSize: number;
+   *   fontWeight: string;
+   *   lineHeight: number;
+   * } } TextRendererStyle
+   *
+   * @typedef { {
+   *   defaultStyle?: Partial<TextRendererStyle>;
+   *   externalStyle?: Partial<TextRendererStyle>;
+   * } } TextRendererConfig
+   *
+   * @typedef { import('diagram-js/lib/util/Text').TextLayoutConfig } TextLayoutConfig
+   *
+   * @typedef { import('diagram-js/lib/util/Types').Rect } Rect
+   */
+
 
+  /**
+   * Renders text and computes text bounding boxes.
+   *
+   * @param {TextRendererConfig} [config]
+   */
   function TextRenderer(config) {
 
     var defaultStyle = assign$1({
@@ -4657,19 +4980,17 @@
      * Get the new bounds of an externally rendered,
      * layouted label.
      *
-     * @param  {Bounds} bounds
-     * @param  {string} text
+     * @param {Rect} bounds
+     * @param {string} text
      *
-     * @return {Bounds}
+     * @return {Rect}
      */
     this.getExternalLabelBounds = function(bounds, text) {
 
       var layoutedDimensions = textUtil.getDimensions(text, {
         box: {
           width: 90,
-          height: 30,
-          x: bounds.width / 2 + bounds.x,
-          y: bounds.height / 2 + bounds.y
+          height: 30
         },
         style: externalStyle
       });
@@ -4687,10 +5008,10 @@
     /**
      * Get the new bounds of text annotation.
      *
-     * @param  {Bounds} bounds
-     * @param  {string} text
+     * @param {Rect} bounds
+     * @param {string} text
      *
-     * @return {Bounds}
+     * @return {Rect}
      */
     this.getTextAnnotationBounds = function(bounds, text) {
 
@@ -4713,7 +5034,7 @@
      * Create a layouted text element.
      *
      * @param {string} text
-     * @param {Object} [options]
+     * @param {TextLayoutConfig} [options]
      *
      * @return {SVGElement} rendered text
      */
@@ -4742,9 +5063,8 @@
   ];
 
   /**
-   * Map containing SVG paths needed by BpmnRenderer.
+   * Map containing SVG paths needed by BpmnRenderer
    */
-
   function PathMap() {
 
     /**
@@ -5086,6 +5406,13 @@
       }
     };
 
+    /**
+     * Return raw path for the given ID.
+     *
+     * @param {string} pathId
+     *
+     * @return {string} raw path
+     */
     this.getRawPath = function getRawPath(pathId) {
       return this.pathMap[pathId].d;
     };
@@ -5138,6 +5465,7 @@
      *   </ul>
      * </p>
      *
+     * @return {string} scaled path
      */
     this.getScaledPath = function getScaledPath(pathId, param) {
       var rawPath = this.pathMap[pathId];
@@ -5221,7 +5549,9 @@
   };
 
   /**
-   * @typedef {import('./').Replacements} Replacements
+   * @typedef { {
+   *   [key: string]: string;
+   * } } TranslateReplacements
    */
 
   /**
@@ -5231,14 +5561,16 @@
    *
    * @example
    *
+   * ```javascript
    * // use it inside any diagram component by injecting `translate`.
    *
    * function MyService(translate) {
    *   alert(translate('HELLO {you}', { you: 'You!' }));
    * }
+   * ```
    *
    * @param {string} template to interpolate
-   * @param {Replacements} [replacements] a map with substitutes
+   * @param {TranslateReplacements} [replacements] a map with substitutes
    *
    * @return {string} the translated string
    */
@@ -5251,10 +5583,21 @@
     });
   }
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var TranslateModule = {
     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
@@ -5264,10 +5607,11 @@
 
 
   /**
-   * Returns true if the given semantic has an external label
+   * Return true if the given semantic has an external label.
+   *
+   * @param {Element} semantic
    *
-   * @param {BpmnElement} semantic
-   * @return {boolean} true if has label
+   * @return {boolean}
    */
   function isLabelExternal(semantic) {
     return is$1(semantic, 'bpmn:Event') ||
@@ -5282,10 +5626,11 @@
   }
 
   /**
-   * Get the position for sequence flow labels
+   * Get the position of a sequence flow label.
+   *
+   * @param  {Point[]} waypoints
    *
-   * @param  {Array<Point>} waypoints
-   * @return {Point} the label position
+   * @return {Point}
    */
   function getFlowLabelPosition(waypoints) {
 
@@ -5315,10 +5660,11 @@
 
 
   /**
-   * Get the middle of a number of waypoints
+   * Get the middle of a number of waypoints.
    *
-   * @param  {Array<Point>} waypoints
-   * @return {Point} the mid point
+   * @param  {Point[]} waypoints
+   *
+   * @return {Point}
    */
   function getWaypointsMid(waypoints) {
 
@@ -5333,7 +5679,13 @@
     };
   }
 
-
+  /**
+   * Get the middle of the external label of an element.
+   *
+   * @param {Element} element
+   *
+   * @return {Point}
+   */
   function getExternalLabelMid(element) {
 
     if (element.waypoints) {
@@ -5353,11 +5705,13 @@
 
 
   /**
-   * Returns the bounds of an elements label, parsed from the elements DI or
+   * Return the bounds of an elements label, parsed from the elements DI or
    * generated from its bounds.
    *
-   * @param {BpmndDi} di
-   * @param {djs.model.Base} element
+   * @param {ModdleElement} di
+   * @param {Element} element
+   *
+   * @return {Rect}
    */
   function getExternalLabelBounds(di, element) {
 
@@ -5515,7 +5869,7 @@
   /**
    * Get the mid of the given Element.
    *
-   * @param {Connection} connection
+   * @param {Element} element
    *
    * @return {Point}
    */
@@ -5545,6 +5899,21 @@
     return '<' + e.$type + (e.id ? ' id="' + e.id : '') + '" />';
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
+   *
+   * @typedef {import('../features/modeling/ElementFactory').default} ElementFactory
+   * @typedef {import('../draw/TextRenderer').default} TextRenderer
+   *
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').Label} Label
+   * @typedef {import('../model/Types').Shape} Shape
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
   /**
    * @param {ModdleElement} semantic
    * @param {ModdleElement} di
@@ -5616,8 +5985,12 @@
 
 
   /**
-   * Add bpmn element (semantic) to the canvas onto the
-   * specified parent shape.
+   * Add a BPMN element (semantic) to the canvas making it a child of the
+   * given parent.
+   *
+   * @param {ModdleElement} semantic
+   * @param {ModdleElement} di
+   * @param {Shape} parentElement
    */
   BpmnImporter.prototype.add = function(semantic, di, parentElement) {
     var element,
@@ -5726,10 +6099,10 @@
 
 
   /**
-   * Attach the boundary element to the given host
+   * Attach a boundary element to the given host.
    *
    * @param {ModdleElement} boundarySemantic
-   * @param {djs.model.Base} boundaryElement
+   * @param {Shape} boundaryElement
    */
   BpmnImporter.prototype._attachBoundary = function(boundarySemantic, boundaryElement) {
     var translate = this._translate;
@@ -5762,7 +6135,13 @@
 
 
   /**
-   * add label for an element
+   * Add a label to a given element.
+   *
+   * @param {ModdleElement} semantic
+   * @param {ModdleElement} di
+   * @param {Element} element
+   *
+   * @return {Label}
    */
   BpmnImporter.prototype.addLabel = function(semantic, di, element) {
     var bounds,
@@ -5794,11 +6173,14 @@
   };
 
   /**
-   * Return the drawn connection end based on the given side.
+   * Get the source or target of the given connection.
    *
-   * @throws {Error} if the end is not yet drawn
+   * @param {ModdleElement} semantic
+   * @param {'source' | 'target'} side
+   *
+   * @return {Element}
    */
-  BpmnImporter.prototype._getEnd = function(semantic, side) {
+  BpmnImporter.prototype._getConnectedElement = function(semantic, side) {
 
     var element,
         refSemantic,
@@ -5836,11 +6218,11 @@
   };
 
   BpmnImporter.prototype._getSource = function(semantic) {
-    return this._getEnd(semantic, 'source');
+    return this._getConnectedElement(semantic, 'source');
   };
 
   BpmnImporter.prototype._getTarget = function(semantic) {
-    return this._getEnd(semantic, 'target');
+    return this._getConnectedElement(semantic, 'target');
   };
 
 
@@ -5926,11 +6308,13 @@
   }
 
   /**
-   * @typedef {import('../../model').Base} Base
+   * @typedef {import('../../model/Types').Element} Element
    *
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../../core/EventBus').default} EventBus
    * @typedef {import('../../draw/Styles').default} Styles
+   *
+   * @typedef {import('../../util/Types').Point} Point
    */
 
   function allowAll(event) { return true; }
@@ -5974,7 +6358,7 @@
      *
      * @param {string} type local event name, e.g. element.click.
      * @param {MouseEvent|TouchEvent} event native event
-     * @param {Base} [element] the diagram element to emit the event on;
+     * @param {Element} [element] the diagram element to emit the event on;
      *                                   defaults to the event target
      */
     function fire(type, event, element) {
@@ -6057,7 +6441,7 @@
      *
      * @param {string} eventName the name of the triggered DOM event
      * @param {MouseEvent|TouchEvent} event
-     * @param {Base} targetElement
+     * @param {Element} targetElement
      */
     function triggerMouseEvent(eventName, event, targetElement) {
 
@@ -6223,7 +6607,7 @@
     /**
      * Create default hit for the given element.
      *
-     * @param {Base} element
+     * @param {Element} element
      * @param {SVGElement} gfx
      *
      * @return {SVGElement} created hit
@@ -6250,7 +6634,7 @@
      * Create hits for the given waypoints.
      *
      * @param {SVGElement} gfx
-     * @param {Array<Point>} waypoints
+     * @param {Point[]} waypoints
      *
      * @return {SVGElement}
      */
@@ -6269,7 +6653,7 @@
      * Create hits for a box.
      *
      * @param {SVGElement} gfx
-     * @param {string} hitType
+     * @param {string} type
      * @param {Object} attrs
      *
      * @return {SVGElement}
@@ -6295,7 +6679,7 @@
     /**
      * Update default hit of the element.
      *
-     * @param {Base} element
+     * @param {Element} element
      * @param {SVGElement} gfx
      *
      * @return {SVGElement} updated hit
@@ -6344,7 +6728,7 @@
    * @event element.hover
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6355,7 +6739,7 @@
    * @event element.out
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6366,7 +6750,7 @@
    * @event element.click
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6377,7 +6761,7 @@
    * @event element.dblclick
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6388,7 +6772,7 @@
    * @event element.mousedown
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6399,7 +6783,7 @@
    * @event element.mouseup
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
@@ -6411,11 +6795,14 @@
    * @event element.contextmenu
    *
    * @type {Object}
-   * @property {Base} element
+   * @property {Element} element
    * @property {SVGElement} gfx
    * @property {Event} originalEvent
    */
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var InteractionEventsModule = {
     __init__: [ 'interactionEvents' ],
     interactionEvents: [ 'type', InteractionEvents ]
@@ -6425,7 +6812,7 @@
    * Returns the surrounding bbox for all elements in
    * the array or the element primitive.
    *
-   * @param {Base|Base[]} elements
+   * @param {Element|Element[]} elements
    * @param {boolean} [stopRecursion=false]
    *
    * @return {Rect}
@@ -6500,7 +6887,7 @@
   var LOW_PRIORITY$2 = 500;
 
   /**
-   * @typedef {import('../../model').Base} Base
+   * @typedef {import('../../model/Types').Element} Element
    *
    * @typedef {import('../../core/EventBus').default} EventBus
    * @typedef {import('../../draw/Styles').default} Styles
@@ -6574,7 +6961,7 @@
    * element and an outline offset.
    *
    * @param {SVGElement} outline
-   * @param {Base} element
+   * @param {Element} element
    */
   Outline.prototype.updateShapeOutline = function(outline, element) {
 
@@ -6593,7 +6980,7 @@
    * the connection and an outline offset.
    *
    * @param {SVGElement} outline
-   * @param {Base} element
+   * @param {Element} connection
    */
   Outline.prototype.updateConnectionOutline = function(outline, connection) {
 
@@ -6611,12 +6998,16 @@
 
   Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var OutlineModule = {
     __init__: [ 'outline' ],
     outline: [ 'type', Outline ]
   };
 
   /**
+   * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
    */
 
@@ -6624,15 +7015,17 @@
    * A service that offers the current selection in a diagram.
    * Offers the api to control the selection, too.
    *
-   * @class
-   *
    * @param {EventBus} eventBus
+   * @param {Canvas} canvas
    */
   function Selection(eventBus, canvas) {
 
     this._eventBus = eventBus;
     this._canvas = canvas;
 
+    /**
+     * @type {Object[]}
+     */
     this._selectedElements = [];
 
     var self = this;
@@ -6649,7 +7042,11 @@
 
   Selection.$inject = [ 'eventBus', 'canvas' ];
 
-
+  /**
+   * Deselect an element.
+   *
+   * @param {Object} element The element to deselect.
+   */
   Selection.prototype.deselect = function(element) {
     var selectedElements = this._selectedElements;
 
@@ -6664,26 +7061,33 @@
     }
   };
 
-
+  /**
+   * Get the selected elements.
+   *
+   * @return {Object[]} The selected elements.
+   */
   Selection.prototype.get = function() {
     return this._selectedElements;
   };
 
+  /**
+   * Check whether an element is selected.
+   *
+   * @param {Object} element The element.
+   *
+   * @return {boolean} Whether the element is selected.
+   */
   Selection.prototype.isSelected = function(element) {
     return this._selectedElements.indexOf(element) !== -1;
   };
 
 
   /**
-   * This method selects one or more elements on the diagram.
+   * Select one or many elements.
    *
-   * By passing an additional add parameter you can decide whether or not the element(s)
-   * should be added to the already existing selection or not.
-   *
-   * @method Selection#select
-   *
-   * @param {Object|Object[]} elements element or array of elements to be selected
-   * @param {boolean} [add] whether the element(s) should be appended to the current selection, defaults to false
+   * @param {Object|Object[]} elements The element(s) to select.
+   * @param {boolean} [add] Whether to add the element(s) to the selected elements.
+   * Defaults to `false`.
    */
   Selection.prototype.select = function(elements, add) {
     var selectedElements = this._selectedElements,
@@ -6969,6 +7373,9 @@
     return !element.hidden;
   }
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var SelectionModule = {
     __init__: [ 'selectionVisuals', 'selectionBehavior' ],
     __depends__: [
@@ -6999,7 +7406,7 @@
   /**
    * Returns a next unique ID.
    *
-   * @returns {string} the id
+   * @return {string} the id
    */
   IdGenerator.prototype.next = function() {
     return this._prefix + (++this._counter);
@@ -7015,12 +7422,54 @@
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../../core/EventBus').default} EventBus
    *
-   * @typedef {import('./Overlays').Overlay} Overlay
-   * @typedef {import('./Overlays').OverlayAttrs} OverlayAttrs
-   * @typedef {import('./Overlays').OverlayContainer} OverlayContainer
-   * @typedef {import('./Overlays').OverlaysConfig} OverlaysConfig
-   * @typedef {import('./Overlays').OverlaysConfigDefault} OverlaysConfigDefault
-   * @typedef {import('./Overlays').OverlaysFilter} OverlaysFilter
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef { {
+   *   minZoom?: number,
+   *   maxZoom?: number
+   * } } OverlaysConfigShow
+   *
+   * @typedef { {
+   *   min?: number,
+   *   max?: number
+   * } } OverlaysConfigScale
+   *
+   * @typedef { {
+  *   id: string,
+  *   type: string | null,
+  *   element: Element | string
+  * } & OverlayAttrs } Overlay
+  *
+   * @typedef { {
+   *   html: HTMLElement | string,
+   *   position: {
+   *     top?: number,
+   *     right?: number,
+   *     bottom?: number,
+   *     left?: number
+   *   }
+   * } & OverlaysConfigDefault } OverlayAttrs
+   *
+   * @typedef { {
+   *   html: HTMLElement,
+   *   element: Element,
+   *   overlays: Overlay[]
+   * } } OverlayContainer
+   *
+   * @typedef {{
+   *   defaults?: OverlaysConfigDefault
+   * }} OverlaysConfig
+   *
+   * @typedef { {
+   *  show?: OverlaysConfigShow,
+   *  scale?: OverlaysConfigScale | boolean
+   * } } OverlaysConfigDefault
+   *
+   * @typedef { {
+   *   id?: string;
+   *   element?: Element | string;
+   *   type?: string;
+   * } | string } OverlaysFilter
    */
 
   /**
@@ -7030,6 +7479,7 @@
    *
    * @example
    *
+   * ```javascript
    * // add a pink badge on the top left of the shape
    *
    * overlays.add(someShape, {
@@ -7059,8 +7509,9 @@
    *   }
    *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
    * });
+   * ```
    *
-   *
+   * ```javascript
    * // remove an overlay
    *
    * var id = overlays.add(...);
@@ -7082,6 +7533,7 @@
    *       }
    *     }
    * }
+   * ```
    *
    * @param {OverlaysConfig} config
    * @param {EventBus} eventBus
@@ -7140,6 +7592,7 @@
    *
    * @example
    *
+   * ```javascript
    * // return the single overlay with the given ID
    * overlays.get('some-id');
    *
@@ -7151,6 +7604,7 @@
    *
    * // shape can also be specified as ID
    * overlays.get({ element: 'element-id', type: 'badge' });
+   * ```
    *
    * @param {OverlaysFilter} search The filter to be used to find the overlay(s).
    *
@@ -7188,7 +7642,7 @@
   /**
    * Adds an HTML overlay to an element.
    *
-   * @param {Base|string} element The element to add the overlay to.
+   * @param {Element|string} element The element to add the overlay to.
    * @param {string} [type] An optional type that can be used to filter.
    * @param {OverlayAttrs} overlay The overlay.
    *
@@ -7276,7 +7730,7 @@
   /**
    * Checks whether overlays are shown.
    *
-   * @returns {boolean} Whether overlays are shown.
+   * @return {boolean} Whether overlays are shown.
    */
   Overlays.prototype.isShown = function() {
     return this._overlayRoot.style.display !== 'none';
@@ -7669,6 +8123,9 @@
     });
   }
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var OverlaysModule = {
     __init__: [ 'overlays' ],
     overlays: [ 'type', Overlays ]
@@ -7745,15 +8202,22 @@
     'graphicsFactory'
   ];
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var ChangeSupportModule = {
     __init__: [ 'changeSupport' ],
     changeSupport: [ 'type', ChangeSupport ]
   };
 
   /**
+   * @typedef {import('../core/Types').ElementLike} ElementLike
    * @typedef {import('../core/EventBus').default} EventBus
-   * @typedef {import(./CommandInterceptor).HandlerFunction} HandlerFunction
-   * @typedef {import(./CommandInterceptor).ComposeHandlerFunction} ComposeHandlerFunction
+   * @typedef {import('./CommandStack').CommandContext} CommandContext
+   *
+   * @typedef {string|string[]} Events
+   * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+   * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
    */
 
   var DEFAULT_PRIORITY$1 = 1000;
@@ -7765,10 +8229,9 @@
    * @class
    * @constructor
    *
-   * @param {EventBus} eventBus
-   *
    * @example
    *
+   * ```javascript
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
    * class CommandLogger extends CommandInterceptor {
@@ -7779,6 +8242,9 @@
    *     console.log('commandStack.shape-create.preExecute', event);
    *   });
    * }
+   * ```
+   *
+   * @param {EventBus} eventBus
    */
   function CommandInterceptor(eventBus) {
 
@@ -7796,16 +8262,17 @@
     };
   }
 
+
   /**
-     * Intercept a command during one of the phases.
-     *
-     * @param {string|string[]} [events] One or more commands to intercept.
-     * @param {string} [hook] Phase during which to intercept command.
-     * @param {number} [priority] Priority with which command will be intercepted.
-     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn Callback.
-     * @param {boolean} [unwrap] Whether the event should be unwrapped.
-     * @param {*} [that] `this` value the callback will be called with.
-     */
+   * Intercept a command during one of the phases.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {string} [hook] phase to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
   CommandInterceptor.prototype.on = function(events, hook, priority, handlerFn, unwrap, that) {
 
     if (isFunction(hook) || isNumber(hook)) {
@@ -7847,35 +8314,130 @@
     });
   };
 
+  /**
+   * Add a <canExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.canExecute = createHook('canExecute');
+
+  /**
+   * Add a <preExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecute = createHook('preExecute');
 
-  var hooks = [
-    'canExecute',
-    'preExecute',
-    'preExecuted',
-    'execute',
-    'executed',
-    'postExecute',
-    'postExecuted',
-    'revert',
-    'reverted'
-  ];
+  /**
+   * Add a <preExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+  /**
+   * Add a <execute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.execute = createHook('execute');
+
+  /**
+   * Add a <executed> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.executed = createHook('executed');
+
+  /**
+   * Add a <postExecute> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+  /**
+   * Add a <postExecuted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+  /**
+   * Add a <revert> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.revert = createHook('revert');
+
+  /**
+   * Add a <reverted> phase of command interceptor.
+   *
+   * @param {Events} [events] command(s) to intercept
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap] whether the event should be unwrapped
+   * @param {any} [that]
+   */
+  CommandInterceptor.prototype.reverted = createHook('reverted');
 
   /*
    * Add prototype methods for each phase of command execution (e.g. execute,
    * revert).
+   *
+   * @param {string} hook
+   *
+   * @return { (
+   *   events?: Events,
+   *   priority?: number,
+   *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+   *   unwrap?: boolean
+   * ) => any }
    */
-  forEach$1(hooks, function(hook) {
+  function createHook(hook) {
 
     /**
-     * Add prototype method for a specific phase of command execution.
+     * @this {CommandInterceptor}
      *
-     * @param {string|string[]} [events] One or more commands to intercept.
-     * @param {number} [priority] Priority with which command will be intercepted.
-     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn Callback.
-     * @param {boolean} [unwrap] Whether the event should be unwrapped.
-     * @param {*} [that] `this` value the callback will be called with.
+     * @param {Events} [events]
+     * @param {number} [priority]
+     * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+     * @param {boolean} [unwrap]
+     * @param {any} [that]
      */
-    CommandInterceptor.prototype[hook] = function(events, priority, handlerFn, unwrap, that) {
+    const hookFn = function(events, priority, handlerFn, unwrap, that) {
 
       if (isFunction(events) || isNumber(events)) {
         that = unwrap;
@@ -7887,7 +8449,9 @@
 
       this.on(events, hook, priority, handlerFn, unwrap, that);
     };
-  });
+
+    return hookFn;
+  }
 
   /**
    * @typedef {import('didi').Injector} Injector
@@ -7929,6 +8493,9 @@
 
   RootElementsBehavior.$inject = [ 'canvas', 'injector' ];
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var RootElementsModule = {
     __init__: [ 'rootElementsBehavior' ],
     rootElementsBehavior: [ 'type', RootElementsBehavior ]
@@ -7936,7 +8503,7 @@
 
   /**
    * @param {string} str
-   * @returns {string}
+   * @return {string}
    */
 
   var HTML_ESCAPE_MAP = {
@@ -7955,14 +8522,19 @@
     });
   }
 
+  /**
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
   var planeSuffix = '_plane';
 
   /**
    * Get plane ID for a primary shape.
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param  {Element|ModdleElement} element
    *
-   * @returns {String}
+   * @return {string}
    */
   function getPlaneIdFromShape(element) {
     var id = element.id;
@@ -7978,32 +8550,40 @@
     return id + planeSuffix;
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   *
+   * @typedef {import('../../model/Types').Element} Element
+   * @typedef {import('../../model/Types').Shape} Shape
+   */
+
   var OPEN_CLASS = 'bjs-breadcrumbs-shown';
 
 
   /**
    * Adds overlays that allow switching planes on collapsed subprocesses.
    *
-   * @param {eventBus} eventBus
-   * @param {elementRegistry} elementRegistry
-   * @param {overlays} overlays
-   * @param {canvas} canvas
+   * @param {EventBus} eventBus
+   * @param {ElementRegistry} elementRegistry
+   * @param {Canvas} canvas
    */
-  function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
+  function DrilldownBreadcrumbs(eventBus, elementRegistry, canvas) {
     var breadcrumbs = domify$1('<ul class="bjs-breadcrumbs"></ul>');
     var container = canvas.getContainer();
     var containerClasses = classes(container);
     container.appendChild(breadcrumbs);
 
-    var boParents = [];
+    var businessObjectParents = [];
 
     // update breadcrumbs if name or ID of the primary shape changes
-    eventBus.on('element.changed', function(e) {
-      var shape = e.element,
-          bo = getBusinessObject(shape);
+    eventBus.on('element.changed', function(event) {
+      var shape = event.element,
+          businessObject = getBusinessObject(shape);
 
-      var isPresent = find(boParents, function(el) {
-        return el === bo;
+      var isPresent = find(businessObjectParents, function(element) {
+        return element === businessObject;
       });
 
       if (!isPresent) {
@@ -8017,14 +8597,14 @@
      * Updates the displayed breadcrumbs. If no element is provided, only the
      * labels are updated.
      *
-     * @param {djs.model.Base} [element]
+     * @param {Element} [element]
      */
     function updateBreadcrumbs(element) {
       if (element) {
-        boParents = getBoParentChain(element);
+        businessObjectParents = getBusinessObjectParentChain(element);
       }
 
-      var path = boParents.map(function(parent) {
+      var path = businessObjectParents.map(function(parent) {
         var title = escapeHTML(parent.name || parent.id);
         var link = domify$1('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
@@ -8034,8 +8614,9 @@
         // element in the elementRegisty. Instead, we search for the corresponding participant
         if (!parentPlane && is$1(parent, 'bpmn:Process')) {
           var participant = elementRegistry.find(function(element) {
-            var bo = getBusinessObject(element);
-            return bo && bo.processRef && bo.processRef === parent;
+            var businessObject = getBusinessObject(element);
+
+            return businessObject && businessObject.get('processRef') && businessObject.get('processRef') === parent;
           });
 
           parentPlane = canvas.findRoot(participant.id);
@@ -8052,10 +8633,11 @@
 
       // show breadcrumbs and expose state to .djs-container
       var visible = path.length > 1;
+
       containerClasses.toggle(OPEN_CLASS, visible);
 
-      path.forEach(function(el) {
-        breadcrumbs.appendChild(el);
+      path.forEach(function(element) {
+        breadcrumbs.appendChild(element);
       });
     }
 
@@ -8065,7 +8647,7 @@
 
   }
 
-  DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+  DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'canvas' ];
 
 
   // helpers //////////
@@ -8074,16 +8656,16 @@
    * Returns the parents for the element using the business object chain,
    * starting with the root element.
    *
-   * @param {djs.model.Shape} child
+   * @param {Shape} child
    *
-   * @returns {Array<djs.model.Shape>} parents
+   * @return {Shape}
    */
-  function getBoParentChain(child) {
-    var bo = getBusinessObject(child);
+  function getBusinessObjectParentChain(child) {
+    var businessObject = getBusinessObject(child);
 
     var parents = [];
 
-    for (var element = bo; element; element = element.$parent) {
+    for (var element = businessObject; element; element = element.$parent) {
       if (is$1(element, 'bpmn:SubProcess') || is$1(element, 'bpmn:Process')) {
         parents.push(element);
       }
@@ -8092,13 +8674,18 @@
     return parents.reverse();
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   */
+
   /**
    * Move collapsed subprocesses into view when drilling down.
    *
    * Zoom and scroll are saved in a session.
    *
-   * @param {eventBus} eventBus
-   * @param {canvas} canvas
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
    */
   function DrilldownCentering(eventBus, canvas) {
 
@@ -8209,6 +8796,18 @@
     };
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('../../model/Types').Moddle} Moddle
+   *
+   * @typedef {import('../../model/Types').Element} Element
+   * @typedef {import('../../model/Types').Shape} Shape
+   *
+   * @typedef {import('diagram-js/lib/core/Canvas').CanvasPlane} CanvasPlane
+   *
+   * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
+   */
+
   var DEFAULT_POSITION = {
     x: 180,
     y: 160
@@ -8216,10 +8815,10 @@
 
   /**
    * Hook into `import.render.start` and create new planes for diagrams with
-   * collapsed subprocesses and all dis on the same plane.
+   * collapsed subprocesses and all DI elements on the same plane.
    *
-   * @param {eventBus} eventBus
-   * @param {moddle} moddle
+   * @param {EventBus} eventBus
+   * @param {Moddle} moddle
    */
   function SubprocessCompatibility(eventBus, moddle) {
     this._eventBus = eventBus;
@@ -8228,11 +8827,14 @@
     var self = this;
 
     eventBus.on('import.render.start', 1500, function(e, context) {
-      self.handleImport(context.definitions);
+      self._handleImport(context.definitions);
     });
   }
 
-  SubprocessCompatibility.prototype.handleImport = function(definitions) {
+  /**
+   * @param {ModdleElement} definitions
+   */
+  SubprocessCompatibility.prototype._handleImport = function(definitions) {
     if (!definitions.diagrams) {
       return;
     }
@@ -8251,12 +8853,12 @@
 
     var newDiagrams = [];
     definitions.diagrams.forEach(function(diagram) {
-      var createdDiagrams = self.createNewDiagrams(diagram.plane);
+      var createdDiagrams = self._createNewDiagrams(diagram.plane);
       Array.prototype.push.apply(newDiagrams, createdDiagrams);
     });
 
     newDiagrams.forEach(function(diagram) {
-      self.movePlaneElementsToOrigin(diagram.plane);
+      self._movePlaneElementsToOrigin(diagram.plane);
     });
   };
 
@@ -8264,29 +8866,30 @@
   /**
    * Moves all DI elements from collapsed subprocesses to a new plane.
    *
-   * @param {Object} plane
-   * @return {Array} new diagrams created for the collapsed subprocesses
+   * @param {CanvasPlane} plane
+   *
+   * @return {ModdleElement[]} new diagrams created for the collapsed subprocesses
    */
-  SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
+  SubprocessCompatibility.prototype._createNewDiagrams = function(plane) {
     var self = this;
 
     var collapsedElements = [];
     var elementsToMove = [];
 
     plane.get('planeElement').forEach(function(diElement) {
-      var bo = diElement.bpmnElement;
+      var businessObject = diElement.bpmnElement;
 
-      if (!bo) {
+      if (!businessObject) {
         return;
       }
 
-      var parent = bo.$parent;
+      var parent = businessObject.$parent;
 
-      if (is$1(bo, 'bpmn:SubProcess') && !diElement.isExpanded) {
-        collapsedElements.push(bo);
+      if (is$1(businessObject, 'bpmn:SubProcess') && !diElement.isExpanded) {
+        collapsedElements.push(businessObject);
       }
 
-      if (shouldMoveToPlane(bo, plane)) {
+      if (shouldMoveToPlane(businessObject, plane)) {
 
         // don't change the array while we iterate over it
         elementsToMove.push({ diElement: diElement, parent: parent });
@@ -8297,9 +8900,11 @@
 
     // create new planes for all collapsed subprocesses, even when they are empty
     collapsedElements.forEach(function(element) {
-      if (!self._processToDiagramMap[element.id]) {
-        var diagram = self.createDiagram(element);
+      if (!self._processToDiagramMap[ element.id ]) {
+        var diagram = self._createDiagram(element);
+
         self._processToDiagramMap[element.id] = diagram;
+
         newDiagrams.push(diagram);
       }
     });
@@ -8318,14 +8923,18 @@
         return;
       }
 
-      var diagram = self._processToDiagramMap[parent.id];
-      self.moveToDiPlane(diElement, diagram.plane);
+      var diagram = self._processToDiagramMap[ parent.id ];
+
+      self._moveToDiPlane(diElement, diagram.plane);
     });
 
     return newDiagrams;
   };
 
-  SubprocessCompatibility.prototype.movePlaneElementsToOrigin = function(plane) {
+  /**
+   * @param {CanvasPlane} plane
+   */
+  SubprocessCompatibility.prototype._movePlaneElementsToOrigin = function(plane) {
     var elements = plane.get('planeElement');
 
     // get bounding box of all elements
@@ -8349,33 +8958,50 @@
     });
   };
 
-
-  SubprocessCompatibility.prototype.moveToDiPlane = function(diElement, newPlane) {
+  /**
+   * @param {ModdleElement} diElement
+   * @param {CanvasPlane} newPlane
+   */
+  SubprocessCompatibility.prototype._moveToDiPlane = function(diElement, newPlane) {
     var containingDiagram = findRootDiagram(diElement);
 
     // remove DI from old Plane and add it to the new one
     var parentPlaneElement = containingDiagram.plane.get('planeElement');
+
     parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);
+
     newPlane.get('planeElement').push(diElement);
   };
 
+  /**
+   * @param {ModdleElement} businessObject
+   *
+   * @return {ModdleElement}
+   */
+  SubprocessCompatibility.prototype._createDiagram = function(businessObject) {
+    var plane = this._moddle.create('bpmndi:BPMNPlane', {
+      bpmnElement: businessObject
+    });
 
-  SubprocessCompatibility.prototype.createDiagram = function(bo) {
-    var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
     var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
       plane: plane
     });
+
     plane.$parent = diagram;
-    plane.bpmnElement = bo;
+
+    plane.bpmnElement = businessObject;
+
     diagram.$parent = this._definitions;
+
     this._definitions.diagrams.push(diagram);
+
     return diagram;
   };
 
   SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
 
 
-  // helpers //////////////////////////
+  // helpers //////////
 
   function findRootDiagram(element) {
     if (is$1(element, 'bpmndi:BPMNDiagram')) {
@@ -8385,6 +9011,11 @@
     }
   }
 
+  /**
+   * @param {CanvasPlane} plane
+   *
+   * @return {Rect}
+   */
   function getPlaneBounds(plane) {
     var planeTrbl = {
       top: Infinity,
@@ -8407,8 +9038,14 @@
     return asBounds(planeTrbl);
   }
 
-  function shouldMoveToPlane(bo, plane) {
-    var parent = bo.$parent;
+  /**
+   * @param {ModdleElement} businessObject
+   * @param {CanvasPlane} plane
+   *
+   * @return {boolean}
+   */
+  function shouldMoveToPlane(businessObject, plane) {
+    var parent = businessObject.$parent;
 
     // don't move elements that are already on the plane
     if (!is$1(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {
@@ -8417,18 +9054,35 @@
 
     // dataAssociations are children of the subprocess but rendered on process level
     // cf. https://github.com/bpmn-io/bpmn-js/issues/1619
-    if (isAny(bo, [ 'bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation' ])) {
+    if (isAny(businessObject, [ 'bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation' ])) {
       return false;
     }
 
     return true;
   }
 
+  /**
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/features/overlays/Overlays').default} Overlays
+   *
+   * @typedef {import('../../model/Types').Element} Element
+   * @typedef {import('../../model/Types').Parent} Parent
+   * @typedef {import('../../model/Types').Shape} Shape
+   */
+
   var LOW_PRIORITY = 250;
   var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
   var EMPTY_MARKER = 'bjs-drilldown-empty';
 
+  /**
+   * @param {Canvas} canvas
+   * @param {EventBus} eventBus
+   * @param {ElementRegistry} elementRegistry
+   * @param {Overlays} overlays
+   */
   function DrilldownOverlayBehavior(
       canvas, eventBus, elementRegistry, overlays
   ) {
@@ -8445,10 +9099,10 @@
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
-      if (self.canDrillDown(shape)) {
-        self.addOverlay(shape);
+      if (self._canDrillDown(shape)) {
+        self._addOverlay(shape);
       } else {
-        self.removeOverlay(shape);
+        self._removeOverlay(shape);
       }
     }, true);
 
@@ -8457,10 +9111,10 @@
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
-      if (self.canDrillDown(shape)) {
-        self.addOverlay(shape);
+      if (self._canDrillDown(shape)) {
+        self._addOverlay(shape);
       } else {
-        self.removeOverlay(shape);
+        self._removeOverlay(shape);
       }
     }, true);
 
@@ -8472,13 +9126,13 @@
             shape = context.shape;
 
         // Add overlay to the collapsed shape
-        if (self.canDrillDown(shape)) {
-          self.addOverlay(shape);
+        if (self._canDrillDown(shape)) {
+          self._addOverlay(shape);
         }
 
-        self.updateDrilldownOverlay(oldParent);
-        self.updateDrilldownOverlay(newParent);
-        self.updateDrilldownOverlay(shape);
+        self._updateDrilldownOverlay(oldParent);
+        self._updateDrilldownOverlay(newParent);
+        self._updateDrilldownOverlay(shape);
       }, true);
 
 
@@ -8489,21 +9143,21 @@
             shape = context.shape;
 
         // Add overlay to the collapsed shape
-        if (self.canDrillDown(shape)) {
-          self.addOverlay(shape);
+        if (self._canDrillDown(shape)) {
+          self._addOverlay(shape);
         }
 
-        self.updateDrilldownOverlay(oldParent);
-        self.updateDrilldownOverlay(newParent);
-        self.updateDrilldownOverlay(shape);
+        self._updateDrilldownOverlay(oldParent);
+        self._updateDrilldownOverlay(newParent);
+        self._updateDrilldownOverlay(shape);
       }, true);
 
 
     eventBus.on('import.render.complete', function() {
       elementRegistry.filter(function(e) {
-        return self.canDrillDown(e);
+        return self._canDrillDown(e);
       }).map(function(el) {
-        self.addOverlay(el);
+        self._addOverlay(el);
       });
     });
 
@@ -8511,7 +9165,10 @@
 
   e(DrilldownOverlayBehavior, CommandInterceptor);
 
-  DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
+  /**
+   * @param {Shape} shape
+   */
+  DrilldownOverlayBehavior.prototype._updateDrilldownOverlay = function(shape) {
     var canvas = this._canvas;
 
     if (!shape) {
@@ -8519,51 +9176,61 @@
     }
 
     var root = canvas.findRoot(shape);
+
     if (root) {
-      this.updateOverlayVisibility(root);
+      this._updateOverlayVisibility(root);
     }
   };
 
-
-  DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  DrilldownOverlayBehavior.prototype._canDrillDown = function(element) {
     var canvas = this._canvas;
+
     return is$1(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
   };
 
   /**
-   * Updates visibility of the drilldown overlay. If the plane has no elements,
-   * the drilldown will be only shown when the element is selected.
+   * Update the visibility of the drilldown overlay. If the plane has no elements,
+   * the drilldown will only be shown when the element is selected.
    *
-   * @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
+   * @param {Parent} element The collapsed root or shape.
    */
-  DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
+  DrilldownOverlayBehavior.prototype._updateOverlayVisibility = function(element) {
     var overlays = this._overlays;
 
-    var bo = element.businessObject;
+    var businessObject = getBusinessObject(element);
 
-    var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];
+    var overlay = overlays.get({ element: businessObject.id, type: 'drilldown' })[0];
 
     if (!overlay) {
       return;
     }
 
-    var hasContent = bo && bo.flowElements && bo.flowElements.length;
-    classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+    var hasFlowElements = businessObject
+      && businessObject.get('flowElements')
+      && businessObject.get('flowElements').length;
+
+    classes(overlay.html).toggle(EMPTY_MARKER, !hasFlowElements);
   };
 
   /**
-   * Attaches a drilldown button to the given element. We assume that the plane has
-   * the same id as the element.
+   * Add a drilldown button to the given element assuming the plane has the same
+   * ID as the element.
    *
-   * @param {djs.model.Shape} element collapsed shape
+   * @param {Shape} element The collapsed shape.
    */
-  DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
-    var canvas = this._canvas;
-    var overlays = this._overlays;
+  DrilldownOverlayBehavior.prototype._addOverlay = function(element) {
+    var canvas = this._canvas,
+        overlays = this._overlays;
 
     var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
+
     if (existingOverlays.length) {
-      this.removeOverlay(element);
+      this._removeOverlay(element);
     }
 
     var button = domify$1('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
@@ -8580,10 +9247,10 @@
       html: button
     });
 
-    this.updateOverlayVisibility(element);
+    this._updateOverlayVisibility(element);
   };
 
-  DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
+  DrilldownOverlayBehavior.prototype._removeOverlay = function(element) {
     var overlays = this._overlays;
 
     overlays.remove({
@@ -9089,7 +9756,6 @@
    */
   function DefaultRenderer(eventBus, styles) {
 
-    //
     BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);
 
     this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });
@@ -9100,10 +9766,16 @@
   e(DefaultRenderer, BaseRenderer);
 
 
+  /**
+   * @private
+   */
   DefaultRenderer.prototype.canRender = function() {
     return true;
   };
 
+  /**
+   * @private
+   */
   DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
     var rect = create$1('rect');
 
@@ -9125,6 +9797,9 @@
     return rect;
   };
 
+  /**
+   * @private
+   */
   DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
     var line = createLine(connection.waypoints, assign$1({}, this.CONNECTION_STYLE, attrs || {}));
@@ -9133,6 +9808,9 @@
     return line;
   };
 
+  /**
+   * @private
+   */
   DefaultRenderer.prototype.getShapePath = function getShapePath(shape) {
 
     var x = shape.x,
@@ -9151,6 +9829,9 @@
     return componentsToPath(shapePath);
   };
 
+  /**
+   * @private
+   */
   DefaultRenderer.prototype.getConnectionPath = function getConnectionPath(connection) {
     var waypoints = connection.waypoints;
 
@@ -9168,7 +9849,6 @@
     return componentsToPath(connectionPath);
   };
 
-
   DefaultRenderer.$inject = [ 'eventBus', 'styles' ];
 
   /**
@@ -9195,7 +9875,7 @@
      * Builds a style definition from a className, a list of traits and an object of additional attributes.
      *
      * @param {string} className
-     * @param {Array<string>} traits
+     * @param {string[]} traits
      * @param {Object} additionalAttrs
      *
      * @return {Object} the style defintion
@@ -9209,7 +9889,7 @@
     /**
      * Builds a style definition from a list of traits and an object of additional attributes.
      *
-     * @param {Array<string>} traits
+     * @param {string[]} traits
      * @param {Object} additionalAttrs
      *
      * @return {Object} the style defintion
@@ -9238,6 +9918,9 @@
     };
   }
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var DrawModule = {
     __init__: [ 'defaultRenderer' ],
     defaultRenderer: [ 'type', DefaultRenderer ],
@@ -9319,15 +10002,34 @@
   }
 
   /**
-   * @typedef {import('.').ConnectionLike} ConnectionLike
-   * @typedef {import('.').RootLike} RootLike
-   * @typedef {import('.').ShapeLike} ShapeLike
-   *
-   * @typedef {import('./Canvas').CanvasConfig} CanvasConfig
-   * @typedef {import('./Canvas').CanvasLayer} CanvasLayer
-   * @typedef {import('./Canvas').CanvasLayers} CanvasLayers
-   * @typedef {import('./Canvas').CanvasPlane} CanvasPlane
-   * @typedef {import('./Canvas').CanvasViewbox} CanvasViewbox
+   * @typedef {import('./Types').ConnectionLike} ConnectionLike
+   * @typedef {import('./Types').RootLike} RootLike
+   * @typedef {import('./Types').ParentLike } ParentLike
+   * @typedef {import('./Types').ShapeLike} ShapeLike
+   *
+   * @typedef { {
+   *   container?: HTMLElement;
+   *   deferUpdate?: boolean;
+   *   width?: number;
+   *   height?: number;
+   * } } CanvasConfig
+   * @typedef { {
+   *   group: SVGElement;
+   *   index: number;
+   *   visible: boolean;
+   * } } CanvasLayer
+   * @typedef { {
+   *   [key: string]: CanvasLayer;
+   * } } CanvasLayers
+   * @typedef { {
+   *   rootElement: ShapeLike;
+   *   layer: CanvasLayer;
+   * } } CanvasPlane
+   * @typedef { {
+   *   scale: number;
+   *   inner: Rect;
+   *   outer: Dimensions;
+   * } & Rect } CanvasViewbox
    *
    * @typedef {import('./ElementRegistry').default} ElementRegistry
    * @typedef {import('./EventBus').default} EventBus
@@ -9668,7 +10370,7 @@
   /**
    * Shows a given layer.
    *
-   * @param {string} layer The name of the layer.
+   * @param {string} name The name of the layer.
    *
    * @return {SVGElement} The SVG element of the layer.
    */
@@ -9704,7 +10406,7 @@
   /**
    * Hides a given layer.
    *
-   * @param {string} layer The name of the layer.
+   * @param {string} name The name of the layer.
    *
    * @return {SVGElement} The SVG element of the layer.
    */
@@ -9846,7 +10548,7 @@
      *
      * @event element.marker.update
      * @type {Object}
-     * @property {Base} element the shape
+     * @property {Element} element the shape
      * @property {SVGElement} gfx the graphical representation of the shape
      * @property {string} marker
      * @property {boolean} add true if the marker was added, false if it got removed
@@ -9952,7 +10654,7 @@
   /**
    * Adds a given root element and returns it.
    *
-   * @param {ShapeLike} [rootElement] The root element to be added.
+   * @param {RootLike} [rootElement] The root element to be added.
    *
    * @return {RootLike} The added root element or an implicit root element.
    */
@@ -9988,9 +10690,9 @@
   /**
    * Removes a given root element and returns it.
    *
-   * @param {ShapeLike|string} rootElement The root element or its ID.
+   * @param {RootLike|string} rootElement element or element ID
    *
-   * @return {ShapeLike|undefined} The removed root element.
+   * @return {RootLike|undefined} removed element
    */
   Canvas.prototype.removeRootElement = function(rootElement) {
 
@@ -10032,11 +10734,7 @@
    *
    * @return {RootLike} The set root element.
    */
-  Canvas.prototype.setRootElement = function(rootElement, override) {
-
-    if (isDefined(override)) {
-      throw new Error('override not supported');
-    }
+  Canvas.prototype.setRootElement = function(rootElement) {
 
     if (rootElement === this._rootElement) {
       return;
@@ -10193,7 +10891,7 @@
    * Adds a shape to the canvas.
    *
    * @param {ShapeLike} shape The shape to be added
-   * @param {ShapeLike} [parent] The shape's parent.
+   * @param {ParentLike} [parent] The shape's parent.
    * @param {number} [parentIndex] The index at which to add the shape to the parent's children.
    *
    * @return {ShapeLike} The added shape.
@@ -10206,7 +10904,7 @@
    * Adds a connection to the canvas.
    *
    * @param {ConnectionLike} connection The connection to be added.
-   * @param {ShapeLike} [parent] The connection's parent.
+   * @param {ParentLike} [parent] The connection's parent.
    * @param {number} [parentIndex] The index at which to add the connection to the parent's children.
    *
    * @return {ConnectionLike} The added connection.
@@ -10573,7 +11271,7 @@
    * The getter may return a cached zoom level. Call it with `false` as the first
    * argument to force recomputation of the current level.
    *
-   * @param {number|string} [newScale] The new zoom level, either a number,
+   * @param {number|'fit-viewport'} [newScale] The new zoom level, either a number,
    * i.e. 0.9, or `fit-viewport` to adjust the size to fit the current viewport.
    * @param {Point} [center] The reference point { x: ..., y: ...} to zoom to.
    *
@@ -10768,11 +11466,12 @@
   var ELEMENT_ID = 'data-element-id';
 
   /**
-   * @typedef {import('.').ElementLike} ElementLike
+   * @typedef {import('./Types').ElementLike} ElementLike
    *
    * @typedef {import('./EventBus').default} EventBus
    *
-   * @typedef {import('./ElementRegistry').ElementRegistryCallback} ElementRegistryCallback
+   * @typedef { (element: ElementLike, gfx: SVGElement) => boolean|any } ElementRegistryFilterCallback
+   * @typedef { (element: ElementLike, gfx: SVGElement) => any } ElementRegistryForEachCallback
    */
 
   /**
@@ -10784,6 +11483,16 @@
    * @param {EventBus} eventBus
    */
   function ElementRegistry(eventBus) {
+
+    /**
+     * @type { {
+     *   [id: string]: {
+     *     element: ElementLike;
+     *     gfx?: SVGElement;
+     *     secondaryGfx?: SVGElement;
+     *   }
+     * } }
+     */
     this._elements = {};
 
     this._eventBus = eventBus;
@@ -10869,7 +11578,7 @@
   /**
    * Update the graphical representation of an element.
    *
-   * @param {ElementLike|string} element The element or its ID.
+   * @param {ElementLike|string} filter The element or its ID.
    * @param {SVGElement} gfx The new graphical representation.
    * @param {boolean} [secondary=false] Whether to update the secondary graphical representation.
    */
@@ -10920,7 +11629,7 @@
   /**
    * Return all elements that match a given filter function.
    *
-   * @param {ElementRegistryCallback} fn The filter function.
+   * @param {ElementRegistryFilterCallback} fn The filter function.
    *
    * @return {ElementLike[]} The matching elements.
    */
@@ -10940,7 +11649,7 @@
   /**
    * Return the first element that matches the given filter function.
    *
-   * @param {Function} fn The filter function.
+   * @param {ElementRegistryFilterCallback} fn The filter function.
    *
    * @return {ElementLike|undefined} The matching element.
    */
@@ -10972,7 +11681,7 @@
   /**
    * Execute a given function for each element.
    *
-   * @param {Function} fn The function to execute.
+   * @param {ElementRegistryForEachCallback} fn The function to execute.
    */
   ElementRegistry.prototype.forEach = function(fn) {
 
@@ -11359,19 +12068,26 @@
       outgoingRefs = new Refs({ name: 'outgoing', collection: true }, { name: 'source' }),
       incomingRefs = new Refs({ name: 'incoming', collection: true }, { name: 'target' });
 
+  /**
+   * @typedef {import('./Types').Element} Element
+   * @typedef {import('./Types').Shape} Shape
+   * @typedef {import('./Types').Root} Root
+   * @typedef {import('./Types').Label} Label
+   * @typedef {import('./Types').Connection} Connection
+   */
+
   /**
    * The basic graphical representation
    *
    * @class
-   *
-   * @abstract
+   * @constructor
    */
-  function Base$1() {
+  function ElementImpl() {
 
     /**
      * The object that backs up the shape
      *
-     * @name Base#businessObject
+     * @name Element#businessObject
      * @type Object
      */
     Object.defineProperty(this, 'businessObject', {
@@ -11382,7 +12098,7 @@
     /**
      * Single label support, will mapped to multi label array
      *
-     * @name Base#label
+     * @name Element#label
      * @type Object
      */
     Object.defineProperty(this, 'label', {
@@ -11405,7 +12121,7 @@
     /**
      * The parent shape
      *
-     * @name Base#parent
+     * @name Element#parent
      * @type Shape
      */
     parentRefs.bind(this, 'parent');
@@ -11413,7 +12129,7 @@
     /**
      * The list of labels
      *
-     * @name Base#labels
+     * @name Element#labels
      * @type Label
      */
     labelRefs.bind(this, 'labels');
@@ -11421,7 +12137,7 @@
     /**
      * The list of outgoing connections
      *
-     * @name Base#outgoing
+     * @name Element#outgoing
      * @type Array<Connection>
      */
     outgoingRefs.bind(this, 'outgoing');
@@ -11429,7 +12145,7 @@
     /**
      * The list of incoming connections
      *
-     * @name Base#incoming
+     * @name Element#incoming
      * @type Array<Connection>
      */
     incomingRefs.bind(this, 'incoming');
@@ -11442,40 +12158,40 @@
    * @class
    * @constructor
    *
-   * @extends Base
+   * @extends ElementImpl
    */
-  function Shape() {
-    Base$1.call(this);
+  function ShapeImpl() {
+    ElementImpl.call(this);
 
     /**
      * Indicates frame shapes
      *
-     * @name Shape#isFrame
+     * @name ShapeImpl#isFrame
      * @type boolean
      */
 
     /**
      * The list of children
      *
-     * @name Shape#children
-     * @type Array<Base>
+     * @name ShapeImpl#children
+     * @type Element[]
      */
     parentRefs.bind(this, 'children');
 
     /**
-     * @name Shape#host
+     * @name ShapeImpl#host
      * @type Shape
      */
     attacherRefs.bind(this, 'host');
 
     /**
-     * @name Shape#attachers
+     * @name ShapeImpl#attachers
      * @type Shape
      */
     attacherRefs.bind(this, 'attachers');
   }
 
-  e(Shape, Base$1);
+  e(ShapeImpl, ElementImpl);
 
 
   /**
@@ -11484,13 +12200,21 @@
    * @class
    * @constructor
    *
-   * @extends Shape
+   * @extends ElementImpl
    */
-  function Root() {
-    Shape.call(this);
+  function RootImpl() {
+    ElementImpl.call(this);
+
+    /**
+     * The list of children
+     *
+     * @name RootImpl#children
+     * @type Element[]
+     */
+    parentRefs.bind(this, 'children');
   }
 
-  e(Root, Shape);
+  e(RootImpl, ShapeImpl);
 
 
   /**
@@ -11499,21 +12223,21 @@
    * @class
    * @constructor
    *
-   * @extends Shape
+   * @extends ShapeImpl
    */
-  function Label() {
-    Shape.call(this);
+  function LabelImpl() {
+    ShapeImpl.call(this);
 
     /**
      * The labeled element
      *
-     * @name Label#labelTarget
-     * @type Base
+     * @name LabelImpl#labelTarget
+     * @type Element
      */
     labelRefs.bind(this, 'labelTarget');
   }
 
-  e(Label, Shape);
+  e(LabelImpl, ShapeImpl);
 
 
   /**
@@ -11522,45 +12246,69 @@
    * @class
    * @constructor
    *
-   * @extends Base
+   * @extends ElementImpl
    */
-  function Connection() {
-    Base$1.call(this);
+  function ConnectionImpl() {
+    ElementImpl.call(this);
 
     /**
      * The element this connection originates from
      *
-     * @name Connection#source
-     * @type Base
+     * @name ConnectionImpl#source
+     * @type Element
      */
     outgoingRefs.bind(this, 'source');
 
     /**
      * The element this connection points to
      *
-     * @name Connection#target
-     * @type Base
+     * @name ConnectionImpl#target
+     * @type Element
      */
     incomingRefs.bind(this, 'target');
   }
 
-  e(Connection, Base$1);
+  e(ConnectionImpl, ElementImpl);
 
 
   var types$6 = {
-    connection: Connection,
-    shape: Shape,
-    label: Label,
-    root: Root
+    connection: ConnectionImpl,
+    shape: ShapeImpl,
+    label: LabelImpl,
+    root: RootImpl
   };
 
   /**
-   * Creates a model element of the given type.
+   * Creates a root element.
+   *
+   * @overlord
+   *
+   * @example
+   *
+   * ```
+   * import * as Model from 'diagram-js/lib/model';
+   *
+   * const root = Model.create('root', {
+   *   x: 100,
+   *   y: 100,
+   *   width: 100,
+   *   height: 100
+   * });
+   * ```
+   *
+   * @param {'root'} type
+   * @param {any} [attrs]
+   *
+   * @return {Root}
+   */
+  /**
+   * Creates a connection.
    *
-   * @method create
+   * @overlord
    *
    * @example
    *
+   * ```
    * import * as Model from 'diagram-js/lib/model';
    *
    * const connection = Model.create('connection', {
@@ -11569,33 +12317,56 @@
    *     { x: 200, y: 100 }
    *   ]
    * });
+   * ```
    *
-   * const label = Model.create('label', {
-   *   x: 100,
-   *   y: 100,
-   *   width: 100,
-   *   height: 100,
-   *   labelTarget: shape
-   * });
+   * @param {'connection'} type
+   * @param {any} [attrs]
    *
-   * const root = Model.create('root', {
+   * @return {Connection}
+   */
+  /**
+   * Creates a shape.
+   *
+   * @overlord
+   *
+   * @example
+   *
+   * ```
+   * import * as Model from 'diagram-js/lib/model';
+   *
+   * const shape = Model.create('shape', {
    *   x: 100,
    *   y: 100,
    *   width: 100,
    *   height: 100
    * });
+   * ```
    *
-   * const shape = Model.create('shape', {
+   * @param {'shape'} type
+   * @param {any} [attrs]
+   *
+   * @return {Shape}
+   */
+  /**
+   * Creates a label.
+   *
+   * @example
+   *
+   * ```
+   * import * as Model from 'diagram-js/lib/model';
+   *
+   * const label = Model.create('label', {
    *   x: 100,
    *   y: 100,
    *   width: 100,
-   *   height: 100
+   *   height: 100,
+   *   labelTarget: shape
    * });
+   * ```
    *
-   * @param {string} type The type of model element to be created.
-   * @param {Object} attrs Attributes to create the model element with.
-   *
-   * @return {Connection|Label|Root|Shape} The created model element.
+   * @param {'label'} type
+   * @param {any} [attrs]
+   * @return {Label}
    */
   function create(type, attrs) {
     var Type = types$6[type];
@@ -11606,22 +12377,20 @@
   }
 
   /**
-   * @typedef {import('../model/index').Base} Base
-   * @typedef {import('../model/index').Connection} Connection
-   * @typedef {import('../model/index').Label} Label
-   * @typedef {import('../model/index').Root} Root
-   * @typedef {import('../model/index').Shape} Shape
-   * @typedef {import('../model/index').ModelAttrsConnection} ModelAttrsConnection
-   * @typedef {import('../model/index').ModelAttrsLabel} ModelAttrsLabel
-   * @typedef {import('../model/index').ModelAttrsRoot} ModelAttrsRoot
-   * @typedef {import('../model/index').ModelAttrsShape} ModelAttrsShape
+   * @typedef {import('../model/Types').Element} Element
+   * @typedef {import('../model/Types').Connection} Connection
+   * @typedef {import('../model/Types').Label} Label
+   * @typedef {import('../model/Types').Root} Root
+   * @typedef {import('../model/Types').Shape} Shape
    */
 
   /**
    * A factory for model elements.
    *
-   * @class
-   * @constructor
+   * @template {Connection} [T=Connection]
+   * @template {Label} [U=Label]
+   * @template {Root} [V=Root]
+   * @template {Shape} [W=Shape]
    */
   function ElementFactory() {
     this._uid = 12;
@@ -11630,9 +12399,9 @@
   /**
    * Create a root element.
    *
-   * @param {ModelAttrsRoot} attrs The attributes of the root element to be created.
+   * @param {Partial<Root>} [attrs]
    *
-   * @return {Root} The created root element.
+   * @return {V} The created root element.
    */
   ElementFactory.prototype.createRoot = function(attrs) {
     return this.create('root', attrs);
@@ -11641,9 +12410,9 @@
   /**
    * Create a label.
    *
-   * @param {ModelAttrsLabel} attrs The attributes of the label to be created.
+   * @param {Partial<Label>} [attrs]
    *
-   * @return {Label} The created label.
+   * @return {U} The created label.
    */
   ElementFactory.prototype.createLabel = function(attrs) {
     return this.create('label', attrs);
@@ -11652,9 +12421,9 @@
   /**
    * Create a shape.
    *
-   * @param {ModelAttrsShape} attrs The attributes of the shape to be created.
+   * @param {Partial<Shape>} [attrs]
    *
-   * @return {Shape} The created shape.
+   * @return {W} The created shape.
    */
   ElementFactory.prototype.createShape = function(attrs) {
     return this.create('shape', attrs);
@@ -11663,21 +12432,44 @@
   /**
    * Create a connection.
    *
-   * @param {ModelAttrsConnection} attrs The attributes of the connection to be created.
+   * @param {Partial<Connection>} [attrs]
    *
-   * @return {Connection} The created connection.
+   * @return {T} The created connection.
    */
   ElementFactory.prototype.createConnection = function(attrs) {
     return this.create('connection', attrs);
   };
 
   /**
-   * Create a model element of the given type with the given attributes.
+   * Create a root element.
+   *
+   * @overlord
+   * @param {'root'} type
+   * @param {Partial<Root>} [attrs]
+   * @return {V}
+   */
+  /**
+   * Create a shape.
+   *
+   * @overlord
+   * @param {'shape'} type
+   * @param {Partial<Shape>} [attrs]
+   * @return {W}
+   */
+  /**
+   * Create a connection.
    *
-   * @param {string} type The type of the model element.
-   * @param {Object} attrs The attributes of the model element.
+   * @overlord
+   * @param {'connection'} type
+   * @param {Partial<Connection>} [attrs]
+   * @return {T}
+   */
+  /**
+   * Create a label.
    *
-   * @return {Connection|Label|Root|Shape} The created model element.
+   * @param {'label'} type
+   * @param {Partial<Label>} [attrs]
+   * @return {U}
    */
   ElementFactory.prototype.create = function(type, attrs) {
 
@@ -11697,13 +12489,27 @@
   var slice = Array.prototype.slice;
 
   /**
-   * @typedef {import('./EventBus').Event} Event
-   * @typedef {import('./EventBus').EventCallback} EventCallback
+   * @typedef { {
+   *   stopPropagation(): void;
+   *   preventDefault(): void;
+   *   cancelBubble: boolean;
+   *   defaultPrevented: boolean;
+   *   returnValue: any;
+   * } } Event
+   */
+
+  /**
+   * @template E
    *
-   * @typedef {Object} EventListener
-   * @property {Function} callback
-   * @property {EventListener|null} next
-   * @property {number} priority
+   * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+   */
+
+  /**
+   * @typedef { {
+   *  priority: number;
+   *  next: EventBusListener | null;
+   *  callback: EventBusEventCallback<any>;
+   * } } EventBusListener
    */
 
   /**
@@ -11790,6 +12596,10 @@
    * ```
    */
   function EventBus() {
+
+    /**
+     * @type { Record<string, EventBusListener> }
+     */
     this._listeners = {};
 
     // cleanup on destroy on lowest priority to allow
@@ -11810,10 +12620,12 @@
    *
    * Returning anything but `undefined` from a listener will stop the listener propagation.
    *
-   * @param {string|string[]} events The event(s) to listen to.
-   * @param {number} [priority=1000] The priority with which to listen.
-   * @param {EventCallback} callback The callback.
-   * @param {*} [that] Value of `this` the callback will be called with.
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
   EventBus.prototype.on = function(events, priority, callback, that) {
 
@@ -11855,12 +12667,14 @@
   /**
    * Register an event listener that is called only once.
    *
-   * @param {string} event The event to listen to.
-   * @param {number} [priority=1000] The priority with which to listen.
-   * @param {EventCallback} callback The callback.
-   * @param {*} [that] Value of `this` the callback will be called with.
+   * @template T
+   *
+   * @param {string|string[]} events to subscribe to
+   * @param {number} [priority=1000] the listen priority
+   * @param {EventBusEventCallback<T>} callback
+   * @param {any} [that] callback context
    */
-  EventBus.prototype.once = function(event, priority, callback, that) {
+  EventBus.prototype.once = function(events, priority, callback, that) {
     var self = this;
 
     if (isFunction(priority)) {
@@ -11878,7 +12692,7 @@
 
       var result = callback.apply(that, arguments);
 
-      self.off(event, wrappedCallback);
+      self.off(events, wrappedCallback);
 
       return result;
     }
@@ -11888,7 +12702,7 @@
     // callback
     wrappedCallback[FN_REF] = callback;
 
-    this.on(event, priority, wrappedCallback);
+    this.on(events, priority, wrappedCallback);
   };
 
 
@@ -11897,8 +12711,8 @@
    *
    * If no callback is given, all listeners for a given event name are being removed.
    *
-   * @param {string|string[]} events The events.
-   * @param {EventCallback} [callback] The callback.
+   * @param {string|string[]} events
+   * @param {EventBusEventCallback} [callback]
    */
   EventBus.prototype.off = function(events, callback) {
 
@@ -11934,6 +12748,7 @@
    *
    * @example
    *
+   * ```javascript
    * // fire event by name
    * events.fire('foo');
    *
@@ -11951,12 +12766,13 @@
    * });
    *
    * events.fire({ type: 'foo' }, 'I am bar!');
+   * ```
    *
-   * @param {string} [type] The event type.
-   * @param {Object} [data] The event or event data.
-   * @param {...*} additional Additional arguments the callback will be called with.
+   * @param {string} [type] event type
+   * @param {Object} [data] event or event data
+   * @param {...any} [args] additional arguments the callback will be called with.
    *
-   * @return {*} The return value. Will be set to `false` if the default was prevented.
+   * @return {any} The return value. Will be set to `false` if the default was prevented.
    */
   EventBus.prototype.fire = function(type, data) {
     var event,
@@ -12037,6 +12853,13 @@
     this._listeners = {};
   };
 
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListeners = function(event, args, listener) {
 
     var returnValue;
@@ -12056,6 +12879,13 @@
     return returnValue;
   };
 
+  /**
+   * @param {Event} event
+   * @param {any[]} args
+   * @param {EventBusListener} listener
+   *
+   * @return {any}
+   */
   EventBus.prototype._invokeListener = function(event, args, listener) {
 
     var returnValue;
@@ -12104,7 +12934,7 @@
    *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
    *
    * @param {string} event
-   * @param {EventListener} listener
+   * @param {EventBusListener} listener
    */
   EventBus.prototype._addListener = function(event, newListener) {
 
@@ -12144,10 +12974,19 @@
   };
 
 
+  /**
+   * @param {string} name
+   *
+   * @return {EventBusListener}
+   */
   EventBus.prototype._getListeners = function(name) {
     return this._listeners[name];
   };
 
+  /**
+   * @param {string} name
+   * @param {EventBusListener} listener
+   */
   EventBus.prototype._setListeners = function(name, listener) {
     this._listeners[name] = listener;
   };
@@ -12210,9 +13049,9 @@
    * Invoke function. Be fast...
    *
    * @param {Function} fn
-   * @param {*[]} args
+   * @param {any[]} args
    *
-   * @return {*}
+   * @return {any}
    */
   function invokeFunction(fn, args) {
     return fn.apply(null, args);
@@ -12247,13 +13086,9 @@
   }
 
   /**
-   * @typedef {import('../model').ModelType} ModelType
-   * @typedef {import('../model').ModelTypeConnection} ModelTypeConnection
-   * @typedef {import('../model').ModelTypeShape} ModelTypeShape
-   *
-   * @typedef {import('.').ConnectionLike} ConnectionLike
-   * @typedef {import('.').ElementLike} ElementLike
-   * @typedef {import('.').ShapeLike} ShapeLike
+   * @typedef {import('./Types').ConnectionLike} ConnectionLike
+   * @typedef {import('./Types').ElementLike} ElementLike
+   * @typedef {import('./Types').ShapeLike} ShapeLike
    *
    * @typedef {import('./ElementRegistry').default} ElementRegistry
    * @typedef {import('./EventBus').default} EventBus
@@ -12272,7 +13107,10 @@
 
   GraphicsFactory.$inject = [ 'eventBus' , 'elementRegistry' ];
 
-
+  /**
+   * @param { { parent?: any } } element
+   * @return {SVGElement}
+   */
   GraphicsFactory.prototype._getChildrenContainer = function(element) {
 
     var gfx = this._elementRegistry.getGraphics(element);
@@ -12369,7 +13207,7 @@
   /**
    * Create a graphical element.
    *
-   * @param {ModelType} type The type of the element.
+   * @param { 'shape' | 'connection' | 'label' | 'root' } type The type of the element.
    * @param {ElementLike} element The element.
    * @param {number} [parentIndex] The index at which to add the graphical element to its parent's children.
    *
@@ -12425,6 +13263,8 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ShapeLike} element The shape.
+   *
+   * @return {SVGElement}
    */
   GraphicsFactory.prototype.drawShape = function(visual, element) {
     var eventBus = this._eventBus;
@@ -12450,6 +13290,8 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ConnectionLike} element The connection.
+   *
+   * @return {SVGElement}
    */
   GraphicsFactory.prototype.drawConnection = function(visual, element) {
     var eventBus = this._eventBus;
@@ -12460,7 +13302,7 @@
   /**
    * Get the path of a connection.
    *
-   * @param {ConnectionLike} element The connection.
+   * @param {ConnectionLike} connection The connection.
    *
    * @return {string} The path of the connection.
    */
@@ -12473,9 +13315,9 @@
   /**
    * Update an elements graphical representation.
    *
-   * @param {ModelTypeShape|ModelTypeConnection} type The type of the element.
-   * @param {ElementLike} element The element.
-   * @param {SVGElement} gfx The graphical representation.
+   * @param {'shape'|'connection'} type
+   * @param {ElementLike} element
+   * @param {SVGElement} gfx
    */
   GraphicsFactory.prototype.update = function(type, element, gfx) {
 
@@ -12533,6 +13375,9 @@
     parentNode.insertBefore(newNode, node);
   }
 
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
   var CoreModule = {
     __depends__: [ DrawModule ],
     __init__: [ 'canvas' ],
@@ -12548,7 +13393,9 @@
    * @typedef {import('didi').LocalsMap} LocalsMap
    * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
    *
-   * @typedef {import('./Diagram').DiagramOptions} DiagramOptions
+   * @typedef { {
+   *   modules?: ModuleDeclaration[];
+   * } & Record<string, any> } DiagramOptions
    */
 
   /**
@@ -12577,6 +13424,9 @@
 
     options = options || {};
 
+    /**
+     * @type { ModuleDeclaration }
+     */
     var configModule = {
       'config': [ 'value', options ]
     };
@@ -12596,11 +13446,10 @@
    * @class
    * @constructor
    *
-   * @example
-   *
-   * <caption>Creating a plug-in that logs whenever a shape is added to the canvas.</caption>
+   * @example Creating a plug-in that logs whenever a shape is added to the canvas.
    *
-   * // plug-in implemenentation
+   * ```javascript
+   * // plug-in implementation
    * function MyLoggingPlugin(eventBus) {
    *   eventBus.on('shape.added', function(event) {
    *     console.log('shape ', event.shape, ' was added to the diagram');
@@ -12612,10 +13461,11 @@
    *   __init__: [ 'myLoggingPlugin' ],
    *     myLoggingPlugin: [ 'type', MyLoggingPlugin ]
    * };
+   * ```
    *
+   * Use the plug-in in a Diagram instance:
    *
-   * // instantiate the diagram with the new plug-in
-   *
+   * ```javascript
    * import MyLoggingModule from 'path-to-my-logging-plugin';
    *
    * var diagram = new Diagram({
@@ -12630,36 +13480,39 @@
    * });
    *
    * // 'shape ... was added to the diagram' logged to console
+   * ```
    *
    * @param {DiagramOptions} [options]
-   * @param {ModuleDeclaration[]} [options.modules] External modules to instantiate with the diagram.
    * @param {Injector} [injector] An (optional) injector to bootstrap the diagram with.
    */
   function Diagram(options, injector) {
 
-    // create injector unless explicitly specified
-    this.injector = injector = injector || createInjector(options);
+    this._injector = injector = injector || createInjector(options);
 
     // API
 
     /**
      * Resolves a diagram service.
      *
-     * @method Diagram#get
+     * @template T
      *
      * @param {string} name The name of the service to get.
      * @param {boolean} [strict=true] If false, resolve missing services to null.
+     *
+     * @return {T|null}
      */
     this.get = injector.get;
 
     /**
      * Executes a function with its dependencies injected.
      *
-     * @method Diagram#invoke
+     * @template T
+     *
+     * @param {Function} func function to be invoked
+     * @param {InjectionContext} [context] context of the invocation
+     * @param {LocalsMap} [locals] locals provided
      *
-     * @param {Function} fn The function to be executed.
-     * @param {InjectionContext} [context] The context.
-     * @param {LocalsMap} [locals] The locals.
+     * @return {T|null}
      */
     this.invoke = injector.invoke;
 
@@ -12691,8 +13544,6 @@
 
   /**
    * Destroys the diagram
-   *
-   * @method  Diagram#destroy
    */
   Diagram.prototype.destroy = function() {
     this.get('eventBus').fire('diagram.destroy');
@@ -20230,6 +21081,10 @@
     return new BpmnModdle(pks, options);
   }
 
+  /**
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
   // TODO(nikku): remove with future bpmn-js version
 
   /**
@@ -20239,6 +21094,10 @@
    * 2) If Promise class is implemented in current environment.
    *
    * @private
+   *
+   * @param {Function} api
+   *
+   * @return {Function}
    */
   function wrapForCompatibility(api) {
 
@@ -20287,6 +21146,11 @@
 
   var DI_ERROR_MESSAGE = 'Tried to access di from the businessObject. The di is available through the diagram element only. For more information, see https://github.com/bpmn-io/bpmn-js/issues/1472';
 
+  /**
+   * @private
+   *
+   * @param {ModdleElement} businessObject
+   */
   function ensureCompatDiRef(businessObject) {
 
     // bpmnElement can have multiple independent DIs
@@ -20301,10 +21165,16 @@
   }
 
   /**
-   * Returns true if an element has the given meta-model type
+   * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
+   *
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
+   */
+
+  /**
+   * Returns true if an element is of the given meta-model type.
    *
-   * @param  {ModdleElement}  element
-   * @param  {string}         type
+   * @param {ModdleElement} element
+   * @param {string} type
    *
    * @return {boolean}
    */
@@ -20316,6 +21186,10 @@
   /**
    * Find a suitable display candidate for definitions where the DI does not
    * correctly specify one.
+   *
+   * @param {ModdleElement}
+   *
+   * @return {ModdleElement}
    */
   function findDisplayCandidate(definitions) {
     return find(definitions.rootElements, function(e) {
@@ -20323,7 +21197,10 @@
     });
   }
 
-
+  /**
+   * @param {Function} handler
+   * @param {Translate} translate
+   */
   function BpmnTreeWalker(handler, translate) {
 
     // list of containers already walked
@@ -20392,7 +21269,7 @@
 
     // DI handling //////////////////////
 
-    function registerDi(di) {
+    var registerDi = this.registerDi = function registerDi(di) {
       var bpmnElement = di.bpmnElement;
 
       if (bpmnElement) {
@@ -20416,7 +21293,7 @@
           { element: di }
         );
       }
-    }
+    };
 
     function handleDiagram(diagram) {
       handlePlane(diagram.plane);
@@ -20436,14 +21313,14 @@
     // Semantic handling //////////////////////
 
     /**
-     * Handle definitions and return the rendered diagram (if any)
+     * Handle definitions and return the rendered diagram (if any).
      *
      * @param {ModdleElement} definitions to walk and import
      * @param {ModdleElement} [diagram] specific diagram to import and display
      *
      * @throws {Error} if no diagram to display could be found
      */
-    function handleDefinitions(definitions, diagram) {
+    this.handleDefinitions = function handleDefinitions(definitions, diagram) {
 
       // make sure we walk the correct bpmnElement
 
@@ -20520,10 +21397,10 @@
       }
 
       // handle all deferred elements
-      handleDeferred();
-    }
+      handleDeferred(deferred);
+    };
 
-    function handleDeferred() {
+    var handleDeferred = this.handleDeferred = function handleDeferred() {
 
       var fn;
 
@@ -20533,7 +21410,7 @@
 
         fn();
       }
-    }
+    };
 
     function handleProcess(process, context) {
       handleFlowElementsContainer(process, context);
@@ -20609,10 +21486,10 @@
       forEach$1(ioSpecification.dataOutputs, contextual(handleDataOutput, context));
     }
 
-    function handleSubProcess(subProcess, context) {
+    var handleSubProcess = this.handleSubProcess = function handleSubProcess(subProcess, context) {
       handleFlowElementsContainer(subProcess, context);
       handleArtifacts(subProcess.artifacts, context);
-    }
+    };
 
     function handleFlowNode(flowNode, context) {
       var childCtx = visitIfDi(flowNode, context);
@@ -20737,44 +21614,29 @@
         }
       });
     }
-
-    // API //////////////////////
-
-    return {
-      handleDeferred: handleDeferred,
-      handleDefinitions: handleDefinitions,
-      handleSubProcess: handleSubProcess,
-      registerDi: registerDi
-    };
   }
 
   /**
-   * The importBpmnDiagram result.
+   * @typedef {import('../model/Types').ModdleElement} ModdleElement
    *
-   * @typedef {Object} ImportBPMNDiagramResult
+   * @typedef { {
+   *   warnings: string[];
+   * } } ImportBPMNDiagramResult
    *
-   * @property {Array<string>} warnings
+   * @typedef {ImportBPMNDiagramResult & Error} ImportBPMNDiagramError
    */
 
-  /**
-  * The importBpmnDiagram error.
-  *
-  * @typedef {Error} ImportBPMNDiagramError
-  *
-  * @property {Array<string>} warnings
-  */
-
   /**
    * Import the definitions into a diagram.
    *
    * Errors and warnings are reported through the specified callback.
    *
-   * @param  {djs.Diagram} diagram
-   * @param  {ModdleElement<Definitions>} definitions
-   * @param  {ModdleElement<BPMNDiagram>} [bpmnDiagram] the diagram to be rendered
-   * (if not provided, the first one will be rendered)
+   * @param {ModdleElement} diagram
+   * @param {ModdleElement} definitions
+   * @param {ModdleElement} [bpmnDiagram] The diagram to be rendered (if not
+   * provided, the first one will be rendered).
    *
-   * Returns {Promise<ImportBPMNDiagramResult, ImportBPMNDiagramError>}
+   * @return {Promise<ImportBPMNDiagramResult>}
    */
   function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
 
@@ -20790,8 +21652,8 @@
      * Walk the diagram semantically, importing (=drawing)
      * all elements you encounter.
      *
-     * @param {ModdleElement<Definitions>} definitions
-     * @param {ModdleElement<BPMNDiagram>} bpmnDiagram
+     * @param {ModdleElement} definitions
+     * @param {ModdleElement} bpmnDiagram
      */
     function render(definitions, bpmnDiagram) {
 
@@ -20866,10 +21728,10 @@
    * Returns all diagrams in the same hierarchy as the requested diagram.
    * Includes all parent and sub process diagrams.
    *
-   * @param {Array} definitions
-   * @param {Object} bpmnDiagram
+   * @param {ModdleElement} definitions
+   * @param {ModdleElement} bpmnDiagram
    *
-   * @returns {Array<Object>}
+   * @return {ModdleElement[]}
    */
   function getDiagramsToImport(definitions, bpmnDiagram) {
     if (!bpmnDiagram) {
@@ -21063,22 +21925,89 @@
    * @see http://bpmn.io/license for more information.
    */
 
+  /**
+   * @template T
+   *
+   * @typedef {import('diagram-js/lib/core/EventBus').EventBusEventCallback<T>} EventBusEventCallback
+   */
 
   /**
    * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration
    *
-   * @typedef {import('./BaseViewer').BaseModelerOptions} BaseModelerOptions
-   * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
-   * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult
-   * @typedef {import('./BaseViewer').ImportXMLError} ImportXMLError
-   * @typedef {import('./BaseViewer').ImportDefinitionsResult} ImportDefinitionsResult
-   * @typedef {import('./BaseViewer').ImportDefinitionsError} ImportDefinitionsError
-   * @typedef {import('./BaseViewer').ModdleElement} ModdleElement
-   * @typedef {import('./BaseViewer').ModdleElementsById} ModdleElementsById
-   * @typedef {import('./BaseViewer').OpenResult} OpenResult
-   * @typedef {import('./BaseViewer').OpenError} OpenError
-   * @typedef {import('./BaseViewer').SaveXMLOptions} SaveXMLOptions
-   * @typedef {import('./BaseViewer').SaveXMLResult} SaveXMLResult
+   * @typedef {import('./model/Types').Moddle} Moddle
+   * @typedef {import('./model/Types').ModdleElement} ModdleElement
+   * @typedef {import('./model/Types').ModdleExtension} ModdleExtension
+   *
+   * @typedef { {
+   *   width?: number|string;
+   *   height?: number|string;
+   *   position?: string;
+   *   container?: string|HTMLElement;
+   *   moddleExtensions?: ModdleExtensions;
+   *   additionalModules?: ModuleDeclaration[];
+   * } & Record<string, any> } BaseViewerOptions
+   *
+   * @typedef {Record<string, ModdleElement>} ModdleElementsById
+   *
+   * @typedef { {
+   *   [key: string]: ModdleExtension;
+   * } } ModdleExtensions
+   *
+   * @typedef { {
+   *   warnings: string[];
+   * } } ImportXMLResult
+   *
+   * @typedef {ImportXMLResult & Error} ImportXMLError
+   *
+   * @typedef {ImportXMLResult} ImportDefinitionsResult
+   *
+   * @typedef {ImportXMLError} ImportDefinitionsError
+   *
+   * @typedef {ImportXMLResult} OpenResult
+   *
+   * @typedef {ImportXMLError} OpenError
+   *
+   * @typedef { {
+   *   format?: boolean;
+   *   preamble?: boolean;
+   * } } SaveXMLOptions
+   *
+   * @typedef { {
+   *   xml?: string;
+   *   error?: Error;
+   * } } SaveXMLResult
+   *
+   * @typedef { {
+   *   svg: string;
+   * } } SaveSVGResult
+   *
+   * @typedef { {
+   *   xml: string;
+   * } } ImportParseStartEvent
+   *
+   * @typedef { {
+   *   error?: ImportXMLError;
+   *   definitions?: ModdleElement;
+   *   elementsById?: ModdleElementsById;
+   *   references?: ModdleElement[];
+   *   warnings: string[];
+   * } } ImportParseCompleteEvent
+   *
+   * @typedef { {
+   *   error?: ImportXMLError;
+   *   warnings: string[];
+   * } } ImportDoneEvent
+   *
+   * @typedef { {
+   *   definitions: ModdleElement;
+   * } } SaveXMLStartEvent
+   *
+   * @typedef {SaveXMLResult} SaveXMLDoneEvent
+   *
+   * @typedef { {
+   *   error?: Error;
+   *   svg: string;
+   * } } SaveSVGDoneEvent
    */
 
   /**
@@ -21087,15 +22016,18 @@
    * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
    * bundles that include actual features.
    *
-   * @param {BaseModelerOptions} [options] The options to configure the viewer.
+   * @param {BaseViewerOptions} [options] The options to configure the viewer.
    */
   function BaseViewer(options) {
 
     /**
-     * @type {BaseModelerOptions}
+     * @type {BaseViewerOptions}
      */
     options = assign$1({}, DEFAULT_OPTIONS, options);
 
+    /**
+     * @type {Moddle}
+     */
     this._moddle = this._createModdle(options);
 
     /**
@@ -21134,18 +22066,18 @@
    *
    * @throws {ImportXMLError} An error thrown during the import of the XML.
    *
-   * @fires BaseViewer#ImportParseStart
-   * @fires BaseViewer#ImportParseComplete
-   * @fires Importer#ImportRenderStart
-   * @fires Importer#ImportRenderComplete
-   * @fires BaseViewer#ImportDone
+   * @fires BaseViewer#ImportParseStartEvent
+   * @fires BaseViewer#ImportParseCompleteEvent
+   * @fires Importer#ImportRenderStartEvent
+   * @fires Importer#ImportRenderCompleteEvent
+   * @fires BaseViewer#ImportDoneEvent
    *
    * @param {string} xml The BPMN 2.0 XML to be imported.
    * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or Id of the BPMN diagram to open.
    *
    * @return {Promise<ImportXMLResult>} A promise resolving with warnings that were produced during the import.
    */
-  BaseViewer.prototype.importXML = wrapForCompatibility(async function importXML(xml, bpmnDiagram) {
+  BaseViewer.prototype.importXML = async function importXML(xml, bpmnDiagram) {
 
     const self = this;
 
@@ -21183,9 +22115,8 @@
       /**
        * A `import.parse.start` event.
        *
-       * @event BaseViewer#ImportParseStart
-       * @type {Object}
-       * @property {string} xml The XML that is to be parsed.
+       * @event BaseViewer#ImportParseStartEvent
+       * @type {ImportParseStartEvent}
        */
       xml = this._emit('import.parse.start', { xml: xml }) || xml;
 
@@ -21213,13 +22144,8 @@
       /**
        * A `import.parse.complete` event.
        *
-       * @event BaseViewer#ImportParseComplete
-       * @type {Object}
-       * @property {Error|null} error An error thrown when parsing the XML.
-       * @property {ModdleElement} definitions The definitions model element.
-       * @property {ModdleElementsById} elementsById The model elements by ID.
-       * @property {ModdleElement[]} references The referenced model elements.
-       * @property {string[]} warnings The warnings produced when parsing the XML.
+       * @event BaseViewer#ImportParseCompleteEvent
+       * @type {ImportParseCompleteEvent}
        */
       definitions = this._emit('import.parse.complete', ParseCompleteEvent({
         error: null,
@@ -21236,10 +22162,8 @@
       /**
        * A `import.parse.complete` event.
        *
-       * @event BaseViewer#ImportDone
-       * @type {Object}
-       * @property {ImportXMLError|null} error An error thrown during import.
-       * @property {string[]} warnings The warnings.
+       * @event BaseViewer#ImportDoneEvent
+       * @type {ImportDoneEvent}
        */
       this._emit('import.done', { error: null, warnings: aggregatedWarnings });
 
@@ -21255,7 +22179,9 @@
 
       throw error;
     }
-  });
+  };
+
+  BaseViewer.prototype.importXML = wrapForCompatibility(BaseViewer.prototype.importXML);
 
 
   /**
@@ -21280,12 +22206,14 @@
    *
    * @return {Promise<ImportDefinitionsResult>} A promise resolving with warnings that were produced during the import.
    */
-  BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function importDefinitions(definitions, bpmnDiagram) {
+  BaseViewer.prototype.importDefinitions = async function importDefinitions(definitions, bpmnDiagram) {
     this._setDefinitions(definitions);
     const result = await this.open(bpmnDiagram);
 
     return { warnings: result.warnings };
-  });
+  };
+
+  BaseViewer.prototype.importDefinitions = wrapForCompatibility(BaseViewer.prototype.importDefinitions);
 
 
   /**
@@ -21309,7 +22237,7 @@
    *
    * @return {Promise<OpenResult>} A promise resolving with warnings that were produced during opening.
    */
-  BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagramOrId) {
+  BaseViewer.prototype.open = async function open(bpmnDiagramOrId) {
 
     const definitions = this._definitions;
     let bpmnDiagram = bpmnDiagramOrId;
@@ -21346,7 +22274,9 @@
     const { warnings } = await importBpmnDiagram(this, definitions, bpmnDiagram);
 
     return { warnings };
-  });
+  };
+
+  BaseViewer.prototype.open = wrapForCompatibility(BaseViewer.prototype.open);
 
   /**
    * Export the currently displayed BPMN 2.0 diagram as
@@ -21371,7 +22301,7 @@
    *
    * @return {Promise<SaveXMLResult>} A promise resolving with the XML.
    */
-  BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(options) {
+  BaseViewer.prototype.saveXML = async function saveXML(options) {
 
     options = options || {};
 
@@ -21388,9 +22318,8 @@
       /**
        * A `saveXML.start` event.
        *
-       * @event BaseViewer#SaveXMLStart
-       * @type {Object}
-       * @property {ModdleElement} definitions The definitions model element.
+       * @event BaseViewer#SaveXMLStartEvent
+       * @type {SaveXMLStartEvent}
        */
       definitions = this._emit('saveXML.start', {
         definitions
@@ -21411,10 +22340,8 @@
     /**
      * A `saveXML.done` event.
      *
-     * @event BaseViewer#SaveXMLDone
-     * @type {Object}
-     * @property {Error} [error] An error thrown when saving the XML.
-     * @property {string} [xml] The saved XML.
+     * @event BaseViewer#SaveXMLDoneEvent
+     * @type {SaveXMLDoneEvent}
      */
     this._emit('saveXML.done', result);
 
@@ -21423,7 +22350,9 @@
     }
 
     return result;
-  });
+  };
+
+  BaseViewer.prototype.saveXML = wrapForCompatibility(BaseViewer.prototype.saveXML);
 
 
   /**
@@ -21445,7 +22374,7 @@
    *
    * @return {Promise<SaveSVGResult>} A promise resolving with the SVG.
    */
-  BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG() {
+  BaseViewer.prototype.saveSVG = async function saveSVG() {
     this._emit('saveSVG.start');
 
     let svg, err;
@@ -21477,10 +22406,8 @@
     /**
      * A `saveSVG.done` event.
      *
-     * @event BaseViewer#SaveSVGDone
-     * @type {Object}
-     * @property {Error} [error] An error thrown when saving the SVG.
-     * @property {string} [svg] The saved SVG.
+     * @event BaseViewer#SaveSVGDoneEvent
+     * @type {SaveSVGDoneEvent}
      */
     this._emit('saveSVG.done', {
       error: err,
@@ -21492,7 +22419,9 @@
     }
 
     return { svg };
-  });
+  };
+
+  BaseViewer.prototype.saveSVG = wrapForCompatibility(BaseViewer.prototype.saveSVG);
 
   /**
    * Get a named diagram service.
@@ -21574,10 +22503,12 @@
    *
    * Remove an event listener via {@link BaseViewer#off}.
    *
+   * @template T
+   *
    * @param {string|string[]} events The event(s) to listen to.
    * @param {number} [priority] The priority with which to listen.
-   * @param {EventCallback} callback The callback.
-   * @param {*} [that] Value of `this` the callback will be called with.
+   * @param {EventBusEventCallback<T>} callback The callback.
+   * @param {any} [that] Value of `this` the callback will be called with.
    */
   BaseViewer.prototype.on = function(events, priority, callback, that) {
     return this.get('eventBus').on(events, priority, callback, that);
@@ -21627,7 +22558,7 @@
   /**
    * Get the definitions model element.
    *
-   * @returns {ModdleElement} The definitions model element.
+   * @return {ModdleElement} The definitions model element.
    */
   BaseViewer.prototype.getDefinitions = function() {
     return this._definitions;
@@ -21696,6 +22627,11 @@
     return this.get('eventBus').fire(type, event);
   };
 
+  /**
+   * @param {BaseViewerOptions} options
+   *
+   * @return {HTMLElement}
+   */
   BaseViewer.prototype._createContainer = function(options) {
 
     const container = domify$1('<div class="bjs-container"></div>');
@@ -21709,6 +22645,11 @@
     return container;
   };
 
+  /**
+   * @param {BaseViewerOptions} options
+   *
+   * @return {Moddle}
+   */
   BaseViewer.prototype._createModdle = function(options) {
     const moddleOptions = assign$1({}, this._moddleExtensions, options.moddleExtensions);