camunda-bpmn-js 4.0.0-0 → 4.0.0

package/dist/camunda-platform-navigated-viewer.development.js

@@ -11,7 +11,7 @@
    *
    * @template T
    *
-   * @param {T[][]} arr
+   * @param {T[][] | T[] | null} [arr]
    *
    * @return {T[]}
    */
@@ -27,6 +27,10 @@
     return obj !== undefined;
   }
 
+  function isNil(obj) {
+    return obj == null;
+  }
+
   function isArray$2(obj) {
     return nativeToString$1.call(obj) === '[object Array]';
   }
@@ -475,6 +479,58 @@
     return Object.assign(target, ...others);
   }
 
+  /**
+   * Sets a nested property of a given object to the specified value.
+   *
+   * This mutates the object and returns it.
+   *
+   * @template T
+   *
+   * @param {T} target The target of the set operation.
+   * @param {(string|number)[]} path The path to the nested value.
+   * @param {any} value The value to set.
+   *
+   * @return {T}
+   */
+  function set$2(target, path, value) {
+
+    let currentTarget = target;
+
+    forEach$1(path, function(key, idx) {
+
+      if (typeof key !== 'number' && typeof key !== 'string') {
+        throw new Error('illegal key type: ' + typeof key + '. Key should be of type number or string.');
+      }
+
+      if (key === 'constructor') {
+        throw new Error('illegal key: constructor');
+      }
+
+      if (key === '__proto__') {
+        throw new Error('illegal key: __proto__');
+      }
+
+      let nextKey = path[idx + 1];
+      let nextTarget = currentTarget[key];
+
+      if (isDefined(nextKey) && isNil(nextTarget)) {
+        nextTarget = currentTarget[key] = isNaN(+nextKey) ? {} : [];
+      }
+
+      if (isUndefined$2(nextKey)) {
+        if (isUndefined$2(value)) {
+          delete currentTarget[key];
+        } else {
+          currentTarget[key] = value;
+        }
+      } else {
+        currentTarget = nextTarget;
+      }
+    });
+
+    return target;
+  }
+
   /**
    * Pick properties from the given target.
    *
@@ -713,6 +769,26 @@
     return true;
   }
 
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  function isHorizontal(element) {
+
+    if (!is$1(element, 'bpmn:Participant') && !is$1(element, 'bpmn:Lane')) {
+      return undefined;
+    }
+
+    var isHorizontal = getDi(element).isHorizontal;
+
+    if (isHorizontal === undefined) {
+      return true;
+    }
+
+    return isHorizontal;
+  }
+
   /**
    * @param {Element} element
    *
@@ -1784,6 +1860,7 @@
   }
 
   var black = 'hsl(225, 10%, 15%)';
+  var white = 'white';
 
   // element utils //////////////////////
 
@@ -1831,39 +1908,42 @@
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getFillColor(element, defaultColor) {
+  function getFillColor(element, defaultColor, overrideColor) {
     var di = getDi(element);
 
-    return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
+    return overrideColor || di.get('color:background-color') || di.get('bioc:fill') || defaultColor || white;
   }
 
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getStrokeColor(element, defaultColor) {
+  function getStrokeColor(element, defaultColor, overrideColor) {
     var di = getDi(element);
 
-    return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
+    return overrideColor || di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
   }
 
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
    * @param {string} [defaultStrokeColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getLabelColor(element, defaultColor, defaultStrokeColor) {
+  function getLabelColor(element, defaultColor, defaultStrokeColor, overrideColor) {
     var di = getDi(element),
         label = di.get('label');
 
-    return label && label.get('color:color') || defaultColor ||
+    return overrideColor || (label && label.get('color:color')) || defaultColor ||
       getStrokeColor(element, defaultStrokeColor);
   }
 
@@ -1967,6 +2047,45 @@
     return componentsToPath(rectPath);
   }
 
+  /**
+   * Get width and height from element or overrides.
+   *
+   * @param {Dimensions|Rect|ShapeLike} bounds
+   * @param {Object} overrides
+   *
+   * @returns {Dimensions}
+   */
+  function getBounds(bounds, overrides = {}) {
+    return {
+      width: getWidth(bounds, overrides),
+      height: getHeight(bounds, overrides)
+    };
+  }
+
+  /**
+   * Get width from element or overrides.
+   *
+   * @param {Dimensions|Rect|ShapeLike} bounds
+   * @param {Object} overrides
+   *
+   * @returns {number}
+   */
+  function getWidth(bounds, overrides = {}) {
+    return has$1(overrides, 'width') ? overrides.width : bounds.width;
+  }
+
+  /**
+   * Get height from element or overrides.
+   *
+   * @param {Dimensions|Rect|ShapeLike} bounds
+   * @param {Object} overrides
+   *
+   * @returns {number}
+   */
+  function getHeight(bounds, overrides = {}) {
+    return has$1(overrides, 'height') ? overrides.height : bounds.height;
+  }
+
   function _mergeNamespaces$1(n, m) {
     m.forEach(function (e) {
       e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -2730,15 +2849,16 @@
     }
   };
 
-  var RENDERER_IDS = new Ids();
-
-  var TASK_BORDER_RADIUS = 10;
-  var INNER_OUTER_DIST = 3;
+  var rendererIds = new Ids();
 
-  var DEFAULT_FILL_OPACITY = .95,
-      HIGH_FILL_OPACITY = .35;
+  var ELEMENT_LABEL_DISTANCE = 10,
+      INNER_OUTER_DIST = 3,
+      PARTICIPANT_STROKE_WIDTH = 1.5,
+      TASK_BORDER_RADIUS = 10;
 
-  var ELEMENT_LABEL_DISTANCE = 10;
+  var DEFAULT_OPACITY = 0.95,
+      FULL_OPACITY = 1,
+      LOW_OPACITY = 0.25;
 
   /**
    * @typedef { Partial<{
@@ -2746,6 +2866,13 @@
    *   defaultStrokeColor: string,
    *   defaultLabelColor: string
    * }> } BpmnRendererConfig
+   *
+   * @typedef { Partial<{
+   *   fill: string,
+   *   stroke: string,
+   *   width: string,
+   *   height: string
+   * }> } Attrs
    */
 
   /**
@@ -2773,7 +2900,7 @@
         defaultStrokeColor = config && config.defaultStrokeColor,
         defaultLabelColor = config && config.defaultLabelColor;
 
-    var rendererId = RENDERER_IDS.next();
+    var rendererId = rendererIds.next();
 
     var markers = {};
 
@@ -2869,7 +2996,7 @@
           cy: 6,
           r: 3.5,
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke,
             strokeWidth: 1,
 
@@ -2889,7 +3016,7 @@
         var messageflowEnd = create$1('path', {
           d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke,
             strokeWidth: 1,
 
@@ -2910,7 +3037,7 @@
           d: 'M 11 5 L 1 10 L 11 15',
           ...lineStyle({
             fill: 'none',
-            stroke: stroke,
+            stroke,
             strokeWidth: 1.5,
 
             // fix for safari / chrome / firefox bug not correctly
@@ -2931,7 +3058,7 @@
           d: 'M 1 5 L 11 10 L 1 15',
           ...lineStyle({
             fill: 'none',
-            stroke: stroke,
+            stroke,
             strokeWidth: 1.5,
 
             // fix for safari / chrome / firefox bug not correctly
@@ -2951,7 +3078,7 @@
         var conditionalFlowMarker = create$1('path', {
           d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke
           })
         });
@@ -2979,7 +3106,7 @@
       }
     }
 
-    function drawCircle(parentGfx, width, height, offset, attrs) {
+    function drawCircle(parentGfx, width, height, offset, attrs = {}) {
 
       if (isObject(offset)) {
         attrs = offset;
@@ -2990,10 +3117,6 @@
 
       attrs = shapeStyle(attrs);
 
-      if (attrs.fill === 'none') {
-        delete attrs.fillOpacity;
-      }
-
       var cx = width / 2,
           cy = height / 2;
 
@@ -3093,7 +3216,6 @@
     }
 
     function drawPath(parentGfx, d, attrs) {
-
       attrs = lineStyle(attrs);
 
       var path = create$1('path', {
@@ -3115,171 +3237,13 @@
     }
 
     function as(type) {
-      return function(parentGfx, element, options) {
-        return renderer(type)(parentGfx, element, options);
-      };
-    }
-
-    function renderEventContent(element, parentGfx) {
-
-      var event = getBusinessObject(element);
-      var isThrowing = isThrowEvent(event);
-
-      if (event.eventDefinitions && event.eventDefinitions.length > 1) {
-        if (event.parallelMultiple) {
-          return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
-        }
-        else {
-          return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
-        }
-      }
-
-      if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-        return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-        return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-        return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
-      }
-
-      if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-        return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-        return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-        return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-        return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-        return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-        return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-        return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      return null;
-    }
-
-    function renderLabel(parentGfx, label, options) {
-
-      options = assign$1({
-        size: {
-          width: 100
-        }
-      }, options);
-
-      var text = textRenderer.createText(label || '', options);
-
-      classes$1(text).add('djs-label');
-
-      append(parentGfx, text);
-
-      return text;
-    }
-
-    function renderEmbeddedLabel(parentGfx, element, align) {
-      var semantic = getBusinessObject(element);
-
-      return renderLabel(parentGfx, semantic.name, {
-        box: element,
-        align: align,
-        padding: 7,
-        style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
-      });
-    }
-
-    function renderExternalLabel(parentGfx, element) {
-
-      var box = {
-        width: 90,
-        height: 30,
-        x: element.width / 2 + element.x,
-        y: element.height / 2 + element.y
+      return function(parentGfx, element, attrs) {
+        return renderer(type)(parentGfx, element, attrs);
       };
-
-      return renderLabel(parentGfx, getLabel(element), {
-        box: box,
-        fitBox: true,
-        style: assign$1(
-          {},
-          textRenderer.getExternalStyle(),
-          {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-          }
-        )
-      });
-    }
-
-    function renderLaneLabel(parentGfx, text, element) {
-      var textBox = renderLabel(parentGfx, text, {
-        box: {
-          height: 30,
-          width: element.height
-        },
-        align: 'center-middle',
-        style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
-      });
-
-      var top = -1 * element.height;
-
-      transform(textBox, 0, -top, 270);
     }
 
-    var handlers = this.handlers = {
-      'bpmn:Event': function(parentGfx, element, attrs) {
-
-        if (!('fillOpacity' in attrs)) {
-          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-        }
-
-        return drawCircle(parentGfx, element.width, element.height, attrs);
-      },
-      'bpmn:StartEvent': function(parentGfx, element, options) {
-        var attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        var semantic = getBusinessObject(element);
-
-        if (!semantic.isInterrupting) {
-          attrs = {
-            strokeDasharray: '6',
-            fill: getFillColor(element, defaultFillColor),
-            stroke: getStrokeColor(element, defaultStrokeColor)
-          };
-        }
-
-        var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
-
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
-        }
-
-        return circle;
-      },
-      'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
+    var eventIconRenderers = {
+      'bpmn:MessageEventDefinition': function(parentGfx, element, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
@@ -3291,22 +3255,27 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
-        var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
+        var fill = isThrowing
+          ? getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+          : getFillColor(element, defaultFillColor, attrs.fill);
+
+        var stroke = isThrowing
+          ? getFillColor(element, defaultFillColor, attrs.fill)
+          : getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
         var messagePath = drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: stroke
+          fill,
+          stroke,
+          strokeWidth: 1
         });
 
         return messagePath;
       },
-      'bpmn:TimerEventDefinition': function(parentGfx, element) {
+      'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {
         var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
 
         var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
@@ -3321,12 +3290,11 @@
         });
 
         drawPath(parentGfx, pathData, {
-          strokeWidth: 2,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
 
-        for (var i = 0;i < 12; i++) {
-
+        for (var i = 0; i < 12; i++) {
           var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
             xScaleFactor: 0.75,
             yScaleFactor: 0.75,
@@ -3338,19 +3306,19 @@
             }
           });
 
-          var width = element.width / 2;
-          var height = element.height / 2;
+          var width = element.width / 2,
+              height = element.height / 2;
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
-            stroke: getStrokeColor(element, defaultStrokeColor)
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'
           });
         }
 
         return circle;
       },
-      'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3362,15 +3330,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
+      'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs = {}) {
         var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3383,11 +3353,12 @@
         });
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill: getFillColor(event, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:LinkEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_LINK', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3399,15 +3370,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_ERROR', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
@@ -3419,15 +3392,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:CancelEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
           xScaleFactor: 1.0,
           yScaleFactor: 1.0,
@@ -3439,19 +3414,19 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor, attrs.stroke) : 'none';
 
         var path = drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
         rotate(path, 45);
 
         return path;
       },
-      'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3463,15 +3438,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:SignalEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
@@ -3483,15 +3460,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
           strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke)
         });
       },
-      'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
           xScaleFactor: 1.1,
           yScaleFactor: 1.1,
@@ -3503,14 +3482,16 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill
+          fill,
+          strokeWidth: 1
         });
       },
-      'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
+      'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs = {}) {
         var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
           xScaleFactor: 1.2,
           yScaleFactor: 1.2,
@@ -3523,501 +3504,791 @@
         });
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(event, defaultStrokeColor),
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill: getFillColor(event, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:EndEvent': function(parentGfx, element, options) {
-        var circle = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 4,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
-        }
-
-        return circle;
-      },
-      'bpmn:TerminateEventDefinition': function(parentGfx, element) {
+      'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs = {}) {
         var circle = drawCircle(parentGfx, element.width, element.height, 8, {
-          strokeWidth: 4,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 4
         });
 
         return circle;
-      },
-      'bpmn:IntermediateEvent': function(parentGfx, element, options) {
-        var outer = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+      }
+    };
 
-        /* inner */
-        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, 'none'),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+    function renderEventIcon(element, parentGfx, attrs = {}) {
+      var semantic = getBusinessObject(element),
+          isThrowing = isThrowEvent(semantic);
 
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
+      if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {
+        if (semantic.get('parallelMultiple')) {
+          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        }
+        else {
+          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
         }
+      }
 
-        return outer;
-      },
-      'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
-      'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+      if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-      'bpmn:Activity': function(parentGfx, element, attrs) {
+      if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        attrs = attrs || {};
+      if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        if (!('fillOpacity' in attrs)) {
-          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-        }
+      if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
-      },
+      if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-      'bpmn:Task': function(parentGfx, element) {
-        var attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
+      if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+      if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        renderEmbeddedLabel(parentGfx, element, 'center-middle');
-        attachTaskMarkers(parentGfx, element);
+      if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        return rect;
-      },
-      'bpmn:ServiceTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-          abspos: {
-            x: 12,
-            y: 18
+      if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
+
+      return null;
+    }
+
+    var taskMarkerRenderers = {
+      'ParticipantMultiplicityMarker': function(parentGfx, element, attrs = {}) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
+
+        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 - 6) / width),
+            my: (height - 15) / height
           }
         });
 
