bpmn-js 11.1.0 → 11.2.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v11.1.0
+ * bpmn-js - bpmn-modeler v11.2.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-12-12
+ * Date: 2023-02-03
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -807,14 +807,17 @@
    * @return {Array<?>}
    */
 
-  var nativeToString = Object.prototype.toString;
-  var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+  const nativeToString = Object.prototype.toString;
+  const nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+
   function isUndefined$1(obj) {
     return obj === undefined;
   }
+
   function isArray$2(obj) {
     return nativeToString.call(obj) === '[object Array]';
   }
+
   /**
    * Return true, if target owns a property with the given key.
    *
@@ -823,10 +826,11 @@
    *
    * @return {Boolean}
    */
-
   function has(target, key) {
     return nativeHasOwnProperty.call(target, key);
   }
+
+
   /**
    * Iterate over collection; returning something
    * (non-undefined) will stop iteration.
@@ -836,19 +840,22 @@
    *
    * @return {Object} return result that stopped the iteration
    */
-
   function forEach(collection, iterator) {
-    var val, result;
+
+    let val,
+        result;
 
     if (isUndefined$1(collection)) {
       return;
     }
 
-    var convertKey = isArray$2(collection) ? toNum : identity;
+    const convertKey = isArray$2(collection) ? toNum : identity;
+
+    for (let key in collection) {
 
-    for (var key in collection) {
       if (has(collection, key)) {
         val = collection[key];
+
         result = iterator(val, convertKey(key));
 
         if (result === false) {
@@ -858,6 +865,7 @@
     }
   }
 
+
   function identity(arg) {
     return arg;
   }
@@ -2566,34 +2574,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 ];
+  }
+
+  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));
 
-    for (var i = 0, p; (p = points[i]); i++) {
-      result += p.x + ',' + p.y + ' ';
+        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;
   }
@@ -3254,65 +3356,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;
+    var points = Array.from(arguments).flat();
 
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
-
-    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
    *
@@ -4415,7 +4494,7 @@
    * @return {Point}
    */
   function getMid(element) {
-    if (isConnection$f(element)) {
+    if (isConnection$g(element)) {
       return getConnectionMid(element);
     }
 
@@ -4555,7 +4634,7 @@
     return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
   }
 
-  function isConnection$f(element) {
+  function isConnection$g(element) {
     return !!element.waypoints;
   }
 
@@ -17015,7 +17094,7 @@
     return element && !!getBusinessObject(element).triggeredByEvent;
   }
 
-  function hasEventDefinition$2(element, eventType) {
+  function hasEventDefinition$3(element, eventType) {
     var bo = getBusinessObject(element),
         hasEventDefinition = false;
 
@@ -17031,15 +17110,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) {
@@ -17274,33 +17353,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,
@@ -17310,6 +17389,8 @@
         orient: 'auto'
       });
 
+      append(marker, element);
+
       var defs = query('defs', canvas._svg);
 
       if (!defs) {
@@ -17342,105 +17423,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
         });
@@ -17456,11 +17548,7 @@
 
       offset = offset || 0;
 
-      attrs = computeStyle(attrs, {
-        stroke: black,
-        strokeWidth: 2,
-        fill: 'white'
-      });
+      attrs = shapeStyle(attrs);
 
       if (attrs.fill === 'none') {
         delete attrs.fillOpacity;
@@ -17469,13 +17557,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);
 
@@ -17491,22 +17578,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);
 
@@ -17518,53 +17600,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);
 
@@ -17665,7 +17760,7 @@
       return renderLabel(parentGfx, semantic.name, {
         box: element,
         align: align,
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -17711,16 +17806,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) {
 
@@ -17741,7 +17826,6 @@
         if (!semantic.isInterrupting) {
           attrs = {
             strokeDasharray: '6',
-            strokeLinecap: 'round',
             fill: getFillColor(element, defaultFillColor),
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           };
@@ -17796,7 +17880,6 @@
 
         drawPath(parentGfx, pathData, {
           strokeWidth: 2,
-          strokeLinecap: 'square',
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
@@ -17818,7 +17901,6 @@
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            strokeLinecap: 'square',
             transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           });
@@ -18026,14 +18108,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)
         });
@@ -18286,10 +18368,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);
 
@@ -18297,7 +18380,8 @@
 
         if (isEventSubProcess(element)) {
           attr(rect, {
-            strokeDasharray: '1,2'
+            strokeDasharray: '0, 5.5',
+            strokeWidth: 2.5
           });
         }
 
@@ -18315,13 +18399,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;
       },
@@ -18332,10 +18417,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);
@@ -18347,13 +18435,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',
@@ -18372,11 +18461,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);
 
@@ -18495,13 +18586,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') {
@@ -18517,16 +18606,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)
@@ -18540,27 +18627,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);
 
@@ -18594,12 +18674,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') {
@@ -18610,7 +18689,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),
@@ -18636,19 +18715,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);
@@ -18771,25 +18844,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);
 
