bpmn-js 11.1.1 → 11.2.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v11.1.1
+ * 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: 2023-01-06
+ * Date: 2023-02-03
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2574,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 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 toSVGPoints(points) {
-    var result = '';
+  function drawPath(waypoints, cornerRadius) {
+    const pointCount = waypoints.length;
 
-    for (var i = 0, p; (p = points[i]); i++) {
-      result += p.x + ',' + p.y + ' ';
+    const path = [ move(waypoints[0]) ];
+
+    for (let i = 1; i < pointCount; i++) {
+
+      const pointBefore = waypoints[i - 1];
+      const point = waypoints[i];
+      const pointAfter = waypoints[i + 1];
+
+      if (!pointAfter || !cornerRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const effectiveRadius = Math.min(
+        cornerRadius,
+        vectorLength$1(point.x - pointBefore.x, point.y - pointBefore.y),
+        vectorLength$1(pointAfter.x - point.x, pointAfter.y - point.y)
+      );
+
+      if (!effectiveRadius) {
+        path.push(lineTo(point));
+
+        continue;
+      }
+
+      const beforePoint = getPointAtLength(point, pointBefore, effectiveRadius);
+      const beforePoint2 = getPointAtLength(point, pointBefore, effectiveRadius * .5);
+
+      const afterPoint = getPointAtLength(point, pointAfter, effectiveRadius);
+      const afterPoint2 = getPointAtLength(point, pointAfter, effectiveRadius * .5);
+
+      path.push(lineTo(beforePoint));
+      path.push(curveTo(beforePoint2, afterPoint2, afterPoint));
     }
 
-    return result;
+    return path;
   }
 
-  function createLine(points, attrs) {
+  function getPointAtLength(start, end, length) {
 
-    var line = create$1('polyline');
-    attr(line, { points: toSVGPoints(points) });
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
 
-    if (attrs) {
-      attr(line, attrs);
+    const totalLength = vectorLength$1(deltaX, deltaY);
+
+    const percent = length / totalLength;
+
+    return {
+      x: start.x + deltaX * percent,
+      y: start.y + deltaY * percent
+    };
+  }
+
+  function vectorLength$1(x, y) {
+    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  }
+
+  /**
+   * @param { { x: number, y: number }[] } points
+   * @param { any } [attrs]
+   * @param { number } [radius]
+   *
+   * @return {SVGElement}
+   */
+  function createLine(points, attrs, radius) {
+
+    if (isNumber(attrs)) {
+      radius = attrs;
+      attrs = null;
     }
 
-    return line;
+    if (!attrs) {
+      attrs = {};
+    }
+
+    const line = create$1('path', attrs);
+
+    if (isNumber(radius)) {
+      line.dataset.cornerRadius = String(radius);
+    }
+
+    return updateLine(line, points);
   }
 
+  /**
+   * @param { SVGElement } gfx
+   * @param { { x: number, y: number }[]} points
+   *
+   * @return {SVGElement}
+   */
   function updateLine(gfx, points) {
-    attr(gfx, { points: toSVGPoints(points) });
+
+    const cornerRadius = parseInt(gfx.dataset.cornerRadius, 10) || 0;
+
+    attr(gfx, {
+      d: componentsToPath(drawPath(points, cornerRadius))
+    });
 
     return gfx;
   }
@@ -3262,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;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
+    var points = Array.from(arguments).flat();
 
-    if (pointsAlignedHorizontally(points)) {
-      return 'h';
-    }
+    const axisMap = {
+      'x': 'v',
+      'y': 'h'
+    };
 
-    if (pointsAlignedVertically(points)) {
-      return 'v';
+    for (const [ axis, orientation ] of Object.entries(axisMap)) {
+      if (pointsAlignedOnAxis(axis, points)) {
+        return orientation;
+      }
     }
 
     return false;
   }
 
-  function pointsAlignedHorizontally(a, b) {
-    var points;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
-
-    var firstPoint = points.slice().shift();
-
-    return every(points, function(point) {
-      return Math.abs(firstPoint.y - point.y) <= ALIGNED_THRESHOLD;
-    });
-  }
-
-  function pointsAlignedVertically(a, b) {
-    var points;
-
-    if (isArray$3(a)) {
-      points = a;
-    } else {
-      points = [ a, b ];
-    }
-
-    var firstPoint = points.slice().shift();
+  /**
+   * @param { 'x' | 'y' } axis
+   * @param { Point[] } points
+   *
+   * @return {boolean}
+   */
+  function pointsAlignedOnAxis(axis, points) {
+    const referencePoint = points[0];
 
     return every(points, function(point) {
-      return Math.abs(firstPoint.x - point.x) <= ALIGNED_THRESHOLD;
+      return Math.abs(referencePoint[axis] - point[axis]) <= ALIGNED_THRESHOLD;
     });
   }
 
-
-
   /**
    * Returns true if the point p is inside the rectangle rect
    *
@@ -4423,7 +4494,7 @@
    * @return {Point}
    */
   function getMid(element) {
-    if (isConnection$f(element)) {
+    if (isConnection$g(element)) {
       return getConnectionMid(element);
     }
 
@@ -4563,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;
   }
 
@@ -17023,7 +17094,7 @@
     return element && !!getBusinessObject(element).triggeredByEvent;
   }
 
-  function hasEventDefinition$2(element, eventType) {
+  function hasEventDefinition$3(element, eventType) {
     var bo = getBusinessObject(element),
         hasEventDefinition = false;
 
@@ -17039,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) {
@@ -17282,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,
@@ -17318,6 +17389,8 @@
         orient: 'auto'
       });
 
+      append(marker, element);
+
       var defs = query('defs', canvas._svg);
 
       if (!defs) {
@@ -17350,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
         });
@@ -17464,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;
@@ -17477,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);
 
@@ -17499,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);
 
@@ -17526,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);
 
@@ -17673,7 +17760,7 @@
       return renderLabel(parentGfx, semantic.name, {
         box: element,
         align: align,
-        padding: 5,
+        padding: 7,
         style: {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
         }
@@ -17719,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) {
 
@@ -17749,7 +17826,6 @@
         if (!semantic.isInterrupting) {
           attrs = {
             strokeDasharray: '6',
-            strokeLinecap: 'round',
             fill: getFillColor(element, defaultFillColor),
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           };
@@ -17804,7 +17880,6 @@
 
         drawPath(parentGfx, pathData, {
           strokeWidth: 2,
-          strokeLinecap: 'square',
           stroke: getStrokeColor$1(element, defaultStrokeColor)
         });
 
@@ -17826,7 +17901,6 @@
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            strokeLinecap: 'square',
             transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
             stroke: getStrokeColor$1(element, defaultStrokeColor)
           });
@@ -18034,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)
         });