-        /* service bg */ drawPath(parentGfx, pathDataBG, {
+        drawMarker('participant-multiplicity', parentGfx, markerPath, {
+          strokeWidth: 2,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+        });
+      },
+      'SubProcessMarker': function(parentGfx, element, attrs = {}) {
+        var markerRect = drawRect(parentGfx, 14, 14, 0, {
           strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
 
-        var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
-          abspos: {
-            x: 17.2,
-            y: 18
+        translate$1(markerRect, element.width / 2 - 7.5, element.height - 20);
+
+        var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
+          xScaleFactor: 1.5,
+          yScaleFactor: 1.5,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: (element.width / 2 - 7.5) / element.width,
+            my: (element.height - 20) / element.height
           }
         });
 
-        /* service fill */ drawPath(parentGfx, fillPathData, {
-          strokeWidth: 0,
-          fill: getFillColor(element, defaultFillColor)
+        drawMarker('sub-process', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
+      },
+      'ParallelMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-          abspos: {
-            x: 17,
-            y: 22
+        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.parallel) / width),
+            my: (height - 20) / height
           }
         });
 
-        /* service */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('parallel', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        return task;
       },
-      'bpmn:UserTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
-
-        var x = 15;
-        var y = 12;
-
-        var pathData = pathMap.getScaledPath('TASK_TYPE_USER_1', {
-          abspos: {
-            x: x,
-            y: y
+      'SequentialMarker': function(parentGfx, element, attrs) {
+        var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: ((element.width / 2 + attrs.seq) / element.width),
+            my: (element.height - 19) / element.height
           }
         });
 
-        /* user path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 0.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('sequential', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
-          abspos: {
-            x: x,
-            y: y
+      },
+      'CompensationMarker': function(parentGfx, element, attrs) {
+        var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: ((element.width / 2 + attrs.compensation) / element.width),
+            my: (element.height - 13) / element.height
           }
         });
 
-        /* user2 path */ drawPath(parentGfx, pathData2, {
-          strokeWidth: 0.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('compensation', parentGfx, markerMath, {
+          strokeWidth: 1,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
+      },
+      'LoopMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
-          abspos: {
-            x: x,
-            y: y
+        var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.loop) / width),
+            my: (height - 7) / height
           }
         });
 
-        /* user3 path */ drawPath(parentGfx, pathData3, {
-          strokeWidth: 0.5,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('loop', parentGfx, markerPath, {
+          strokeWidth: 1.5,
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeMiterlimit: 0.5
         });
-
-        return task;
       },
-      'bpmn:ManualTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      'AdhocMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
-          abspos: {
-            x: 17,
-            y: 15
+        var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.adhoc) / width),
+            my: (height - 15) / height
           }
         });
 
