camunda-bpmn-js 1.2.0 → 1.3.0

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

@@ -1291,9 +1291,13 @@
 
   var componentEvent = {};
 
-  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
-      unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
-      prefix$7 = bind$1 !== 'addEventListener' ? 'on' : '';
+  var bind$1, unbind$1, prefix$7;
+
+  function detect () {
+    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
+    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
+    prefix$7 = bind$1 !== 'addEventListener' ? 'on' : '';
+  }
 
   /**
    * Bind `el` event `type` to `fn`.
@@ -1307,6 +1311,7 @@
    */
 
   var bind_1 = componentEvent.bind = function(el, type, fn, capture){
+    if (!bind$1) detect();
     el[bind$1](prefix$7 + type, fn, capture || false);
     return fn;
   };
@@ -1323,6 +1328,7 @@
    */
 
   var unbind_1 = componentEvent.unbind = function(el, type, fn, capture){
+    if (!unbind$1) detect();
     el[unbind$1](prefix$7 + type, fn, capture || false);
     return fn;
   };
@@ -2755,34 +2761,128 @@
    */
   BaseRenderer.prototype.getConnectionPath = function() {};
 
+  /**
+   * @param { [ string, ...any[] ][] } elements
+   *
+   * @return { string }
+   */
   function componentsToPath(elements) {
-    return elements.join(',').replace(/,?([A-z]),?/g, '$1');
+    return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');
   }
 