@@ -18294,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);
 
@@ -18305,7 +18380,8 @@
 
         if (isEventSubProcess(element)) {
           attr(rect, {
-            strokeDasharray: '1,2'
+            strokeDasharray: '0, 5.5',
+            strokeWidth: 2.5
           });
         }
 
@@ -18323,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;
       },
@@ -18340,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);
@@ -18355,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',
@@ -18380,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);
 
@@ -18503,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') {
@@ -18525,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)
@@ -18548,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);
 
@@ -18602,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') {
@@ -18618,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),
@@ -18644,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);
@@ -18779,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);
 
@@ -18808,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,
@@ -18849,7 +18910,7 @@
         renderLabel(parentGfx, text, {
           box: element,
           align: 'left-top',
-          padding: 5,
+          padding: 7,
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
           }
@@ -18967,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
         });
       },
@@ -20684,7 +20744,7 @@
     return isPrimaryButton(event) || isAuxiliaryButton(event);
   }
 
-  var LOW_PRIORITY$q = 500;
+  var LOW_PRIORITY$r = 500;
 
 
   /**
@@ -20879,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;
@@ -20887,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;
 
@@ -21164,7 +21224,7 @@
     interactionEvents: [ 'type', InteractionEvents ]
   };
 
-  var LOW_PRIORITY$p = 500;
+  var LOW_PRIORITY$q = 500;
 
 
   /**
@@ -21191,7 +21251,7 @@
       attr(outline, assign$1({
         x: 10,
         y: 10,
-        rx: 3,
+        rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));
@@ -21203,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;
 
@@ -21649,7 +21709,7 @@
   // document wide unique overlay ids
   var ids$1 = new IdGenerator('ov');
 
-  var LOW_PRIORITY$o = 500;
+  var LOW_PRIORITY$p = 500;
 
 
   /**
@@ -22221,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);
@@ -23181,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';
@@ -23198,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
@@ -23210,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
@@ -23222,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,
@@ -23239,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,
@@ -23688,7 +23748,7 @@
     return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
   }
 
-  var LOW_PRIORITY$m = 500;
+  var LOW_PRIORITY$n = 500;
 
 
   /**
@@ -23704,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;
 
@@ -28159,7 +28219,7 @@
    * @param {boolean} selected
    * @param {function} onMouseEnter
    * @param {function} onMouseLeave
-   * @param {function} onClick
+   * @param {function} onAction
    */
   function PopupMenuItem(props) {
     const {
@@ -28167,7 +28227,7 @@
       selected,
       onMouseEnter,
       onMouseLeave,
-      onClick
+      onAction
     } = props;
 
     return m$1`
@@ -28175,16 +28235,18 @@
       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$1`
-            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+            <img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />
           ` : null }
 
           ${ entry.label ? m$1`
@@ -28227,7 +28289,7 @@
    * @param {Array} entries
    * @param {Object} selectedEntry
    * @param {function} setSelectedEntry
-   * @param {function} onClick
+   * @param {function} onAction
    * @param {Object} resultsRef
    */
 
@@ -28235,8 +28297,8 @@
     const {
       selectedEntry,
       setSelectedEntry,
-      onClick,
-      entries
+      entries,
+      ...restProps
     } = props;
 
     const resultsRef = _();
@@ -28273,7 +28335,7 @@
               selected=${ entry === selectedEntry }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
-              onClick=${ onClick }
+              ...${ restProps }
             />
           `) }
         </ul>
@@ -28398,7 +28460,8 @@
 
         const search = [
           entry.description || '',
-          entry.label || ''
+          entry.label || '',
+          entry.search || ''
         ]
           .join('---')
           .toLowerCase();
@@ -28508,7 +28571,7 @@
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
               ${ entry.imageUrl ? m$1`
-                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
+                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />
               ` : null }
 
               ${ entry.label ? m$1`
@@ -28537,7 +28600,7 @@
             entries=${ entries }
             selectedEntry=${ selectedEntry }
             setSelectedEntry=${ setSelectedEntry }
-            onClick=${ onSelect }
+            onAction=${ onSelect }
           />
         </div>
         ${ entries.length === 0 && m$1`
@@ -28702,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)
@@ -28721,7 +28780,7 @@
     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$1`
@@ -29118,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();
@@ -29133,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);
+      }
     }
   };
 