-        /* manual path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 0.5, // 0.25,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('adhoc', parentGfx, markerPath, {
+          strokeWidth: 1,
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
+      }
+    };
 
-        return task;
-      },
-      'bpmn:SendTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+    function renderTaskMarker(type, parentGfx, element, attrs) {
+      taskMarkerRenderers[ type ](parentGfx, element, attrs);
+    }
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+    function renderTaskMarkers(parentGfx, element, taskMarkers, attrs = {}) {
+      attrs = {
+        fill: attrs.fill,
+        stroke: attrs.stroke,
+        width: getWidth(element, attrs),
+        height: getHeight(element, attrs)
+      };
+
+      var semantic = getBusinessObject(element);
+
+      var subprocess = taskMarkers && taskMarkers.includes('SubProcessMarker');
+
+      if (subprocess) {
+        attrs = {
+          ...attrs,
+          seq: -21,
+          parallel: -22,
+          compensation: -42,
+          loop: -18,
+          adhoc: 10
+        };
+      } else {
+        attrs = {
+          ...attrs,
+          seq: -5,
+          parallel: -6,
+          compensation: -27,
+          loop: 0,
+          adhoc: 10
+        };
+      }
+
+      forEach$1(taskMarkers, function(marker) {
+        renderTaskMarker(marker, parentGfx, element, attrs);
+      });
+
+      if (semantic.get('isForCompensation')) {
+        renderTaskMarker('CompensationMarker', parentGfx, element, attrs);
+      }
+
+      if (is$1(semantic, 'bpmn:AdHocSubProcess')) {
+        renderTaskMarker('AdhocMarker', parentGfx, element, attrs);
+      }
+
+      var loopCharacteristics = semantic.get('loopCharacteristics'),
+          isSequential = loopCharacteristics && loopCharacteristics.get('isSequential');
+
+      if (loopCharacteristics) {
+
+        if (isSequential === undefined) {
+          renderTaskMarker('LoopMarker', parentGfx, element, attrs);
+        }
+
+        if (isSequential === false) {
+          renderTaskMarker('ParallelMarker', parentGfx, element, attrs);
+        }
+
+        if (isSequential === true) {
+          renderTaskMarker('SequentialMarker', parentGfx, element, attrs);
+        }
+      }
+    }
+
+    function renderLabel(parentGfx, label, attrs = {}) {
+      attrs = assign$1({
+        size: {
+          width: 100
+        }
+      }, attrs);
+
+      var text = textRenderer.createText(label || '', attrs);
+
+      classes$1(text).add('djs-label');
+
+      append(parentGfx, text);
+
+      return text;
+    }
+
+    function renderEmbeddedLabel(parentGfx, element, align, attrs = {}) {
+      var semantic = getBusinessObject(element);
+
+      var box = getBounds({
+        x: element.x,
+        y: element.y,
+        width: element.width,
+        height: element.height
+      }, attrs);
+
+      return renderLabel(parentGfx, semantic.name, {
+        align,
+        box,
+        padding: 7,
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+        }
+      });
+    }
+
+    function renderExternalLabel(parentGfx, element, attrs = {}) {
+      var box = {
+        width: 90,
+        height: 30,
+        x: element.width / 2 + element.x,
+        y: element.height / 2 + element.y
+      };
+
+      return renderLabel(parentGfx, getLabel(element), {
+        box: box,
+        fitBox: true,
+        style: assign$1(
+          {},
+          textRenderer.getExternalStyle(),
+          {
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+          }
+        )
+      });
+    }
+
+    function renderLaneLabel(parentGfx, text, element, attrs = {}) {
+      var isHorizontalLane = isHorizontal(element);
+
+      var textBox = renderLabel(parentGfx, text, {
+        box: {
+          height: 30,
+          width: isHorizontalLane ? getHeight(element, attrs) : getWidth(element, attrs),
+        },
+        align: 'center-middle',
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+        }
+      });
+
+      if (isHorizontalLane) {
+        var top = -1 * getHeight(element, attrs);
+        transform(textBox, 0, -top, 270);
+      }
+    }
+
+    function renderActivity(parentGfx, element, attrs = {}) {
+      var {
+        width,
+        height
+      } = getBounds(element, attrs);
+
+      return drawRect(parentGfx, width, height, TASK_BORDER_RADIUS, {
+        ...attrs,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
+
+    function renderAssociation(parentGfx, element, attrs = {}) {
+      var semantic = getBusinessObject(element);
+
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+      if (semantic.get('associationDirection') === 'One' ||
+          semantic.get('associationDirection') === 'Both') {
+        attrs.markerEnd = marker('association-end', fill, stroke);
+      }
+
+      if (semantic.get('associationDirection') === 'Both') {
+        attrs.markerStart = marker('association-start', fill, stroke);
+      }
+
+      attrs = pickAttrs(attrs, [
+        'markerStart',
+        'markerEnd'
+      ]);
+
+      return drawConnectionSegments(parentGfx, element.waypoints, {
+        ...attrs,
+        stroke,
+        strokeDasharray: '0, 5'
+      });
+    }
+
+    function renderDataObject(parentGfx, element, attrs = {}) {
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.474,
+          my: 0.296
+        }
+      });
+
+      var dataObject = drawPath(parentGfx, pathData, {
+        fill,
+        fillOpacity: DEFAULT_OPACITY,
+        stroke
+      });
+
+      var semantic = getBusinessObject(element);
+
+      if (isCollection(semantic)) {
+        var collectionPathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: 21,
-          containerHeight: 14,
+          containerWidth: element.width,
+          containerHeight: element.height,
           position: {
-            mx: 0.285,
-            my: 0.357
+            mx: 0.33,
+            my: (element.height - 18) / element.height
           }
         });
 
-        /* send path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getFillColor(element, defaultFillColor)
+        drawPath(parentGfx, collectionPathData, {
+          strokeWidth: 2,
+          fill,
+          stroke
         });
+      }
 
-        return task;
-      },
-      'bpmn:ReceiveTask' : function(parentGfx, element) {
-        var semantic = getBusinessObject(element);
+      return dataObject;
+    }
 
-        var task = renderer('bpmn:Task')(parentGfx, element);
-        var pathData;
+    function renderEvent(parentGfx, element, attrs = {}) {
+      return drawCircle(parentGfx, element.width, element.height, {
+        fillOpacity: DEFAULT_OPACITY,
+        ...attrs,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
 
-        if (semantic.instantiate) {
-          drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+    function renderGateway(parentGfx, element, attrs = {}) {
+      return drawDiamond(parentGfx, element.width, element.height, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
 
-          pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
-            abspos: {
-              x: 7.77,
-              y: 9.52
-            }
-          });
-        } else {
+    function renderLane(parentGfx, element, attrs = {}) {
+      var lane = drawRect(parentGfx, getWidth(element, attrs), getHeight(element, attrs), 0, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: attrs.fillOpacity || DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1.5
+      });
 
-          pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
-            xScaleFactor: 0.9,
-            yScaleFactor: 0.9,
-            containerWidth: 21,
-            containerHeight: 14,
-            position: {
-              mx: 0.3,
-              my: 0.4
-            }
-          });
-        }
+      var semantic = getBusinessObject(element);
 
-        /* receive path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+      if (is$1(semantic, 'bpmn:Lane')) {
+        var text = semantic.get('name');
+
+        renderLaneLabel(parentGfx, text, element, attrs);
+      }
+
+      return lane;
+    }
+
+    function renderSubProcess(parentGfx, element, attrs = {}) {
+      var activity = renderActivity(parentGfx, element, attrs);
+
+      if (isEventSubProcess(element)) {
+        attr$1(activity, {
+          strokeDasharray: '0, 5.5',
+          strokeWidth: 2.5
         });
+      }
 
-        return task;
+      var expanded = isExpanded(element);
+
+      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);
+
+      if (expanded) {
+        renderTaskMarkers(parentGfx, element, undefined, attrs);
+      } else {
+        renderTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ], attrs);
+      }
+
+      return activity;
+    }
+
+    function renderTask(parentGfx, element, attrs = {}) {
+      var activity = renderActivity(parentGfx, element, attrs);
+
+      renderEmbeddedLabel(parentGfx, element, 'center-middle', attrs);
+
+      renderTaskMarkers(parentGfx, element, undefined, attrs);
+
+      return activity;
+    }
+
+    var handlers = this.handlers = {
+      'bpmn:AdHocSubProcess': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
+        }
+
+        return renderSubProcess(parentGfx, element, attrs);
       },
-      'bpmn:ScriptTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      'bpmn:Association': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
-          abspos: {
-            x: 15,
-            y: 20
-          }
-        });
+        return renderAssociation(parentGfx, element, attrs);
+      },
+      'bpmn:BoundaryEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        /* script path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var semantic = getBusinessObject(element),
+            cancelActivity = semantic.get('cancelActivity');
+
+        attrs = {
+          strokeWidth: 1.5,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          fillOpacity: FULL_OPACITY,
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+        };
+
+        if (!cancelActivity) {
+          attrs.strokeDasharray = '6';
+        }
+
+        var event = renderEvent(parentGfx, element, attrs);
+
+        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+          ...attrs,
+          fill: 'none'
         });
 
-        return task;
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
+        }
+
+        return event;
       },
-      'bpmn:BusinessRuleTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      'bpmn:BusinessRuleTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
+        var task = renderTask(parentGfx, element, attrs);
+
+        var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
           abspos: {
             x: 8,
             y: 8
           }
         });
 
-        var businessHeaderPath = drawPath(parentGfx, headerPathData);
-        attr$1(businessHeaderPath, {
-          strokeWidth: 1,
-          fill: getFillColor(element, '#aaaaaa'),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        var businessPath = drawPath(parentGfx, headerData);
+
+        attr$1(businessPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
+        var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
           abspos: {
             x: 8,
             y: 8
           }
         });
 
-        var businessPath = drawPath(parentGfx, headerData);
-        attr$1(businessPath, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        var businessHeaderPath = drawPath(parentGfx, headerPathData);
+
+        attr$1(businessHeaderPath, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
         return task;
       },
-      'bpmn:SubProcess': function(parentGfx, element, attrs) {
-        attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
+      'bpmn:CallActivity': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderSubProcess(parentGfx, element, {
+          strokeWidth: 5,
           ...attrs
-        };
+        });
+      },
+      'bpmn:ComplexGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+        var gateway = renderGateway(parentGfx, element, attrs);
 
-        var expanded = isExpanded(element);
+        var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
+          xScaleFactor: 0.5,
+          yScaleFactor:0.5,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.46,
+            my: 0.26
+          }
+        });
 
-        if (isEventSubProcess(element)) {
-          attr$1(rect, {
-            strokeDasharray: '0, 5.5',
-            strokeWidth: 2.5
-          });
-        }
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
 
-        renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
+        return gateway;
+      },
+      'bpmn:DataInput': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        if (expanded) {
-          attachTaskMarkers(parentGfx, element);
-        } else {
-          attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
-        }
+        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
-        return rect;
-      },
-      'bpmn:AdHocSubProcess': function(parentGfx, element) {
-        return renderer('bpmn:SubProcess')(parentGfx, element);
-      },
-      'bpmn:Transaction': function(parentGfx, element) {
-        var outer = renderer('bpmn:SubProcess')(parentGfx, element, { strokeWidth: 1.5 });
+        var dataObject = renderDataObject(parentGfx, element, attrs);
 
-        var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1.5
+        drawPath(parentGfx, arrowPathData, {
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
-
-        return outer;
+        return dataObject;
       },
-      'bpmn:CallActivity': function(parentGfx, element) {
-        return renderer('bpmn:SubProcess')(parentGfx, element, {
-          strokeWidth: 5
+      'bpmn:DataInputAssociation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderAssociation(parentGfx, element, {
+          ...attrs,
+          markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
         });
       },
-      'bpmn:Participant': function(parentGfx, element) {
-
-        var strokeWidth = 1.5;
-
-        var attrs = {
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth
-        };
-
-        var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
-
-        var expandedPool = isExpanded(element);
-
-        if (expandedPool) {
-          drawLine(parentGfx, [
-            { x: 30, y: 0 },
-            { x: 30, y: element.height }
-          ], {
-            stroke: getStrokeColor(element, defaultStrokeColor),
-            strokeWidth
-          });
-          var text = getBusinessObject(element).name;
-          renderLaneLabel(parentGfx, text, element);
-        } else {
-
-          // collapsed pool draw text inline
-          var text2 = getBusinessObject(element).name;
-          renderLabel(parentGfx, text2, {
-            box: element, align: 'center-middle',
-            style: {
-              fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-            }
-          });
-        }
-
-        var participantMultiplicity = !!(getBusinessObject(element).participantMultiplicity);
-
-        if (participantMultiplicity) {
-          renderer('ParticipantMultiplicityMarker')(parentGfx, element);
-        }
+      'bpmn:DataObject': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        return lane;
+        return renderDataObject(parentGfx, element, attrs);
       },
-      'bpmn:Lane': function(parentGfx, element, attrs) {
-        var rect = drawRect(parentGfx, element.width, element.height, 0, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: HIGH_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1.5,
-          ...attrs
-        });
-
-        var semantic = getBusinessObject(element);
+      'bpmn:DataObjectReference': as('bpmn:DataObject'),
+      'bpmn:DataOutput': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        if (semantic.$type === 'bpmn:Lane') {
-          var text = semantic.name;
-          renderLaneLabel(parentGfx, text, element);
-        }
+        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
-        return rect;
-      },
-      'bpmn:InclusiveGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+        var dataObject = renderDataObject(parentGfx, element, attrs);
 
-        /* circle path */
-        drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
-          strokeWidth: 2.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, arrowPathData, {
+          strokeWidth: 1,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
 
-        return diamond;
+        return dataObject;
       },