@@ -18800,27 +18874,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,
@@ -18841,7 +18910,7 @@
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
-          padding: 5,
+          padding: 7,
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
           }
@@ -18959,10 +19028,9 @@
         });
 
         drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1,
+          strokeWidth: 1.5,
           fill: getFillColor(element, defaultFillColor),
           stroke: getStrokeColor$1(element, defaultStrokeColor),
-          strokeLinecap: 'round',
           strokeMiterlimit: 0.5
         });
       },
@@ -20676,7 +20744,7 @@
     return isPrimaryButton(event) || isAuxiliaryButton(event);
   }
 
-  var LOW_PRIORITY$q = 500;
+  var LOW_PRIORITY$r = 500;
 
 
   /**
@@ -20871,7 +20939,7 @@
     eventBus.on([
       'shape.changed',
       'connection.changed'
-    ], LOW_PRIORITY$q, function(event) {
+    ], LOW_PRIORITY$r, function(event) {
 
       var element = event.element,
           gfx = event.gfx;
@@ -20879,7 +20947,7 @@
       eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
     });
 
-    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$q, function(event) {
+    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$r, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -21156,7 +21224,7 @@
     interactionEvents: [ 'type', InteractionEvents ]
   };
 
-  var LOW_PRIORITY$p = 500;
+  var LOW_PRIORITY$q = 500;
 
 
   /**
@@ -21183,7 +21251,7 @@
       attr(outline, assign$1({
         x: 10,
         y: 10,
-        rx: 3,
+        rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));
@@ -21195,7 +21263,7 @@
 
     // A low priortity is necessary, because outlines of labels have to be updated
     // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$p, function(event) {
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$q, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -21641,7 +21709,7 @@
   // document wide unique overlay ids
   var ids$1 = new IdGenerator('ov');
 
-  var LOW_PRIORITY$o = 500;
+  var LOW_PRIORITY$p = 500;
 
 
   /**
@@ -22213,7 +22281,7 @@
 
     // move integration
 
-    eventBus.on('element.changed', LOW_PRIORITY$o, function(e) {
+    eventBus.on('element.changed', LOW_PRIORITY$p, function(e) {
       var element = e.element;
 
       var container = self._getOverlayContainer(element, true);
@@ -23173,7 +23241,7 @@
     return true;
   }
 
-  var LOW_PRIORITY$n = 250;
+  var LOW_PRIORITY$o = 250;
   var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
   var EMPTY_MARKER = 'bjs-drilldown-empty';
@@ -23190,7 +23258,7 @@
 
     var self = this;
 
-    this.executed('shape.toggleCollapse', LOW_PRIORITY$n, function(context) {
+    this.executed('shape.toggleCollapse', LOW_PRIORITY$o, function(context) {
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
@@ -23202,7 +23270,7 @@
     }, true);
 
 
-    this.reverted('shape.toggleCollapse', LOW_PRIORITY$n, function(context) {
+    this.reverted('shape.toggleCollapse', LOW_PRIORITY$o, function(context) {
       var shape = context.shape;
 
       // Add overlay to the collapsed shape
@@ -23214,7 +23282,7 @@
     }, true);
 
 
-    this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$n,
+    this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$o,
       function(context) {
         var oldParent = context.oldParent,
             newParent = context.newParent || context.parent,
@@ -23231,7 +23299,7 @@
       }, true);
 
 
-    this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$n,
+    this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$o,
       function(context) {
         var oldParent = context.oldParent,
             newParent = context.newParent || context.parent,
@@ -23680,7 +23748,7 @@
     return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
   }
 
-  var LOW_PRIORITY$m = 500;
+  var LOW_PRIORITY$n = 500;
 
 
   /**
@@ -23696,7 +23764,7 @@
 
     var self = this;
 
-    eventBus.on('editorActions.init', LOW_PRIORITY$m, function(event) {
+    eventBus.on('editorActions.init', LOW_PRIORITY$n, function(event) {
 
       var editorActions = event.editorActions;
 
@@ -28135,11 +28203,11 @@
 
   var n$1,l$1,u$1,t$2,o$1,f$1={},e$2=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s$1(n,l){for(var u in l)n[u]=l[u];return n}function a$1(n){var l=n.parentNode;l&&l.removeChild(n);}function h$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n$1.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$1(l,f,t,o,null)}function v$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function p$1(n){return n.children}function d$1(n,l){this.props=n,this.context=l;}function _$1(n,l){if(null==l)return n.__?_$1(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_$1(n):null}function k$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$1(n)}}function b$1(n){(!n.__d&&(n.__d=!0)&&t$2.push(n)&&!g$1.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||setTimeout)(g$1);}function g$1(){for(var n;g$1.__r=t$2.length;)n=t$2.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$2=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s$1({},t)).__v=t.__v+1,j$1(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_$1(t):o,t.__h),z$1(u,t),t.__e!=o&&k$1(t)));});}function w$1(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$2,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$1(null,k,null,null,k):Array.isArray(k)?v$1(p$1,{children:k},null,null,null):k.__b>0?v$1(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$1(n,k,d=d||f$1,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$2(k,s,n):s=A(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_$1(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M(w[h],w[++h],w[++h]);}function m$2(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$2(i,l,u):A(u,i,i,t,i.__e,l));return l}function A(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$1.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$1:I,o):n.removeEventListener(l,o?T$1:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T$1(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$1(g,x),h.constructor=T,h.render=O),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s$1({},h.__s)),s$1(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$1.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s$1(s$1({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$1&&null==a.key?a.props.children:a,w$1(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(a=l$1.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z$1(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n$1.call(l.childNodes),h=(y=i.props||f$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$1(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_$1(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$1(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H(l,"checked",k,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$1(n.__e),n.__=n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$1(i,u=(!o&&t||i).__k=h$1(p$1,null,[u]),r||f$1,f$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n$1.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$1(e,u);}n$1=e$2.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,d$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s$1({},this.state),"function"==typeof n&&(n=n(s$1({},u),this.props)),n&&s$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$1(this));},d$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$1(this));},d$1.prototype.render=p$1,t$2=[],g$1.__r=0;
 
-  var t$1,r$1,u,i,o=0,f=[],c=[],e$1=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m$1=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o||u),o=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function p(n){return o=1,y(B,n)}function y(n,u,i){var o=d(t$1++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$1,!r$1.u)){r$1.u=!0;var f=r$1.shouldComponentUpdate;r$1.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t$1++,3);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__H.__h.push(o));}function s(u,i){var o=d(t$1++,4);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__h.push(o));}function _(n){return o=5,F(function(){return {current:n}},[])}function F(n,r){var u=d(t$1++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r$1=null,e$1&&e$1(n);},l$1.__r=function(n){a&&a(n),t$1=0;var i=(r$1=n.__c).__H;i&&(u===r$1?(i.__h=[],r$1.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[])),u=r$1;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r$1=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m$1&&m$1(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r$1,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$1=t;}function w(n){var t=r$1;n.__c=n.__(),r$1=t;}function z(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return "function"==typeof t?t(n):t}
+  var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t$1=new Map;function e$1(s){var r=t$1.get(this);return r||(r=new Map,t$1.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
 
-  var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t=new Map;function e(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
+  var m$1=e$1.bind(h$1);
 
-  var m=e.bind(h$1);
+  var t,r$1,u,i,o=0,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o||u),o=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function p(n){return o=1,y(B,n)}function y(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$1,!r$1.u)){r$1.u=!0;var f=r$1.shouldComponentUpdate;r$1.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t++,3);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__H.__h.push(o));}function s(u,i){var o=d(t++,4);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__h.push(o));}function _(n){return o=5,F(function(){return {current:n}},[])}function F(n,r){var u=d(t++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r$1=null,e&&e(n);},l$1.__r=function(n){a&&a(n),t=0;var i=(r$1=n.__c).__H;i&&(u===r$1?(i.__h=[],r$1.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[])),u=r$1;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r$1=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r$1,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$1=t;}function w(n){var t=r$1;n.__c=n.__(),r$1=t;}function z(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return "function"==typeof t?t(n):t}
 
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -28151,7 +28219,7 @@
    * @param {boolean} selected
    * @param {function} onMouseEnter
    * @param {function} onMouseLeave
-   * @param {function} onClick
+   * @param {function} onAction
    */
   function PopupMenuItem(props) {
     const {
@@ -28159,33 +28227,35 @@
       selected,
       onMouseEnter,
       onMouseLeave,
-      onClick
+      onAction
     } = props;
 
-    return m`
+    return m$1`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
       title=${ entry.title || entry.label }
-      onClick=${ onClick }
+      onClick=${ onAction }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
+      onDragStart=${ (event) => onAction(event, entry, 'dragstart') }
+      draggable=${ true }
     >
       <div class="djs-popup-entry-content">
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
         >
-          ${ entry.imageUrl ? m`
-            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+          ${ entry.imageUrl ? m$1`
+            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />
           ` : null }
 
-          ${ entry.label ? m`
+          ${ entry.label ? m$1`
             <span class="djs-popup-label">
               ${ entry.label }
             </span>
           ` : null }
         </span>
-        ${ entry.description && m`
+        ${ entry.description && m$1`
           <span
             class="djs-popup-entry-description"
             title=${ entry.description }
@@ -28194,7 +28264,7 @@
           </span>
         ` }
       </div>
-      ${ entry.documentationRef && m`
+      ${ entry.documentationRef && m$1`
         <div class="djs-popup-entry-docs">
           <a
             href="${ entry.documentationRef }"
@@ -28219,7 +28289,7 @@
    * @param {Array} entries
    * @param {Object} selectedEntry
    * @param {function} setSelectedEntry
-   * @param {function} onClick
+   * @param {function} onAction
    * @param {Object} resultsRef
    */
 
@@ -28227,8 +28297,8 @@
     const {
       selectedEntry,
       setSelectedEntry,
-      onClick,
-      entries
+      entries,
+      ...restProps
     } = props;
 
     const resultsRef = _();
@@ -28249,23 +28319,23 @@
       }
     }, [ selectedEntry ]);
 
-    return m`
+    return m$1`
     <div class="djs-popup-results" ref=${ resultsRef }>
-      ${ groups.map(group => m`
-        ${ group.name && m`
+      ${ groups.map(group => m$1`
+        ${ group.name && m$1`
           <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
         <ul class="djs-popup-group" data-group=${ group.id }>
-          ${ group.entries.map(entry => m`
+          ${ group.entries.map(entry => m$1`
             <${PopupMenuItem}
               key=${ entry.id }
               entry=${ entry }
               selected=${ entry === selectedEntry }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
-              onClick=${ onClick }
+              ...${ restProps }
             />
           `) }
         </ul>
@@ -28390,7 +28460,8 @@
 
         const search = [
           entry.description || '',
-          entry.label || ''
+          entry.label || '',
+          entry.search || ''
         ]
           .join('---')
           .toLowerCase();
@@ -28477,7 +28548,7 @@
 
     const displayHeader = F(() => title || headerEntries.length > 0, [ title, headerEntries ]);
 
-    return m`
+    return m$1`
     <${PopupMenuWrapper}
       onClose=${ onClose }
       onKeyup=${ handleKey }
@@ -28487,10 +28558,10 @@
       width=${ width }
       scale=${ scale }
     >
-      ${ displayHeader && m`
+      ${ displayHeader && m$1`
         <div class="djs-popup-header">
           <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m`
+          ${ headerEntries.map(entry => m$1`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
@@ -28499,21 +28570,21 @@
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m`
-                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+              ${ entry.imageUrl ? m$1`
+                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />
               ` : null }
 
-              ${ entry.label ? m`
+              ${ entry.label ? m$1`
                 <span class="djs-popup-label">${ entry.label }</span>
               ` : null }
             </span>
           `) }
         </div>
       ` }
-      ${ originalEntries.length > 0 && m`
+      ${ originalEntries.length > 0 && m$1`
         <div class="djs-popup-body">
 
-          ${ searchable && m`
+          ${ searchable && m$1`
           <div class="djs-popup-search">
             <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
@@ -28529,10 +28600,10 @@
             entries=${ entries }
             selectedEntry=${ selectedEntry }
             setSelectedEntry=${ setSelectedEntry }
-            onClick=${ onSelect }
+            onAction=${ onSelect }
           />
         </div>
-        ${ entries.length === 0 && m`
+        ${ entries.length === 0 && m$1`
           <div class="djs-popup-no-results">No matching entries found.</div>
         ` }
       ` }
@@ -28585,7 +28656,7 @@
       popupRef.current && popupRef.current.focus();
     }, []);
 
-    return m`
+    return m$1`
     <div
       class="djs-popup-backdrop"
       onClick=${ checkClose }
@@ -28694,17 +28765,13 @@
       options
     } = this._current;
 
-    const entriesArray = [
-      ...Object.entries(entries).map(
-        ([ key, value ]) => ({ id: key, ...value })
-      )
-    ];
+    const entriesArray = Object.entries(entries).map(
+      ([ key, value ]) => ({ id: key, ...value })
+    );
 
-    const headerEntriesArray = [
-      ...Object.entries(headerEntries).map(
-        ([ key, value ]) => ({ id: key, ...value })
-      )
-    ];
+    const headerEntriesArray = Object.entries(headerEntries).map(
+      ([ key, value ]) => ({ id: key, ...value })
+    );
 
     const position = _position && (
       (container) => this._ensureVisible(container, _position)
@@ -28713,10 +28780,10 @@
     const scale = this._updateScale(this._current.container);
 
     const onClose = result => this.close(result);
-    const onSelect = (event, entry) => this.trigger(event, entry);
+    const onSelect = (event, entry, action) => this.trigger(event, entry, action);
 
     P(
-      m`
+      m$1`
       <${PopupMenuComponent}
         onClose=${ onClose }
         onSelect=${ onSelect }
@@ -28840,13 +28907,10 @@
 
   PopupMenu.prototype._createContainer = function(config) {
 
-    let parent = config && config.parent || 'body';
-
-    if (typeof parent === 'string') {
-      parent = document.querySelector(parent);
-    }
+    var canvas = this._canvas,
+        parent = canvas.getContainer();
 
-    const container = domify$1(`<div class="djs-popup-parent djs-parent" data-popup=${config.provider}></div>`);
+    const container = domify$1(`<div class="djs-popup-parent djs-scrollable" data-popup=${config.provider}></div>`);
 
     parent.appendChild(container);
 
@@ -29113,10 +29177,11 @@
    *
    * @param {Object} event
    * @param {Object} entry
+   * @param {string} [action='click'] the action to trigger
    *
    * @return the result of the action callback, if any
    */
-  PopupMenu.prototype.trigger = function(event, entry) {
+  PopupMenu.prototype.trigger = function(event, entry, action = 'click') {
 
     // silence other actions
     event.preventDefault();
@@ -29128,8 +29193,16 @@
       entry = this._getEntry(entryId);
     }
 
-    if (entry.action) {
-      return entry.action.call(null, event, entry);
+    const handler = entry.action;
+
+    if (isFunction(handler)) {
+      if (action === 'click') {
+        return handler(event, entry);
+      }
+    } else {
+      if (handler[action]) {
+        return handler[action](event, entry);
+      }
     }
   };
 
@@ -29173,14 +29246,14 @@
 
   var ICONS$1 = icons$1;
 
-  var LOW_PRIORITY$l = 900;
+  var LOW_PRIORITY$m = 900;
 
   /**
    * A provider for align elements context pad button
    */
   function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
 
-    contextPad.registerProvider(LOW_PRIORITY$l, this);
+    contextPad.registerProvider(LOW_PRIORITY$m, this);
 
     this._contextPad = contextPad;
     this._popupMenu = popupMenu;
@@ -29734,7 +29807,7 @@
     return true;
   }
 
-  var LOW_PRIORITY$k = 100;
+  var LOW_PRIORITY$l = 100;
 
 
   /**
@@ -29746,7 +29819,7 @@
    */
   function AutoPlace$1(eventBus, modeling, canvas) {
 
-    eventBus.on('autoPlace', LOW_PRIORITY$k, function(context) {
+    eventBus.on('autoPlace', LOW_PRIORITY$l, function(context) {
       var shape = context.shape,
           source = context.source;
 
@@ -29964,7 +30037,7 @@
       y: sourceTrbl.top - 50 - element.height / 2
     };
 
-    if (isConnection$e(source)) {
+    if (isConnection$f(source)) {
       position = getMid(source);
       position.x += 100;
       position.y -= 50;
@@ -30003,7 +30076,7 @@
     return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
   }
 
-  function isConnection$e(element) {
+  function isConnection$f(element) {
     return !!element.waypoints;
   }
 
@@ -31429,7 +31502,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));
@@ -31440,7 +31513,7 @@
    * Calculates the angle between a line a the yAxis
    *
    * @param {Array}
-   * @return {Float}
+   * @return {number}
    */
   function getAngle(line) {
 
@@ -31454,7 +31527,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) {
@@ -31472,7 +31545,7 @@
    * @param {Vector}
    * @param {Vector}
    * @param {Vector}
-   * @return {Float}
+   * @return {number}
    */
   function solveLambaSystem(a, b, c) {
 
@@ -31494,7 +31567,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) {
@@ -31514,9 +31587,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) {
 
@@ -31537,7 +31611,8 @@
    *
    * @param {Point}
    * @param {Point}
-   * @return {Float} distance
+   *
+   * @return {number} distance
    */
   function getDistancePointPoint(point1, point2) {
 
@@ -33243,7 +33318,7 @@
           hoverMid = hover && getSnapPoint(hover, event);
 
       // only snap on connections, elements can have multiple connect endpoints
-      if (!isConnection$d(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
+      if (!isConnection$e(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
         return;
       }
 
@@ -33298,7 +33373,7 @@
 
   // helpers //////////////////////
 
-  function isConnection$d(element) {
+  function isConnection$e(element) {
     return element && !!element.waypoints;
   }
 
@@ -33456,7 +33531,7 @@
   }
 
   var HIGH_PRIORITY$h = 1100,
-      LOW_PRIORITY$j = 900;
+      LOW_PRIORITY$k = 900;
 
   var MARKER_OK$3 = 'connect-ok',
       MARKER_NOT_OK$3 = 'connect-not-ok';
@@ -33500,7 +33575,7 @@
       });
     });
 
-    eventBus.on('connect.hover', LOW_PRIORITY$j, function(event) {
+    eventBus.on('connect.hover', LOW_PRIORITY$k, function(event) {
       var context = event.context,
           hover = event.hover,
           canExecute = context.canExecute;
@@ -33767,18 +33842,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 //////////
@@ -34485,6 +34554,7 @@
     'path',
     'polygon',
     'polyline',
+    'path',
     'rect'
   ];
 
@@ -34759,7 +34829,7 @@
       });
 
       var shape = find(elements, function(element) {
-        return !isConnection$c(element);
+        return !isConnection$d(element);
       });
 
       var attach = false,
@@ -34914,7 +34984,7 @@
 
         // update shape
         shape = find(elements, function(element) {
-          return !isConnection$c(element);
+          return !isConnection$d(element);
         });
       }
 
@@ -34955,7 +35025,7 @@
       }
 
       var shape = find(elements, function(element) {
-        return !isConnection$c(element);
+        return !isConnection$d(element);
       });
 
       if (!shape) {
@@ -34989,7 +35059,7 @@
 
       // center elements around cursor
       forEach$1(elements, function(element) {
-        if (isConnection$c(element)) {
+        if (isConnection$d(element)) {
           element.waypoints = map$1(element.waypoints, function(waypoint) {
             return {
               x: waypoint.x - bbox.x - bbox.width / 2,
@@ -35051,19 +35121,19 @@
     }
   }
 
-  function isConnection$c(element) {
+  function isConnection$d(element) {
     return !!element.waypoints;
   }
 
   function isSingleShape(elements) {
-    return elements && elements.length === 1 && !isConnection$c(elements[0]);
+    return elements && elements.length === 1 && !isConnection$d(elements[0]);
   }
 
   function isLabel$5(element) {
     return !!element.labelTarget;
   }
 
-  var LOW_PRIORITY$i = 750;
+  var LOW_PRIORITY$j = 750;
 
 
   function CreatePreview(
@@ -35108,7 +35178,7 @@
       return dragGroup;
     }
 
-    eventBus.on('create.move', LOW_PRIORITY$i, function(event) {
+    eventBus.on('create.move', LOW_PRIORITY$j, function(event) {
 
       var hover = event.hover,
           context = event.context,
@@ -35373,7 +35443,7 @@
       }
 
       // connections (priority = 3)
-      if (isConnection$b(element)) {
+      if (isConnection$c(element)) {
         descriptor.priority = 3;
 
         descriptor.source = element.source.id;
@@ -35516,7 +35586,7 @@
 
     // center elements around cursor
     forEach$1(elements, function(element) {
-      if (isConnection$b(element)) {
+      if (isConnection$c(element)) {
         element.waypoints = map$1(element.waypoints, function(waypoint) {
           return {
             x: waypoint.x - bbox.x - bbox.width / 2,
@@ -35569,7 +35639,7 @@
 
         var element;
 
-        if (isConnection$b(attrs)) {
+        if (isConnection$c(attrs)) {
           attrs.source = cache[ descriptor.source ];
           attrs.target = cache[ descriptor.target ];
 
@@ -35635,7 +35705,7 @@
         source,
         target;
 
-    if (isConnection$b(element)) {
+    if (isConnection$c(element)) {
       source = find(elements, matchPattern({ id: element.source.id }));
       target = find(elements, matchPattern({ id: element.target.id }));
 
@@ -35832,7 +35902,7 @@
     return !!element.host;
   }
 
-  function isConnection$b(element) {
+  function isConnection$c(element) {
     return !!element.waypoints;
   }
 
@@ -35890,7 +35960,7 @@
     });
   }
 
-  var LOW_PRIORITY$h = 750;
+  var LOW_PRIORITY$i = 750;
 
 
   function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
@@ -35901,7 +35971,7 @@
       return moddleCopy.copyElement(bo, targetBo, null, clone);
     }
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$h, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$i, function(context) {
       var descriptor = context.descriptor,
           element = context.element,
           businessObject = getBusinessObject(element);
@@ -35998,7 +36068,7 @@
 
     // copy + paste processRef with participant
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$h, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$i, function(context) {
       var descriptor = context.descriptor,
           element = context.element;
 
@@ -36024,7 +36094,7 @@
 
     // resolve references
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$h, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$i, function(context) {
       var cache = context.cache,
           descriptor = context.descriptor;
 
@@ -36535,7 +36605,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
@@ -36572,7 +36642,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;
         }
@@ -36702,7 +36772,7 @@
     return is$1(bo, 'bpmn:SubProcess');
   }
 
-  function hasEventDefinition$1(element, type) {
+  function hasEventDefinition$2(element, type) {
 
     var bo = getBusinessObject(element);
 
@@ -37070,7 +37140,7 @@
     }
   ];
 
-  var GATEWAY = [
+  var GATEWAY$1 = [
     {
       label: 'Exclusive Gateway',
       actionName: 'replace-with-exclusive-gateway',
@@ -37203,7 +37273,7 @@
 
   var EVENT_SUB_PROCESS = TRANSACTION;
 
-  var TASK = [
+  var TASK$1 = [
     {
       label: 'Task',
       actionName: 'replace-with-task',
@@ -37577,7 +37647,7 @@
     }
   ];
 
-  var PARTICIPANT = [
+  var PARTICIPANT$1 = [
     {
       label: 'Expanded Pool',
       actionName: 'replace-with-expanded-pool',
@@ -37686,7 +37756,7 @@
     // expanded/collapsed pools
     if (is$1(businessObject, 'bpmn:Participant')) {
 
-      entries = filter(PARTICIPANT, function(entry) {
+      entries = filter(PARTICIPANT$1, function(entry) {
         return isExpanded(element) !== entry.target.isExpanded;
       });
 
@@ -37769,7 +37839,7 @@
     // gateways
     if (is$1(businessObject, 'bpmn:Gateway')) {
 
-      entries = filter(GATEWAY, differentType);
+      entries = filter(GATEWAY$1, differentType);
 
       return this._createEntries(element, entries);
     }
@@ -37801,7 +37871,7 @@
     // collapsed ad hoc sub processes
     if (is$1(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(element)) {
 
-      entries = filter(TASK, function(entry) {
+      entries = filter(TASK$1, function(entry) {
 
         var target = entry.target;
 
@@ -37822,7 +37892,7 @@
 
     // flow nodes
     if (is$1(businessObject, 'bpmn:FlowNode')) {
-      entries = filter(TASK, differentType);
+      entries = filter(TASK$1, differentType);
 
       // collapsed SubProcess can not be replaced with itself
       if (is$1(businessObject, 'bpmn:SubProcess') && !isExpanded(element)) {
@@ -38092,6 +38162,12 @@
     var self = this;
     var translate = this._translate;
 
+    var dataObject = element.businessObject.dataObjectRef;
+
+    if (!dataObject) {
+      return [];
+    }
+
     function toggleIsCollection(event, entry) {
       self._modeling.updateModdleProperties(
         element,
@@ -38099,8 +38175,7 @@
         { isCollection: !entry.active });
     }
 
-    var dataObject = element.businessObject.dataObjectRef,
-        isCollection = dataObject.isCollection;
+    var isCollection = dataObject.isCollection;
 
     var dataObjectEntries = [
       {
@@ -38196,9 +38271,12 @@
   var PopupMenuModule = {
     __depends__: [
       PopupMenuModule$1,
-      ReplaceModule
+      ReplaceModule,
+      AutoPlaceModule
+    ],
+    __init__: [
+      'replaceMenuProvider'
     ],
-    __init__: [ 'replaceMenuProvider' ],
     replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
   };
 
@@ -38641,433 +38719,2175 @@
       });
     }
 
-    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$1(businessObject, 'bpmn:FlowNode')) {
+
+      if (is$1(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$1(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$1(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$1(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$1(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 = 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;
+    }
+
+    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'
+      }
+    },
+    {
+      label: 'Complex Gateway',
+      actionName: 'complex-gateway',
+      className: 'bpmn-icon-gateway-complex',
+      target: {
+        type: 'bpmn:ComplexGateway'
+      }
+    },
+    {
+      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: 'Send Task',
+      actionName: 'send-task',
+      className: 'bpmn-icon-send',
+      target: {
+        type: 'bpmn:SendTask'
+      }
+    },
+    {
+      label: 'Receive Task',
+      actionName: 'receive-task',
+      className: 'bpmn-icon-receive',
+      target: {
+        type: 'bpmn:ReceiveTask'
+      }
+    },
+    {
+      label: 'User Task',
+      actionName: 'user-task',
+      className: 'bpmn-icon-user',
+      target: {
+        type: 'bpmn:UserTask'
+      }
+    },
+    {
+      label: 'Manual Task',
+      actionName: 'manual-task',
+      className: 'bpmn-icon-manual',
+      target: {
+        type: 'bpmn:ManualTask'
+      }
+    },
+    {
+      label: 'Business Rule Task',
+      actionName: 'rule-task',
+      className: 'bpmn-icon-business-rule',
+      target: {
+        type: 'bpmn:BusinessRuleTask'
+      }
+    },
+    {
+      label: 'Service Task',
+      actionName: 'service-task',
+      className: 'bpmn-icon-service',
+      target: {
+        type: 'bpmn:ServiceTask'
+      }
+    },
+    {
+      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
+      } = 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,
+        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(800,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$3(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 = {};
+
+    if (!rules.allowed('shape.append', { element: element })) {
+      return [];
     }
 
-    function splitLaneHandler(count) {
+    // filter out elements with no incoming connections
+    const appendOptions = this._filterEntries(CREATE_OPTIONS);
 
-      return function(event, element) {
+    // map options to menu entries
+    appendOptions.forEach(option => {
+      const {
+        actionName,
+        className,
+        label,
+        target,
+        description,
+        group,
+        search
+      } = option;
+
+      entries[`append-${actionName}`] = {
+        label,
+        className,
+        description,
+        group,
+        search,
+        action: this._createEntryAction(element, target)
+      };
+    });
 
-        // actual split
-        modeling.splitLane(element, count);
+    return entries;
+  };
 
-        // refresh context pad after split to
-        // get rid of split icons
-        contextPad.open(element, true);
-      };
-    }
+  /**
+   * Filter out entries from the options.
+   *
+   * @param {Array<Object>} entries
+   *
+   * @return {Array<Object>} filtered entries
+   */
+  AppendMenuProvider.prototype._filterEntries = function(entries) {
+    return entries.filter(option => {
 
+      const target = option.target;
+      const {
+        type,
+        eventDefinitionType
+      } = target;
+
+      if ([
+        'bpmn:StartEvent',
+        'bpmn:Participant'
+      ].includes(type)) {
+        return false;
+      }
 
-    if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
+      if (type === 'bpmn:BoundaryEvent' && isUndefined$2(eventDefinitionType)) {
+        return false;
+      }
 
-      var childLanes = getChildLanes(element);
+      return true;
+    });
+  };
 
-      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');
-            }
-          }
-        }
-      });
+  /**
+   * 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 (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)
-              }
-            }
-          });
-        }
+    const autoPlaceElement = () => {
+      const newElement = elementFactory.create('shape', target);
+      autoPlace.append(element, newElement);
+    };
 
-        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 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$1(businessObject, 'bpmn:FlowNode')) {
+    if (type === 'bpmn:SubProcess' && target.triggeredByEvent) {
+      return false;
+    }
 
-      if (is$1(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')) {
+  var LOW_PRIORITY$h = 900;
 
-        assign$1(actions, {
-          'append.compensation-activity':
-              appendAction(
-                'bpmn:Task',
-                'bpmn-icon-task',
-                translate('Append compensation activity'),
-                {
-                  isForCompensation: true
-                }
-              )
-        });
-      } else
+  /**
+   * A provider for align elements context pad button
+   */
+  function AppendContextPadProvider(contextPad, popupMenu, translate, canvas) {
+    contextPad.registerProvider(LOW_PRIORITY$h, this);
 
-      if (!is$1(businessObject, 'bpmn:EndEvent') &&
-          !businessObject.isForCompensation &&
-          !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
-          !isEventSubProcess(businessObject)) {
+    this._contextPad = contextPad;
+    this._popupMenu = popupMenu;
+    this._translate = translate;
+    this._canvas = 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.$inject = [
+    'contextPad',
+    'popupMenu',
+    'translate',
+    'canvas'
+  ];
 
-    if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+  AppendContextPadProvider.prototype.getContextPadEntries = function(element) {
+    const popupMenu = this._popupMenu;
+    const translate = this._translate;
+    const getAppendMenuPosition = this._getAppendMenuPosition.bind(this);
+
+    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$1(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$1(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$1(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$3(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(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$b(source)) {
+        return false;
+      }
 
-    var definitions = eventBo.eventDefinitions || [];
-    forEach$1(definitions, function(def) {
-      if (def.$type === definition) {
-        isDefinition = true;
+      if (is$1(source, 'bpmn:IntermediateThrowEvent') && hasEventDefinition$1(source, 'bpmn:LinkEventDefinition')) {
+        return false;
+      }
+
+      if (is$1(source, 'bpmn:SubProcess') && businessObject.triggeredByEvent) {
+        return false;
       }
     });
 
-    return isType && isDefinition;
+  };
+
+
+  // helpers //////////////
+  function hasEventDefinition$1(element, eventDefinition) {
+    var bo = getBusinessObject(element);
+
+    return !!find(bo.eventDefinitions || [], function(definition) {
+      return is$1(definition, eventDefinition);
+    });
   }
 
-  function includes$7(array, item) {
-    return array.indexOf(item) !== -1;
+  function isConnection$b(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 = {
@@ -46520,7 +48340,7 @@
     }
 
     return some(types, function(type) {
-      return hasEventDefinition$2(element, type);
+      return hasEventDefinition$3(element, type);
     });
   }
 
@@ -52478,6 +54298,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;
 
@@ -52667,22 +54497,22 @@
         y: 0
       };
 
-      if (alignment.left) {
+      if (isDefined(alignment.left)) {
         delta.x = alignment.left - element.x;
 
-      } else if (alignment.right) {
+      } else if (isDefined(alignment.right)) {
         delta.x = (alignment.right - element.width) - element.x;
 
-      } else if (alignment.center) {
+      } else if (isDefined(alignment.center)) {
         delta.x = (alignment.center - Math.round(element.width / 2)) - element.x;
 
-      } else if (alignment.top) {
+      } else if (isDefined(alignment.top)) {
         delta.y = alignment.top - element.y;
 
-      } else if (alignment.bottom) {
+      } else if (isDefined(alignment.bottom)) {
         delta.y = (alignment.bottom - element.height) - element.y;
 
-      } else if (alignment.middle) {
+      } else if (isDefined(alignment.middle)) {
         delta.y = (alignment.middle - Math.round(element.height / 2)) - element.y;
       }
 
@@ -58096,464 +59926,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 = 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;
-    }
-
-    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 entries = this._entries,
-        entry,
-        handler,
-        originalEvent,
-        button = event.delegateTarget || event.target;
-
-    if (!button) {
-      return event.preventDefault();
-    }
-
-    entry = entries[attr$1(button, 'data-action')];
-
-    // when user clicks on the palette and not on an action
-    if (!entry) {
-      return;
-    }
-
-    handler = entry.action;
-
-    originalEvent = event.originalEvent || event;
-
-    // simple action (via callback function)
-    if (isFunction(handler)) {
-      if (action === 'click') {
-        handler(originalEvent, autoActivate);
-      }
-    } else {
-      if (handler[action]) {
-        handler[action](originalEvent, 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';
 
 
@@ -61334,6 +62706,7 @@
     ContextPadModule,
     CopyPasteModule,
     CreateModule,
+    CreateAppendAnythingModule,
     DistributeElementsModule,
     EditorActionsModule,
     GridSnappingModule,