@@ -29178,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;
@@ -29739,7 +29807,7 @@
     return true;
   }
 
-  var LOW_PRIORITY$k = 100;
+  var LOW_PRIORITY$l = 100;
 
 
   /**
@@ -29751,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;
 
@@ -29969,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;
@@ -30008,7 +30076,7 @@
     return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
   }
 
-  function isConnection$e(element) {
+  function isConnection$f(element) {
     return !!element.waypoints;
   }
 
@@ -31434,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));
@@ -31445,7 +31513,7 @@
    * Calculates the angle between a line a the yAxis
    *
    * @param {Array}
-   * @return {Float}
+   * @return {number}
    */
   function getAngle(line) {
 
@@ -31459,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) {
@@ -31477,7 +31545,7 @@
    * @param {Vector}
    * @param {Vector}
    * @param {Vector}
-   * @return {Float}
+   * @return {number}
    */
   function solveLambaSystem(a, b, c) {
 
@@ -31499,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) {
@@ -31519,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) {
 
@@ -31542,7 +31611,8 @@
    *
    * @param {Point}
    * @param {Point}
-   * @return {Float} distance
+   *
+   * @return {number} distance
    */
   function getDistancePointPoint(point1, point2) {
 
@@ -33248,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;
       }
 
@@ -33303,7 +33373,7 @@
 
   // helpers //////////////////////
 
-  function isConnection$d(element) {
+  function isConnection$e(element) {
     return element && !!element.waypoints;
   }
 
@@ -33461,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';
@@ -33505,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;
@@ -33772,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 //////////
@@ -34490,6 +34554,7 @@
     'path',
     'polygon',
     'polyline',
+    'path',
     'rect'
   ];
 
@@ -34764,7 +34829,7 @@
       });
 
       var shape = find(elements, function(element) {
-        return !isConnection$c(element);
+        return !isConnection$d(element);
       });
 
       var attach = false,