-      'bpmn:ExclusiveGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:DataOutputAssociation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
-          xScaleFactor: 0.4,
-          yScaleFactor: 0.4,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: 0.32,
-            my: 0.3
-          }
+        return renderAssociation(parentGfx, element, {
+          ...attrs,
+          markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
         });
-
-        if ((getDi(element).isMarkerVisible)) {
-          drawPath(parentGfx, pathData, {
-            strokeWidth: 1,
-            fill: getStrokeColor(element, defaultStrokeColor),
-            stroke: getStrokeColor(element, defaultStrokeColor)
-          });
-        }
-
-        return diamond;
       },
-      'bpmn:ComplexGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:DataStoreReference': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
-          xScaleFactor: 0.5,
-          yScaleFactor:0.5,
+        var dataStorePath = pathMap.getScaledPath('DATA_STORE', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
           containerWidth: element.width,
           containerHeight: element.height,
           position: {
-            mx: 0.46,
-            my: 0.26
+            mx: 0,
+            my: 0.133
           }
         });
 
-        /* complex path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        return drawPath(parentGfx, dataStorePath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          fillOpacity: DEFAULT_OPACITY,
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
-
-        return diamond;
       },
-      'bpmn:ParallelGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:EndEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
-          xScaleFactor: 0.6,
-          yScaleFactor:0.6,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: 0.46,
-            my: 0.2
-          }
-        });
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        /* parallel path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        var event = renderEvent(parentGfx, element, {
+          ...attrs,
+          strokeWidth: 4
         });
 
-        return diamond;
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
+        }
+
+        return event;
       },
-      'bpmn:EventBasedGateway': function(parentGfx, element) {
+      'bpmn:EventBasedGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
         var semantic = getBusinessObject(element);
 
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+        var diamond = renderGateway(parentGfx, element, attrs);
 
-        /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
-          strokeWidth: 1,
-          fill: 'none',
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
+          fill: getFillColor(element, 'none', attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        var type = semantic.eventGatewayType;
-        var instantiate = !!semantic.instantiate;
+        var type = semantic.get('eventGatewayType'),
+            instantiate = !!semantic.get('instantiate');
 
         function drawEvent() {
 
@@ -4032,18 +4303,17 @@
             }
           });
 
-          /* event path */ drawPath(parentGfx, pathData, {
-            strokeWidth: 2,
-            fill: getFillColor(element, 'none'),
-            stroke: getStrokeColor(element, defaultStrokeColor)
+          drawPath(parentGfx, pathData, {
+            fill: 'none',
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 2
           });
         }
 
         if (type === 'Parallel') {
-
           var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
             xScaleFactor: 0.4,
-            yScaleFactor:0.4,
+            yScaleFactor: 0.4,
             containerWidth: element.width,
             containerHeight: element.height,
             position: {
@@ -4053,16 +4323,16 @@
           });
 
           drawPath(parentGfx, pathData, {
-            strokeWidth: 1,
-            fill: 'none'
+            fill: 'none',
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
           });
         } else if (type === 'Exclusive') {
-
           if (!instantiate) {
             drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
-              strokeWidth: 1,
               fill: 'none',
-              stroke: getStrokeColor(element, defaultStrokeColor)
+              stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+              strokeWidth: 1
             });
           }
 
@@ -4072,104 +4342,163 @@
 
         return diamond;
       },
-      'bpmn:Gateway': function(parentGfx, element) {
-        return drawDiamond(parentGfx, element.width, element.height, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      },
-      'bpmn:SequenceFlow': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+      'bpmn:ExclusiveGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var path = drawConnectionSegments(parentGfx, element.waypoints, {
-          markerEnd: marker('sequenceflow-end', fill, stroke),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        var gateway = renderGateway(parentGfx, element, attrs);
 
-        var sequenceFlow = getBusinessObject(element);
+        var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
+          xScaleFactor: 0.4,
+          yScaleFactor: 0.4,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.32,
+            my: 0.3
+          }
+        });
 
-        var source;
+        var di = getDi(element);
 
-        if (element.source) {
-          source = element.source.businessObject;
+        if (di.get('isMarkerVisible')) {
+          drawPath(parentGfx, pathData, {
+            fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
+          });
+        }
 
-          // conditional flow marker
-          if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-            attr$1(path, {
-              markerStart: marker('conditional-flow-marker', fill, stroke)
-            });
-          }
+        return gateway;
+      },
+      'bpmn:Gateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-          // default marker
-          if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
-              source.default === sequenceFlow) {
-            attr$1(path, {
-              markerStart: marker('conditional-default-flow-marker', fill, stroke)
-            });
-          }
-        }
+        return renderGateway(parentGfx, element, attrs);
+      },
+      'bpmn:Group': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
 
-        return path;
+        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5,
+          strokeDasharray: '10, 6, 0, 6',
+          fill: 'none',
+          pointerEvents: 'none',
+          width: getWidth(element, attrs),
+          height: getHeight(element, attrs)
+        });
       },
-      'bpmn:Association': function(parentGfx, element, attrs) {
+      'bpmn:InclusiveGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var semantic = getBusinessObject(element);
+        var gateway = renderGateway(parentGfx, element, attrs);
 
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+        drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2.5
+        });
 
-        attrs = {
-          strokeDasharray: '0, 5',
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          ...attrs
-        };
+        return gateway;
+      },
+      'bpmn:IntermediateEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        if (semantic.associationDirection === 'One' ||
-            semantic.associationDirection === 'Both') {
-          attrs.markerEnd = marker('association-end', fill, stroke);
-        }
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var outer = renderEvent(parentGfx, element, {
+          ...attrs,
+          strokeWidth: 1.5
+        });
+
+        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5
+        });
 
-        if (semantic.associationDirection === 'Both') {
-          attrs.markerStart = marker('association-start', fill, stroke);
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
         }
 
-        return drawConnectionSegments(parentGfx, element.waypoints, attrs);
+        return outer;
       },