-  function toSVGPoints(points) {
-    var result = '';
+  function move(point) {
+    return [ 'M', point.x, point.y ];
+  }
+
+  function lineTo(point) {
+    return [ 'L', point.x, point.y ];
+  }
 
-    for (var i = 0, p; (p = points[i]); i++) {
-      result += p.x + ',' + p.y + ' ';
+  function curveTo(p1, p2, p3) {
+    return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];
+  }
+
+  function drawPath(waypoints, cornerRadius) {
+    const pointCount = waypoints.length;
+
+    const path = [ move(waypoints[0]) ];
+
+    for (let i = 1; i < pointCount; i++) {
+
+      const pointBefore = waypoints[i - 1];
+      const point = waypoints[i];
+      const pointAfter = waypoints[i + 1];
+
+      if (!pointAfter || !cornerRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const effectiveRadius = Math.min(
+        cornerRadius,
+        vectorLength$1(point.x - pointBefore.x, point.y - pointBefore.y),
+        vectorLength$1(pointAfter.x - point.x, pointAfter.y - point.y)
+      );
+
+      if (!effectiveRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const beforePoint = getPointAtLength(point, pointBefore, effectiveRadius);
+      const beforePoint2 = getPointAtLength(point, pointBefore, effectiveRadius * .5);
+
+      const afterPoint = getPointAtLength(point, pointAfter, effectiveRadius);
+      const afterPoint2 = getPointAtLength(point, pointAfter, effectiveRadius * .5);
+
+      path.push(lineTo(beforePoint));
+      path.push(curveTo(beforePoint2, afterPoint2, afterPoint));
     }
 
-    return result;
+    return path;
   }
 
-  function createLine(points, attrs) {
+  function getPointAtLength(start, end, length) {
 
-    var line = create$1('polyline');
-    attr(line, { points: toSVGPoints(points) });
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
 
-    if (attrs) {
-      attr(line, attrs);
+    const totalLength = vectorLength$1(deltaX, deltaY);
+
+    const percent = length / totalLength;
+
+    return {
+      x: start.x + deltaX * percent,
+      y: start.y + deltaY * percent
+    };
+  }
+
+  function vectorLength$1(x, y) {
+    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  }
+
+  /**
+   * @param { { x: number, y: number }[] } points
+   * @param { any } [attrs]
+   * @param { number } [radius]
+   *
+   * @return {SVGElement}
+   */
+  function createLine(points, attrs, radius) {
+
+    if (isNumber(attrs)) {
+      radius = attrs;
+      attrs = null;
     }
 
-    return line;
+    if (!attrs) {
+      attrs = {};
+    }
+
+    const line = create$1('path', attrs);
+
+    if (isNumber(radius)) {
+      line.dataset.cornerRadius = String(radius);
+    }
+
+    return updateLine(line, points);
   }
 
+  /**
+   * @param { SVGElement } gfx
+   * @param { { x: number, y: number }[]} points
+   *
+   * @return {SVGElement}
+   */
   function updateLine(gfx, points) {
-    attr(gfx, { points: toSVGPoints(points) });
+
+    const cornerRadius = parseInt(gfx.dataset.cornerRadius, 10) || 0;
+
+    attr(gfx, {
+      d: componentsToPath(drawPath(points, cornerRadius))
+    });
 
     return gfx;
   }
@@ -3443,65 +3543,42 @@
   /**
    * Check whether two points are horizontally or vertically aligned.
    *
-   * @param {Array<Point>|Point}
-   * @param {Point}
+   * @param {Point[]|Point} a
+   * @param {Point} [b]
    *
-   * @return {string|boolean}
+   * @return {'h'|'v'|false} axis or false
    */
   function pointsAligned(a, b) {
-    var points;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
+    var points = Array.from(arguments).flat();
 
-    if (pointsAlignedHorizontally(points)) {
-      return 'h';
-    }
+    const axisMap = {
+      'x': 'v',
+      'y': 'h'
+    };
 
-    if (pointsAlignedVertically(points)) {
-      return 'v';
+    for (const [ axis, orientation ] of Object.entries(axisMap)) {
+      if (pointsAlignedOnAxis(axis, points)) {
+        return orientation;
+      }
     }
 
     return false;
   }
 
-  function pointsAlignedHorizontally(a, b) {
-    var points;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
-
-    var firstPoint = points.slice().shift();
-
-    return every(points, function(point) {
-      return Math.abs(firstPoint.y - point.y) <= ALIGNED_THRESHOLD;
-    });
-  }
-
-  function pointsAlignedVertically(a, b) {
-    var points;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
-
-    var firstPoint = points.slice().shift();
+  /**
+   * @param { 'x' | 'y' } axis
+   * @param { Point[] } points
+   *
+   * @return {boolean}
+   */
+  function pointsAlignedOnAxis(axis, points) {
+    const referencePoint = points[0];
 
     return every(points, function(point) {
-      return Math.abs(firstPoint.x - point.x) <= ALIGNED_THRESHOLD;
+      return Math.abs(referencePoint[axis] - point[axis]) <= ALIGNED_THRESHOLD;
     });
   }
 
-
-
   /**
    * Returns true if the point p is inside the rectangle rect
    *
@@ -4625,7 +4702,7 @@
    * @return {Point}
    */
   function getMid(element) {
-    if (isConnection$g(element)) {
+    if (isConnection$h(element)) {
       return getConnectionMid(element);
     }
 
@@ -4765,7 +4842,7 @@
     return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
   }
 
-  function isConnection$g(element) {
+  function isConnection$h(element) {
     return !!element.waypoints;
   }
 
@@ -16424,6 +16501,11 @@
    * @see http://bpmn.io/license for more information.
    */
 
+
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A base viewer for BPMN 2.0 diagrams.
    *
@@ -16435,8 +16517,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function BaseViewer(options) {
 
@@ -16865,7 +16947,14 @@
     this._definitions = definitions;
   };
 
-  BaseViewer.prototype.getModules = function() {
+  /**
+   * Return modules to instantiate with.
+   *
+   * @param {any} options the instance got created with
+   *
+   * @return {Module[]}
+   */
+  BaseViewer.prototype.getModules = function(options) {
     return this._modules;
   };
 
@@ -16971,7 +17060,7 @@
 
   BaseViewer.prototype._init = function(container, moddle, options) {
 
-    const baseModules = options.modules || this.getModules(),
+    const baseModules = options.modules || this.getModules(options),
           additionalModules = options.additionalModules || [],
           staticModules = [
             {
@@ -17126,6 +17215,10 @@
 
   /* </project-logo> */
 
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A base modeler for BPMN 2.0 diagrams.
    *
@@ -17136,8 +17229,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function BaseModeler(options) {
     BaseViewer.call(this, options);
@@ -17225,7 +17318,7 @@
     return element && !!getBusinessObject$1(element).triggeredByEvent;
   }
 
-  function hasEventDefinition$2(element, eventType) {
+  function hasEventDefinition$3(element, eventType) {
     var bo = getBusinessObject$1(element),
         hasEventDefinition = false;
 
@@ -17241,15 +17334,15 @@
   }
 
   function hasErrorEventDefinition(element) {
-    return hasEventDefinition$2(element, 'bpmn:ErrorEventDefinition');
+    return hasEventDefinition$3(element, 'bpmn:ErrorEventDefinition');
   }
 
   function hasEscalationEventDefinition(element) {
-    return hasEventDefinition$2(element, 'bpmn:EscalationEventDefinition');
+    return hasEventDefinition$3(element, 'bpmn:EscalationEventDefinition');
   }
 
   function hasCompensateEventDefinition(element) {
-    return hasEventDefinition$2(element, 'bpmn:CompensateEventDefinition');
+    return hasEventDefinition$3(element, 'bpmn:CompensateEventDefinition');
   }
 
   function getLabelAttr(semantic) {
@@ -17484,33 +17577,33 @@
 
     var markers = {};
 
-    var computeStyle = styles.computeStyle;
-
-    function addMarker(id, options) {
-      var attrs = assign$1({
-        fill: black,
-        strokeWidth: 1,
+    function shapeStyle(attrs) {
+      return styles.computeStyle(attrs, {
         strokeLinecap: 'round',
-        strokeDasharray: 'none'
-      }, options.attrs);
-
-      var ref = options.ref || { x: 0, y: 0 };
-
-      var scale = options.scale || 1;
-
-      // fix for safari / chrome / firefox bug not correctly
-      // resetting stroke dash array
-      if (attrs.strokeDasharray === 'none') {
-        attrs.strokeDasharray = [ 10000, 1 ];
-      }
-
-      var marker = create$1('marker');
+        strokeLinejoin: 'round',
+        stroke: black,
+        strokeWidth: 2,
+        fill: 'white'
+      });
+    }
 
-      attr(options.element, attrs);
+    function lineStyle(attrs) {
+      return styles.computeStyle(attrs, [ 'no-fill' ], {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: black,
+        strokeWidth: 2
+      });
+    }
 
-      append(marker, options.element);
+    function addMarker(id, options) {
+      var {
+        ref = { x: 0, y: 0 },
+        scale = 1,
+        element
+      } = options;
 
-      attr(marker, {
+      var marker = create$1('marker', {
         id: id,
         viewBox: '0 0 20 20',
         refX: ref.x,
@@ -17520,6 +17613,8 @@
         orient: 'auto'
       });
 
+      append(marker, element);
+
       var defs = query('defs', canvas._svg);
 
       if (!defs) {
@@ -17552,105 +17647,116 @@
     function createMarker(id, type, fill, stroke) {
 
       if (type === 'sequenceflow-end') {
-        var sequenceflowEnd = create$1('path');
-        attr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+        var sequenceflowEnd = create$1('path', {
+          d: 'M 1 5 L 11 10 L 1 15 Z',
+          ...shapeStyle({
+            fill: stroke,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: sequenceflowEnd,
           ref: { x: 11, y: 10 },
-          scale: 0.5,
-          attrs: {
-            fill: stroke,
-            stroke: stroke
-          }
+          scale: 0.5
         });
       }
 
       if (type === 'messageflow-start') {
-        var messageflowStart = create$1('circle');
-        attr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+        var messageflowStart = create$1('circle', {
+          cx: 6,
+          cy: 6,
+          r: 3.5,
+          ...shapeStyle({
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: messageflowStart,
-          attrs: {
-            fill: fill,
-            stroke: stroke
-          },
           ref: { x: 6, y: 6 }
         });
       }
 
       if (type === 'messageflow-end') {
-        var messageflowEnd = create$1('path');
-        attr(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+        var messageflowEnd = create$1('path', {
+          d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',
+          ...shapeStyle({
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: 1
+          })
+        });
 
         addMarker(id, {
           element: messageflowEnd,
-          attrs: {
-            fill: fill,
-            stroke: stroke,
-            strokeLinecap: 'butt'
-          },
           ref: { x: 8.5, y: 5 }
         });
       }
 
       if (type === 'association-start') {
-        var associationStart = create$1('path');
-        attr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
-
-        addMarker(id, {
-          element: associationStart,
-          attrs: {
+        var associationStart = create$1('path', {
+          d: 'M 11 5 L 1 10 L 11 15',
+          ...lineStyle({
             fill: 'none',
             stroke: stroke,
             strokeWidth: 1.5
-          },
+          })
+        });
+
+        addMarker(id, {
+          element: associationStart,
           ref: { x: 1, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'association-end') {
-        var associationEnd = create$1('path');
-        attr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
-
-        addMarker(id, {
-          element: associationEnd,
-          attrs: {
+        var associationEnd = create$1('path', {
+          d: 'M 1 5 L 11 10 L 1 15',
+          ...lineStyle({
             fill: 'none',
             stroke: stroke,
             strokeWidth: 1.5
-          },
-          ref: { x: 12, y: 10 },
+          })
+        });
+
+        addMarker(id, {
+          element: associationEnd,
+          ref: { x: 11, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'conditional-flow-marker') {
-        var conditionalflowMarker = create$1('path');
-        attr(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
-
-        addMarker(id, {
-          element: conditionalflowMarker,
-          attrs: {
+        var conditionalFlowMarker = create$1('path', {
+          d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',
+          ...shapeStyle({
             fill: fill,
             stroke: stroke
-          },
+          })
+        });
+
+        addMarker(id, {
+          element: conditionalFlowMarker,
           ref: { x: -1, y: 10 },
           scale: 0.5
         });
       }
 
       if (type === 'conditional-default-flow-marker') {
-        var conditionaldefaultflowMarker = create$1('path');
-        attr(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+        var defaultFlowMarker = create$1('path', {
+          d: 'M 6 4 L 10 16',
+          ...shapeStyle({
+            stroke: stroke
+          })
+        });
 
         addMarker(id, {
-          element: conditionaldefaultflowMarker,
-          attrs: {
-            stroke: stroke
-          },
+          element: defaultFlowMarker,
           ref: { x: 0, y: 10 },
           scale: 0.5
         });
@@ -17666,11 +17772,7 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
       if (attrs.fill === 'none') {
         delete attrs.fillOpacity;
@@ -17679,13 +17781,12 @@
       var cx = width / 2,
           cy = height / 2;
 
-      var circle = create$1('circle');
-      attr(circle, {
+      var circle = create$1('circle', {
         cx: cx,
         cy: cy,
-        r: Math.round((width + height) / 4 - offset)
+        r: Math.round((width + height) / 4 - offset),
+        ...attrs
       });
-      attr(circle, attrs);
 
       append(parentGfx, circle);
 
@@ -17701,22 +17802,17 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
-      var rect = create$1('rect');
-      attr(rect, {
+      var rect = create$1('rect', {
         x: offset,
         y: offset,
         width: width - offset * 2,
         height: height - offset * 2,
         rx: r,
-        ry: r
+        ry: r,
+        ...attrs
       });
-      attr(rect, attrs);
 
       append(parentGfx, rect);
 
@@ -17728,53 +17824,66 @@
       var x_2 = width / 2;
       var y_2 = height / 2;
 
-      var points = [ { x: x_2, y: 0 }, { x: width, y: y_2 }, { x: x_2, y: height }, { x: 0, y: y_2 } ];
+      var points = [
+        { x: x_2, y: 0 },
+        { x: width, y: y_2 },
+        { x: x_2, y: height },
+        { x: 0, y: y_2 }
+      ];
 
       var pointsString = points.map(function(point) {
         return point.x + ',' + point.y;
       }).join(' ');
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
-      var polygon = create$1('polygon');
-      attr(polygon, {
+      var polygon = create$1('polygon', {
+        ...attrs,
         points: pointsString
       });
-      attr(polygon, attrs);
 
       append(parentGfx, polygon);
 
       return polygon;
     }
 
-    function drawLine(parentGfx, waypoints, attrs) {
-      attrs = computeStyle(attrs, [ 'no-fill' ], {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'none'
-      });
+    /**
+     * @param {SVGElement} parentGfx
+     * @param {Point[]} waypoints
+     * @param {any} attrs
+     * @param {number} [radius]
+     *
+     * @return {SVGElement}
+     */
+    function drawLine(parentGfx, waypoints, attrs, radius) {
+      attrs = lineStyle(attrs);
 
-      var line = createLine(waypoints, attrs);
+      var line = createLine(waypoints, attrs, radius);
 
       append(parentGfx, line);
 
       return line;
     }
 
+    /**
+     * @param {SVGElement} parentGfx
+     * @param {Point[]} waypoints
+     * @param {any} attrs
+     *
+     * @return {SVGElement}
+     */
+    function drawConnectionSegments(parentGfx, waypoints, attrs) {
+      return drawLine(parentGfx, waypoints, attrs, 5);
+    }
+
     function drawPath(parentGfx, d, attrs) {
 
-      attrs = computeStyle(attrs, [ 'no-fill' ], {
-        strokeWidth: 2,
-        stroke: black
-      });
+      attrs = lineStyle(attrs);
 
-      var path = create$1('path');
-      attr(path, { d: d });
-      attr(path, attrs);
+      var path = create$1('path', {
+        ...attrs,
+        d
+      });
 
       append(parentGfx, path);
 
@@ -17875,7 +17984,7 @@
       return renderLabel(parentGfx, semantic.name, {
         box: element,
         align: align,
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -17921,16 +18030,6 @@
       transform(textBox, 0, -top, 270);
     }
 
-    function createPathFromConnection(connection) {
-      var waypoints = connection.waypoints;
-
-      var pathData = 'm  ' + waypoints[0].x + ',' + waypoints[0].y;
-      for (var i = 1; i < waypoints.length; i++) {
-        pathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' ';
-      }
-      return pathData;
-    }
-
     var handlers = this.handlers = {
       'bpmn:Event': function(parentGfx, element, attrs) {
 
@@ -17951,7 +18050,6 @@
         if (!semantic.isInterrupting) {
           attrs = {
             strokeDasharray: '6',
-            strokeLinecap: 'round',
             fill: getFillColor(element, defaultFillColor),
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           };
@@ -18006,7 +18104,6 @@
 
         drawPath(parentGfx, pathData, {
           strokeWidth: 2,
-          strokeLinecap: 'square',
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
@@ -18028,7 +18125,6 @@
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            strokeLinecap: 'square',
             transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           });
@@ -18236,14 +18332,14 @@
       },
       'bpmn:IntermediateEvent': function(parentGfx, element) {
         var outer = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
         /* inner */
         drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, 'none'),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
@@ -18496,10 +18592,11 @@
         return task;
       },
       'bpmn:SubProcess': function(parentGfx, element, attrs) {
-        attrs = assign$1({
+        attrs = {
           fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor$1(element, defaultStrokeColor)
-        }, attrs);
+          stroke: getStrokeColor$1(element, defaultStrokeColor),
+          ...attrs
+        };
 
         var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
@@ -18507,7 +18604,8 @@
 
         if (isEventSubProcess(element)) {
           attr(rect, {
-            strokeDasharray: '1,2'
+            strokeDasharray: '0, 5.5',
+            strokeWidth: 2.5
           });
         }
 
@@ -18525,13 +18623,14 @@
         return renderer('bpmn:SubProcess')(parentGfx, element);
       },
       'bpmn:Transaction': function(parentGfx, element) {
-        var outer = renderer('bpmn:SubProcess')(parentGfx, element);
+        var outer = renderer('bpmn:SubProcess')(parentGfx, element, { strokeWidth: 1.5 });
 
         var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-          stroke: getStrokeColor$1(element, defaultStrokeColor)
+          stroke: getStrokeColor$1(element, defaultStrokeColor),
+          strokeWidth: 1.5
         });
 
-        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
+        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
 
         return outer;
       },
@@ -18542,10 +18641,13 @@
       },
       'bpmn:Participant': function(parentGfx, element) {
 
+        var strokeWidth = 1.5;
+
         var attrs = {
           fillOpacity: DEFAULT_FILL_OPACITY,
           fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor$1(element, defaultStrokeColor)
+          stroke: getStrokeColor$1(element, defaultStrokeColor),
+          strokeWidth
         };
 
         var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
@@ -18557,13 +18659,14 @@
             { x: 30, y: 0 },
             { x: 30, y: element.height }
           ], {
-            stroke: getStrokeColor$1(element, defaultStrokeColor)
+            stroke: getStrokeColor$1(element, defaultStrokeColor),
+            strokeWidth
           });
           var text = getSemantic(element).name;
           renderLaneLabel(parentGfx, text, element);
         } else {
 
-          // Collapsed pool draw text inline
+          // collapsed pool draw text inline
           var text2 = getSemantic(element).name;
           renderLabel(parentGfx, text2, {
             box: element, align: 'center-middle',
@@ -18582,11 +18685,13 @@
         return lane;
       },
       'bpmn:Lane': function(parentGfx, element, attrs) {
-        var rect = drawRect(parentGfx, element.width, element.height, 0, assign$1({
+        var rect = drawRect(parentGfx, element.width, element.height, 0, {
           fill: getFillColor(element, defaultFillColor),
           fillOpacity: HIGH_FILL_OPACITY,
-          stroke: getStrokeColor$1(element, defaultStrokeColor)
-        }, attrs));
+          stroke: getStrokeColor$1(element, defaultStrokeColor),
+          strokeWidth: 1.5,
+          ...attrs
+        });
 
         var semantic = getSemantic(element);
 
@@ -18705,13 +18810,11 @@
             }
           });
 
-          var attrs = {
+          /* event path */ drawPath(parentGfx, pathData, {
             strokeWidth: 2,
             fill: getFillColor(element, 'none'),
             stroke: getStrokeColor$1(element, defaultStrokeColor)
-          };
-
-          /* event path */ drawPath(parentGfx, pathData, attrs);
+          });
         }
 
         if (type === 'Parallel') {
@@ -18727,16 +18830,14 @@
             }
           });
 
-          var parallelPath = drawPath(parentGfx, pathData);
-          attr(parallelPath, {
+          drawPath(parentGfx, pathData, {
             strokeWidth: 1,
             fill: 'none'
           });
         } else if (type === 'Exclusive') {
 
           if (!instantiate) {
-            var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-            attr(innerCircle, {
+            drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
               strokeWidth: 1,
               fill: 'none',
               stroke: getStrokeColor$1(element, defaultStrokeColor)
@@ -18750,27 +18851,20 @@
         return diamond;
       },
       'bpmn:Gateway': function(parentGfx, element) {
-        var attrs = {
+        return drawDiamond(parentGfx, element.width, element.height, {
           fill: getFillColor(element, defaultFillColor),
           fillOpacity: DEFAULT_FILL_OPACITY,
           stroke: getStrokeColor$1(element, defaultStrokeColor)
-        };
-
-        return drawDiamond(parentGfx, element.width, element.height, attrs);
+        });
       },
       'bpmn:SequenceFlow': function(parentGfx, element) {
-        var pathData = createPathFromConnection(element);
-
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor$1(element, defaultStrokeColor);
 
-        var attrs = {
-          strokeLinejoin: 'round',
+        var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('sequenceflow-end', fill, stroke),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
-        };
-
-        var path = drawPath(parentGfx, pathData, attrs);
+        });
 
         var sequenceFlow = getSemantic(element);
 
@@ -18804,12 +18898,11 @@
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor$1(element, defaultStrokeColor);
 
-        attrs = assign$1({
-          strokeDasharray: '0.5, 5',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          stroke: getStrokeColor$1(element, defaultStrokeColor)
-        }, attrs || {});
+        attrs = {
+          strokeDasharray: '0, 5',
+          stroke: getStrokeColor$1(element, defaultStrokeColor),
+          ...attrs
+        };
 
         if (semantic.associationDirection === 'One' ||
             semantic.associationDirection === 'Both') {
@@ -18820,7 +18913,7 @@
           attrs.markerStart = marker('association-start', fill, stroke);
         }
 
-        return drawLine(parentGfx, element.waypoints, attrs);
+        return drawConnectionSegments(parentGfx, element.waypoints, attrs);
       },
       'bpmn:DataInputAssociation': function(parentGfx, element) {
         var fill = getFillColor(element, defaultFillColor),
@@ -18846,19 +18939,13 @@
         var fill = getFillColor(element, defaultFillColor),
             stroke = getStrokeColor$1(element, defaultStrokeColor);
 
-        var pathData = createPathFromConnection(element);
-
-        var attrs = {
+        var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('messageflow-end', fill, stroke),
           markerStart: marker('messageflow-start', fill, stroke),
-          strokeDasharray: '10, 12',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '1.5px',
+          strokeDasharray: '10, 11',
+          strokeWidth: 1.5,
           stroke: getStrokeColor$1(element, defaultStrokeColor)
-        };
-
-        var path = drawPath(parentGfx, pathData, attrs);
+        });
 
         if (semantic.messageRef) {
           var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
@@ -18981,25 +19068,26 @@
             cancel = semantic.cancelActivity;
 
         var attrs = {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         };
 
         if (!cancel) {
           attrs.strokeDasharray = '6';
-          attrs.strokeLinecap = 'round';
         }
 
         // apply fillOpacity
-        var outerAttrs = assign$1({}, attrs, {
+        var outerAttrs = {
+          ...attrs,
           fillOpacity: 1
-        });
+        };
 
         // apply no-fill
-        var innerAttrs = assign$1({}, attrs, {
+        var innerAttrs = {
+          ...attrs,
           fill: 'none'
-        });
+        };
 
         var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
 
@@ -19010,27 +19098,22 @@
         return outer;
       },
       'bpmn:Group': function(parentGfx, element) {
-
-        var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
           stroke: getStrokeColor$1(element, defaultStrokeColor),
-          strokeWidth: 1,
-          strokeDasharray: '8,3,1,3',
+          strokeWidth: 1.5,
+          strokeDasharray: '10,6,0,6',
           fill: 'none',
           pointerEvents: 'none'
         });
-
-        return group;
       },
       'label': function(parentGfx, element) {
         return renderExternalLabel(parentGfx, element);
       },
       'bpmn:TextAnnotation': function(parentGfx, element) {
-        var style = {
+        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, {
           'fill': 'none',
           'stroke': 'none'
-        };
-
-        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
+        });
 
         var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
           xScaleFactor: 1,
@@ -19051,7 +19134,7 @@
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
-          padding: 5,
+          padding: 7,
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
           }
@@ -19169,10 +19252,9 @@
         });
 
         drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor),
-          strokeLinecap: 'round',
           strokeMiterlimit: 0.5
         });
       },
@@ -21393,7 +21475,7 @@
       attr(outline, assign$1({
         x: 10,
         y: 10,
-        rx: 3,
+        rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));
@@ -23567,6 +23649,10 @@
     subprocessCompatibility: [ 'type', SubprocessCompatibility ]
   };
 
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A viewer for BPMN 2.0 diagrams.
    *
@@ -23611,8 +23697,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function Viewer(options) {
     BaseViewer.call(this, options);
@@ -28568,41 +28654,21 @@
 
     const [ value, setValue ] = p$3('');
 
-    const [ entries, setEntries ] = p$3(originalEntries);
-    const [ selectedEntry, setSelectedEntry ] = p$3(entries[0]);
-
-    h$2(() => {
-      onOpened();
-
-      return () => {
-        onClosed();
-      };
-    }, []);
-
-    const updateEntries = T$3((newEntries) => {
-
-      // select first entry if non is selected
-      if (!selectedEntry || !newEntries.includes(selectedEntry)) {
-        setSelectedEntry(newEntries[0]);
-      }
+    const filterEntries = T$3((originalEntries, value) => {
 
-      setEntries(newEntries);
-    }, [ selectedEntry, setEntries, setSelectedEntry ]);
-
-    // filter entries on value change
-    h$2(() => {
       if (!searchable) {
-        return;
+        return originalEntries;
       }
 
       const filter = entry => {
         if (!value) {
-          return true;
+          return (entry.rank || 0) >= 0;
         }
 
         const search = [
           entry.description || '',
-          entry.label || ''
+          entry.label || '',
+          entry.search || ''
         ]
           .join('---')
           .toLowerCase();
@@ -28613,10 +28679,26 @@
           .every(term => search.includes(term));
       };
 
-      const entries = originalEntries.filter(filter);
+      return originalEntries.filter(filter);
+    }, [ searchable ]);
+
+    const [ entries, setEntries ] = p$3(filterEntries(originalEntries, value));
+    const [ selectedEntry, setSelectedEntry ] = p$3(entries[0]);
+
+    const updateEntries = T$3((newEntries) => {
+
+      // select first entry if non is selected
+      if (!selectedEntry || !newEntries.includes(selectedEntry)) {
+        setSelectedEntry(newEntries[0]);
+      }
+
+      setEntries(newEntries);
+    }, [ selectedEntry, setEntries, setSelectedEntry ]);
 
-      updateEntries(entries);
-    }, [ value, originalEntries, searchable ]);
+    // filter entries on value change
+    h$2(() => {
+      updateEntries(filterEntries(originalEntries, value));
+    }, [ value, originalEntries ]);
 
     // register global <Escape> handler
     h$2(() => {
@@ -28662,10 +28744,6 @@
         return onSelect(event, selectedEntry);
       }
 
-      if (event.key === 'Escape') {
-        return onClose();
-      }
-
       // ARROW_UP or SHIFT + TAB navigation
       if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {
         keyboardSelect(-1);
@@ -28687,6 +28765,14 @@
       }
     }, [ setValue ]);
 
+    h$2(() => {
+      onOpened();
+
+      return () => {
+        onClosed();
+      };
+    }, []);
+
     const displayHeader = F$2(() => title || headerEntries.length > 0, [ title, headerEntries ]);
 
     return m$3`
@@ -30178,7 +30264,7 @@
       y: sourceTrbl.top - 50 - element.height / 2
     };
 
-    if (isConnection$f(source)) {
+    if (isConnection$g(source)) {
       position = getMid(source);
       position.x += 100;
       position.y -= 50;
@@ -30217,7 +30303,7 @@
     return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
   }
 
-  function isConnection$f(element) {
+  function isConnection$g(element) {
     return !!element.waypoints;
   }
 
@@ -31643,7 +31729,7 @@
    * Returns the length of a vector
    *
    * @param {Vector}
-   * @return {Float}
+   * @return {number}
    */
   function vectorLength(v) {
     return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
@@ -31654,7 +31740,7 @@
    * Calculates the angle between a line a the yAxis
    *
    * @param {Array}
-   * @return {Float}
+   * @return {number}
    */
   function getAngle(line) {
 
@@ -31668,7 +31754,7 @@
    * Rotates a vector by a given angle
    *
    * @param {Vector}
-   * @param {Float} Angle in radians
+   * @param {number} Angle in radians
    * @return {Vector}
    */
   function rotateVector(vector, angle) {
@@ -31686,7 +31772,7 @@
    * @param {Vector}
    * @param {Vector}
    * @param {Vector}
-   * @return {Float}
+   * @return {number}
    */
   function solveLambaSystem(a, b, c) {
 
@@ -31708,7 +31794,7 @@
    * Position of perpendicular foot
    *
    * @param {Point}
-   * @param [ {Point}, {Point} ] line defined through two points
+   * @param {[ Point, Point ]} line defined through two points
    * @return {Point} the perpendicular foot position
    */
   function perpendicularFoot(point, line) {
@@ -31728,9 +31814,10 @@
   /**
    * Calculates the distance between a point and a line
    *
-   * @param {Point}
-   * @param [ {Point}, {Point} ] line defined through two points
-   * @return {Float} distance
+   * @param { Point }
+   * @param { [ Point, Point ] } line defined through two points
+   *
+   * @return { number } distance
    */
   function getDistancePointLine(point, line) {
 
@@ -31751,7 +31838,8 @@
    *
    * @param {Point}
    * @param {Point}
-   * @return {Float} distance
+   *
+   * @return {number} distance
    */
   function getDistancePointPoint(point1, point2) {
 
@@ -33457,7 +33545,7 @@
           hoverMid = hover && getSnapPoint(hover, event);
 
       // only snap on connections, elements can have multiple connect endpoints
-      if (!isConnection$e(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
+      if (!isConnection$f(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
         return;
       }
 
@@ -33512,7 +33600,7 @@
 
   // helpers //////////////////////
 
-  function isConnection$e(element) {
+  function isConnection$f(element) {
     return element && !!element.waypoints;
   }
 
@@ -33981,18 +34069,12 @@
    * @returns {SVGElement}
    */
   ConnectionPreview.prototype.createNoopConnection = function(start, end) {
-    var connection = create$1('polyline');
-
-    attr(connection, {
+    return createLine([ start, end ], {
       'stroke': '#333',
       'strokeDasharray': [ 1 ],
       'strokeWidth': 2,
       'pointer-events': 'none'
     });
-
-    attr(connection, { 'points': [ start.x, start.y, end.x, end.y ] });
-
-    return connection;
   };
 
   // helpers //////////
@@ -34699,6 +34781,7 @@
     'path',
     'polygon',
     'polyline',
+    'path',
     'rect'
   ];
 
@@ -34973,7 +35056,7 @@
       });
 
       var shape = find$1(elements, function(element) {
-        return !isConnection$d(element);
+        return !isConnection$e(element);
       });
 
       var attach = false,
@@ -35128,7 +35211,7 @@
 
         // update shape
         shape = find$1(elements, function(element) {
-          return !isConnection$d(element);
+          return !isConnection$e(element);
         });
       }
 
@@ -35169,7 +35252,7 @@
       }
 
       var shape = find$1(elements, function(element) {
-        return !isConnection$d(element);
+        return !isConnection$e(element);
       });
 
       if (!shape) {
@@ -35203,7 +35286,7 @@
 
       // center elements around cursor
       forEach$1(elements, function(element) {
-        if (isConnection$d(element)) {
+        if (isConnection$e(element)) {
           element.waypoints = map$2(element.waypoints, function(waypoint) {
             return {
               x: waypoint.x - bbox.x - bbox.width / 2,
@@ -35265,12 +35348,12 @@
     }
   }
 
-  function isConnection$d(element) {
+  function isConnection$e(element) {
     return !!element.waypoints;
   }
 
   function isSingleShape(elements) {
-    return elements && elements.length === 1 && !isConnection$d(elements[0]);
+    return elements && elements.length === 1 && !isConnection$e(elements[0]);
   }
 
   function isLabel$5(element) {
@@ -35587,7 +35670,7 @@
       }
 
       // connections (priority = 3)
-      if (isConnection$c(element)) {
+      if (isConnection$d(element)) {
         descriptor.priority = 3;
 
         descriptor.source = element.source.id;
@@ -35730,7 +35813,7 @@
 
     // center elements around cursor
     forEach$1(elements, function(element) {
-      if (isConnection$c(element)) {
+      if (isConnection$d(element)) {
         element.waypoints = map$2(element.waypoints, function(waypoint) {
           return {
             x: waypoint.x - bbox.x - bbox.width / 2,
@@ -35783,7 +35866,7 @@
 
         var element;
 
-        if (isConnection$c(attrs)) {
+        if (isConnection$d(attrs)) {
           attrs.source = cache[ descriptor.source ];
           attrs.target = cache[ descriptor.target ];
 
@@ -35849,7 +35932,7 @@
         source,
         target;
 
-    if (isConnection$c(element)) {
+    if (isConnection$d(element)) {
       source = find$1(elements, matchPattern({ id: element.source.id }));
       target = find$1(elements, matchPattern({ id: element.target.id }));
 
@@ -36046,7 +36129,7 @@
     return !!element.host;
   }
 
-  function isConnection$c(element) {
+  function isConnection$d(element) {
     return !!element.waypoints;
   }
 
@@ -36749,7 +36832,7 @@
 
         // copying event definitions, unless we replace
         if (propertyName === 'eventDefinitions') {
-          return hasEventDefinition$1(element, target.eventDefinitionType);
+          return hasEventDefinition$2(element, target.eventDefinitionType);
         }
 
         // retain loop characteristics if the target element
@@ -36786,7 +36869,7 @@
         // only initialize with new eventDefinition
         // if we did not set an event definition yet,
         // i.e. because we copied it
-        if (!hasEventDefinition$1(newBusinessObject, target.eventDefinitionType)) {
+        if (!hasEventDefinition$2(newBusinessObject, target.eventDefinitionType)) {
           newElement.eventDefinitionType = target.eventDefinitionType;
           newElement.eventDefinitionAttrs = target.eventDefinitionAttrs;
         }
@@ -36916,7 +36999,7 @@
     return is$5(bo, 'bpmn:SubProcess');
   }
 
-  function hasEventDefinition$1(element, type) {
+  function hasEventDefinition$2(element, type) {
 
     var bo = getBusinessObject$1(element);
 
@@ -37284,7 +37367,7 @@
     }
   ];
 
-  var GATEWAY = [
+  var GATEWAY$1 = [
     {
       label: 'Exclusive Gateway',
       actionName: 'replace-with-exclusive-gateway',
@@ -37417,7 +37500,7 @@
 
   var EVENT_SUB_PROCESS = TRANSACTION;
 
-  var TASK = [
+  var TASK$1 = [
     {
       label: 'Task',
       actionName: 'replace-with-task',
@@ -37426,6 +37509,22 @@
         type: 'bpmn:Task'
       }
     },
+    {
+      label: 'User Task',
+      actionName: 'replace-with-user-task',
+      className: 'bpmn-icon-user',
+      target: {
+        type: 'bpmn:UserTask'
+      }
+    },
+    {
+      label: 'Service Task',
+      actionName: 'replace-with-service-task',
+      className: 'bpmn-icon-service',
+      target: {
+        type: 'bpmn:ServiceTask'
+      }
+    },
     {
       label: 'Send Task',
       actionName: 'replace-with-send-task',
@@ -37442,14 +37541,6 @@
         type: 'bpmn:ReceiveTask'
       }
     },
-    {
-      label: 'User Task',
-      actionName: 'replace-with-user-task',
-      className: 'bpmn-icon-user',
-      target: {
-        type: 'bpmn:UserTask'
-      }
-    },
     {
       label: 'Manual Task',
       actionName: 'replace-with-manual-task',
@@ -37466,14 +37557,6 @@
         type: 'bpmn:BusinessRuleTask'
       }
     },
-    {
-      label: 'Service Task',
-      actionName: 'replace-with-service-task',
-      className: 'bpmn-icon-service',
-      target: {
-        type: 'bpmn:ServiceTask'
-      }
-    },
     {
       label: 'Script Task',
       actionName: 'replace-with-script-task',
@@ -37791,7 +37874,7 @@
     }
   ];
 
-  var PARTICIPANT = [
+  var PARTICIPANT$1 = [
     {
       label: 'Expanded Pool',
       actionName: 'replace-with-expanded-pool',
@@ -37828,17 +37911,17 @@
     START_EVENT_SUB_PROCESS: START_EVENT_SUB_PROCESS,
     INTERMEDIATE_EVENT: INTERMEDIATE_EVENT,
     END_EVENT: END_EVENT,
-    GATEWAY: GATEWAY,
+    GATEWAY: GATEWAY$1,
     SUBPROCESS_EXPANDED: SUBPROCESS_EXPANDED,
     TRANSACTION: TRANSACTION,
     EVENT_SUB_PROCESS: EVENT_SUB_PROCESS,
-    TASK: TASK,
+    TASK: TASK$1,
     DATA_OBJECT_REFERENCE: DATA_OBJECT_REFERENCE,
     DATA_STORE_REFERENCE: DATA_STORE_REFERENCE,
     BOUNDARY_EVENT: BOUNDARY_EVENT,
     EVENT_SUB_PROCESS_START_EVENT: EVENT_SUB_PROCESS_START_EVENT,
     SEQUENCE_FLOW: SEQUENCE_FLOW,
-    PARTICIPANT: PARTICIPANT
+    PARTICIPANT: PARTICIPANT$1
   });
 
   /**
@@ -37919,7 +38002,7 @@
     // expanded/collapsed pools
     if (is$5(businessObject, 'bpmn:Participant')) {
 
-      entries = filter(PARTICIPANT, function(entry) {
+      entries = filter(PARTICIPANT$1, function(entry) {
         return isExpanded(element) !== entry.target.isExpanded;
       });
 
@@ -38002,7 +38085,7 @@
     // gateways
     if (is$5(businessObject, 'bpmn:Gateway')) {
 
-      entries = filter(GATEWAY, differentType);
+      entries = filter(GATEWAY$1, differentType);
 
       return this._createEntries(element, entries);
     }
@@ -38034,7 +38117,7 @@
     // collapsed ad hoc sub processes
     if (is$5(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(element)) {
 
-      entries = filter(TASK, function(entry) {
+      entries = filter(TASK$1, function(entry) {
 
         var target = entry.target;
 
@@ -38055,7 +38138,7 @@
 
     // flow nodes
     if (is$5(businessObject, 'bpmn:FlowNode')) {
-      entries = filter(TASK, differentType);
+      entries = filter(TASK$1, differentType);
 
       // collapsed SubProcess can not be replaced with itself
       if (is$5(businessObject, 'bpmn:SubProcess') && !isExpanded(element)) {
@@ -38325,6 +38408,12 @@
     var self = this;
     var translate = this._translate;
 
+    var dataObject = element.businessObject.dataObjectRef;
+
+    if (!dataObject) {
+      return [];
+    }
+
     function toggleIsCollection(event, entry) {
       self._modeling.updateModdleProperties(
         element,
@@ -38332,8 +38421,7 @@
         { isCollection: !entry.active });
     }
 
-    var dataObject = element.businessObject.dataObjectRef,
-        isCollection = dataObject.isCollection;
+    var isCollection = dataObject.isCollection;
 
     var dataObjectEntries = [
       {
@@ -38429,9 +38517,12 @@
   var PopupMenuModule = {
     __depends__: [
       PopupMenuModule$1,
-      ReplaceModule
+      ReplaceModule,
+      AutoPlaceModule
+    ],
+    __init__: [
+      'replaceMenuProvider'
     ],
-    __init__: [ 'replaceMenuProvider' ],
     replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
   };
 
@@ -38874,433 +38965,2181 @@
       });
     }
 
-    return actions;
+    return actions;
+  };
+
+  /**
+   * @param {djs.model.Base[]} elements
+   * @return {boolean}
+   */
+  ContextPadProvider.prototype._isDeleteAllowed = function(elements) {
+
+    var baseAllowed = this._rules.allowed('elements.delete', {
+      elements: elements
+    });
+
+    if (isArray$3(baseAllowed)) {
+      return every(baseAllowed, function(element) {
+        return includes$7(baseAllowed, element);
+      });
+    }
+
+    return baseAllowed;
+  };
+
+  ContextPadProvider.prototype.getContextPadEntries = function(element) {
+    var contextPad = this._contextPad,
+        modeling = this._modeling,
+
+        elementFactory = this._elementFactory,
+        connect = this._connect,
+        create = this._create,
+        popupMenu = this._popupMenu,
+        rules = this._rules,
+        autoPlace = this._autoPlace,
+        translate = this._translate;
+
+    var actions = {};
+
+    if (element.type === 'label') {
+      return actions;
+    }
+
+    var businessObject = element.businessObject;
+
+    function startConnect(event, element) {
+      connect.start(event, element);
+    }
+
+    function removeElement(e, element) {
+      modeling.removeElements([ element ]);
+    }
+
+    function getReplaceMenuPosition(element) {
+
+      var Y_OFFSET = 5;
+
+      var pad = contextPad.getPad(element).html;
+
+      var padRect = pad.getBoundingClientRect();
+
+      var pos = {
+        x: padRect.left,
+        y: padRect.bottom + Y_OFFSET
+      };
+
+      return pos;
+    }
+
+    /**
+     * Create an append action
+     *
+     * @param {string} type
+     * @param {string} className
+     * @param {string} [title]
+     * @param {Object} [options]
+     *
+     * @return {Object} descriptor
+     */
+    function appendAction(type, className, title, options) {
+
+      if (typeof title !== 'string') {
+        options = title;
+        title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+      }
+
+      function appendStart(event, element) {
+
+        var shape = elementFactory.createShape(assign$1({ type: type }, options));
+        create.start(event, shape, {
+          source: element
+        });
+      }
+
+
+      var append = autoPlace ? function(event, element) {
+        var shape = elementFactory.createShape(assign$1({ type: type }, options));
+
+        autoPlace.append(element, shape);
+      } : appendStart;
+
+
+      return {
+        group: 'model',
+        className: className,
+        title: title,
+        action: {
+          dragstart: appendStart,
+          click: append
+        }
+      };
+    }
+
+    function splitLaneHandler(count) {
+
+      return function(event, element) {
+
+        // actual split
+        modeling.splitLane(element, count);
+
+        // refresh context pad after split to
+        // get rid of split icons
+        contextPad.open(element, true);
+      };
+    }
+
+
+    if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
+
+      var childLanes = getChildLanes(element);
+
+      assign$1(actions, {
+        'lane-insert-above': {
+          group: 'lane-insert-above',
+          className: 'bpmn-icon-lane-insert-above',
+          title: translate('Add Lane above'),
+          action: {
+            click: function(event, element) {
+              modeling.addLane(element, 'top');
+            }
+          }
+        }
+      });
+
+      if (childLanes.length < 2) {
+
+        if (element.height >= 120) {
+          assign$1(actions, {
+            'lane-divide-two': {
+              group: 'lane-divide',
+              className: 'bpmn-icon-lane-divide-two',
+              title: translate('Divide into two Lanes'),
+              action: {
+                click: splitLaneHandler(2)
+              }
+            }
+          });
+        }
+
+        if (element.height >= 180) {
+          assign$1(actions, {
+            'lane-divide-three': {
+              group: 'lane-divide',
+              className: 'bpmn-icon-lane-divide-three',
+              title: translate('Divide into three Lanes'),
+              action: {
+                click: splitLaneHandler(3)
+              }
+            }
+          });
+        }
+      }
+
+      assign$1(actions, {
+        'lane-insert-below': {
+          group: 'lane-insert-below',
+          className: 'bpmn-icon-lane-insert-below',
+          title: translate('Add Lane below'),
+          action: {
+            click: function(event, element) {
+              modeling.addLane(element, 'bottom');
+            }
+          }
+        }
+      });
+
+    }
+
+    if (is$5(businessObject, 'bpmn:FlowNode')) {
+
+      if (is$5(businessObject, 'bpmn:EventBasedGateway')) {
+
+        assign$1(actions, {
+          'append.receive-task': appendAction(
+            'bpmn:ReceiveTask',
+            'bpmn-icon-receive-task',
+            translate('Append ReceiveTask')
+          ),
+          'append.message-intermediate-event': appendAction(
+            'bpmn:IntermediateCatchEvent',
+            'bpmn-icon-intermediate-event-catch-message',
+            translate('Append MessageIntermediateCatchEvent'),
+            { eventDefinitionType: 'bpmn:MessageEventDefinition' }
+          ),
+          'append.timer-intermediate-event': appendAction(
+            'bpmn:IntermediateCatchEvent',
+            'bpmn-icon-intermediate-event-catch-timer',
+            translate('Append TimerIntermediateCatchEvent'),
+            { eventDefinitionType: 'bpmn:TimerEventDefinition' }
+          ),
+          'append.condition-intermediate-event': appendAction(
+            'bpmn:IntermediateCatchEvent',
+            'bpmn-icon-intermediate-event-catch-condition',
+            translate('Append ConditionIntermediateCatchEvent'),
+            { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
+          ),
+          'append.signal-intermediate-event': appendAction(
+            'bpmn:IntermediateCatchEvent',
+            'bpmn-icon-intermediate-event-catch-signal',
+            translate('Append SignalIntermediateCatchEvent'),
+            { eventDefinitionType: 'bpmn:SignalEventDefinition' }
+          )
+        });
+      } else
+
+      if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
+
+        assign$1(actions, {
+          'append.compensation-activity':
+              appendAction(
+                'bpmn:Task',
+                'bpmn-icon-task',
+                translate('Append compensation activity'),
+                {
+                  isForCompensation: true
+                }
+              )
+        });
+      } else
+
+      if (!is$5(businessObject, 'bpmn:EndEvent') &&
+          !businessObject.isForCompensation &&
+          !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
+          !isEventSubProcess(businessObject)) {
+
+        assign$1(actions, {
+          'append.end-event': appendAction(
+            'bpmn:EndEvent',
+            'bpmn-icon-end-event-none',
+            translate('Append EndEvent')
+          ),
+          'append.gateway': appendAction(
+            'bpmn:ExclusiveGateway',
+            'bpmn-icon-gateway-none',
+            translate('Append Gateway')
+          ),
+          'append.append-task': appendAction(
+            'bpmn:Task',
+            'bpmn-icon-task',
+            translate('Append Task')
+          ),
+          'append.intermediate-event': appendAction(
+            'bpmn:IntermediateThrowEvent',
+            'bpmn-icon-intermediate-event-none',
+            translate('Append Intermediate/Boundary Event')
+          )
+        });
+      }
+    }
+
+    if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+
+      // Replace menu entry
+      assign$1(actions, {
+        'replace': {
+          group: 'edit',
+          className: 'bpmn-icon-screw-wrench',
+          title: translate('Change type'),
+          action: {
+            click: function(event, element) {
+
+              var position = assign$1(getReplaceMenuPosition(element), {
+                cursor: { x: event.x, y: event.y }
+              });
+
+              popupMenu.open(element, 'bpmn-replace', position, {
+                title: translate('Change element'),
+                width: 300,
+                search: true
+              });
+            }
+          }
+        }
+      });
+    }
+
+    if (is$5(businessObject, 'bpmn:SequenceFlow')) {
+      assign$1(actions, {
+        'append.text-annotation': appendAction(
+          'bpmn:TextAnnotation',
+          'bpmn-icon-text-annotation'
+        )
+      });
+    }
+
+    if (
+      isAny(businessObject, [
+        'bpmn:FlowNode',
+        'bpmn:InteractionNode',
+        'bpmn:DataObjectReference',
+        'bpmn:DataStoreReference',
+      ])
+    ) {
+      assign$1(actions, {
+        'append.text-annotation': appendAction(
+          'bpmn:TextAnnotation',
+          'bpmn-icon-text-annotation'
+        ),
+
+        'connect': {
+          group: 'connect',
+          className: 'bpmn-icon-connection-multi',
+          title: translate(
+            'Connect using ' +
+              (businessObject.isForCompensation
+                ? ''
+                : 'Sequence/MessageFlow or ') +
+              'Association'
+          ),
+          action: {
+            click: startConnect,
+            dragstart: startConnect,
+          },
+        },
+      });
+    }
+
+    if (is$5(businessObject, 'bpmn:TextAnnotation')) {
+      assign$1(actions, {
+        'connect': {
+          group: 'connect',
+          className: 'bpmn-icon-connection-multi',
+          title: translate('Connect using Association'),
+          action: {
+            click: startConnect,
+            dragstart: startConnect,
+          },
+        },
+      });
+    }
+
+    if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
+      assign$1(actions, {
+        'connect': {
+          group: 'connect',
+          className: 'bpmn-icon-connection-multi',
+          title: translate('Connect using DataInputAssociation'),
+          action: {
+            click: startConnect,
+            dragstart: startConnect
+          }
+        }
+      });
+    }
+
+    if (is$5(businessObject, 'bpmn:Group')) {
+      assign$1(actions, {
+        'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
+      });
+    }
+
+    // delete element entry, only show if allowed by rules
+    var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
+
+    if (isArray$3(deleteAllowed)) {
+
+      // was the element returned as a deletion candidate?
+      deleteAllowed = deleteAllowed[0] === element;
+    }
+
+    if (deleteAllowed) {
+      assign$1(actions, {
+        'delete': {
+          group: 'edit',
+          className: 'bpmn-icon-trash',
+          title: translate('Remove'),
+          action: {
+            click: removeElement
+          }
+        }
+      });
+    }
+
+    return actions;
+  };
+
+
+  // helpers /////////
+
+  function isEventType(eventBo, type, definition) {
+
+    var isType = eventBo.$instanceOf(type);
+    var isDefinition = false;
+
+    var definitions = eventBo.eventDefinitions || [];
+    forEach$1(definitions, function(def) {
+      if (def.$type === definition) {
+        isDefinition = true;
+      }
+    });
+
+    return isType && isDefinition;
+  }
+
+  function includes$7(array, item) {
+    return array.indexOf(item) !== -1;
+  }
+
+  var ContextPadModule = {
+    __depends__: [
+      DirectEditingModule,
+      ContextPadModule$1,
+      SelectionModule,
+      ConnectModule,
+      CreateModule,
+      PopupMenuModule
+    ],
+    __init__: [ 'contextPadProvider' ],
+    contextPadProvider: [ 'type', ContextPadProvider ]
+  };
+
+  var TOGGLE_SELECTOR = '.djs-palette-toggle',
+      ENTRY_SELECTOR = '.entry',
+      ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR;
+
+  var PALETTE_PREFIX = 'djs-palette-',
+      PALETTE_SHOWN_CLS = 'shown',
+      PALETTE_OPEN_CLS = 'open',
+      PALETTE_TWO_COLUMN_CLS = 'two-column';
+
+  var DEFAULT_PRIORITY$1 = 1000;
+
+
+  /**
+   * A palette containing modeling elements.
+   */
+  function Palette(eventBus, canvas) {
+
+    this._eventBus = eventBus;
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('tool-manager.update', function(event) {
+      var tool = event.tool;
+
+      self.updateToolHighlight(tool);
+    });
+
+    eventBus.on('i18n.changed', function() {
+      self._update();
+    });
+
+    eventBus.on('diagram.init', function() {
+
+      self._diagramInitialized = true;
+
+      self._rebuild();
+    });
+  }
+
+  Palette.$inject = [ 'eventBus', 'canvas' ];
+
+
+  /**
+   * Register a provider with the palette
+   *
+   * @param  {number} [priority=1000]
+   * @param  {PaletteProvider} provider
+   *
+   * @example
+   * const paletteProvider = {
+   *   getPaletteEntries: function() {
+   *     return function(entries) {
+   *       return {
+   *         ...entries,
+   *         'entry-1': {
+   *           label: 'My Entry',
+   *           action: function() { alert("I have been clicked!"); }
+   *         }
+   *       };
+   *     }
+   *   }
+   * };
+   *
+   * palette.registerProvider(800, paletteProvider);
+   */
+  Palette.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$1;
+    }
+
+    this._eventBus.on('palette.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+
+    this._rebuild();
+  };
+
+
+  /**
+   * Returns the palette entries
+   *
+   * @return {Object<string, PaletteEntryDescriptor>} map of entries
+   */
+  Palette.prototype.getEntries = function() {
+    var providers = this._getProviders();
+
+    return providers.reduce(addPaletteEntries, {});
+  };
+
+  Palette.prototype._rebuild = function() {
+
+    if (!this._diagramInitialized) {
+      return;
+    }
+
+    var providers = this._getProviders();
+
+    if (!providers.length) {
+      return;
+    }
+
+    if (!this._container) {
+      this._init();
+    }
+
+    this._update();
+  };
+
+  /**
+   * Initialize
+   */
+  Palette.prototype._init = function() {
+
+    var self = this;
+
+    var eventBus = this._eventBus;
+
+    var parentContainer = this._getParentContainer();
+
+    var container = this._container = domify$1(Palette.HTML_MARKUP);
+
+    parentContainer.appendChild(container);
+    classes$1(parentContainer).add(PALETTE_PREFIX + PALETTE_SHOWN_CLS);
+
+    delegate.bind(container, ELEMENT_SELECTOR, 'click', function(event) {
+
+      var target = event.delegateTarget;
+
+      if (matches(target, TOGGLE_SELECTOR)) {
+        return self.toggle();
+      }
+
+      self.trigger('click', event);
+    });
+
+    // prevent drag propagation
+    event.bind(container, 'mousedown', function(event) {
+      event.stopPropagation();
+    });
+
+    // prevent drag propagation
+    delegate.bind(container, ENTRY_SELECTOR, 'dragstart', function(event) {
+      self.trigger('dragstart', event);
+    });
+
+    eventBus.on('canvas.resized', this._layoutChanged, this);
+
+    eventBus.fire('palette.create', {
+      container: container
+    });
+  };
+
+  Palette.prototype._getProviders = function(id) {
+
+    var event = this._eventBus.createEvent({
+      type: 'palette.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Update palette state.
+   *
+   * @param  {Object} [state] { open, twoColumn }
+   */
+  Palette.prototype._toggleState = function(state) {
+
+    state = state || {};
+
+    var parent = this._getParentContainer(),
+        container = this._container;
+
+    var eventBus = this._eventBus;
+
+    var twoColumn;
+
+    var cls = classes$1(container),
+        parentCls = classes$1(parent);
+
+    if ('twoColumn' in state) {
+      twoColumn = state.twoColumn;
+    } else {
+      twoColumn = this._needsCollapse(parent.clientHeight, this._entries || {});
+    }
+
+    // always update two column
+    cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
+    parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);
+
+    if ('open' in state) {
+      cls.toggle(PALETTE_OPEN_CLS, state.open);
+      parentCls.toggle(PALETTE_PREFIX + PALETTE_OPEN_CLS, state.open);
+    }
+
+    eventBus.fire('palette.changed', {
+      twoColumn: twoColumn,
+      open: this.isOpen()
+    });
+  };
+
+  Palette.prototype._update = function() {
+
+    var entriesContainer = query('.djs-palette-entries', this._container),
+        entries = this._entries = this.getEntries();
+
+    clear$1(entriesContainer);
+
+    forEach$1(entries, function(entry, id) {
+
+      var grouping = entry.group || 'default';
+
+      var container = query('[data-group=' + cssEscape(grouping) + ']', entriesContainer);
+      if (!container) {
+        container = domify$1('<div class="group"></div>');
+        attr$1(container, 'data-group', grouping);
+
+        entriesContainer.appendChild(container);
+      }
+
+      var html = entry.html || (
+        entry.separator ?
+          '<hr class="separator" />' :
+          '<div class="entry" draggable="true"></div>');
+
+
+      var control = domify$1(html);
+      container.appendChild(control);
+
+      if (!entry.separator) {
+        attr$1(control, 'data-action', id);
+
+        if (entry.title) {
+          attr$1(control, 'title', entry.title);
+        }
+
+        if (entry.className) {
+          addClasses(control, entry.className);
+        }
+
+        if (entry.imageUrl) {
+          var image = domify$1('<img>');
+          attr$1(image, 'src', entry.imageUrl);
+
+          control.appendChild(image);
+        }
+      }
+    });
+
+    // open after update
+    this.open();
+  };
+
+
+  /**
+   * Trigger an action available on the palette
+   *
+   * @param  {string} action
+   * @param  {Event} event
+   */
+  Palette.prototype.trigger = function(action, event, autoActivate) {
+    var entry,
+        originalEvent,
+        button = event.delegateTarget || event.target;
+
+    if (!button) {
+      return event.preventDefault();
+    }
+
+    entry = attr$1(button, 'data-action');
+    originalEvent = event.originalEvent || event;
+
+    return this.triggerEntry(entry, action, originalEvent, autoActivate);
+  };
+
+  Palette.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
+    var entries = this._entries,
+        entry,
+        handler;
+
+    entry = entries[entryId];
+
+    // when user clicks on the palette and not on an action
+    if (!entry) {
+      return;
+    }
+
+    handler = entry.action;
+
+    // simple action (via callback function)
+    if (isFunction(handler)) {
+      if (action === 'click') {
+        return handler(event, autoActivate);
+      }
+    } else {
+      if (handler[action]) {
+        return handler[action](event, autoActivate);
+      }
+    }
+
+    // silence other actions
+    event.preventDefault();
+  };
+
+  Palette.prototype._layoutChanged = function() {
+    this._toggleState({});
+  };
+
+  /**
+   * Do we need to collapse to two columns?
+   *
+   * @param {number} availableHeight
+   * @param {Object} entries
+   *
+   * @return {boolean}
+   */
+  Palette.prototype._needsCollapse = function(availableHeight, entries) {
+
+    // top margin + bottom toggle + bottom margin
+    // implementors must override this method if they
+    // change the palette styles
+    var margin = 20 + 10 + 20;
+
+    var entriesHeight = Object.keys(entries).length * 46;
+
+    return availableHeight < entriesHeight + margin;
+  };
+
+  /**
+   * Close the palette
+   */
+  Palette.prototype.close = function() {
+
+    this._toggleState({
+      open: false,
+      twoColumn: false
+    });
+  };
+
+
+  /**
+   * Open the palette
+   */
+  Palette.prototype.open = function() {
+    this._toggleState({ open: true });
+  };
+
+
+  Palette.prototype.toggle = function(open) {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  Palette.prototype.isActiveTool = function(tool) {
+    return tool && this._activeTool === tool;
+  };
+
+  Palette.prototype.updateToolHighlight = function(name) {
+    var entriesContainer,
+        toolsContainer;
+
+    if (!this._toolsContainer) {
+      entriesContainer = query('.djs-palette-entries', this._container);
+
+      this._toolsContainer = query('[data-group=tools]', entriesContainer);
+    }
+
+    toolsContainer = this._toolsContainer;
+
+    forEach$1(toolsContainer.children, function(tool) {
+      var actionName = tool.getAttribute('data-action');
+
+      if (!actionName) {
+        return;
+      }
+
+      var toolClasses = classes$1(tool);
+
+      actionName = actionName.replace('-tool', '');
+
+      if (toolClasses.contains('entry') && actionName === name) {
+        toolClasses.add('highlighted-entry');
+      } else {
+        toolClasses.remove('highlighted-entry');
+      }
+    });
+  };
+
+
+  /**
+   * Return true if the palette is opened.
+   *
+   * @example
+   *
+   * palette.open();
+   *
+   * if (palette.isOpen()) {
+   *   // yes, we are open
+   * }
+   *
+   * @return {boolean} true if palette is opened
+   */
+  Palette.prototype.isOpen = function() {
+    return classes$1(this._container).has(PALETTE_OPEN_CLS);
+  };
+
+  /**
+   * Get container the palette lives in.
+   *
+   * @return {Element}
+   */
+  Palette.prototype._getParentContainer = function() {
+    return this._canvas.getContainer();
+  };
+
+
+  /* markup definition */
+
+  Palette.HTML_MARKUP =
+    '<div class="djs-palette">' +
+      '<div class="djs-palette-entries"></div>' +
+      '<div class="djs-palette-toggle"></div>' +
+    '</div>';
+
+
+  // helpers //////////////////////
+
+  function addClasses(element, classNames) {
+
+    var classes = classes$1(element);
+
+    var actualClassNames = isArray$3(classNames) ? classNames : classNames.split(/\s+/g);
+    actualClassNames.forEach(function(cls) {
+      classes.add(cls);
+    });
+  }
+
+  function addPaletteEntries(entries, provider) {
+
+    var entriesOrUpdater = provider.getPaletteEntries();
+
+    if (isFunction(entriesOrUpdater)) {
+      return entriesOrUpdater(entries);
+    }
+
+    forEach$1(entriesOrUpdater, function(entry, id) {
+      entries[id] = entry;
+    });
+
+    return entries;
+  }
+
+  var PaletteModule$1 = {
+    __init__: [ 'palette' ],
+    palette: [ 'type', Palette ]
+  };
+
+  var EVENT_GROUP = {
+    id: 'events',
+    name: 'Events'
+  };
+
+  var TASK_GROUP = {
+    id: 'tasks',
+    name: 'Tasks'
+  };
+
+  var DATA_GROUP = {
+    id: 'data',
+    name: 'Data'
+  };
+
+  var PARTICIPANT_GROUP = {
+    id: 'participants',
+    name: 'Participants'
+  };
+
+  var SUBPROCESS_GROUP = {
+    id: 'subprocess',
+    name: 'Sub Processes'
+  };
+
+  var GATEWAY_GROUP = {
+    id: 'gateways',
+    name: 'Gateways'
+  };
+
+  var NONE_EVENTS = [
+    {
+      label: 'Start Event',
+      actionName: 'none-start-event',
+      className: 'bpmn-icon-start-event-none',
+      target: {
+        type: 'bpmn:StartEvent'
+      }
+    },
+    {
+      label: 'Intermediate Throw Event',
+      actionName: 'none-intermediate-throwing',
+      className: 'bpmn-icon-intermediate-event-none',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent'
+      }
+    },
+    {
+      label: 'Boundary Event',
+      actionName: 'none-boundary-event',
+      className: 'bpmn-icon-intermediate-event-none',
+      target: {
+        type: 'bpmn:BoundaryEvent'
+      }
+    },
+    {
+      label: 'End Event',
+      actionName: 'none-end-event',
+      className: 'bpmn-icon-end-event-none',
+      target: {
+        type: 'bpmn:EndEvent'
+      }
+    }
+  ].map(option => ({ ...option, group: EVENT_GROUP }));
+
+  var TYPED_START_EVENTS = [
+    {
+      label: 'Message Start Event',
+      actionName: 'message-start',
+      className: 'bpmn-icon-start-event-message',
+      target: {
+        type: 'bpmn:StartEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition'
+      }
+    },
+    {
+      label: 'Timer Start Event',
+      actionName: 'timer-start',
+      className: 'bpmn-icon-start-event-timer',
+      target: {
+        type: 'bpmn:StartEvent',
+        eventDefinitionType: 'bpmn:TimerEventDefinition'
+      }
+    },
+    {
+      label: 'Conditional Start Event',
+      actionName: 'conditional-start',
+      className: 'bpmn-icon-start-event-condition',
+      target: {
+        type: 'bpmn:StartEvent',
+        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+      }
+    },
+    {
+      label: 'Signal Start Event',
+      actionName: 'signal-start',
+      className: 'bpmn-icon-start-event-signal',
+      target: {
+        type: 'bpmn:StartEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition'
+      }
+    }
+  ].map(option => ({ ...option, group: EVENT_GROUP }));
+
+  var TYPED_INTERMEDIATE_EVENT = [
+    {
+      label: 'Message Intermediate Catch Event',
+      actionName: 'message-intermediate-catch',
+      className: 'bpmn-icon-intermediate-event-catch-message',
+      target: {
+        type: 'bpmn:IntermediateCatchEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition'
+      }
+    },
+    {
+      label: 'Message Intermediate Throw Event',
+      actionName: 'message-intermediate-throw',
+      className: 'bpmn-icon-intermediate-event-throw-message',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition'
+      }
+    },
+    {
+      label: 'Timer Intermediate Catch Event',
+      actionName: 'timer-intermediate-catch',
+      className: 'bpmn-icon-intermediate-event-catch-timer',
+      target: {
+        type: 'bpmn:IntermediateCatchEvent',
+        eventDefinitionType: 'bpmn:TimerEventDefinition'
+      }
+    },
+    {
+      label: 'Escalation Intermediate Throw Event',
+      actionName: 'escalation-intermediate-throw',
+      className: 'bpmn-icon-intermediate-event-throw-escalation',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent',
+        eventDefinitionType: 'bpmn:EscalationEventDefinition'
+      }
+    },
+    {
+      label: 'Conditional Intermediate Catch Event',
+      actionName: 'conditional-intermediate-catch',
+      className: 'bpmn-icon-intermediate-event-catch-condition',
+      target: {
+        type: 'bpmn:IntermediateCatchEvent',
+        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+      }
+    },
+    {
+      label: 'Link Intermediate Catch Event',
+      actionName: 'link-intermediate-catch',
+      className: 'bpmn-icon-intermediate-event-catch-link',
+      target: {
+        type: 'bpmn:IntermediateCatchEvent',
+        eventDefinitionType: 'bpmn:LinkEventDefinition',
+        eventDefinitionAttrs: {
+          name: ''
+        }
+      }
+    },
+    {
+      label: 'Link Intermediate Throw Event',
+      actionName: 'link-intermediate-throw',
+      className: 'bpmn-icon-intermediate-event-throw-link',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent',
+        eventDefinitionType: 'bpmn:LinkEventDefinition',
+        eventDefinitionAttrs: {
+          name: ''
+        }
+      }
+    },
+    {
+      label: 'Compensation Intermediate Throw Event',
+      actionName: 'compensation-intermediate-throw',
+      className: 'bpmn-icon-intermediate-event-throw-compensation',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent',
+        eventDefinitionType: 'bpmn:CompensateEventDefinition'
+      }
+    },
+    {
+      label: 'Signal Intermediate Catch Event',
+      actionName: 'signal-intermediate-catch',
+      className: 'bpmn-icon-intermediate-event-catch-signal',
+      target: {
+        type: 'bpmn:IntermediateCatchEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition'
+      }
+    },
+    {
+      label: 'Signal Intermediate Throw Event',
+      actionName: 'signal-intermediate-throw',
+      className: 'bpmn-icon-intermediate-event-throw-signal',
+      target: {
+        type: 'bpmn:IntermediateThrowEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition'
+      }
+    }
+  ].map(option => ({ ...option, group: EVENT_GROUP }));
+
+  var TYPED_BOUNDARY_EVENT = [
+    {
+      label: 'Message Boundary Event',
+      actionName: 'message-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-message',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition'
+      }
+    },
+    {
+      label: 'Timer Boundary Event',
+      actionName: 'timer-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-timer',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:TimerEventDefinition'
+      }
+    },
+    {
+      label: 'Escalation Boundary Event',
+      actionName: 'escalation-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-escalation',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:EscalationEventDefinition'
+      }
+    },
+    {
+      label: 'Conditional Boundary Event',
+      actionName: 'conditional-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-condition',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+      }
+    },
+    {
+      label: 'Error Boundary Event',
+      actionName: 'error-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-error',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:ErrorEventDefinition'
+      }
+    },
+    {
+      label: 'Cancel Boundary Event',
+      actionName: 'cancel-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-cancel',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:CancelEventDefinition'
+      }
+    },
+    {
+      label: 'Signal Boundary Event',
+      actionName: 'signal-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-signal',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition'
+      }
+    },
+    {
+      label: 'Compensation Boundary Event',
+      actionName: 'compensation-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-compensation',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:CompensateEventDefinition'
+      }
+    },
+    {
+      label: 'Message Boundary Event (non-interrupting)',
+      actionName: 'non-interrupting-message-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-message',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition',
+        cancelActivity: false
+      }
+    },
+    {
+      label: 'Timer Boundary Event (non-interrupting)',
+      actionName: 'non-interrupting-timer-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-timer',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:TimerEventDefinition',
+        cancelActivity: false
+      }
+    },
+    {
+      label: 'Escalation Boundary Event (non-interrupting)',
+      actionName: 'non-interrupting-escalation-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-escalation',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:EscalationEventDefinition',
+        cancelActivity: false
+      }
+    },
+    {
+      label: 'Conditional Boundary Event (non-interrupting)',
+      actionName: 'non-interrupting-conditional-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-condition',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+        cancelActivity: false
+      }
+    },
+    {
+      label: 'Signal Boundary Event (non-interrupting)',
+      actionName: 'non-interrupting-signal-boundary',
+      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-signal',
+      target: {
+        type: 'bpmn:BoundaryEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition',
+        cancelActivity: false
+      }
+    }
+  ].map(option => ({ ...option, group: EVENT_GROUP }));
+
+  var TYPED_END_EVENT = [
+    {
+      label: 'Message End Event',
+      actionName: 'message-end',
+      className: 'bpmn-icon-end-event-message',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:MessageEventDefinition'
+      }
+    },
+    {
+      label: 'Escalation End Event',
+      actionName: 'escalation-end',
+      className: 'bpmn-icon-end-event-escalation',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:EscalationEventDefinition'
+      }
+    },
+    {
+      label: 'Error End Event',
+      actionName: 'error-end',
+      className: 'bpmn-icon-end-event-error',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:ErrorEventDefinition'
+      }
+    },
+    {
+      label: 'Cancel End Event',
+      actionName: 'cancel-end',
+      className: 'bpmn-icon-end-event-cancel',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:CancelEventDefinition'
+      }
+    },
+    {
+      label: 'Compensation End Event',
+      actionName: 'compensation-end',
+      className: 'bpmn-icon-end-event-compensation',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:CompensateEventDefinition'
+      }
+    },
+    {
+      label: 'Signal End Event',
+      actionName: 'signal-end',
+      className: 'bpmn-icon-end-event-signal',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:SignalEventDefinition'
+      }
+    },
+    {
+      label: 'Terminate End Event',
+      actionName: 'terminate-end',
+      className: 'bpmn-icon-end-event-terminate',
+      target: {
+        type: 'bpmn:EndEvent',
+        eventDefinitionType: 'bpmn:TerminateEventDefinition'
+      }
+    }
+  ].map(option => ({ ...option, group: EVENT_GROUP }));
+
+  var GATEWAY = [
+    {
+      label: 'Exclusive Gateway',
+      actionName: 'exclusive-gateway',
+      className: 'bpmn-icon-gateway-xor',
+      target: {
+        type: 'bpmn:ExclusiveGateway'
+      }
+    },
+    {
+      label: 'Parallel Gateway',
+      actionName: 'parallel-gateway',
+      className: 'bpmn-icon-gateway-parallel',
+      target: {
+        type: 'bpmn:ParallelGateway'
+      }
+    },
+    {
+      label: 'Inclusive Gateway',
+      search: 'or',
+      actionName: 'inclusive-gateway',
+      className: 'bpmn-icon-gateway-or',
+      target: {
+        type: 'bpmn:InclusiveGateway'
+      },
+      rank: -1
+    },
+    {
+      label: 'Complex Gateway',
+      actionName: 'complex-gateway',
+      className: 'bpmn-icon-gateway-complex',
+      target: {
+        type: 'bpmn:ComplexGateway'
+      },
+      rank: -1
+    },
+    {
+      label: 'Event based Gateway',
+      actionName: 'event-based-gateway',
+      className: 'bpmn-icon-gateway-eventbased',
+      target: {
+        type: 'bpmn:EventBasedGateway',
+        instantiate: false,
+        eventGatewayType: 'Exclusive'
+      }
+    }
+  ].map(option => ({ ...option, group: GATEWAY_GROUP }));
+
+  var SUBPROCESS = [
+    {
+      label: 'Transaction',
+      actionName: 'transaction',
+      className: 'bpmn-icon-transaction',
+      target: {
+        type: 'bpmn:Transaction',
+        isExpanded: true
+      }
+    },
+    {
+      label: 'Event Sub Process',
+      search: 'subprocess',
+      actionName: 'event-subprocess',
+      className: 'bpmn-icon-event-subprocess-expanded',
+      target: {
+        type: 'bpmn:SubProcess',
+        triggeredByEvent: true,
+        isExpanded: true
+      }
+    },
+    {
+      label: 'Sub Process (collapsed)',
+      search: 'subprocess',
+      actionName: 'collapsed-subprocess',
+      className: 'bpmn-icon-subprocess-collapsed',
+      target: {
+        type: 'bpmn:SubProcess',
+        isExpanded: false
+      }
+    },
+    {
+      label: 'Sub Process (expanded)',
+      search: 'subprocess',
+      actionName: 'expanded-subprocess',
+      className: 'bpmn-icon-subprocess-collapsed',
+      target: {
+        type: 'bpmn:SubProcess',
+        isExpanded: true
+      }
+    }
+  ].map(option => ({ ...option, group: SUBPROCESS_GROUP }));
+
+  var TASK = [
+    {
+      label: 'Task',
+      actionName: 'task',
+      className: 'bpmn-icon-task',
+      target: {
+        type: 'bpmn:Task'
+      }
+    },
+    {
+      label: 'User Task',
+      actionName: 'user-task',
+      className: 'bpmn-icon-user',
+      target: {
+        type: 'bpmn:UserTask'
+      }
+    },
+    {
+      label: 'Service Task',
+      actionName: 'service-task',
+      className: 'bpmn-icon-service',
+      target: {
+        type: 'bpmn:ServiceTask'
+      }
+    },
+    {
+      label: 'Send Task',
+      actionName: 'send-task',
+      className: 'bpmn-icon-send',
+      target: {
+        type: 'bpmn:SendTask'
+      },
+      rank: -1
+    },
+    {
+      label: 'Receive Task',
+      actionName: 'receive-task',
+      className: 'bpmn-icon-receive',
+      target: {
+        type: 'bpmn:ReceiveTask'
+      },
+      rank: -1
+    },
+    {
+      label: 'Manual Task',
+      actionName: 'manual-task',
+      className: 'bpmn-icon-manual',
+      target: {
+        type: 'bpmn:ManualTask'
+      },
+      rank: -1
+    },
+    {
+      label: 'Business Rule Task',
+      actionName: 'rule-task',
+      className: 'bpmn-icon-business-rule',
+      target: {
+        type: 'bpmn:BusinessRuleTask'
+      }
+    },
+    {
+      label: 'Script Task',
+      actionName: 'script-task',
+      className: 'bpmn-icon-script',
+      target: {
+        type: 'bpmn:ScriptTask'
+      }
+    },
+    {
+      label: 'Call Activity',
+      actionName: 'call-activity',
+      className: 'bpmn-icon-call-activity',
+      target: {
+        type: 'bpmn:CallActivity'
+      }
+    }
+  ].map(option => ({ ...option, group: TASK_GROUP }));
+
+  var DATA_OBJECTS = [
+    {
+      label: 'Data Store Reference',
+      actionName: 'data-store-reference',
+      className: 'bpmn-icon-data-store',
+      target: {
+        type: 'bpmn:DataStoreReference'
+      }
+    },
+    {
+      label: 'Data Object Reference',
+      actionName: 'data-object-reference',
+      className: 'bpmn-icon-data-object',
+      target: {
+        type: 'bpmn:DataObjectReference'
+      }
+    }
+  ].map(option => ({ ...option, group: DATA_GROUP }));
+
+  var PARTICIPANT = [
+    {
+      label: 'Expanded Pool',
+      search: 'Participant',
+      actionName: 'expanded-pool',
+      className: 'bpmn-icon-participant',
+      target: {
+        type: 'bpmn:Participant',
+        isExpanded: true
+      }
+    },
+    {
+      label: 'Empty Pool',
+      search: 'Collapsed Participant',
+      actionName: 'collapsed-pool',
+      className: 'bpmn-icon-lane',
+      target: {
+        type: 'bpmn:Participant',
+        isExpanded: false
+      }
+    }
+  ].map(option => ({ ...option, group: PARTICIPANT_GROUP }));
+
+  var CREATE_OPTIONS = [
+    ...GATEWAY,
+    ...TASK,
+    ...SUBPROCESS,
+    ...NONE_EVENTS,
+    ...TYPED_START_EVENTS,
+    ...TYPED_INTERMEDIATE_EVENT,
+    ...TYPED_END_EVENT,
+    ...TYPED_BOUNDARY_EVENT,
+    ...DATA_OBJECTS,
+    ...PARTICIPANT
+  ];
+
+  /**
+   * This module is a create menu provider for the popup menu.
+   */
+  function CreateMenuProvider(
+      elementFactory, popupMenu, create,
+      autoPlace, mouse, translate
+  ) {
+    this._elementFactory = elementFactory;
+    this._popupMenu = popupMenu;
+    this._create = create;
+    this._autoPlace = autoPlace;
+    this._mouse = mouse;
+    this._translate = translate;
+
+    this.register();
+  }
+
+  CreateMenuProvider.$inject = [
+    'elementFactory',
+    'popupMenu',
+    'create',
+    'autoPlace',
+    'mouse',
+    'translate'
+  ];
+
+  /**
+   * Register create menu provider in the popup menu
+   */
+  CreateMenuProvider.prototype.register = function() {
+    this._popupMenu.registerProvider('bpmn-create', this);
+  };
+
+  /**
+   * Get all entries
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {Array<Object>} a list of menu entry items
+   */
+  CreateMenuProvider.prototype.getPopupMenuEntries = function() {
+
+    const entries = {};
+
+    // map options to menu entries
+    CREATE_OPTIONS.forEach(option => {
+      const {
+        actionName,
+        className,
+        label,
+        target,
+        description,
+        group,
+        search,
+        rank
+      } = option;
+
+      const targetAction = this._createEntryAction(target);
+
+      entries[`create-${actionName}`] = {
+        label: label && this._translate(label),
+        className,
+        description,
+        group: group && {
+          ...group,
+          name: this._translate(group.name)
+        },
+        search,
+        rank,
+        action: {
+          click: targetAction,
+          dragstart: targetAction
+        }
+      };
+    });
+
+    return entries;
+  };
+
+  /**
+   * Create an action for a given target
+   *
+   * @param {Object} target
+   * @returns {Object}
+   */
+  CreateMenuProvider.prototype._createEntryAction = function(target) {
+
+    const create = this._create;
+    const mouse = this._mouse;
+    const popupMenu = this._popupMenu;
+    const elementFactory = this._elementFactory;
+
+    let newElement;
+
+    return (event) => {
+      popupMenu.close();
+
+      // create the new element
+      if (target.type === 'bpmn:Participant') {
+        newElement = elementFactory.createParticipantShape(target);
+      } else {
+        newElement = elementFactory.create('shape', target);
+      }
+
+      // use last mouse event if triggered via keyboard
+      if (event instanceof KeyboardEvent) {
+        event = mouse.getLastMoveEvent();
+      }
+
+      return create.start(event, newElement);
+    };
+  };
+
+  /**
+   * 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';
+
+  /**
+   * A palette provider for the create elements menu.
+   */
+  function CreatePaletteProvider(palette, translate, popupMenu, canvas, mouse) {
+    this._translate = translate;
+    this._popupMenu = popupMenu;
+    this._canvas = canvas;
+    this._mouse = mouse;
+
+    palette.registerProvider(this);
+  }
+
+  CreatePaletteProvider.$inject = [
+    'palette',
+    'translate',
+    'popupMenu',
+    'canvas',
+    'mouse'
+  ];
+
+
+  CreatePaletteProvider.prototype.getPaletteEntries = function(element) {
+    const actions = {},
+          translate = this._translate,
+          popupMenu = this._popupMenu,
+          canvas = this._canvas,
+          mouse = this._mouse;
+
+    const getPosition = (event) => {
+      const X_OFFSET = 35;
+      const Y_OFFSET = 10;
+
+      if (event instanceof KeyboardEvent) {
+        event = mouse.getLastMoveEvent();
+        return { x: event.x, y: event.y };
+      }
+
+      const target = event && event.target || query('.djs-palette [data-action="create"]');
+      const targetPosition = target.getBoundingClientRect();
+
+      return target && {
+        x: targetPosition.left + targetPosition.width / 2 + X_OFFSET,
+        y: targetPosition.top + targetPosition.height / 2 + Y_OFFSET
+      };
+    };
+
+    assign$1(actions, {
+      'create': {
+        group: 'create',
+        imageUrl: createIcon,
+        title: translate('Create element'),
+        action: {
+          click: function(event) {
+            const position = getPosition(event);
+
+            const element = canvas.getRootElement();
+
+            popupMenu.open(element, 'bpmn-create', position, {
+              title: translate('Create element'),
+              width: 300,
+              search: true
+            });
+          }
+        }
+      },
+    });
+
+    return actions;
+  };
+
+  /**
+   * Registers and executes BPMN specific editor actions.
+   *
+   * @param {Injector} injector
+   */
+  function CreateAppendEditorActions(injector) {
+    this._injector = injector;
+
+    this.registerActions();
+  }
+
+  CreateAppendEditorActions.$inject = [
+    'injector'
+  ];
+
+  /**
+   * Register actions.
+   *
+   * @param {Injector} injector
+   */
+  CreateAppendEditorActions.prototype.registerActions = function() {
+    var editorActions = this._injector.get('editorActions', false);
+    var selection = this._injector.get('selection', false);
+    var contextPad = this._injector.get('contextPad', false);
+    var palette = this._injector.get('palette', false);
+
+    const actions = {};
+
+    // append
+    if (selection && contextPad) {
+      assign$1(actions, {
+        'appendElement': function(event) {
+          contextPad.triggerEntry('append', 'click', event);
+        } }
+      );
+    }
+
+    // create
+    if (palette) {
+      assign$1(actions, {
+        'createElement': function(event) {
+          palette.triggerEntry('create', 'click', event);
+        } }
+      );
+    }
+
+    editorActions && editorActions.register(actions);
+
   };
 
   /**
-   * @param {djs.model.Base[]} elements
-   * @return {boolean}
+   * BPMN 2.0 specific keyboard bindings.
+   *
+   * @param {Injector} injector
    */
-  ContextPadProvider.prototype._isDeleteAllowed = function(elements) {
+  function CreateAppendKeyboardBindings(injector) {
 
-    var baseAllowed = this._rules.allowed('elements.delete', {
-      elements: elements
-    });
+    this._injector = injector;
+    this._keyboard = this._injector.get('keyboard', false);
+    this._editorActions = this._injector.get('editorActions', false);
+    this._selection = this._injector.get('selection', false);
 
-    if (isArray$3(baseAllowed)) {
-      return every(baseAllowed, function(element) {
-        return includes$7(baseAllowed, element);
-      });
+    if (this._keyboard) {
+      this._injector.invoke(KeyboardBindings, this);
     }
+  }
 
-    return baseAllowed;
-  };
+  e$6(CreateAppendKeyboardBindings, KeyboardBindings);
 
-  ContextPadProvider.prototype.getContextPadEntries = function(element) {
-    var contextPad = this._contextPad,
-        modeling = this._modeling,
+  CreateAppendKeyboardBindings.$inject = [
+    'injector'
+  ];
 
-        elementFactory = this._elementFactory,
-        connect = this._connect,
-        create = this._create,
-        popupMenu = this._popupMenu,
-        rules = this._rules,
-        autoPlace = this._autoPlace,
-        translate = this._translate;
 
-    var actions = {};
+  /**
+   * Register available keyboard bindings.
+   *
+   * @param {Keyboard} keyboard
+   * @param {EditorActions} editorActions
+   */
+  CreateAppendKeyboardBindings.prototype.registerBindings = function() {
 
-    if (element.type === 'label') {
-      return actions;
-    }
+    var keyboard = this._keyboard;
+    var editorActions = this._editorActions;
+    var selection = this._selection;
 
-    var businessObject = element.businessObject;
+    // inherit default bindings
+    KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
 
-    function startConnect(event, element) {
-      connect.start(event, element);
-    }
+    /**
+     * Add keyboard binding if respective editor action
+     * is registered.
+     *
+     * @param {string} action name
+     * @param {Function} fn that implements the key binding
+     */
+    function addListener(action, fn) {
 
-    function removeElement(e, element) {
-      modeling.removeElements([ element ]);
+      if (editorActions && editorActions.isRegistered(action)) {
+        keyboard && keyboard.addListener(fn);
+      }
     }
 
-    function getReplaceMenuPosition(element) {
+    // activate append/create element
+    // A
+    addListener('appendElement', function(context) {
 
-      var Y_OFFSET = 5;
+      var event = context.keyEvent;
 
-      var pad = contextPad.getPad(element).html;
+      if (keyboard && keyboard.hasModifier(event)) {
+        return;
+      }
 
-      var padRect = pad.getBoundingClientRect();
+      if (keyboard && keyboard.isKey([ 'a', 'A' ], event)) {
 
-      var pos = {
-        x: padRect.left,
-        y: padRect.bottom + Y_OFFSET
-      };
+        if (selection && selection.get().length == 1) {
+          editorActions && editorActions.trigger('appendElement', event);
+        } else {
+          editorActions && editorActions.trigger('createElement', event);
+        }
 
-      return pos;
-    }
+        return true;
+      }
+    });
 
+    // N
+    addListener('createElement', function(context) {
 
-    /**
-     * Create an append action
-     *
-     * @param {string} type
-     * @param {string} className
-     * @param {string} [title]
-     * @param {Object} [options]
-     *
-     * @return {Object} descriptor
-     */
-    function appendAction(type, className, title, options) {
+      var event = context.keyEvent;
 
-      if (typeof title !== 'string') {
-        options = title;
-        title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+      if (keyboard && keyboard.hasModifier(event)) {
+        return;
       }
 
-      function appendStart(event, element) {
+      if (keyboard && keyboard.isKey([ 'n', 'N' ], event)) {
+        editorActions && editorActions.trigger('createElement', event);
 
-        var shape = elementFactory.createShape(assign$1({ type: type }, options));
-        create.start(event, shape, {
-          source: element
-        });
+        return true;
       }
+    });
 
+  };
 
-      var append = autoPlace ? function(event, element) {
-        var shape = elementFactory.createShape(assign$1({ type: type }, options));
+  /**
+   * This module is an append menu provider for the popup menu.
+   */
+  function AppendMenuProvider(
+      elementFactory,
+      popupMenu,
+      create,
+      autoPlace,
+      rules,
+      mouse
+  ) {
+    this._elementFactory = elementFactory;
+    this._popupMenu = popupMenu;
+    this._create = create;
+    this._autoPlace = autoPlace;
+    this._rules = rules;
+    this._create = create;
+    this._mouse = mouse;
 
-        autoPlace.append(element, shape);
-      } : appendStart;
+    this.register();
+  }
+
+  AppendMenuProvider.$inject = [
+    'elementFactory',
+    'popupMenu',
+    'create',
+    'autoPlace',
+    'rules',
+    'mouse'
+  ];
 
+  /**
+   * Register append menu provider in the popup menu
+   */
+  AppendMenuProvider.prototype.register = function() {
+    this._popupMenu.registerProvider('bpmn-append', this);
+  };
 
-      return {
-        group: 'model',
-        className: className,
-        title: title,
-        action: {
-          dragstart: appendStart,
-          click: append
-        }
-      };
-    }
+  /**
+   * Get all entries from createOptions for the given element.
+   *
+   * @param {djs.model.Base} element
+   *
+   * @return {Array<Object>} a list of menu entry items
+   */
+  AppendMenuProvider.prototype.getPopupMenuEntries = function(element) {
+    const rules = this._rules;
+    const entries = {};
 
-    function splitLaneHandler(count) {
+    if (!rules.allowed('shape.append', { element: element })) {
+      return [];
+    }
 
-      return function(event, element) {
+    // filter out elements with no incoming connections
+    const appendOptions = this._filterEntries(CREATE_OPTIONS);
 
-        // actual split
-        modeling.splitLane(element, count);
+    // map options to menu entries
+    appendOptions.forEach(option => {
+      const {
+        actionName,
+        className,
+        label,
+        target,
+        description,
+        group,
+        search,
+        rank
+      } = option;
 
-        // refresh context pad after split to
-        // get rid of split icons
-        contextPad.open(element, true);
+      entries[`append-${actionName}`] = {
+        label,
+        className,
+        description,
+        group,
+        search,
+        rank,
+        action: this._createEntryAction(element, target)
       };
-    }
+    });
 
+    return entries;
+  };
 
-    if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
+  /**
+   * Filter out entries from the options.
+   *
+   * @param {Array<Object>} entries
+   *
+   * @return {Array<Object>} filtered entries
+   */
+  AppendMenuProvider.prototype._filterEntries = function(entries) {
+    return entries.filter(option => {
 
-      var childLanes = getChildLanes(element);
+      const target = option.target;
+      const {
+        type,
+        eventDefinitionType
+      } = target;
+
+      if ([
+        'bpmn:StartEvent',
+        'bpmn:Participant'
+      ].includes(type)) {
+        return false;
+      }
 
-      assign$1(actions, {
-        'lane-insert-above': {
-          group: 'lane-insert-above',
-          className: 'bpmn-icon-lane-insert-above',
-          title: translate('Add Lane above'),
-          action: {
-            click: function(event, element) {
-              modeling.addLane(element, 'top');
-            }
-          }
-        }
-      });
+      if (type === 'bpmn:BoundaryEvent' && isUndefined$2(eventDefinitionType)) {
+        return false;
+      }
 
-      if (childLanes.length < 2) {
+      return true;
+    });
+  };
 
-        if (element.height >= 120) {
-          assign$1(actions, {
-            'lane-divide-two': {
-              group: 'lane-divide',
-              className: 'bpmn-icon-lane-divide-two',
-              title: translate('Divide into two Lanes'),
-              action: {
-                click: splitLaneHandler(2)
-              }
-            }
-          });
-        }
+  /**
+   * Create an action for a given target.
+   *
+   * @param {djs.model.Base} element
+   * @param {Object} target
+   *
+   * @return {Object}
+   */
+  AppendMenuProvider.prototype._createEntryAction = function(element, target) {
+    const elementFactory = this._elementFactory;
+    const autoPlace = this._autoPlace;
+    const create = this._create;
+    const mouse = this._mouse;
 
-        if (element.height >= 180) {
-          assign$1(actions, {
-            'lane-divide-three': {
-              group: 'lane-divide',
-              className: 'bpmn-icon-lane-divide-three',
-              title: translate('Divide into three Lanes'),
-              action: {
-                click: splitLaneHandler(3)
-              }
-            }
-          });
-        }
+
+    const autoPlaceElement = () => {
+      const newElement = elementFactory.create('shape', target);
+      autoPlace.append(element, newElement);
+    };
+
+    const manualPlaceElement = (event) => {
+      const newElement = elementFactory.create('shape', target);
+
+      if (event instanceof KeyboardEvent) {
+        event = mouse.getLastMoveEvent();
       }
 
-      assign$1(actions, {
-        'lane-insert-below': {
-          group: 'lane-insert-below',
-          className: 'bpmn-icon-lane-insert-below',
-          title: translate('Add Lane below'),
-          action: {
-            click: function(event, element) {
-              modeling.addLane(element, 'bottom');
-            }
-          }
-        }
-      });
+      return create.start(event, newElement);
+    };
+
+    return {
+      click: this._canAutoPlaceElement(target) ? autoPlaceElement : manualPlaceElement,
+      dragstart: manualPlaceElement
+    };
+  };
+
+  /**
+   * Check if the element should be auto placed.
+   *
+   * @param {Object} target
+   *
+   * @return {Boolean}
+   */
+  AppendMenuProvider.prototype._canAutoPlaceElement = (target) => {
+    const { type } = target;
 
+    if (type === 'bpmn:BoundaryEvent') {
+      return false;
     }
 
-    if (is$5(businessObject, 'bpmn:FlowNode')) {
+    if (type === 'bpmn:SubProcess' && target.triggeredByEvent) {
+      return false;
+    }
 
-      if (is$5(businessObject, 'bpmn:EventBasedGateway')) {
+    if (type === 'bpmn:IntermediateCatchEvent' && target.eventDefinitionType === 'bpmn:LinkEventDefinition') {
+      return false;
+    }
 
-        assign$1(actions, {
-          'append.receive-task': appendAction(
-            'bpmn:ReceiveTask',
-            'bpmn-icon-receive-task',
-            translate('Append ReceiveTask')
-          ),
-          'append.message-intermediate-event': appendAction(
-            'bpmn:IntermediateCatchEvent',
-            'bpmn-icon-intermediate-event-catch-message',
-            translate('Append MessageIntermediateCatchEvent'),
-            { eventDefinitionType: 'bpmn:MessageEventDefinition' }
-          ),
-          'append.timer-intermediate-event': appendAction(
-            'bpmn:IntermediateCatchEvent',
-            'bpmn-icon-intermediate-event-catch-timer',
-            translate('Append TimerIntermediateCatchEvent'),
-            { eventDefinitionType: 'bpmn:TimerEventDefinition' }
-          ),
-          'append.condition-intermediate-event': appendAction(
-            'bpmn:IntermediateCatchEvent',
-            'bpmn-icon-intermediate-event-catch-condition',
-            translate('Append ConditionIntermediateCatchEvent'),
-            { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
-          ),
-          'append.signal-intermediate-event': appendAction(
-            'bpmn:IntermediateCatchEvent',
-            'bpmn-icon-intermediate-event-catch-signal',
-            translate('Append SignalIntermediateCatchEvent'),
-            { eventDefinitionType: 'bpmn:SignalEventDefinition' }
-          )
-        });
-      } else
+    return true;
+  };
 
-      if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
+  /**
+   * A provider for align elements context pad button
+   */
+  function AppendContextPadProvider(contextPad, popupMenu, translate, canvas) {
+    this._contextPad = contextPad;
+    this._popupMenu = popupMenu;
+    this._translate = translate;
+    this._canvas = canvas;
 
-        assign$1(actions, {
-          'append.compensation-activity':
-              appendAction(
-                'bpmn:Task',
-                'bpmn-icon-task',
-                translate('Append compensation activity'),
-                {
-                  isForCompensation: true
-                }
-              )
-        });
-      } else
+    contextPad.registerProvider(this);
+  }
 
-      if (!is$5(businessObject, 'bpmn:EndEvent') &&
-          !businessObject.isForCompensation &&
-          !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
-          !isEventSubProcess(businessObject)) {
+  AppendContextPadProvider.$inject = [
+    'contextPad',
+    'popupMenu',
+    'translate',
+    'canvas'
+  ];
 
-        assign$1(actions, {
-          'append.end-event': appendAction(
-            'bpmn:EndEvent',
-            'bpmn-icon-end-event-none',
-            translate('Append EndEvent')
-          ),
-          'append.gateway': appendAction(
-            'bpmn:ExclusiveGateway',
-            'bpmn-icon-gateway-none',
-            translate('Append Gateway')
-          ),
-          'append.append-task': appendAction(
-            'bpmn:Task',
-            'bpmn-icon-task',
-            translate('Append Task')
-          ),
-          'append.intermediate-event': appendAction(
-            'bpmn:IntermediateThrowEvent',
-            'bpmn-icon-intermediate-event-none',
-            translate('Append Intermediate/Boundary Event')
-          )
-        });
-      }
-    }
+  AppendContextPadProvider.prototype.getContextPadEntries = function(element) {
+    const popupMenu = this._popupMenu;
+    const translate = this._translate;
+    const getAppendMenuPosition = this._getAppendMenuPosition.bind(this);
 
-    if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    if (!popupMenu.isEmpty(element, 'bpmn-append')) {
 
       // Replace menu entry
-      assign$1(actions, {
-        'replace': {
-          group: 'edit',
-          className: 'bpmn-icon-screw-wrench',
-          title: translate('Change type'),
+      return {
+        'append': {
+          group: 'model',
+          imageUrl: appendIcon,
+          title: translate('Append element'),
           action: {
             click: function(event, element) {
 
-              var position = assign$1(getReplaceMenuPosition(element), {
+              var position = assign$1(getAppendMenuPosition(element), {
                 cursor: { x: event.x, y: event.y }
               });
 
-              popupMenu.open(element, 'bpmn-replace', position, {
-                title: translate('Change element'),
+              popupMenu.open(element, 'bpmn-append', position, {
+                title: translate('Append element'),
                 width: 300,
                 search: true
               });
             }
           }
         }
-      });
+      };
     }
+  };
 
-    if (is$5(businessObject, 'bpmn:SequenceFlow')) {
-      assign$1(actions, {
-        'append.text-annotation': appendAction(
-          'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
-        )
-      });
-    }
+  AppendContextPadProvider.prototype._getAppendMenuPosition = function(element) {
+    const contextPad = this._contextPad;
 
-    if (
-      isAny(businessObject, [
-        'bpmn:FlowNode',
-        'bpmn:InteractionNode',
-        'bpmn:DataObjectReference',
-        'bpmn:DataStoreReference',
-      ])
-    ) {
-      assign$1(actions, {
-        'append.text-annotation': appendAction(
-          'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
-        ),
+    const X_OFFSET = 5;
 
-        'connect': {
-          group: 'connect',
-          className: 'bpmn-icon-connection-multi',
-          title: translate(
-            'Connect using ' +
-              (businessObject.isForCompensation
-                ? ''
-                : 'Sequence/MessageFlow or ') +
-              'Association'
-          ),
-          action: {
-            click: startConnect,
-            dragstart: startConnect,
-          },
-        },
-      });
-    }
+    const pad = contextPad.getPad(element).html;
 
-    if (is$5(businessObject, 'bpmn:TextAnnotation')) {
-      assign$1(actions, {
-        'connect': {
-          group: 'connect',
-          className: 'bpmn-icon-connection-multi',
-          title: translate('Connect using Association'),
-          action: {
-            click: startConnect,
-            dragstart: startConnect,
-          },
-        },
-      });
-    }
+    const padRect = pad.getBoundingClientRect();
 
-    if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
-      assign$1(actions, {
-        'connect': {
-          group: 'connect',
-          className: 'bpmn-icon-connection-multi',
-          title: translate('Connect using DataInputAssociation'),
-          action: {
-            click: startConnect,
-            dragstart: startConnect
-          }
-        }
-      });
-    }
+    const pos = {
+      x: padRect.right + X_OFFSET,
+      y: padRect.top
+    };
 
-    if (is$5(businessObject, 'bpmn:Group')) {
-      assign$1(actions, {
-        'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
-      });
-    }
+    return pos;
+  };
 
-    // delete element entry, only show if allowed by rules
-    var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
+  /**
+   * Append anything modeling rules
+   */
+  function AppendRules(eventBus) {
+    RuleProvider.call(this, eventBus);
+  }
 
-    if (isArray$3(deleteAllowed)) {
+  e$6(AppendRules, RuleProvider);
 
-      // was the element returned as a deletion candidate?
-      deleteAllowed = deleteAllowed[0] === element;
-    }
+  AppendRules.$inject = [
+    'eventBus'
+  ];
 
-    if (deleteAllowed) {
-      assign$1(actions, {
-        'delete': {
-          group: 'edit',
-          className: 'bpmn-icon-trash',
-          title: translate('Remove'),
-          action: {
-            click: removeElement
-          }
-        }
-      });
-    }
+  AppendRules.prototype.init = function() {
+    this.addRule('shape.append', function(context) {
 
-    return actions;
-  };
+      var source = context.element;
 
+      const businessObject = getBusinessObject$1(source);
 
-  // helpers /////////
+      if (isLabel$6(source)) {
+        return false;
+      }
 
-  function isEventType(eventBo, type, definition) {
+      if (isAny(source, [
+        'bpmn:EndEvent',
+        'bpmn:Group',
+        'bpmn:TextAnnotation',
+        'bpmn:Lane',
+        'bpmn:Participant',
+        'bpmn:DataStoreReference',
+        'bpmn:DataObjectReference'
+      ])) {
+        return false;
+      }
 
-    var isType = eventBo.$instanceOf(type);
-    var isDefinition = false;
+      if (isConnection$c(source)) {
+        return false;
+      }
 
-    var definitions = eventBo.eventDefinitions || [];
-    forEach$1(definitions, function(def) {
-      if (def.$type === definition) {
-        isDefinition = true;
+      if (is$5(source, 'bpmn:IntermediateThrowEvent') && hasEventDefinition$1(source, 'bpmn:LinkEventDefinition')) {
+        return false;
+      }
+
+      if (is$5(source, 'bpmn:SubProcess') && businessObject.triggeredByEvent) {
+        return false;
       }
     });
 
-    return isType && isDefinition;
+  };
+
+
+  // helpers //////////////
+  function hasEventDefinition$1(element, eventDefinition) {
+    var bo = getBusinessObject$1(element);
+
+    return !!find$1(bo.eventDefinitions || [], function(definition) {
+      return is$5(definition, eventDefinition);
+    });
   }
 
-  function includes$7(array, item) {
-    return array.indexOf(item) !== -1;
+  function isConnection$c(element) {
+    return element.waypoints;
   }
 
-  var ContextPadModule = {
+  var CreateAppendAnythingModule = {
     __depends__: [
-      DirectEditingModule,
-      ContextPadModule$1,
-      SelectionModule,
-      ConnectModule,
-      CreateModule,
-      PopupMenuModule
+      PaletteModule$1,
+      PopupMenuModule$1,
+      AutoPlaceModule$1,
+      ContextPadModule$1
     ],
-    __init__: [ 'contextPadProvider' ],
-    contextPadProvider: [ 'type', ContextPadProvider ]
+    __init__: [
+      'createMenuProvider',
+      'createPaletteProvider',
+      'createAppendEditorActions',
+      'createAppendKeyboardBindings',
+      'appendMenuProvider',
+      'appendContextPadProvider',
+      'appendRules'
+    ],
+    createMenuProvider: [ 'type', CreateMenuProvider ],
+    createPaletteProvider: [ 'type', CreatePaletteProvider ],
+    createAppendEditorActions: [ 'type', CreateAppendEditorActions ],
+    createAppendKeyboardBindings: [ 'type', CreateAppendKeyboardBindings ],
+    appendMenuProvider: [ 'type', AppendMenuProvider ],
+    appendContextPadProvider: [ 'type', AppendContextPadProvider ],
+    appendRules: [ 'type', AppendRules ]
   };
 
   var AXIS_DIMENSIONS = {
@@ -46753,7 +48592,7 @@
     }
 
     return some(types, function(type) {
-      return hasEventDefinition$2(element, type);
+      return hasEventDefinition$3(element, type);
     });
   }
 
@@ -52711,6 +54550,16 @@
       di.isMarkerVisible = true;
     }
 
+    if (isDefined(attrs.triggeredByEvent)) {
+      businessObject.triggeredByEvent = attrs.triggeredByEvent;
+      delete attrs.triggeredByEvent;
+    }
+
+    if (isDefined(attrs.cancelActivity)) {
+      businessObject.cancelActivity = attrs.cancelActivity;
+      delete attrs.cancelActivity;
+    }
+
     var eventDefinitions,
         newEventDefinition;
 
@@ -58329,471 +60178,6 @@
     movePreview: [ 'type', MovePreview ]
   };
 
-  var TOGGLE_SELECTOR = '.djs-palette-toggle',
-      ENTRY_SELECTOR = '.entry',
-      ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR;
-
-  var PALETTE_PREFIX = 'djs-palette-',
-      PALETTE_SHOWN_CLS = 'shown',
-      PALETTE_OPEN_CLS = 'open',
-      PALETTE_TWO_COLUMN_CLS = 'two-column';
-
-  var DEFAULT_PRIORITY$1 = 1000;
-
-
-  /**
-   * A palette containing modeling elements.
-   */
-  function Palette(eventBus, canvas) {
-
-    this._eventBus = eventBus;
-    this._canvas = canvas;
-
-    var self = this;
-
-    eventBus.on('tool-manager.update', function(event) {
-      var tool = event.tool;
-
-      self.updateToolHighlight(tool);
-    });
-
-    eventBus.on('i18n.changed', function() {
-      self._update();
-    });
-
-    eventBus.on('diagram.init', function() {
-
-      self._diagramInitialized = true;
-
-      self._rebuild();
-    });
-  }
-
-  Palette.$inject = [ 'eventBus', 'canvas' ];
-
-
-  /**
-   * Register a provider with the palette
-   *
-   * @param  {number} [priority=1000]
-   * @param  {PaletteProvider} provider
-   *
-   * @example
-   * const paletteProvider = {
-   *   getPaletteEntries: function() {
-   *     return function(entries) {
-   *       return {
-   *         ...entries,
-   *         'entry-1': {
-   *           label: 'My Entry',
-   *           action: function() { alert("I have been clicked!"); }
-   *         }
-   *       };
-   *     }
-   *   }
-   * };
-   *
-   * palette.registerProvider(800, paletteProvider);
-   */
-  Palette.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$1;
-    }
-
-    this._eventBus.on('palette.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-
-    this._rebuild();
-  };
-
-
-  /**
-   * Returns the palette entries
-   *
-   * @return {Object<string, PaletteEntryDescriptor>} map of entries
-   */
-  Palette.prototype.getEntries = function() {
-    var providers = this._getProviders();
-
-    return providers.reduce(addPaletteEntries, {});
-  };
-
-  Palette.prototype._rebuild = function() {
-
-    if (!this._diagramInitialized) {
-      return;
-    }
-
-    var providers = this._getProviders();
-
-    if (!providers.length) {
-      return;
-    }
-
-    if (!this._container) {
-      this._init();
-    }
-
-    this._update();
-  };
-
-  /**
-   * Initialize
-   */
-  Palette.prototype._init = function() {
-
-    var self = this;
-
-    var eventBus = this._eventBus;
-
-    var parentContainer = this._getParentContainer();
-
-    var container = this._container = domify$1(Palette.HTML_MARKUP);
-
-    parentContainer.appendChild(container);
-    classes$1(parentContainer).add(PALETTE_PREFIX + PALETTE_SHOWN_CLS);
-
-    delegate.bind(container, ELEMENT_SELECTOR, 'click', function(event) {
-
-      var target = event.delegateTarget;
-
-      if (matches(target, TOGGLE_SELECTOR)) {
-        return self.toggle();
-      }
-
-      self.trigger('click', event);
-    });
-
-    // prevent drag propagation
-    event.bind(container, 'mousedown', function(event) {
-      event.stopPropagation();
-    });
-
-    // prevent drag propagation
-    delegate.bind(container, ENTRY_SELECTOR, 'dragstart', function(event) {
-      self.trigger('dragstart', event);
-    });
-
-    eventBus.on('canvas.resized', this._layoutChanged, this);
-
-    eventBus.fire('palette.create', {
-      container: container
-    });
-  };
-
-  Palette.prototype._getProviders = function(id) {
-
-    var event = this._eventBus.createEvent({
-      type: 'palette.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
-
-    return event.providers;
-  };
-
-  /**
-   * Update palette state.
-   *
-   * @param  {Object} [state] { open, twoColumn }
-   */
-  Palette.prototype._toggleState = function(state) {
-
-    state = state || {};
-
-    var parent = this._getParentContainer(),
-        container = this._container;
-
-    var eventBus = this._eventBus;
-
-    var twoColumn;
-
-    var cls = classes$1(container),
-        parentCls = classes$1(parent);
-
-    if ('twoColumn' in state) {
-      twoColumn = state.twoColumn;
-    } else {
-      twoColumn = this._needsCollapse(parent.clientHeight, this._entries || {});
-    }
-
-    // always update two column
-    cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
-    parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);
-
-    if ('open' in state) {
-      cls.toggle(PALETTE_OPEN_CLS, state.open);
-      parentCls.toggle(PALETTE_PREFIX + PALETTE_OPEN_CLS, state.open);
-    }
-
-    eventBus.fire('palette.changed', {
-      twoColumn: twoColumn,
-      open: this.isOpen()
-    });
-  };
-
-  Palette.prototype._update = function() {
-
-    var entriesContainer = query('.djs-palette-entries', this._container),
-        entries = this._entries = this.getEntries();
-
-    clear$1(entriesContainer);
-
-    forEach$1(entries, function(entry, id) {
-
-      var grouping = entry.group || 'default';
-
-      var container = query('[data-group=' + cssEscape(grouping) + ']', entriesContainer);
-      if (!container) {
-        container = domify$1('<div class="group"></div>');
-        attr$1(container, 'data-group', grouping);
-
-        entriesContainer.appendChild(container);
-      }
-
-      var html = entry.html || (
-        entry.separator ?
-          '<hr class="separator" />' :
-          '<div class="entry" draggable="true"></div>');
-
-
-      var control = domify$1(html);
-      container.appendChild(control);
-
-      if (!entry.separator) {
-        attr$1(control, 'data-action', id);
-
-        if (entry.title) {
-          attr$1(control, 'title', entry.title);
-        }
-
-        if (entry.className) {
-          addClasses(control, entry.className);
-        }
-
-        if (entry.imageUrl) {
-          var image = domify$1('<img>');
-          attr$1(image, 'src', entry.imageUrl);
-
-          control.appendChild(image);
-        }
-      }
-    });
-
-    // open after update
-    this.open();
-  };
-
-
-  /**
-   * Trigger an action available on the palette
-   *
-   * @param  {string} action
-   * @param  {Event} event
-   */
-  Palette.prototype.trigger = function(action, event, autoActivate) {
-    var entry,
-        originalEvent,
-        button = event.delegateTarget || event.target;
-
-    if (!button) {
-      return event.preventDefault();
-    }
-
-    entry = attr$1(button, 'data-action');
-    originalEvent = event.originalEvent || event;
-
-    return this.triggerEntry(entry, action, originalEvent, autoActivate);
-  };
-
-  Palette.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
-    var entries = this._entries,
-        entry,
-        handler;
-
-    entry = entries[entryId];
-
-    // when user clicks on the palette and not on an action
-    if (!entry) {
-      return;
-    }
-
-    handler = entry.action;
-
-    // simple action (via callback function)
-    if (isFunction(handler)) {
-      if (action === 'click') {
-        return handler(event, autoActivate);
-      }
-    } else {
-      if (handler[action]) {
-        return handler[action](event, autoActivate);
-      }
-    }
-
-    // silence other actions
-    event.preventDefault();
-  };
-
-  Palette.prototype._layoutChanged = function() {
-    this._toggleState({});
-  };
-
-  /**
-   * Do we need to collapse to two columns?
-   *
-   * @param {number} availableHeight
-   * @param {Object} entries
-   *
-   * @return {boolean}
-   */
-  Palette.prototype._needsCollapse = function(availableHeight, entries) {
-
-    // top margin + bottom toggle + bottom margin
-    // implementors must override this method if they
-    // change the palette styles
-    var margin = 20 + 10 + 20;
-
-    var entriesHeight = Object.keys(entries).length * 46;
-
-    return availableHeight < entriesHeight + margin;
-  };
-
-  /**
-   * Close the palette
-   */
-  Palette.prototype.close = function() {
-
-    this._toggleState({
-      open: false,
-      twoColumn: false
-    });
-  };
-
-
-  /**
-   * Open the palette
-   */
-  Palette.prototype.open = function() {
-    this._toggleState({ open: true });
-  };
-
-
-  Palette.prototype.toggle = function(open) {
-    if (this.isOpen()) {
-      this.close();
-    } else {
-      this.open();
-    }
-  };
-
-  Palette.prototype.isActiveTool = function(tool) {
-    return tool && this._activeTool === tool;
-  };
-
-  Palette.prototype.updateToolHighlight = function(name) {
-    var entriesContainer,
-        toolsContainer;
-
-    if (!this._toolsContainer) {
-      entriesContainer = query('.djs-palette-entries', this._container);
-
-      this._toolsContainer = query('[data-group=tools]', entriesContainer);
-    }
-
-    toolsContainer = this._toolsContainer;
-
-    forEach$1(toolsContainer.children, function(tool) {
-      var actionName = tool.getAttribute('data-action');
-
-      if (!actionName) {
-        return;
-      }
-
-      var toolClasses = classes$1(tool);
-
-      actionName = actionName.replace('-tool', '');
-
-      if (toolClasses.contains('entry') && actionName === name) {
-        toolClasses.add('highlighted-entry');
-      } else {
-        toolClasses.remove('highlighted-entry');
-      }
-    });
-  };
-
-
-  /**
-   * Return true if the palette is opened.
-   *
-   * @example
-   *
-   * palette.open();
-   *
-   * if (palette.isOpen()) {
-   *   // yes, we are open
-   * }
-   *
-   * @return {boolean} true if palette is opened
-   */
-  Palette.prototype.isOpen = function() {
-    return classes$1(this._container).has(PALETTE_OPEN_CLS);
-  };
-
-  /**
-   * Get container the palette lives in.
-   *
-   * @return {Element}
-   */
-  Palette.prototype._getParentContainer = function() {
-    return this._canvas.getContainer();
-  };
-
-
-  /* markup definition */
-
-  Palette.HTML_MARKUP =
-    '<div class="djs-palette">' +
-      '<div class="djs-palette-entries"></div>' +
-      '<div class="djs-palette-toggle"></div>' +
-    '</div>';
-
-
-  // helpers //////////////////////
-
-  function addClasses(element, classNames) {
-
-    var classes = classes$1(element);
-
-    var actualClassNames = isArray$3(classNames) ? classNames : classNames.split(/\s+/g);
-    actualClassNames.forEach(function(cls) {
-      classes.add(cls);
-    });
-  }
-
-  function addPaletteEntries(entries, provider) {
-
-    var entriesOrUpdater = provider.getPaletteEntries();
-
-    if (isFunction(entriesOrUpdater)) {
-      return entriesOrUpdater(entries);
-    }
-
-    forEach$1(entriesOrUpdater, function(entry, id) {
-      entries[id] = entry;
-    });
-
-    return entries;
-  }
-
-  var PaletteModule$1 = {
-    __init__: [ 'palette' ],
-    palette: [ 'type', Palette ]
-  };
-
   var LASSO_TOOL_CURSOR = 'crosshair';
 
 
@@ -61444,6 +62828,10 @@
     '</bpmn:definitions>';
 
 
+  /**
+   * @typedef { import('didi').ModuleDeclaration } Module
+   */
+
   /**
    * A modeler for BPMN 2.0 diagrams.
    *
@@ -61513,8 +62901,8 @@
    * @param {string|number} [options.width] the width of the viewer
    * @param {string|number} [options.height] the height of the viewer
    * @param {Object} [options.moddleExtensions] extension packages to provide
-   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+   * @param {Module[]} [options.modules] a list of modules to override the default modules
+   * @param {Module[]} [options.additionalModules] a list of modules to use with the default modules
    */
   function Modeler$2(options) {
     BaseModeler.call(this, options);
@@ -61574,6 +62962,7 @@
     ContextPadModule,
     CopyPasteModule,
     CreateModule,
+    CreateAppendAnythingModule,
     DistributeElementsModule,
     EditorActionsModule,
     GridSnappingModule,
@@ -87216,18 +88605,26 @@
     return `bio-properties-panel-${id}`;
   }
 
+  function resizeToContents(element) {
+    element.style.height = 'auto';
+
+    // a 2px pixel offset is required to prevent scrollbar from
+    // appearing on OS with a full length scroll bar (Windows/Linux)
+    element.style.height = `${element.scrollHeight + 2}px`;
+  }
   function TextArea(props) {
     const {
       id,
       label,
-      rows = 2,
       debounce,
       onInput,
       value = '',
       disabled,
       monospace,
       onFocus,
-      onBlur
+      onBlur,
+      autoResize,
+      rows = autoResize ? 1 : 2
     } = props;
     const [localValue, setLocalValue] = l$1(value);
     const ref = useShowEntryEvent(id);
@@ -87238,8 +88635,12 @@
     }, [onInput, debounce]);
     const handleInput = e => {
       handleInputCallback(e);
+      autoResize && resizeToContents(e.target);
       setLocalValue(e.target.value);
     };
+    h(() => {
+      autoResize && resizeToContents(ref.current);
+    }, []);
     y(() => {
       if (value === localValue) {
         return;
@@ -87257,7 +88658,7 @@
         id: prefixId$2(id),
         name: id,
         spellCheck: "false",
-        class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+        class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
@@ -87297,7 +88698,8 @@
       monospace,
       disabled,
       onFocus,
-      onBlur
+      onBlur,
+      autoResize
     } = props;
     const value = getValue(element);
     const error = useError(id);
@@ -87314,7 +88716,8 @@
         rows: rows,
         debounce: debounce,
         monospace: monospace,
-        disabled: disabled
+        disabled: disabled,
+        autoResize: autoResize
       }, element), error && o$1("div", {
         class: "bio-properties-panel-error",
         children: error
@@ -87681,6 +89084,16 @@
   }
 
 
+  /**
+   * Get a script from the business object
+   *
+   * @param {MoodleElement} element
+   * @returns {MoodleElement} the script object
+   */
+  function getScript(element) {
+    return (getElements$2(element, 'zeebe:Script') || [])[0];
+  }
+
   // helpers //////////
 
   function getElements$2(element, type, property) {
@@ -88109,13 +89522,14 @@
 
     minDash$1.forEach(elements, function(element) {
 
-      var calledDecision = getCalledDecision(element);
+      var baseElement = getCalledDecision(element) ||
+                        getScript(element);
 
-      if (!calledDecision) {
+      if (!baseElement) {
         return;
       }
 
-      var resultVariable = calledDecision.resultVariable;
+      var resultVariable = baseElement.resultVariable;
 
       if (resultVariable) {
         var newVariable = createProcessVariable$1(
@@ -92951,7 +94365,7 @@
     return [{
       id: 'name',
       component: Name$3,
-      isEdited: isEdited$1
+      isEdited: isEdited$2
     }];
   }
   function Name$3(props) {
@@ -92977,7 +94391,8 @@
       },
       getValue: element => {
         return element.businessObject.name;
-      }
+      },
+      autoResize: true
     };
 
     // (2) text annotations
@@ -93019,7 +94434,7 @@
     else if (is$5(element, 'bpmn:Participant')) {
       options.label = translate('Participant Name');
     }
-    return TextfieldEntry(options);
+    return TextAreaEntry(options);
   }
 
   // helpers ////////////////////////
@@ -93906,9 +95321,6 @@
     injector,
     namespace = 'camunda'
   }) {
-    if (namespace === 'zeebe' && !is$5(element, 'zeebe:PropertiesHolder')) {
-      return [];
-    }
     let businessObject = getRelevantBusinessObject(element);
 
     // do not offer for empty pools
@@ -93944,7 +95356,8 @@
         commandStack,
         element,
         namespace
-      })
+      }),
+      shouldSort: false
     };
   }
   function removeFactory$9({
@@ -93957,6 +95370,7 @@
       event.stopPropagation();
       const commands = [];
       const businessObject = getRelevantBusinessObject(element);
+      const extensionElements = businessObject.get('extensionElements');
       const properties = getProperties(businessObject, namespace);
       if (!properties) {
         return;
@@ -93976,8 +95390,6 @@
 
       // remove camunda:Properties if there are no properties anymore
       if (!values.length) {
-        const businessObject = getBusinessObject$1(element),
-          extensionElements = businessObject.get('extensionElements');
         commands.push({
           cmd: 'element.updateModdleProperties',
           context: {
@@ -94077,10 +95489,12 @@
     return 'values';
   }
   function getProperties(element, namespace = 'camunda') {
-    return getExtensionElementsList$1(getBusinessObject$1(element), `${namespace}:Properties`)[0];
+    const businessObject = getRelevantBusinessObject(element);
+    return getExtensionElementsList$1(businessObject, `${namespace}:Properties`)[0];
   }
   function getPropertiesList(element, namespace = 'camunda') {
-    const properties = getProperties(getBusinessObject$1(element), namespace);
+    const businessObject = getRelevantBusinessObject(element);
+    const properties = getProperties(businessObject, namespace);
     return properties && properties.get(getPropertyName(namespace));
   }