camunda-bpmn-js 2.4.0 → 2.5.0

package/dist/camunda-platform-modeler.development.js

@@ -4785,6 +4785,28 @@
 
   var intersectPaths = /*@__PURE__*/getDefaultExportFromCjs(intersect);
 
+  /**
+   * Checks whether a value is an instance of Connection.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isConnection$2(value) {
+    return isObject$1(value) && has$2(value, 'waypoints');
+  }
+
+  /**
+   * Checks whether a value is an instance of Label.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isLabel$2(value) {
+    return isObject$1(value) && has$2(value, 'labelTarget');
+  }
+
   /**
    * @typedef {import('../core/Types').ElementLike} Element
    * @typedef {import('../core/Types').ConnectionLike} Connection
@@ -4939,7 +4961,7 @@
    * @return {Point}
    */
   function getMid(element) {
-    if (isConnection$h(element)) {
+    if (isConnection$2(element)) {
       return getConnectionMid(element);
     }
 
@@ -5079,10 +5101,6 @@
     return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
   }
 
-  function isConnection$h(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @typedef {import('./Types').ConnectionLike} ConnectionLike
    * @typedef {import('./Types').RootLike} RootLike
@@ -7386,6 +7404,7 @@
    *
    * @return {Root}
    */
+
   /**
    * Creates a connection.
    *
@@ -7409,6 +7428,7 @@
    *
    * @return {Connection}
    */
+
   /**
    * Creates a shape.
    *
@@ -7432,6 +7452,7 @@
    *
    * @return {Shape}
    */
+
   /**
    * Creates a label.
    *
@@ -7451,6 +7472,7 @@
    *
    * @param {'label'} type
    * @param {Object} [attrs]
+   *
    * @return {Label}
    */
   function create(type, attrs) {
@@ -7465,6 +7487,7 @@
    * Checks whether an object is a model instance.
    *
    * @param {any} obj
+   *
    * @return {boolean}
    */
   function isModelElement(obj) {
@@ -18166,7 +18189,7 @@
    * @return {boolean}
    */
   function hasExternalLabel(element) {
-    return isLabel$7(element.label);
+    return isLabel$2(element.label);
   }
 
   /**
@@ -18290,19 +18313,10 @@
   }
 
   /**
-   * @param {Element} element
+   * @param {ModdleElement} semantic
    *
-   * @return {boolean}
-   */
-  function isLabel$7(element) {
-    return element && !!element.labelTarget;
-  }
-
-
-  /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @returns {string}
    */
-
   function getLabelAttr(semantic) {
     if (
       is$6(semantic, 'bpmn:FlowElement') ||
@@ -18325,6 +18339,11 @@
     }
   }
 
+  /**
+   * @param {ModdleElement} semantic
+   *
+   * @returns {string}
+   */
   function getCategoryValue(semantic) {
     var categoryValueRef = semantic['categoryValueRef'];
 
@@ -18337,9 +18356,9 @@
   }
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
-   * @return {string} label
+   * @return {string}
    */
   function getLabel(element) {
     var semantic = element.businessObject,
@@ -18358,10 +18377,10 @@
 
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    * @param {string} text
    *
-   * @return {DiagramElement} element
+   * @return {Element}
    */
   function setLabel(element, text) {
     var semantic = element.businessObject,
@@ -18583,7 +18602,7 @@
    */
 
   /**
-   * @typedef { import('../model').DiagramElement } DiagramElement
+   * @typedef { import('../model/Types').Element } Element
    */
 
   /**
@@ -18949,8 +18968,8 @@
     }
 
     function as(type) {
-      return function(parentGfx, element) {
-        return renderer(type)(parentGfx, element);
+      return function(parentGfx, element, options) {
+        return renderer(type)(parentGfx, element, options);
       };
     }
 
@@ -19089,7 +19108,7 @@
 
         return drawCircle(parentGfx, element.width, element.height, attrs);
       },
-      'bpmn:StartEvent': function(parentGfx, element) {
+      'bpmn:StartEvent': function(parentGfx, element, options) {
         var attrs = {
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
@@ -19107,7 +19126,9 @@
 
         var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return circle;
       },
@@ -19360,14 +19381,16 @@
           stroke: getStrokeColor$1(event, defaultStrokeColor)
         });
       },
-      'bpmn:EndEvent': function(parentGfx, element) {
+      'bpmn:EndEvent': function(parentGfx, element, options) {
         var circle = renderer('bpmn:Event')(parentGfx, element, {
           strokeWidth: 4,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return circle;
       },
@@ -19380,7 +19403,7 @@
 
         return circle;
       },
-      'bpmn:IntermediateEvent': function(parentGfx, element) {
+      'bpmn:IntermediateEvent': function(parentGfx, element, options) {
         var outer = renderer('bpmn:Event')(parentGfx, element, {
           strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
@@ -19394,7 +19417,9 @@
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return outer;
       },
@@ -20112,7 +20137,7 @@
 
         return elementStore;
       },
-      'bpmn:BoundaryEvent': function(parentGfx, element) {
+      'bpmn:BoundaryEvent': function(parentGfx, element, options) {
 
         var semantic = getBusinessObject$2(element),
             cancel = semantic.cancelActivity;
@@ -20143,7 +20168,9 @@
 
         /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
 
-        renderEventContent(element, parentGfx);
+        if (!options || options.renderIcon !== false) {
+          renderEventContent(element, parentGfx);
+        }
 
         return outer;
       },
@@ -20424,7 +20451,7 @@
 
 
   /**
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {boolean}
    */
@@ -20436,7 +20463,7 @@
    * Draw shape into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -20452,7 +20479,7 @@
    * Draw connection into parentGfx.
    *
    * @param {SVGElement} parentGfx
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {SVGElement} mainGfx
    */
@@ -20467,7 +20494,7 @@
   /**
    * Get shape path.
    *
-   * @param {DiagramElement} element
+   * @param {Element} element
    *
    * @return {string} path
    */
@@ -24007,7 +24034,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.canExecute = createHook('canExecute');
+  CommandInterceptor$1.prototype.canExecute = createHook$1('canExecute');
 
   /**
    * Add a <preExecute> phase of command interceptor.
@@ -24018,7 +24045,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.preExecute = createHook('preExecute');
+  CommandInterceptor$1.prototype.preExecute = createHook$1('preExecute');
 
   /**
    * Add a <preExecuted> phase of command interceptor.
@@ -24029,7 +24056,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.preExecuted = createHook('preExecuted');
+  CommandInterceptor$1.prototype.preExecuted = createHook$1('preExecuted');
 
   /**
    * Add a <execute> phase of command interceptor.
@@ -24040,7 +24067,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.execute = createHook('execute');
+  CommandInterceptor$1.prototype.execute = createHook$1('execute');
 
   /**
    * Add a <executed> phase of command interceptor.
@@ -24051,7 +24078,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.executed = createHook('executed');
+  CommandInterceptor$1.prototype.executed = createHook$1('executed');
 
   /**
    * Add a <postExecute> phase of command interceptor.
@@ -24062,7 +24089,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.postExecute = createHook('postExecute');
+  CommandInterceptor$1.prototype.postExecute = createHook$1('postExecute');
 
   /**
    * Add a <postExecuted> phase of command interceptor.
@@ -24073,7 +24100,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.postExecuted = createHook('postExecuted');
+  CommandInterceptor$1.prototype.postExecuted = createHook$1('postExecuted');
 
   /**
    * Add a <revert> phase of command interceptor.
@@ -24084,7 +24111,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.revert = createHook('revert');
+  CommandInterceptor$1.prototype.revert = createHook$1('revert');
 
   /**
    * Add a <reverted> phase of command interceptor.
@@ -24095,7 +24122,7 @@
    * @param {boolean} [unwrap] whether the event should be unwrapped
    * @param {any} [that]
    */
-  CommandInterceptor$1.prototype.reverted = createHook('reverted');
+  CommandInterceptor$1.prototype.reverted = createHook$1('reverted');
 
   /*
    * Add prototype methods for each phase of command execution (e.g. execute,
@@ -24110,7 +24137,7 @@
    *   unwrap?: boolean
    * ) => any }
    */
-  function createHook(hook) {
+  function createHook$1(hook) {
 
     /**
      * @this {CommandInterceptor}
@@ -30977,7 +31004,7 @@
       let element = closest(event.delegateTarget || event.target, '.entry', true);
       let entryId = attr$1(element, DATA_REF);
 
-      entry = this._getEntry(entryId);
+      entry = { id: entryId, ...this._getEntry(entryId) };
     }
 
     const handler = entry.action;
@@ -31950,7 +31977,7 @@
       y: sourceTrbl.top - 50 - element.height / 2
     };
 
-    if (isConnection$g(source)) {
+    if (isConnection$2(source)) {
       position = getMid(source);
       position.x += 100;
       position.y -= 50;
@@ -31995,10 +32022,6 @@
     return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
   }
 
-  function isConnection$g(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
    */
@@ -32436,7 +32459,7 @@
 
     forEach$2(elements, function(element) {
 
-      if (is$6(element, 'bpmn:Lane') || isLabel$7(element)) {
+      if (is$6(element, 'bpmn:Lane') || isLabel$2(element)) {
         canResize = false;
         return;
       }
@@ -35450,7 +35473,7 @@
           hoverMid = hover && getSnapPoint(hover, event);
 
       // only snap on connections, elements can have multiple connect endpoints
-      if (!isConnection$f(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
+      if (!isConnection$2(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
         return;
       }
 
@@ -35502,13 +35525,6 @@
 
   BendpointSnapping.$inject = [ 'eventBus' ];
 
-
-  // helpers //////////////////////
-
-  function isConnection$f(element) {
-    return element && !!element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -37035,11 +37051,11 @@
       elements = filter(elements, function(element) {
         var labelTarget = element.labelTarget;
 
-        return !element.parent && !(isLabel$6(element) && elements.indexOf(labelTarget) !== -1);
+        return !element.parent && !(isLabel$2(element) && elements.indexOf(labelTarget) !== -1);
       });
 
       var shape = find$2(elements, function(element) {
-        return !isConnection$e(element);
+        return !isConnection$2(element);
       });
 
       var attach = false,
@@ -37194,7 +37210,7 @@
 
         // update shape
         shape = find$2(elements, function(element) {
-          return !isConnection$e(element);
+          return !isConnection$2(element);
         });
       }
 
@@ -37235,7 +37251,7 @@
       }
 
       var shape = find$2(elements, function(element) {
-        return !isConnection$e(element);
+        return !isConnection$2(element);
       });
 
       if (!shape) {
@@ -37269,7 +37285,7 @@
 
       // center elements around cursor
       forEach$2(elements, function(element) {
-        if (isConnection$e(element)) {
+        if (isConnection$2(element)) {
           element.waypoints = map$2(element.waypoints, function(waypoint) {
             return {
               x: waypoint.x - bbox.x - bbox.width / 2,
@@ -37331,16 +37347,8 @@
     }
   }
 
-  function isConnection$e(element) {
-    return !!element.waypoints;
-  }
-
   function isSingleShape(elements) {
-    return elements && elements.length === 1 && !isConnection$e(elements[0]);
-  }
-
-  function isLabel$6(element) {
-    return !!element.labelTarget;
+    return elements && elements.length === 1 && !isConnection$2(elements[ 0 ]);
   }
 
   /**
@@ -37673,7 +37681,7 @@
       }
 
       // connections (priority = 3)
-      if (isConnection$d(element)) {
+      if (isConnection$2(element)) {
         descriptor.priority = 3;
 
         descriptor.source = element.source.id;
@@ -37683,7 +37691,7 @@
       }
 
       // labels (priority = 4)
-      if (isLabel$5(element)) {
+      if (isLabel$2(element)) {
         descriptor.priority = 4;
 
         descriptor.labelTarget = element.labelTarget.id;
@@ -37816,7 +37824,7 @@
 
     // center elements around cursor
     forEach$2(elements, function(element) {
-      if (isConnection$d(element)) {
+      if (isConnection$2(element)) {
         element.waypoints = map$2(element.waypoints, function(waypoint) {
           return {
             x: waypoint.x - bbox.x - bbox.width / 2,
@@ -37869,7 +37877,7 @@
 
         var element;
 
-        if (isConnection$d(attrs)) {
+        if (isConnection$2(attrs)) {
           attrs.source = cache[ descriptor.source ];
           attrs.target = cache[ descriptor.target ];
 
@@ -37880,7 +37888,7 @@
           return;
         }
 
-        if (isLabel$5(attrs)) {
+        if (isLabel$2(attrs)) {
           attrs.labelTarget = cache[ attrs.labelTarget ];
 
           element = cache[ descriptor.id ] = self.createLabel(attrs);
@@ -37935,7 +37943,7 @@
         source,
         target;
 
-    if (isConnection$d(element)) {
+    if (isConnection$2(element)) {
       source = find$2(elements, matchPattern({ id: element.source.id }));
       target = find$2(elements, matchPattern({ id: element.target.id }));
 
@@ -37944,7 +37952,7 @@
       }
     }
 
-    if (isLabel$5(element)) {
+    if (isLabel$2(element)) {
       labelTarget = find$2(elements, matchPattern({ id: element.labelTarget.id }));
 
       if (!labelTarget) {
@@ -38037,7 +38045,7 @@
     eachElement$2(parents, function(element, _index, depth) {
 
       // do NOT add external labels directly
-      if (isLabel$5(element)) {
+      if (isLabel$2(element)) {
         return;
       }
 
@@ -38135,14 +38143,6 @@
     return !!element.host;
   }
 
-  function isConnection$d(element) {
-    return !!element.waypoints;
-  }
-
-  function isLabel$5(element) {
-    return !!element.labelTarget;
-  }
-
   function copyWaypoints$1(element) {
     return map$2(element.waypoints, function(waypoint) {
 
@@ -38226,7 +38226,7 @@
 
       // do not copy business object + di for labels;
       // will be pulled from the referenced label target
-      if (isLabel$7(element)) {
+      if (isLabel$2(element)) {
         return descriptor;
       }
 
@@ -38294,7 +38294,7 @@
           di = descriptor.di;
 
       // wire existing di + businessObject for external label
-      if (isLabel$7(descriptor)) {
+      if (isLabel$2(descriptor)) {
         descriptor.businessObject = getBusinessObject$2(cache[ descriptor.labelTarget ]);
         descriptor.di = getDi$1(cache[ descriptor.labelTarget ]);
 
@@ -44375,7 +44375,7 @@
   ResizeHandles.prototype.addResizer = function(element) {
     var self = this;
 
-    if (isConnection$c(element) || !this._resize.canResize({ shape: element })) {
+    if (isConnection$2(element) || !this._resize.canResize({ shape: element })) {
       return;
     }
 
@@ -44427,10 +44427,6 @@
     return offset;
   }
 
-  function isConnection$c(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -44790,7 +44786,7 @@
     // external label not yet created
     if (isLabelExternal(target)
         && !hasExternalLabel(target)
-        && !isLabel$7(target)) {
+        && !isLabel$2(target)) {
 
       var externalLabelMid = getExternalLabelMid(element);
 
@@ -45467,7 +45463,7 @@
   }
 
   function shouldReplace$1(shape, host) {
-    return !isLabel$7(shape) &&
+    return !isLabel$2(shape) &&
       isAny$1(shape, [ 'bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent' ]) && !!host;
   }
 
@@ -45644,8 +45640,8 @@
       // ignore connections, groups and labels
       var children = rootElement.children.filter(function(element) {
         return !is$6(element, 'bpmn:Group') &&
-          !isLabel$7(element) &&
-          !isConnection$b(element);
+          !isLabel$2(element) &&
+          !isConnection$2(element);
       });
 
       // ensure for available children to calculate bounds
@@ -45816,10 +45812,6 @@
     };
   }
 
-  function isConnection$b(element) {
-    return !!element.waypoints;
-  }
-
   function findParticipant(elements) {
     return find$2(elements, function(element) {
       return is$6(element, 'bpmn:Participant');
@@ -46424,7 +46416,7 @@
   }
 
   function shouldReplace(shape, host) {
-    return !isLabel$7(shape) && is$6(shape, 'bpmn:BoundaryEvent') && !host;
+    return !isLabel$2(shape) && is$6(shape, 'bpmn:BoundaryEvent') && !host;
   }
 
   function includes$6(array, item) {
@@ -48131,7 +48123,7 @@
 
       var element = context.shape || context.connection;
 
-      if (isLabel$7(element) || !isLabelExternal(element)) {
+      if (isLabel$2(element) || !isLabelExternal(element)) {
         return;
       }
 
@@ -50670,7 +50662,7 @@
           shape = context.shape,
           shapeBo = shape.businessObject;
 
-      if (isLabel$7(shape)) {
+      if (isLabel$2(shape)) {
         return;
       }
 
@@ -51119,12 +51111,12 @@
           position = context.position,
           target = context.target;
 
-      if (isConnection$a(target) && !canInsert(elements, target)) {
+      if (isConnection$2(target) && !canInsert(elements, target)) {
         return false;
       }
 
       return every(elements, function(element) {
-        if (isConnection$a(element)) {
+        if (isConnection$2(element)) {
           return canConnect(element.source, element.target, element);
         }
 
@@ -51233,7 +51225,7 @@
    * @return {boolean}
    */
   function nonExistingOrLabel(element) {
-    return !element || isLabel$7(element);
+    return !element || isLabel$2(element);
   }
 
   function isSame$1(a, b) {
@@ -51467,15 +51459,6 @@
     );
   }
 
-  /**
-   * @param {Element} element
-   *
-   * @return {boolean}
-   */
-  function isConnection$a(element) {
-    return element.waypoints;
-  }
-
   /**
    * @param {Element} element
    *
@@ -51566,7 +51549,7 @@
   function canDrop(element, target) {
 
     // can move labels and groups everywhere
-    if (isLabel$7(element) || isGroup(element)) {
+    if (isLabel$2(element) || isGroup(element)) {
       return true;
     }
 
@@ -51656,7 +51639,7 @@
    * @return {boolean}
    */
   function isBoundaryEvent(element) {
-    return !isLabel$7(element) && is$6(element, 'bpmn:BoundaryEvent');
+    return !isLabel$2(element) && is$6(element, 'bpmn:BoundaryEvent');
   }
 
   /**
@@ -51765,7 +51748,7 @@
     var element = elements[0];
 
     // do not attach labels
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return false;
     }
 
@@ -51937,7 +51920,7 @@
       return false;
     }
 
-    if (isLabel$7(shape) || isGroup(shape)) {
+    if (isLabel$2(shape) || isGroup(shape)) {
       return true;
     }
 
@@ -52118,7 +52101,7 @@
     // return true if shape can be inserted into connection parent
     return (
       isAny$1(connection, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ]) &&
-      !isLabel$7(connection) &&
+      !isLabel$2(connection) &&
       is$6(shape, 'bpmn:FlowNode') &&
       !is$6(shape, 'bpmn:BoundaryEvent') &&
       canDrop(shape, connection.parent));
@@ -52141,7 +52124,7 @@
    * @return {boolean}
    */
   function canCopy(elements, element) {
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return true;
     }
 
@@ -53049,12 +53032,12 @@
     }
 
     forEach$2(elements, function(element) {
-      if (!element.parent || isLabel$4(element)) {
+      if (!element.parent || isLabel$2(element)) {
         return;
       }
 
       // handle connections separately
-      if (isConnection$9(element)) {
+      if (isConnection$2(element)) {
         connections.push(element);
 
         return;
@@ -53225,15 +53208,15 @@
 
       // find children that are not moving or resizing
       var nonMovingResizingChildren = filter(children, function(child) {
-        return !isConnection$9(child) &&
-          !isLabel$4(child) &&
+        return !isConnection$2(child) &&
+          !isLabel$2(child) &&
           !includes$3(movingShapes, child) &&
           !includes$3(resizingShapes, child);
       });
 
       // find children that are moving
       var movingChildren = filter(children, function(child) {
-        return !isConnection$9(child) && !isLabel$4(child) && includes$3(movingShapes, child);
+        return !isConnection$2(child) && !isLabel$2(child) && includes$3(movingShapes, child);
       });
 
       var minOrMax,
@@ -53367,14 +53350,6 @@
     return !!element.host;
   }
 
-  function isConnection$9(element) {
-    return !!element.waypoints;
-  }
-
-  function isLabel$4(element) {
-    return !!element.labelTarget;
-  }
-
   var MARKER_DRAGGING$1 = 'djs-dragging',
       MARKER_RESIZING = 'djs-resizing';
 
@@ -53533,7 +53508,7 @@
             });
           });
 
-          return isConnection$8(element)
+          return isConnection$2(element)
             && (sourceIsMoving || sourceIsResizing)
             && (targetIsMoving || targetIsResizing);
         });
@@ -53663,16 +53638,6 @@
     'previewSupport'
   ];
 
-
-  // helpers //////////////////////
-
-  /**
-   * Checks if an element is a connection.
-   */
-  function isConnection$8(element) {
-    return element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -55712,7 +55677,7 @@
   BpmnUpdater.prototype.updateParent = function(element, oldParent) {
 
     // do not update BPMN 2.0 label parent
-    if (isLabel$7(element)) {
+    if (isLabel$2(element)) {
       return;
     }
 
@@ -55777,7 +55742,7 @@
       });
     }
 
-    var target = isLabel$7(shape) ? this._getLabel(di) : di;
+    var target = isLabel$2(shape) ? this._getLabel(di) : di;
 
     var bounds = target.bounds;
 
@@ -56838,7 +56803,7 @@
 
     // center elements around position
     forEach$2(elements, function(element) {
-      if (isConnection$7(element)) {
+      if (isConnection$2(element)) {
         element.waypoints = map$2(element.waypoints, function(waypoint) {
           return {
             x: round$3(waypoint.x - bbox.x - bbox.width / 2 + position.x),
@@ -56858,7 +56823,7 @@
     var cache = {};
 
     forEach$2(elements, function(element) {
-      if (isConnection$7(element)) {
+      if (isConnection$2(element)) {
         cache[ element.id ] = isNumber$1(parentIndex) ?
           modeling.createConnection(
             cache[ element.source.id ],
@@ -56885,6 +56850,10 @@
         createShapeHints.autoResize = false;
       }
 
+      if (isLabel$2(element)) {
+        createShapeHints = omit(createShapeHints, [ 'attach' ]);
+      }
+
       cache[ element.id ] = isNumber$1(parentIndex) ?
         modeling.createShape(
           element,
@@ -56902,13 +56871,7 @@
     });
 
     context.elements = values(cache);
-  };
-
-  // helpers //////////
-
-  function isConnection$7(element) {
-    return !!element.waypoints;
-  }
+  };
 
   /**
    * @typedef {import('../../../model/Types').Element} Element
@@ -57231,7 +57194,7 @@
 
     // remove child shapes and connections
     saveClear(shape.children, function(child) {
-      if (isConnection$6(child)) {
+      if (isConnection$2(child)) {
         modeling.removeConnection(child, { nested: true });
       } else {
         modeling.removeShape(child, { nested: true });
@@ -57279,10 +57242,6 @@
     return shape;
   };
 
-  function isConnection$6(element) {
-    return element.waypoints;
-  }
-
   /**
    * @typedef {import('../Modeling').default} Modeling
    */
@@ -60413,13 +60372,13 @@
     }
 
     forEach$2(elements, function(element) {
-      var assignedDi = isConnection$5(element) ? pick(di, [ 'border-color' ]) : di,
+      var assignedDi = isConnection$2(element) ? pick(di, [ 'border-color' ]) : di,
           elementDi = getDi$1(element);
 
       // TODO @barmac: remove once we drop bpmn.io properties
       ensureLegacySupport(assignedDi);
 
-      if (isLabel$7(element)) {
+      if (isLabel$2(element)) {
 
         // set label colors as bpmndi:BPMNLabel#color
         self._commandStack.execute('element.updateModdleProperties', {
@@ -60479,10 +60438,6 @@
     return /^#[0-9a-fA-F]{6}$/.test(context.fillStyle) ? context.fillStyle : null;
   }
 
-  function isConnection$5(element) {
-    return !!element.waypoints;
-  }
-
   /**
    * Add legacy properties if required.
    *
@@ -60545,7 +60500,7 @@
           businessObject = element.businessObject,
           newLabel = ctx.newLabel;
 
-      if (!isLabel$7(element)
+      if (!isLabel$2(element)
           && isLabelExternal(element)
           && !hasExternalLabel(element)
           && !isEmptyText(newLabel)) {
@@ -60585,11 +60540,11 @@
           hints = ctx.hints || {};
 
       // ignore internal labels for elements except text annotations
-      if (!isLabel$7(label) && !is$6(label, 'bpmn:TextAnnotation')) {
+      if (!isLabel$2(label) && !is$6(label, 'bpmn:TextAnnotation')) {
         return;
       }
 
-      if (isLabel$7(label) && isEmptyText(newLabel)) {
+      if (isLabel$2(label) && isEmptyText(newLabel)) {
 
         if (hints.removeShape !== false) {
           modeling.removeShape(label, { unsetLabel: false });
@@ -62698,7 +62653,7 @@
 
     var filteredElements = filter(elements, function(element) {
 
-      if (!isConnection$4(element)) {
+      if (!isConnection$2(element)) {
         return true;
       } else {
 
@@ -62716,13 +62671,6 @@
     return size(groupBy(elements, function(e) { return e.parent && e.parent.id; })) !== 1;
   }
 
-  /**
-   * Checks if an element is a connection.
-   */
-  function isConnection$4(element) {
-    return element.waypoints;
-  }
-
   /**
    * @type { import('didi').ModuleDeclaration }
    */
@@ -64779,7 +64727,7 @@
     });
 
     // snap labels to mid only
-    if (isLabel$3(shape)) {
+    if (isLabel$2(shape)) {
       return snapContext;
     }
 
@@ -64802,9 +64750,9 @@
     forEach$2(snapTargets, function(snapTarget) {
 
       // handle labels
-      if (isLabel$3(snapTarget)) {
+      if (isLabel$2(snapTarget)) {
 
-        if (isLabel$3(shape)) {
+        if (isLabel$2(shape)) {
           snapPoints.add('mid', mid$2(snapTarget));
         }
 
@@ -64812,7 +64760,7 @@
       }
 
       // handle connections
-      if (isConnection$3(snapTarget)) {
+      if (isConnection$2(snapTarget)) {
 
         // ignore single segment connections
         if (snapTarget.waypoints.length < 3) {
@@ -64853,16 +64801,8 @@
 
   // helpers //////////
 
-  function isConnection$3(element) {
-    return !!element.waypoints;
-  }
-
   function isHidden$1(element) {
     return !!element.hidden;
-  }
-
-  function isLabel$3(element) {
-    return !!element.labelTarget;
   }
 
   /**
@@ -65271,18 +65211,10 @@
     return element.host === host;
   }
 
-  function isConnection$2(element) {
-    return !!element.waypoints;
-  }
-
   function isHidden(element) {
     return !!element.hidden;
   }
 
-  function isLabel$2(element) {
-    return !!element.labelTarget;
-  }
-
   function isHorizontal(direction) {
     return direction === 'n' || direction === 's';
   }
@@ -101273,7 +101205,7 @@
       eventBus.fire('propertiesPanel.layoutChanged', {
         layout: newLayout
       });
-    }, [eventBus, layoutConfig]);
+    }, [eventBus]);
 
     // React to external layout changes
     y(() => {
@@ -101603,17 +101535,17 @@
   function getLinkEventDefinition(element) {
     return getEventDefinition$1(element, 'bpmn:LinkEventDefinition');
   }
-  function getSignalEventDefinition(element) {
+  function getSignalEventDefinition$1(element) {
     return getEventDefinition$1(element, 'bpmn:SignalEventDefinition');
   }
   function isLinkSupported(element) {
     return isAny$1(element, ['bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent']) && !!getLinkEventDefinition(element);
   }
-  function isSignalSupported(element) {
-    return is$6(element, 'bpmn:Event') && !!getSignalEventDefinition(element);
+  function isSignalSupported$1(element) {
+    return is$6(element, 'bpmn:Event') && !!getSignalEventDefinition$1(element);
   }
-  function getSignal(element) {
-    const signalEventDefinition = getSignalEventDefinition(element);
+  function getSignal$1(element) {
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     return signalEventDefinition && signalEventDefinition.get('signalRef');
   }
   function getEscalationEventDefinition(element) {
@@ -103166,24 +103098,24 @@
     return is$6(element, 'bpmn:Participant') && element.businessObject.get('processRef');
   }
 
-  const EMPTY_OPTION$3 = '';
-  const CREATE_NEW_OPTION$2 = 'create-new';
-
   /**
    * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
    */
 
+  const EMPTY_OPTION$3 = '';
+  const CREATE_NEW_OPTION$2 = 'create-new';
+
   /**
-   * @returns {Array<Entry>} entries
+   * @returns {Entry[]}
    */
-  function SignalProps(props) {
+  function SignalProps$1(props) {
     const {
       element
     } = props;
-    if (!isSignalSupported(element)) {
+    if (!isSignalSupported$1(element)) {
       return [];
     }
-    const signal = getSignal(element);
+    const signal = getSignal$1(element);
     let entries = [{
       id: 'signalRef',
       component: SignalRef,
@@ -103192,7 +103124,7 @@
     if (signal) {
       entries = [...entries, {
         id: 'signalName',
-        component: SignalName,
+        component: SignalName$1,
         isEdited: isEdited$1
       }];
     }
@@ -103205,9 +103137,9 @@
     const bpmnFactory = useService('bpmnFactory');
     const commandStack = useService('commandStack');
     const translate = useService('translate');
-    const signalEventDefinition = getSignalEventDefinition(element);
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     const getValue = () => {
-      const signal = getSignal(element);
+      const signal = getSignal$1(element);
       if (signal) {
         return signal.get('id');
       }
@@ -103281,14 +103213,14 @@
       getOptions
     });
   }
-  function SignalName(props) {
+  function SignalName$1(props) {
     const {
       element
     } = props;
     const commandStack = useService('commandStack');
     const translate = useService('translate');
     const debounce = useService('debounceInput');
-    const signal = getSignal(element);
+    const signal = getSignal$1(element);
     const getValue = () => {
       return signal.get('name');
     };
@@ -103666,7 +103598,7 @@
       id: 'signal',
       label: translate('Signal'),
       component: Group,
-      entries: [...SignalProps({
+      entries: [...SignalProps$1({
         element
       })]
     };
@@ -105357,7 +105289,7 @@
       component: VariableName,
       isEdited: isEdited$1
     });
-    if (!is$6(element, 'bpmn:StartEvent')) {
+    if (!is$6(element, 'bpmn:StartEvent') || isInEventSubProcess$1(element)) {
       entries.push({
         id: 'conditionVariableEvents',
         component: VariableEvents,
@@ -105490,6 +105422,11 @@
   function createFormalExpression(parent, attributes, bpmnFactory) {
     return createElement('bpmn:FormalExpression', attributes, is$6(parent, 'bpmn:SequenceFlow') ? getBusinessObject$2(parent) : getConditionalEventDefinition(parent), bpmnFactory);
   }
+  function isInEventSubProcess$1(element) {
+    const bo = getBusinessObject$2(element),
+      parent = bo.$parent;
+    return is$6(parent, 'bpmn:SubProcess') && parent.triggeredByEvent;
+  }
 
   /**
    * Cf. https://docs.camunda.org/manual/latest/user-guide/process-engine/scripting/
@@ -109566,14 +109503,14 @@
       }
     };
     function addInMapping() {
-      const businessObject = getSignalEventDefinition(element) || getBusinessObject$2(element);
+      const businessObject = getSignalEventDefinition$1(element) || getBusinessObject$2(element);
       const mapping = createElement('camunda:In', {
         variables: 'all'
       }, null, bpmnFactory);
       addExtensionElements(element, businessObject, mapping, bpmnFactory, commandStack);
     }
     function removeInMapping() {
-      const businessObject = getSignalEventDefinition(element) || getBusinessObject$2(element);
+      const businessObject = getSignalEventDefinition$1(element) || getBusinessObject$2(element);
       const mappings = findRelevantInMappings(element);
       removeExtensionElements$1(element, businessObject, mappings, commandStack);
     }
@@ -109615,7 +109552,7 @@
   // helper //////////////////////////
 
   function areInMappingsSupported$1(element) {
-    const signalEventDefinition = getSignalEventDefinition(element);
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     if (signalEventDefinition) {
       return isAny$1(element, ['bpmn:IntermediateThrowEvent', 'bpmn:EndEvent']);
     }
@@ -109623,7 +109560,7 @@
   }
   function getInMappings$1(element) {
     const businessObject = getBusinessObject$2(element);
-    const signalEventDefinition = getSignalEventDefinition(businessObject);
+    const signalEventDefinition = getSignalEventDefinition$1(businessObject);
     return getExtensionElementsList$1(signalEventDefinition || businessObject, 'camunda:In');
   }
   function findRelevantInMappings(element) {
@@ -109914,7 +109851,7 @@
   }) {
     return function (event) {
       event.stopPropagation();
-      const businessObject = getSignalEventDefinition(element) || getBusinessObject$2(element);
+      const businessObject = getSignalEventDefinition$1(element) || getBusinessObject$2(element);
       removeExtensionElements$1(element, businessObject, mapping, commandStack);
     };
   }
@@ -109925,7 +109862,7 @@
   }) {
     return function (event) {
       event.stopPropagation();
-      const businessObject = getSignalEventDefinition(element) || getBusinessObject$2(element);
+      const businessObject = getSignalEventDefinition$1(element) || getBusinessObject$2(element);
       const newMapping = createElement('camunda:In', {
         source: '' // source is the default type
       }, null, bpmnFactory);
@@ -109937,7 +109874,7 @@
 
   function getInMappings(element) {
     const businessObject = getBusinessObject$2(element);
-    const signalEventDefinition = getSignalEventDefinition(businessObject);
+    const signalEventDefinition = getSignalEventDefinition$1(businessObject);
     const mappings = getExtensionElementsList$1(signalEventDefinition || businessObject, 'camunda:In');
 
     // only retrieve relevant mappings here, others are handled in other groups
@@ -109948,7 +109885,7 @@
     });
   }
   function areInMappingsSupported(element) {
-    const signalEventDefinition = getSignalEventDefinition(element);
+    const signalEventDefinition = getSignalEventDefinition$1(element);
     if (signalEventDefinition) {
       return isAny$1(element, ['bpmn:IntermediateThrowEvent', 'bpmn:EndEvent']);
     }
@@ -114542,7 +114479,11 @@
   ElementTemplatesLoader.$inject = ['config.elementTemplates', 'eventBus', 'elementTemplates', 'moddle'];
 
   function unlinkTemplate$1(element, injector) {
-    const modeling = injector.get('modeling');
+    const modeling = injector.get('modeling'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.unlink', {
+      element
+    });
     modeling.updateProperties(element, {
       'camunda:modelerTemplate': null,
       'camunda:modelerTemplateVersion': null
@@ -114550,7 +114491,11 @@
   }
   function removeTemplate(element, injector) {
     const replace = injector.get('replace'),
-      selection = injector.get('selection');
+      selection = injector.get('selection'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.remove', {
+      element
+    });
     const businessObject = getBusinessObject$2(element);
     const type = businessObject.$type,
       eventDefinitionType = getEventDefinitionType(businessObject);
@@ -114563,7 +114508,12 @@
     selection.select(newElement);
   }
   function updateTemplate$1(element, newTemplate, injector) {
-    const elementTemplates = injector.get('elementTemplates');
+    const elementTemplates = injector.get('elementTemplates'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.update', {
+      element,
+      newTemplate
+    });
     return elementTemplates.applyTemplate(element, newTemplate);
   }
   function getVersionOrDateFromTemplate(template) {
@@ -114637,7 +114587,11 @@
   }
 
   function unlinkTemplate(element, injector) {
-    const modeling = injector.get('modeling');
+    const modeling = injector.get('modeling'),
+      eventBus = injector.get('eventBus');
+    eventBus.fire('elementTemplates.unlink', {
+      element
+    });
 
     // remove template attributes
     modeling.updateProperties(element, {
@@ -115518,7 +115472,7 @@
     }
 
     /**
-     * Remove referenced element when template is unlinked.
+     * Unlink referenced element when template is unlinked.
      */
     _handlePropertiesUpdate(context) {
       const {
@@ -115534,11 +115488,9 @@
       const bo = getBusinessObject$2(element);
       const message = findMessage(bo);
       if (message && getTemplateId$1(message)) {
-        const messageEventDefinition = bo.eventDefinitions[0];
-        this._modeling.updateModdleProperties(element, messageEventDefinition, {
-          'messageRef': undefined
+        this._modeling.updateModdleProperties(element, message, {
+          [TEMPLATE_ID_ATTR$1]: null
         });
-        this._removeRootElement(message);
       }
     }
 
@@ -116311,7 +116263,7 @@
       }
 
       // get extension elements of either signal event definition or call activity
-      const extensionElements = this._getOrCreateExtensionElements(getSignalEventDefinition(element) || element);
+      const extensionElements = this._getOrCreateExtensionElements(getSignalEventDefinition$1(element) || element);
       const oldInsAndOuts = findExtensions(extensionElements, ['camunda:In', 'camunda:Out']);
       newProperties.forEach(newProperty => {
         const oldProperty = findOldProperty(oldTemplate, newProperty),
@@ -121511,9 +121463,11 @@
   /**
    * Flatten array, one level deep.
    *
-   * @param {Array<?>} arr
+   * @template T
    *
-   * @return {Array<?>}
+   * @param {T[][]} arr
+   *
+   * @return {T[]}
    */
 
   const nativeToString = Object.prototype.toString;
@@ -121535,6 +121489,11 @@
     return nativeToString.call(obj) === '[object Number]';
   }
 
+  /**
+   * @param {any} obj
+   *
+   * @return {boolean}
+   */
   function isFunction(obj) {
     const tag = nativeToString.call(obj);
 
@@ -121559,22 +121518,74 @@
     return nativeHasOwnProperty.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(collection, function(val, key) {
-      if (matcher(val, key)) {
+      if (matchFn(val, key)) {
         match = val;
 
         return false;
@@ -121590,10 +121601,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(collection, iterator) {
 
@@ -121636,6 +121648,12 @@
   }
 
 
+  /**
+   * @template T
+   * @param {Matcher<T>} matcher
+   *
+   * @return {MatchFn<T>}
+   */
   function toMatcher(matcher) {
     return isFunction(matcher) ? matcher : (e) => {
       return e === matcher;
@@ -122467,8 +122485,12 @@
    * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
    * and then replace respective icons with the optimized data URIs in `./dist`.
    */
-  const appendIcon = 'data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%205.82%205.82%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M1.3%203.4c.3%200%20.5-.2.5-.5s-.2-.4-.5-.4c-.2%200-.4.1-.4.4%200%20.3.2.5.4.5zM3%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5zM4.6%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5z%22%2F%3E%0A%3C%2Fsvg%3E';
-  const createIcon = 'data:image/svg+xml,%3Csvg%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%22-2%20-2%209.82%209.82%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.3%203.4c.3%200%20.5-.2.5-.5s-.2-.4-.5-.4c-.2%200-.4.1-.4.4%200%20.3.2.5.4.5zM3%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5zM4.6%203.4c.2%200%20.4-.2.4-.5s-.2-.4-.4-.4c-.3%200-.5.1-.5.4%200%20.3.2.5.5.5z%22%2F%3E%0A%3C%2Fsvg%3E';
+  const appendIcon = `<svg width="22" height="22" viewBox="0 0 5.82 5.82" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M1.3 3.4c.3 0 .5-.2.5-.5s-.2-.4-.5-.4c-.2 0-.4.1-.4.4 0 .3.2.5.4.5zM3 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5zM4.6 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5z"/>
+                    </svg>`;
+  const createIcon = `<svg width="46" height="46" viewBox="-2 -2 9.82 9.82" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M1.3 3.4c.3 0 .5-.2.5-.5s-.2-.4-.5-.4c-.2 0-.4.1-.4.4 0 .3.2.5.4.5zM3 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5zM4.6 3.4c.2 0 .4-.2.4-.5s-.2-.4-.4-.4c-.3 0-.5.1-.5.4 0 .3.2.5.5.5z"/>
+                    </svg>`;
 
   /**
    * A provider for append context pad button
@@ -122514,7 +122536,7 @@
       return {
         'append': {
           group: 'model',
-          imageUrl: appendIcon,
+          html: `<div class="entry">${appendIcon}</div>`,
           title: translate('Append element'),
           action: {
             click: function(event, element) {
@@ -122560,10 +122582,15 @@
 
   function e(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
 
+  /**
+   * @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}
@@ -122578,8 +122605,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}
    */
@@ -122592,7 +122619,7 @@
   /**
    * Return the business object for a given element.
    *
-   * @param  {djs.model.Base|ModdleElement} element
+   * @param {Element|ModdleElement} element
    *
    * @return {ModdleElement}
    */
@@ -122603,7 +122630,7 @@
   /**
    * Return the di object for a given element.
    *
-   * @param  {djs.model.Base} element
+   * @param {Element} element
    *
    * @return {ModdleElement}
    */
@@ -122611,14 +122638,25 @@
     return element && element.di;
   }
 
-  function isLabel(element) {
-    return element && !!element.labelTarget;
+  /**
+   * Checks whether a value is an instance of Label.
+   *
+   * @param {any} value
+   *
+   * @return {boolean}
+   */
+  function isLabel(value) {
+    return isObject(value) && has(value, 'labelTarget');
   }
 
   /**
+   * @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 = 1000;
@@ -122630,10 +122668,9 @@
    * @class
    * @constructor
    *
-   * @param {EventBus} eventBus
-   *
    * @example
    *
+   * ```javascript
    * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
    *
    * class CommandLogger extends CommandInterceptor {
@@ -122644,6 +122681,9 @@
    *     console.log('commandStack.shape-create.preExecute', event);
    *   });
    * }
+   * ```
+   *
+   * @param {EventBus} eventBus
    */
   function CommandInterceptor(eventBus) {
 
@@ -122661,16 +122701,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)) {
@@ -122712,35 +122753,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');
 
-  var hooks = [
-    'canExecute',
-    'preExecute',
-    'preExecuted',
-    'execute',
-    'executed',
-    'postExecute',
-    'postExecuted',
-    'revert',
-    'reverted'
-  ];
+  /**
+   * 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');
+
+  /**
+   * 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(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;
@@ -122752,7 +122888,9 @@
 
       this.on(events, hook, priority, handlerFn, unwrap, that);
     };
-  });
+
+    return hookFn;
+  }
 
   /**
    * @typedef {import('../../core/EventBus').default} EventBus
@@ -122764,6 +122902,8 @@
    * Extensions should implement the init method to actually add their custom
    * modeling checks. Checks may be added via the #addRule(action, fn) method.
    *
+   * @class
+   *
    * @param {EventBus} eventBus
    */
   function RuleProvider(eventBus) {
@@ -122781,15 +122921,16 @@
    * Adds a modeling rule for the given action, implemented through
    * a callback function.
    *
-   * The function will receive the modeling specific action context
+   * The callback receives a modeling specific action context
    * to perform its check. It must return `false` to disallow the
-   * action from happening or `true` to allow the action.
-   *
-   * A rule provider may pass over the evaluation to lower priority
-   * rules by returning return nothing (or <code>undefined</code>).
+   * action from happening or `true` to allow the action. Usually returing
+   * `null` denotes that a particular interaction shall be ignored.
+   * By returning nothing or `undefined` you pass evaluation to lower
+   * priority rules.
    *
    * @example
    *
+   * ```javascript
    * ResizableRules.prototype.init = function() {
    *
    *   \/**
@@ -122816,10 +122957,11 @@
    *     }
    *   });
    * };
+   * ```
    *
-   * @param {string|Array<string>} actions the identifier for the modeling action to check
+   * @param {string|string[]} actions the identifier for the modeling action to check
    * @param {number} [priority] the priority at which this rule is being applied
-   * @param {Function} fn the callback function that performs the actual check
+   * @param {(any) => any} fn the callback function that performs the actual check
    */
   RuleProvider.prototype.addRule = function(actions, priority, fn) {
 
@@ -123112,7 +123254,7 @@
     return {
       'create': {
         group: 'create',
-        imageUrl: createIcon,
+        html: `<div class="entry"> ${createIcon}</div>`,
         title: translate('Create element'),
         action: {
           click: function(event) {
@@ -123215,6 +123357,7 @@
 
   /**
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isCmd(event) {
 
@@ -123230,8 +123373,9 @@
   /**
    * Checks if key pressed is one of provided keys.
    *
-   * @param {string|Array<string>} keys
+   * @param {string|string[]} keys
    * @param {KeyboardEvent} event
+   * @return {boolean}
    */
   function isKey(keys, event) {
     keys = isArray(keys) ? keys : [ keys ];
@@ -123246,18 +123390,30 @@
     return event.shiftKey;
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isCopy(event) {
     return isCmd(event) && isKey(KEYS_COPY, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isPaste(event) {
     return isCmd(event) && isKey(KEYS_PASTE, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isUndo(event) {
     return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   function isRedo(event) {
     return isCmd(event) && (
       isKey(KEYS_REDO, event) || (
@@ -123533,6 +123689,17 @@
     ],
   };
 
+  /**
+   * @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(element, 'bpmn:CallActivity')) {
@@ -123556,14 +123723,21 @@
     return true;
   }
 
+  /**
+   * @typedef {import('../../../model/Types').Element} Element
+   * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget
+   *
+   * @typedef {(entry: PopupMenuTarget) => boolean} DifferentTypeValidator
+   */
+
   /**
    * Returns true, if an element is from a different type
    * than a target definition. Takes into account the type,
    * event definition type and triggeredByEvent property.
    *
-   * @param {djs.model.Base} element
+   * @param {Element} element
    *
-   * @return {boolean}
+   * @return {DifferentTypeValidator}
    */
   function isDifferentType(element) {
 
@@ -123594,6 +123768,28 @@
     };
   }
 
+  /**
+   * @typedef { () => string } LabelGetter
+   *
+   * @typedef { {
+   *   label: string | LabelGetter;
+   *   actionName: string;
+   *   className: string;
+   *   target?: {
+   *     type: string;
+   *     isExpanded?: boolean;
+   *     isInterrupting?: boolean;
+   *     triggeredByEvent?: boolean;
+   *     cancelActivity?: boolean;
+   *     eventDefinitionType?: string;
+   *     eventDefinitionAttrs?: Record<string, any>
+   *   };
+   * } } ReplaceOption
+   */
+
+  /**
+   * @type {ReplaceOption[]}
+   */
   var START_EVENT = [
     {
       label: 'Start Event',
@@ -123657,6 +123853,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var START_EVENT_SUB_PROCESS = [
     {
       label: 'Start Event',
@@ -123684,6 +123883,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var INTERMEDIATE_EVENT = [
     {
       label: 'Start Event',
@@ -123807,6 +124009,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var END_EVENT = [
     {
       label: 'Start Event',
@@ -123897,6 +124102,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var GATEWAY = [
     {
       label: 'Exclusive Gateway',
@@ -123966,6 +124174,9 @@
     // }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var SUBPROCESS_EXPANDED = [
     {
       label: 'Transaction',
@@ -123997,6 +124208,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var TRANSACTION = [
     {
       label: 'Transaction',
@@ -124028,8 +124242,14 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var EVENT_SUB_PROCESS = TRANSACTION;
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var TASK = [
     {
       label: 'Task',
@@ -124123,6 +124343,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var DATA_OBJECT_REFERENCE = [
     {
       label: 'Data Store Reference',
@@ -124134,6 +124357,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var DATA_STORE_REFERENCE = [
     {
       label: 'Data Object Reference',
@@ -124145,6 +124371,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var BOUNDARY_EVENT = [
     {
       label: 'Message Boundary Event',
@@ -124270,6 +124499,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var EVENT_SUB_PROCESS_START_EVENT = [
     {
       label: 'Message Start Event',
@@ -124386,6 +124618,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var SEQUENCE_FLOW = [
     {
       label: 'Sequence Flow',
@@ -124404,6 +124639,9 @@
     }
   ];
 
+  /**
+   * @type {ReplaceOption[]}
+   */
   var PARTICIPANT = [
     {
       label: 'Expanded Pool',