-      'bpmn:DataInputAssociation': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
-
-        return renderer('bpmn:Association')(parentGfx, element, {
-          markerEnd: marker('association-end', fill, stroke)
+      'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
+      'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+      'bpmn:Lane': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        return renderLane(parentGfx, element, {
+          ...attrs,
+          fillOpacity: LOW_OPACITY
         });
       },
-      'bpmn:DataOutputAssociation': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+      'bpmn:ManualTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
+          abspos: {
+            x: 17,
+            y: 15
+          }
+        });
 
-        return renderer('bpmn:Association')(parentGfx, element, {
-          markerEnd: marker('association-end', fill, stroke)
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
         });
+
+        return task;
       },
-      'bpmn:MessageFlow': function(parentGfx, element) {
+      'bpmn:MessageFlow': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
         var semantic = getBusinessObject(element),
             di = getDi(element);
 
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+        var fill = getFillColor(element, defaultFillColor, attrs.fill),
+            stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
         var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('messageflow-end', fill, stroke),
           markerStart: marker('messageflow-start', fill, stroke),
+          stroke,
           strokeDasharray: '10, 11',
-          strokeWidth: 1.5,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          strokeWidth: 1.5
         });
 
-        if (semantic.messageRef) {
+        if (semantic.get('messageRef')) {
           var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
 
           var markerPathData = pathMap.getScaledPath('MESSAGE_FLOW_MARKER', {
@@ -4179,404 +4508,518 @@
             }
           });
 
-          var messageAttrs = { strokeWidth: 1 };
+          var messageAttrs = {
+            strokeWidth: 1
+          };
+
+          if (di.get('messageVisibleKind') === 'initiating') {
+            messageAttrs.fill = fill;
+            messageAttrs.stroke = stroke;
+          } else {
+            messageAttrs.fill = stroke;
+            messageAttrs.stroke = fill;
+          }
+
+          var message = drawPath(parentGfx, markerPathData, messageAttrs);
+
+          var messageRef = semantic.get('messageRef'),
+              name = messageRef.get('name');
+
+          var label = renderLabel(parentGfx, name, {
+            align: 'center-top',
+            fitBox: true,
+            style: {
+              fill: stroke
+            }
+          });
+
+          var messageBounds = message.getBBox(),
+              labelBounds = label.getBBox();
+
+          var translateX = midPoint.x - labelBounds.width / 2,
+              translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;
+
+          transform(label, translateX, translateY, 0);
+        }
+
+        return path;
+      },
+      'bpmn:ParallelGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var diamond = renderGateway(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
+          xScaleFactor: 0.6,
+          yScaleFactor: 0.6,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.46,
+            my: 0.2
+          }
+        });
+
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        return diamond;
+      },
+      'bpmn:Participant': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        var participant = renderLane(parentGfx, element, attrs);
+
+        var expandedParticipant = isExpanded(element);
+        var horizontalParticipant = isHorizontal(element);
+
+        var semantic = getBusinessObject(element),
+            name = semantic.get('name');
+
+        if (expandedParticipant) {
+          var waypoints = horizontalParticipant ? [
+            {
+              x: 30,
+              y: 0
+            },
+            {
+              x: 30,
+              y: getHeight(element, attrs)
+            }
+          ] : [
+            {
+              x: 0,
+              y: 30
+            },
+            {
+              x: getWidth(element, attrs),
+              y: 30
+            }
+          ];
+
+          drawLine(parentGfx, waypoints, {
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: PARTICIPANT_STROKE_WIDTH
+          });
+
+          renderLaneLabel(parentGfx, name, element, attrs);
+        } else {
+          var bounds = getBounds(element, attrs);
 
-          if (di.messageVisibleKind === 'initiating') {
-            messageAttrs.fill = 'white';
-            messageAttrs.stroke = black;
-          } else {
-            messageAttrs.fill = '#888';
-            messageAttrs.stroke = 'white';
+          if (!horizontalParticipant) {
+            bounds.height = getWidth(element, attrs);
+            bounds.width = getHeight(element, attrs);
           }
 
-          var message = drawPath(parentGfx, markerPathData, messageAttrs);
-
-          var labelText = semantic.messageRef.name;
-          var label = renderLabel(parentGfx, labelText, {
-            align: 'center-top',
-            fitBox: true,
+          var textBox = renderLabel(parentGfx, name, {
+            box: bounds,
+            align: 'center-middle',
             style: {
-              fill: getStrokeColor(element, defaultLabelColor)
+              fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
             }
           });
 
-          var messageBounds = message.getBBox(),
-              labelBounds = label.getBBox();
-
-          var translateX = midPoint.x - labelBounds.width / 2,
-              translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;
-
-          transform(label, translateX, translateY, 0);
+          if (!horizontalParticipant) {
+            var top = -1 * getHeight(element, attrs);
+            transform(textBox, 0, -top, 270);
+          }
+        }
 
+        if (semantic.get('participantMultiplicity')) {
+          renderTaskMarker('ParticipantMultiplicityMarker', parentGfx, element, attrs);
         }
 
-        return path;
+        return participant;
       },
-      'bpmn:DataObject': function(parentGfx, element) {
-        var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: 0.474,
-            my: 0.296
-          }
-        });
-
-        var elementObject = drawPath(parentGfx, pathData, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+      'bpmn:ReceiveTask' : function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
         var semantic = getBusinessObject(element);
 
-        if (isCollection(semantic)) {
-          renderDataItemCollection(parentGfx, element);
-        }
+        var task = renderTask(parentGfx, element, attrs);
 
-        return elementObject;
-      },
-      'bpmn:DataObjectReference': as('bpmn:DataObject'),
-      'bpmn:DataInput': function(parentGfx, element) {
+        var pathData;
 
-        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+        if (semantic.get('instantiate')) {
+          drawCircle(parentGfx, 28, 28, 20 * 0.22, {
+            fill: getFillColor(element, defaultFillColor, attrs.fill),
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
+          });
 
-        // page
-        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+          pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
+            abspos: {
+              x: 7.77,
+              y: 9.52
+            }
+          });
+        } else {
+          pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+            xScaleFactor: 0.9,
+            yScaleFactor: 0.9,
+            containerWidth: 21,
+            containerHeight: 14,
+            position: {
+              mx: 0.3,
+              my: 0.4
+            }
+          });
+        }
 
-        /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
 
-        return elementObject;
+        return task;
       },
-      'bpmn:DataOutput': function(parentGfx, element) {
-        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+      'bpmn:ScriptTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        // page
-        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+        var task = renderTask(parentGfx, element, attrs);
 
-        /* output arrow path */ drawPath(parentGfx, arrowPathData, {
-          strokeWidth: 1,
-          fill: black
+        var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
+          abspos: {
+            x: 15,
+            y: 20
+          }
         });
 
-        return elementObject;
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        return task;
       },
-      'bpmn:DataStoreReference': function(parentGfx, element) {
-        var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
+      'bpmn:SendTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: 21,
+          containerHeight: 14,
           position: {
-            mx: 0,
-            my: 0.133
+            mx: 0.285,
+            my: 0.357
           }
         });
 
-        var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getFillColor(element, defaultFillColor, attrs.fill),
+          strokeWidth: 1
         });
 
-        return elementStore;
+        return task;
       },
-      'bpmn:BoundaryEvent': function(parentGfx, element, options) {
-
-        var semantic = getBusinessObject(element),
-            cancel = semantic.cancelActivity;
+      'bpmn:SequenceFlow': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var attrs = {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
+        var fill = getFillColor(element, defaultFillColor, attrs.fill),
+            stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
-        if (!cancel) {
-          attrs.strokeDasharray = '6';
-        }
+        var connection = drawConnectionSegments(parentGfx, element.waypoints, {
+          markerEnd: marker('sequenceflow-end', fill, stroke),
+          stroke
+        });
 
-        // apply fillOpacity
-        var outerAttrs = {
-          ...attrs,
-          fillOpacity: 1
-        };
+        var semantic = getBusinessObject(element);
 
-        // apply no-fill
-        var innerAttrs = {
-          ...attrs,
-          fill: 'none'
-        };
+        var { source } = element;
 
-        var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+        if (source) {
+          var sourceSemantic = getBusinessObject(source);
 
-        /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
+          // conditional flow marker
+          if (semantic.get('conditionExpression') && is$1(sourceSemantic, 'bpmn:Activity')) {
+            attr$1(connection, {
+              markerStart: marker('conditional-flow-marker', fill, stroke)
+            });
+          }
 
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
+          // default marker
+          if (sourceSemantic.get('default') && (is$1(sourceSemantic, 'bpmn:Gateway') || is$1(sourceSemantic, 'bpmn:Activity')) &&
+              sourceSemantic.get('default') === semantic) {
+            attr$1(connection, {
+              markerStart: marker('conditional-default-flow-marker', fill, stroke)
+            });
+          }
         }
 
-        return outer;
-      },
-      'bpmn:Group': function(parentGfx, element) {
-        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1.5,
-          strokeDasharray: '10,6,0,6',
-          fill: 'none',
-          pointerEvents: 'none'
-        });
+        return connection;
       },
-      'label': function(parentGfx, element) {
-        return renderExternalLabel(parentGfx, element);
-      },
-      'bpmn:TextAnnotation': function(parentGfx, element) {
-        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, {
-          'fill': 'none',
-          'stroke': 'none'
+      'bpmn:ServiceTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        drawCircle(parentGfx, 10, 10, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: 'none',
+          transform: 'translate(6, 6)'
         });
 