@@ -34919,7 +34984,7 @@
 
         // update shape
         shape = find(elements, function(element) {
-          return !isConnection$c(element);
+          return !isConnection$d(element);
         });
       }
 
@@ -34960,7 +35025,7 @@
       }
 
       var shape = find(elements, function(element) {
-        return !isConnection$c(element);
+        return !isConnection$d(element);
       });
 
       if (!shape) {
@@ -34994,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,
@@ -35056,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(
@@ -35113,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,
@@ -35378,7 +35443,7 @@
       }
 
       // connections (priority = 3)
-      if (isConnection$b(element)) {
+      if (isConnection$c(element)) {
         descriptor.priority = 3;
 
         descriptor.source = element.source.id;
@@ -35521,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,
@@ -35574,7 +35639,7 @@
 
         var element;
 
-        if (isConnection$b(attrs)) {
+        if (isConnection$c(attrs)) {
           attrs.source = cache[ descriptor.source ];
           attrs.target = cache[ descriptor.target ];
 
@@ -35640,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 }));
 
@@ -35837,7 +35902,7 @@
     return !!element.host;
   }
 
-  function isConnection$b(element) {
+  function isConnection$c(element) {
     return !!element.waypoints;
   }
 
@@ -35895,7 +35960,7 @@
     });
   }
 
-  var LOW_PRIORITY$h = 750;
+  var LOW_PRIORITY$i = 750;
 
 
   function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
@@ -35906,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);
@@ -36003,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;
 
@@ -36029,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;
 
@@ -36540,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
@@ -36577,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;
         }
@@ -36707,7 +36772,7 @@
     return is$1(bo, 'bpmn:SubProcess');
   }
 
-  function hasEventDefinition$1(element, type) {
+  function hasEventDefinition$2(element, type) {
 
     var bo = getBusinessObject(element);
 
@@ -37075,7 +37140,7 @@
     }
   ];
 
-  var GATEWAY = [
+  var GATEWAY$1 = [
     {
       label: 'Exclusive Gateway',
       actionName: 'replace-with-exclusive-gateway',
@@ -37208,7 +37273,7 @@
 
   var EVENT_SUB_PROCESS = TRANSACTION;
 
-  var TASK = [
+  var TASK$1 = [
     {
       label: 'Task',
       actionName: 'replace-with-task',
@@ -37582,7 +37647,7 @@
     }
   ];
 
-  var PARTICIPANT = [
+  var PARTICIPANT$1 = [
     {
       label: 'Expanded Pool',
       actionName: 'replace-with-expanded-pool',
@@ -37691,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;
       });
 
@@ -37774,7 +37839,7 @@
     // gateways
     if (is$1(businessObject, 'bpmn:Gateway')) {
 
-      entries = filter(GATEWAY, differentType);
+      entries = filter(GATEWAY$1, differentType);
 
       return this._createEntries(element, entries);
     }
@@ -37806,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;
 
@@ -37827,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)) {
@@ -38097,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,
@@ -38104,8 +38175,7 @@
         { isCollection: !entry.active });
     }
 
-    var dataObject = element.businessObject.dataObjectRef,
-        isCollection = dataObject.isCollection;
+    var isCollection = dataObject.isCollection;
 
     var dataObjectEntries = [
       {
@@ -38201,9 +38271,12 @@
   var PopupMenuModule = {
     __depends__: [
       PopupMenuModule$1,
-      ReplaceModule
+      ReplaceModule,
+      AutoPlaceModule
+    ],
+    __init__: [
+      'replaceMenuProvider'
     ],
-    __init__: [ 'replaceMenuProvider' ],
     replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
   };
 
@@ -38646,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 = {
@@ -46525,7 +48340,7 @@
     }
 
     return some(types, function(type) {
-      return hasEventDefinition$2(element, type);
+      return hasEventDefinition$3(element, type);
     });
   }
 
@@ -52483,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;
 
@@ -52672,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;
       }
 
@@ -58101,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';
 
 
@@ -61339,6 +62706,7 @@
     ContextPadModule,
     CopyPasteModule,
     CreateModule,
+    CreateAppendAnythingModule,
     DistributeElementsModule,
     EditorActionsModule,
     GridSnappingModule,