-        var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: 0.0,
-            my: 0.0
+        var pathDataService1 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+          abspos: {
+            x: 12,
+            y: 18
           }
         });
 
-        drawPath(parentGfx, textPathData, {
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathDataService1, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        var text = getBusinessObject(element).text || '';
-        renderLabel(parentGfx, text, {
-          box: element,
-          align: 'left-top',
-          padding: 7,
-          style: {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-          }
+        drawCircle(parentGfx, 10, 10, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: 'none',
+          transform: 'translate(11, 10)'
         });
 
-        return textElement;
-      },
-      'ParticipantMultiplicityMarker': function(parentGfx, element) {
-        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2) / element.width),
-            my: (element.height - 15) / element.height
+        var pathDataService2 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+          abspos: {
+            x: 17,
+            y: 22
           }
         });
 
-        drawMarker('participant-multiplicity', parentGfx, markerPath, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathDataService2, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
+
+        return task;
       },
-      'SubProcessMarker': function(parentGfx, element) {
-        var markerRect = drawRect(parentGfx, 14, 14, 0, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+      'bpmn:StartEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        // Process marker is placed in the middle of the box
-        // therefore fixed values can be used here
-        translate$1(markerRect, element.width / 2 - 7.5, element.height - 20);
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
-          xScaleFactor: 1.5,
-          yScaleFactor: 1.5,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: (element.width / 2 - 7.5) / element.width,
-            my: (element.height - 20) / element.height
-          }
-        });
+        var semantic = getBusinessObject(element);
 
-        drawMarker('sub-process', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      },
-      'ParallelMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.parallel) / element.width),
-            my: (element.height - 20) / element.height
-          }
-        });
+        if (!semantic.get('isInterrupting')) {
+          attrs = {
+            ...attrs,
+            strokeDasharray: '6'
+          };
+        }
 
-        drawMarker('parallel', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        var event = renderEvent(parentGfx, element, attrs);
+
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
+        }
+
+        return event;
       },
-      'SequentialMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.seq) / element.width),
-            my: (element.height - 19) / element.height
-          }
-        });
+      'bpmn:SubProcess': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
+        }
 
-        drawMarker('sequential', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        return renderSubProcess(parentGfx, element, attrs);
       },
-      'CompensationMarker': function(parentGfx, element, position) {
-        var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.compensation) / element.width),
-            my: (element.height - 13) / element.height
-          }
-        });
+      'bpmn:Task': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        drawMarker('compensation', parentGfx, markerMath, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        return renderTask(parentGfx, element, attrs);
       },
-      'LoopMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.loop) / element.width),
-            my: (element.height - 7) / element.height
-          }
+      'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        var {
+          width,
+          height
+        } = getBounds(element, attrs);
+
+        var textElement = drawRect(parentGfx, width, height, 0, 0, {
+          fill: 'none',
+          stroke: 'none'
         });
 
-        drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeMiterlimit: 0.5
-        });
-      },
-      'AdhocMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
+        var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: width,
+          containerHeight: height,
           position: {
-            mx: ((element.width / 2 + position.adhoc) / element.width),
-            my: (element.height - 15) / element.height
+            mx: 0.0,
+            my: 0.0
           }
         });
 
-        drawMarker('adhoc', parentGfx, markerPath, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, textPathData, {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-      }
-    };
 
-    function attachTaskMarkers(parentGfx, element, taskMarkers) {
-      var obj = getBusinessObject(element);
+        var semantic = getBusinessObject(element),
+            text = semantic.get('text') || '';
 
-      var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
-      var position;
+        renderLabel(parentGfx, text, {
+          align: 'left-top',
+          box: getBounds(element, attrs),
+          padding: 7,
+          style: {
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+          }
+        });
 
-      if (subprocess) {
-        position = {
-          seq: -21,
-          parallel: -22,
-          compensation: -42,
-          loop: -18,
-          adhoc: 10
-        };
-      } else {
-        position = {
-          seq: -3,
-          parallel: -6,
-          compensation: -27,
-          loop: 0,
-          adhoc: 10
-        };
-      }
+        return textElement;
+      },
+      'bpmn:Transaction': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
+        }
+
+        var outer = renderSubProcess(parentGfx, element, {
+          strokeWidth: 1.5,
+          ...attrs
+        });
 
-      forEach$1(taskMarkers, function(marker) {
-        renderer(marker)(parentGfx, element, position);
-      });
+        var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5
+        });
 
-      if (obj.isForCompensation) {
-        renderer('CompensationMarker')(parentGfx, element, position);
-      }
+        var expanded = isExpanded(element);
 
-      if (obj.$type === 'bpmn:AdHocSubProcess') {
-        renderer('AdhocMarker')(parentGfx, element, position);
-      }
+        if (!expanded) {
+          attrs = {};
+        }
 
-      var loopCharacteristics = obj.loopCharacteristics,
-          isSequential = loopCharacteristics && loopCharacteristics.isSequential;
+        drawRect(
+          parentGfx,
+          getWidth(element, attrs),
+          getHeight(element, attrs),
+          TASK_BORDER_RADIUS - INNER_OUTER_DIST,
+          INNER_OUTER_DIST,
+          innerAttrs
+        );
 
-      if (loopCharacteristics) {
+        return outer;
+      },
+      'bpmn:UserTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        if (isSequential === undefined) {
-          renderer('LoopMarker')(parentGfx, element, position);
-        }
+        var task = renderTask(parentGfx, element, attrs);
 
-        if (isSequential === false) {
-          renderer('ParallelMarker')(parentGfx, element, position);
-        }
+        var x = 15;
+        var y = 12;
 
-        if (isSequential === true) {
-          renderer('SequentialMarker')(parentGfx, element, position);
-        }
-      }
-    }
+        var pathDataUser1 = pathMap.getScaledPath('TASK_TYPE_USER_1', {
+          abspos: {
+            x: x,
+            y: y
+          }
+        });
 
-    function renderDataItemCollection(parentGfx, element) {
+        drawPath(parentGfx, pathDataUser1, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
+        });
+
+        var pathDataUser2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
+          abspos: {
+            x: x,
+            y: y
+          }
+        });
 
-      var yPosition = (element.height - 18) / element.height;
+        drawPath(parentGfx, pathDataUser2, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
+        });
 
-      var pathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: 0.33,
-          my: yPosition
-        }
-      });
+        var pathDataUser3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
+          abspos: {
+            x: x,
+            y: y
+          }
+        });
 
-      /* collection path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 2
-      });
-    }
+        drawPath(parentGfx, pathDataUser3, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
+        });
 
+        return task;
+      },
+      'label': function(parentGfx, element, attrs = {}) {
+        return renderExternalLabel(parentGfx, element, attrs);
+      }
+    };
 
     // extension API, use at your own risk
     this._drawPath = drawPath;
@@ -4611,15 +5054,16 @@
    *
    * @param {SVGElement} parentGfx
    * @param {Element} element
+   * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
-    var type = element.type;
-    var h = this._renderer(type);
+  BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs = {}) {
+    var { type } = element;
 
-    /* jshint -W040 */
-    return h(parentGfx, element);
+    var handler = this._renderer(type);
+
+    return handler(parentGfx, element, attrs);
   };
 
   /**
@@ -4627,15 +5071,16 @@
    *
    * @param {SVGElement} parentGfx
    * @param {Element} element
+   * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
-    var type = element.type;
-    var h = this._renderer(type);
+  BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs = {}) {
+    var { type } = element;
+
+    var handler = this._renderer(type);
 
-    /* jshint -W040 */
-    return h(parentGfx, element);
+    return handler(parentGfx, element, attrs);
   };
 
   /**
@@ -4646,7 +5091,6 @@
    * @return {string} path
    */
   BpmnRenderer.prototype.getShapePath = function(element) {
-
     if (is$1(element, 'bpmn:Event')) {
       return getCirclePath(element);
     }
@@ -4662,6 +5106,24 @@
     return getRectPath(element);
   };
 
+  /**
+   * Pick attributes if they exist.
+   *
+   * @param {Object} attrs
+   * @param {string[]} keys
+   *
+   * @returns {Object}
+   */
+  function pickAttrs(attrs, keys = []) {
+    return keys.reduce((pickedAttrs, key) => {
+      if (attrs[ key ]) {
+        pickedAttrs[ key ] = attrs[ key ];
+      }
+
+      return pickedAttrs;
+    }, {});
+  }
+
   /**
    * @typedef {import('../util/Types').Dimensions} Dimensions
    *
@@ -5758,10 +6220,6 @@
     translate: [ 'value', translate ]
   };
 
-  function getDefaultExportFromCjs (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-  }
-
   /**
    * @param {Point} point
    *
@@ -6350,26 +6808,6 @@
     return isButton(event, 1);
   }
 
-  /**
-   * @param {MouseEvent} event
-   *
-   * @return {boolean}
-   */
-  function hasPrimaryModifier(event) {
-    var originalEvent = getOriginal(event) || event;
-
-    if (!isPrimaryButton(event)) {
-      return false;
-    }
-
-    // Use cmd as primary modifier key for mac OS
-    if (isMac()) {
-      return originalEvent.metaKey;
-    } else {
-      return originalEvent.ctrlKey;
-    }
-  }
-
   /**
    * @param {MouseEvent} event
    *
@@ -6970,6 +7408,8 @@
 
   var LOW_PRIORITY$3 = 500;
 
+  var DEFAULT_PRIORITY$3 = 1000;
+
   /**
    * @typedef {import('../../model/Types').Element} Element
    *
@@ -6988,25 +7428,30 @@
    */
   function Outline(eventBus, styles) {
 
-    this.offset = 6;
+    this._eventBus = eventBus;
+
+    this.offset = 5;
 
     var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
 
     var self = this;
 
-    function createOutline(gfx, bounds) {
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
       var outline = create$1('rect');
 
       attr$1(outline, assign$1({
-        x: 10,
-        y: 10,
+        x: 0,
+        y: 0,
         rx: 4,
         width: 100,
         height: 100
       }, OUTLINE_STYLE));
 
-      append(gfx, outline);
-
       return outline;
     }
 
@@ -7019,7 +7464,8 @@
       var outline = query('.djs-outline', gfx);
 
       if (!outline) {
-        outline = createOutline(gfx);
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
       }
 
       self.updateShapeOutline(outline, element);
@@ -7032,7 +7478,8 @@
       var outline = query('.djs-outline', gfx);
 
       if (!outline) {
-        outline = createOutline(gfx);
+        outline = createOutline();
+        append(gfx, outline);
       }
 
       self.updateConnectionOutline(outline, element);
@@ -7049,25 +7496,34 @@
    */
   Outline.prototype.updateShapeOutline = function(outline, element) {
 
-    attr$1(outline, {
-      x: -this.offset,
-      y: -this.offset,
-      width: element.width + this.offset * 2,
-      height: element.height + this.offset * 2
-    });
+    var updated = false;
+    var providers = this._getProviders();
 
-  };
+    if (providers.length) {
+      forEach$1(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
 
+    if (!updated) {
+      attr$1(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
 
   /**
    * Updates the outline of a connection respecting the bounding box of
    * the connection and an outline offset.
+   * Register an outline provider with the given priority.
    *
    * @param {SVGElement} outline
    * @param {Element} connection
    */
   Outline.prototype.updateConnectionOutline = function(outline, connection) {
-
     var bbox = getBBox(connection);
 
     attr$1(outline, {
@@ -7076,9 +7532,61 @@
       width: bbox.width + this.offset * 2,
       height: bbox.height + this.offset * 2
     });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$3;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
 
+    return event.providers;
   };
 
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   **/
+  Outline.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$1(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
 
   Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
 
@@ -7420,8 +7928,8 @@
       var isSelected = selection.isSelected(element),
           isMultiSelect = selection.get().length > 1;
 
-      // Add to selection if CTRL or SHIFT pressed
-      var add = hasPrimaryModifier(event) || hasSecondaryModifier(event);
+      // Add to selection if SHIFT pressed
+      var add = hasSecondaryModifier(event);
 
       if (isSelected && isMultiSelect) {
         if (add) {
@@ -9397,7 +9905,7 @@
   }
 
   /**
-   * @typedef {import('./index').InjectAnnotated } InjectAnnotated
+   * @typedef {import('./index.js').InjectAnnotated } InjectAnnotated
    */
 
   /**
@@ -9467,9 +9975,9 @@
   }
 
   /**
-   * @typedef { import('./index').ModuleDeclaration } ModuleDeclaration
-   * @typedef { import('./index').ModuleDefinition } ModuleDefinition
-   * @typedef { import('./index').InjectorContext } InjectorContext
+   * @typedef { import('./index.js').ModuleDeclaration } ModuleDeclaration
+   * @typedef { import('./index.js').ModuleDefinition } ModuleDefinition
+   * @typedef { import('./index.js').InjectorContext } InjectorContext
    */
 
   /**
@@ -9572,11 +10080,20 @@
       };
     }
 
-    function instantiate(Type) {
+    /**
+     * Instantiate the given type, injecting dependencies.
+     *
+     * @template T
+     *
+     * @param { Function | [...string[], Function ]} type
+     *
+     * @return T
+     */
+    function instantiate(type) {
       const {
         fn,
         dependencies
-      } = fnDef(Type);
+      } = fnDef(type);
 
       // instantiate var args constructor
       const Constructor = Function.prototype.bind.apply(fn, [ null ].concat(dependencies));
@@ -9584,6 +10101,17 @@
       return new Constructor();
     }
 
+    /**
+     * Invoke the given function, injecting dependencies. Return the result.
+     *
+     * @template T
+     *
+     * @param { Function | [...string[], Function ]} func
+     * @param { Object } [context]
+     * @param { Object } [locals]
+     *
+     * @return {T} invocation result
+     */
     function invoke(func, context, locals) {
       const {
         fn,
@@ -11852,32 +12380,17 @@
     }
   };
 
-  var objectRefs = {exports: {}};
-
-  var collection = {};
-
-  /**
-   * An empty collection stub. Use {@link RefsCollection.extend} to extend a
-   * collection with ref semantics.
-   *
-   * @class RefsCollection
-   */
-
   /**
    * Extends a collection with {@link Refs} aware methods
    *
-   * @memberof RefsCollection
-   * @static
-   *
-   * @param  {Array<Object>} collection
-   * @param  {Refs} refs instance
-   * @param  {Object} property represented by the collection
-   * @param  {Object} target object the collection is attached to
+   * @param {Array<Object>} collection
+   * @param {Refs} refs instance
+   * @param {Object} property represented by the collection
+   * @param {Object} target object the collection is attached to
    *
    * @return {RefsCollection<Object>} the extended array
    */
   function extend(collection, refs, property, target) {
-
     var inverseProperty = property.inverse;
 
     /**
@@ -11888,7 +12401,7 @@
      * @param {Object} element the element to remove
      */
     Object.defineProperty(collection, 'remove', {
-      value: function(element) {
+      value: function (element) {
         var idx = this.indexOf(element);
         if (idx !== -1) {
           this.splice(idx, 1);
@@ -11896,7 +12409,6 @@
           // unset inverse
           refs.unset(element, inverseProperty, target);
         }
-
         return element;
       }
     });
@@ -11909,7 +12421,7 @@
      * @param {Object} element the element to check for
      */
     Object.defineProperty(collection, 'contains', {
-      value: function(element) {
+      value: function (element) {
         return this.indexOf(element) !== -1;
       }
     });
@@ -11924,12 +12436,9 @@
      *                 (possibly moving other elements around)
      */
     Object.defineProperty(collection, 'add', {
-      value: function(element, idx) {
-
+      value: function (element, idx) {
         var currentIdx = this.indexOf(element);
-
         if (typeof idx === 'undefined') {
-
           if (currentIdx !== -1) {
             // element already in collection (!)
             return;
@@ -11941,14 +12450,12 @@
 
         // handle already in collection
         if (currentIdx !== -1) {
-
           // remove element from currentIdx
           this.splice(currentIdx, 1);
         }
 
         // add element at idx
         this.splice(idx, 0, element);
-
         if (currentIdx === -1) {
           // set inverse, unless element was
           // in collection already
@@ -11962,69 +12469,53 @@
     Object.defineProperty(collection, '__refs_collection', {
       value: true
     });
-
     return collection;
   }
 
-
+  /**
+   * Checks if a given collection is extended
+   *
+   * @param {Array<Object>} collection
+   *
+   * @return {boolean}
+   */
   function isExtended(collection) {
     return collection.__refs_collection === true;
   }
 
-  collection.extend = extend;
-
-  collection.isExtended = isExtended;
-
-  var Collection = collection;
-
   function hasOwnProperty$1(e, property) {
     return Object.prototype.hasOwnProperty.call(e, property.name || property);
   }
-
   function defineCollectionProperty(ref, property, target) {
-
-    var collection = Collection.extend(target[property.name] || [], ref, property, target);
-
+    var collection = extend(target[property.name] || [], ref, property, target);
     Object.defineProperty(target, property.name, {
       enumerable: property.enumerable,
       value: collection
     });
-
     if (collection.length) {
-
-      collection.forEach(function(o) {
+      collection.forEach(function (o) {
         ref.set(o, property.inverse, target);
       });
     }
   }
-
-
   function defineProperty$1(ref, property, target) {
-
     var inverseProperty = property.inverse;
-
     var _value = target[property.name];
-
     Object.defineProperty(target, property.name, {
       configurable: property.configurable,
       enumerable: property.enumerable,
-
-      get: function() {
+      get: function () {
         return _value;
       },
-
-      set: function(value) {
-
+      set: function (value) {
         // return if we already performed all changes
         if (value === _value) {
           return;
         }
-
         var old = _value;
 
         // temporary set null
         _value = null;
-
         if (old) {
           ref.unset(old, inverseProperty, target);
         }
@@ -12036,7 +12527,6 @@
         ref.set(_value, inverseProperty, target);
       }
     });
-
   }
 
   /**
@@ -12082,16 +12572,14 @@
    *
    * wheels[0].car // undefined
    */
-  function Refs$1(a, b) {
-
-    if (!(this instanceof Refs$1)) {
-      return new Refs$1(a, b);
+  function Refs(a, b) {
+    if (!(this instanceof Refs)) {
+      return new Refs(a, b);
     }
 
     // link
     a.inverse = b;
     b.inverse = a;
-
     this.props = {};
     this.props[a.name] = a;
     this.props[b.name] = b;
@@ -12106,43 +12594,34 @@
    * @param  {Object} target
    * @param  {String} property
    */
-  Refs$1.prototype.bind = function(target, property) {
+  Refs.prototype.bind = function (target, property) {
     if (typeof property === 'string') {
       if (!this.props[property]) {
         throw new Error('no property <' + property + '> in ref');
       }
       property = this.props[property];
     }
-
     if (property.collection) {
       defineCollectionProperty(this, property, target);
     } else {
       defineProperty$1(this, property, target);
     }
   };
-
-  Refs$1.prototype.ensureRefsCollection = function(target, property) {
-
+  Refs.prototype.ensureRefsCollection = function (target, property) {
     var collection = target[property.name];
-
-    if (!Collection.isExtended(collection)) {
+    if (!isExtended(collection)) {
       defineCollectionProperty(this, property, target);
     }
-
     return collection;
   };
-
-  Refs$1.prototype.ensureBound = function(target, property) {
+  Refs.prototype.ensureBound = function (target, property) {
     if (!hasOwnProperty$1(target, property)) {
       this.bind(target, property);
     }
   };
-
-  Refs$1.prototype.unset = function(target, property, value) {
-
+  Refs.prototype.unset = function (target, property, value) {
     if (target) {
       this.ensureBound(target, property);
-
       if (property.collection) {
         this.ensureRefsCollection(target, property).remove(value);
       } else {
@@ -12150,12 +12629,9 @@
       }
     }
   };
-
-  Refs$1.prototype.set = function(target, property, value) {
-
+  Refs.prototype.set = function (target, property, value) {
     if (target) {
       this.ensureBound(target, property);
-
       if (property.collection) {
         this.ensureRefsCollection(target, property).add(value);
       } else {
@@ -12164,15 +12640,6 @@
     }
   };
 
-  var refs = Refs$1;
-
-  objectRefs.exports = refs;
-
-  objectRefs.exports.Collection = collection;
-
-  var objectRefsExports = objectRefs.exports;
-  var Refs = /*@__PURE__*/getDefaultExportFromCjs(objectRefsExports);
-
   var parentRefs = new Refs({ name: 'children', enumerable: true, collection: true }, { name: 'parent' }),
       labelRefs = new Refs({ name: 'labels', enumerable: true, collection: true }, { name: 'labelTarget' }),
       attacherRefs = new Refs({ name: 'attachers', collection: true }, { name: 'host' }),
@@ -13377,13 +13844,14 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ShapeLike} element The shape.
+   * @param {Object} attrs Optional attributes.
    *
    * @return {SVGElement}
    */
-  GraphicsFactory.prototype.drawShape = function(visual, element) {
+  GraphicsFactory.prototype.drawShape = function(visual, element, attrs = {}) {
     var eventBus = this._eventBus;
 
-    return eventBus.fire('render.shape', { gfx: visual, element: element });
+    return eventBus.fire('render.shape', { gfx: visual, element, attrs });
   };
 
   /**
@@ -13404,13 +13872,14 @@
    *
    * @param {SVGElement} visual The graphical element.
    * @param {ConnectionLike} element The connection.
+   * @param {Object} attrs Optional attributes.
    *
    * @return {SVGElement}
    */
-  GraphicsFactory.prototype.drawConnection = function(visual, element) {
+  GraphicsFactory.prototype.drawConnection = function(visual, element, attrs = {}) {
     var eventBus = this._eventBus;
 
-    return eventBus.fire('render.connection', { gfx: visual, element: element });
+    return eventBus.fire('render.connection', { gfx: visual, element, attrs });
   };
 
   /**
@@ -13987,6 +14456,17 @@
     this.idProperty = p;
   };
 
+  DescriptorBuilder.prototype.assertNotTrait = function(typeDescriptor) {
+
+    const _extends = typeDescriptor.extends || [];
+
+    if (_extends.length) {
+      throw new Error(
+        `cannot create <${ typeDescriptor.name }> extending <${ typeDescriptor.extends }>`
+      );
+    }
+  };
+
   DescriptorBuilder.prototype.assertNotDefined = function(p, name) {
     var propertyName = p.name,
         definedProperty = this.propertiesByName[propertyName];
@@ -14005,6 +14485,10 @@
 
   DescriptorBuilder.prototype.addTrait = function(t, inherited) {
 
+    if (inherited) {
+      this.assertNotTrait(t);
+    }
+
     var typesByName = this.allTypesByName,
         types = this.allTypes;
 
@@ -14138,7 +14622,9 @@
     });
 
     forEach$1(type.extends, bind$2(function(extendsName) {
-      var extended = this.typeMap[extendsName];
+      var extendsNameNs = parseName(extendsName, ns.prefix);
+
+      var extended = this.typeMap[extendsNameNs.name];
 
       extended.traits = extended.traits || [];
       extended.traits.push(name);
@@ -14167,24 +14653,33 @@
 
     var self = this;
 
+    /**
+     * Traverse the selected super type or trait
+     *
+     * @param {String} cls
+     * @param {Boolean} [trait=false]
+     */
+    function traverse(cls, trait) {
+      var parentNs = parseName(cls, isBuiltIn(cls) ? '' : nsName.prefix);
+      self.mapTypes(parentNs, iterator, trait);
+    }
+
     /**
      * Traverse the selected trait.
      *
      * @param {String} cls
      */
     function traverseTrait(cls) {
-      return traverseSuper(cls, true);
+      return traverse(cls, true);
     }
 
     /**
-     * Traverse the selected super type or trait
+     * Traverse the selected super type
      *
      * @param {String} cls
-     * @param {Boolean} [trait=false]
      */
-    function traverseSuper(cls, trait) {
-      var parentNs = parseName(cls, isBuiltIn(cls) ? '' : nsName.prefix);
-      self.mapTypes(parentNs, iterator, trait);
+    function traverseSuper(cls) {
+      return traverse(cls, false);
     }
 
     if (!type) {
@@ -14267,7 +14762,7 @@
       throw new TypeError('property name must be a non-empty string');
     }
 
-    var property = this.model.getPropertyDescriptor(target, name);
+    var property = this.getProperty(target, name);
 
     var propertyName = property && property.name;
 
@@ -14278,7 +14773,7 @@
       if (property) {
         delete target[propertyName];
       } else {
-        delete target.$attrs[name];
+        delete target.$attrs[stripGlobal(name)];
       }
     } else {
 
@@ -14291,7 +14786,7 @@
           defineProperty(target, property, value);
         }
       } else {
-        target.$attrs[name] = value;
+        target.$attrs[stripGlobal(name)] = value;
       }
     }
   };
@@ -14306,10 +14801,10 @@
    */
   Properties.prototype.get = function(target, name) {
 
-    var property = this.model.getPropertyDescriptor(target, name);
+    var property = this.getProperty(target, name);
 
     if (!property) {
-      return target.$attrs[name];
+      return target.$attrs[stripGlobal(name)];
     }
 
     var propertyName = property.name;
@@ -14363,6 +14858,44 @@
     this.define(target, '$model', { value: model });
   };
 
+  /**
+   * Return property with the given name on the element.
+   *
+   * @param {any} target
+   * @param {string} name
+   *
+   * @return {object | null} property
+   */
+  Properties.prototype.getProperty = function(target, name) {
+
+    var model = this.model;
+
+    var property = model.getPropertyDescriptor(target, name);
+
+    if (property) {
+      return property;
+    }
+
+    if (name.includes(':')) {
+      return null;
+    }
+
+    const strict = model.config.strict;
+
+    if (typeof strict !== 'undefined') {
+      const error = new TypeError(`unknown property <${ name }> on <${ target.$type }>`);
+
+      if (strict) {
+        throw error;
+      } else {
+
+        // eslint-disable-next-line no-undef
+        typeof console !== 'undefined' && console.warn(error);
+      }
+    }
+
+    return null;
+  };
 
   function isUndefined(val) {
     return typeof val === 'undefined';
@@ -14377,6 +14910,10 @@
     });
   }
 
+  function stripGlobal(name) {
+    return name.replace(/^:/, '');
+  }
+
   // Moddle implementation /////////////////////////////////////////////////
 
   /**
@@ -14399,8 +14936,10 @@
    * var moddle = new Moddle([pkg]);
    *
    * @param {Array<Package>} packages the packages to contain
+   *
+   * @param { { strict?: boolean } } [config] moddle configuration
    */
-  function Moddle(packages) {
+  function Moddle(packages, config = {}) {
 
     this.properties = new Properties(this);
 
@@ -14408,6 +14947,8 @@
     this.registry = new Registry(packages, this.properties);
 
     this.typeCache = {};
+
+    this.config = config;
   }
 
 
@@ -14501,6 +15042,12 @@
       $type: name,
       $instanceOf: function(type) {
         return type === this.$type;
+      },
+      get: function(key) {
+        return this[key];
+      },
+      set: function(key, value) {
+        set$2(this, [ key ], value);
       }
     };
 
@@ -14516,6 +15063,8 @@
 
     this.properties.defineDescriptor(element, descriptor);
     this.properties.defineModel(element, this);
+    this.properties.define(element, 'get', { enumerable: false, writable: true });
+    this.properties.define(element, 'set', { enumerable: false, writable: true });
     this.properties.define(element, '$parent', { enumerable: false, writable: true });
     this.properties.define(element, '$instanceOf', { enumerable: false, writable: true });
 
@@ -23759,7 +24308,7 @@
     // pinch to zoom is mapped to wheel + ctrlKey = true
     // in modern browsers (!)
 
-    var isZoom = event.ctrlKey;
+    var isZoom = event.ctrlKey || (isMac() && event.metaKey);
 
     var isHorizontalScroll = event.shiftKey;