camunda-bpmn-js 0.23.0 → 0.24.0

package/dist/camunda-cloud-viewer.development.js

@@ -469,7 +469,7 @@
 	  return result;
 	}
 
-	var DEFAULT_RENDER_PRIORITY$2 = 1000;
+	var DEFAULT_RENDER_PRIORITY$1 = 1000;
 
 	/**
 	 * The base implementation of shape and connection renderers.
@@ -477,10 +477,10 @@
 	 * @param {EventBus} eventBus
 	 * @param {number} [renderPriority=1000]
 	 */
-	function BaseRenderer$1(eventBus, renderPriority) {
+	function BaseRenderer(eventBus, renderPriority) {
 	  var self = this;
 
-	  renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY$2;
+	  renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY$1;
 
 	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
 	    var type = evt.type,
@@ -516,7 +516,7 @@
 	 *
 	 * @returns {boolean}
 	 */
-	BaseRenderer$1.prototype.canRender = function() {};
+	BaseRenderer.prototype.canRender = function() {};
 
 	/**
 	 * Provides the shape's snap svg element to be drawn on the `canvas`.
@@ -526,7 +526,7 @@
 	 *
 	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
 	 */
-	BaseRenderer$1.prototype.drawShape = function() {};
+	BaseRenderer.prototype.drawShape = function() {};
 
 	/**
 	 * Provides the shape's snap svg element to be drawn on the `canvas`.
@@ -536,7 +536,7 @@
 	 *
 	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
 	 */
-	BaseRenderer$1.prototype.drawConnection = function() {};
+	BaseRenderer.prototype.drawConnection = function() {};
 
 	/**
 	 * Gets the SVG path of a shape that represents it's visual bounds.
@@ -545,7 +545,7 @@
 	 *
 	 * @return {string} svg path
 	 */
-	BaseRenderer$1.prototype.getShapePath = function() {};
+	BaseRenderer.prototype.getShapePath = function() {};
 
 	/**
 	 * Gets the SVG path of a connection that represents it's visual bounds.
@@ -554,7 +554,7 @@
 	 *
 	 * @return {string} svg path
 	 */
-	BaseRenderer$1.prototype.getConnectionPath = function() {};
+	BaseRenderer.prototype.getConnectionPath = function() {};
 
 	/**
 	 * Is an element of the given BPMN type?
@@ -682,7 +682,7 @@
 	  }
 	}
 
-	function ensureImported$1(element, target) {
+	function ensureImported(element, target) {
 
 	  if (element.ownerDocument !== target.ownerDocument) {
 	    try {
@@ -710,8 +710,8 @@
 	 *
 	 * @return {SVGElement} the appended node
 	 */
-	function appendTo$1(element, target) {
-	  return target.appendChild(ensureImported$1(element, target));
+	function appendTo(element, target) {
+	  return target.appendChild(ensureImported(element, target));
 	}
 
 	/**
@@ -726,8 +726,8 @@
 	 *
 	 * @return {SVGElement} the element
 	 */
-	function append$1(target, node) {
-	  appendTo$1(node, target);
+	function append(target, node) {
+	  appendTo(node, target);
 	  return target;
 	}
 
@@ -735,9 +735,9 @@
 	 * attribute accessor utility
 	 */
 
-	var LENGTH_ATTR$1 = 2;
+	var LENGTH_ATTR = 2;
 
-	var CSS_PROPERTIES$1 = {
+	var CSS_PROPERTIES = {
 	  'alignment-baseline': 1,
 	  'baseline-shift': 1,
 	  'clip': 1,
@@ -761,7 +761,7 @@
 	  'flood-opacity': 1,
 	  'font': 1,
 	  'font-family': 1,
-	  'font-size': LENGTH_ATTR$1,
+	  'font-size': LENGTH_ATTR,
 	  'font-size-adjust': 1,
 	  'font-stretch': 1,
 	  'font-style': 1,
@@ -791,7 +791,7 @@
 	  'stroke-linejoin': 1,
 	  'stroke-miterlimit': 1,
 	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR$1,
+	  'stroke-width': LENGTH_ATTR,
 	  'text-anchor': 1,
 	  'text-decoration': 1,
 	  'text-rendering': 1,
@@ -802,23 +802,23 @@
 	};
 
 
-	function getAttribute$1(node, name) {
-	  if (CSS_PROPERTIES$1[name]) {
+	function getAttribute(node, name) {
+	  if (CSS_PROPERTIES[name]) {
 	    return node.style[name];
 	  } else {
 	    return node.getAttributeNS(null, name);
 	  }
 	}
 
-	function setAttribute$1(node, name, value) {
+	function setAttribute(node, name, value) {
 	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 
-	  var type = CSS_PROPERTIES$1[hyphenated];
+	  var type = CSS_PROPERTIES[hyphenated];
 
 	  if (type) {
 
 	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR$1 && typeof value === 'number') {
+	    if (type === LENGTH_ATTR && typeof value === 'number') {
 	      value = String(value) + 'px';
 	    }
 
@@ -828,12 +828,12 @@
 	  }
 	}
 
-	function setAttributes$1(node, attrs) {
+	function setAttributes(node, attrs) {
 
 	  var names = Object.keys(attrs), i, name;
 
 	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute$1(node, name, attrs[name]);
+	    setAttribute(node, name, attrs[name]);
 	  }
 	}
 
@@ -847,15 +847,15 @@
 	 *
 	 * @return {String}
 	 */
-	function attr$2(node, name, value) {
+	function attr$1(node, name, value) {
 	  if (typeof name === 'string') {
 	    if (value !== undefined) {
-	      setAttribute$1(node, name, value);
+	      setAttribute(node, name, value);
 	    } else {
-	      return getAttribute$1(node, name);
+	      return getAttribute(node, name);
 	    }
 	  } else {
-	    setAttributes$1(node, name);
+	    setAttributes(node, name);
 	  }
 
 	  return node;
@@ -1020,7 +1020,7 @@
 	  return element;
 	}
 
-	var ns$1 = {
+	var ns = {
 	  svg: 'http://www.w3.org/2000/svg'
 	};
 
@@ -1028,25 +1028,25 @@
 	 * DOM parsing utility
 	 */
 
-	var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
+	var SVG_START = '<svg xmlns="' + ns.svg + '"';
 
-	function parse$2(svg) {
+	function parse$1(svg) {
 
 	  var unwrap = false;
 
 	  // ensure we import a valid svg document
 	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns$1.svg) === -1) {
-	      svg = SVG_START$1 + svg.substring(4);
+	    if (svg.indexOf(ns.svg) === -1) {
+	      svg = SVG_START + svg.substring(4);
 	    }
 	  } else {
 
 	    // namespace svg
-	    svg = SVG_START$1 + '>' + svg + '</svg>';
+	    svg = SVG_START + '>' + svg + '</svg>';
 	    unwrap = true;
 	  }
 
-	  var parsed = parseDocument$1(svg);
+	  var parsed = parseDocument(svg);
 
 	  if (!unwrap) {
 	    return parsed;
@@ -1063,7 +1063,7 @@
 	  return fragment;
 	}
 
-	function parseDocument$1(svg) {
+	function parseDocument(svg) {
 
 	  var parser;
 
@@ -1087,18 +1087,18 @@
 	 *
 	 * @returns {SVGElement}
 	 */
-	function create$2(name, attrs) {
+	function create$1(name, attrs) {
 	  var element;
 
 	  if (name.charAt(0) === '<') {
-	    element = parse$2(name).firstChild;
+	    element = parse$1(name).firstChild;
 	    element = document.importNode(element, true);
 	  } else {
-	    element = document.createElementNS(ns$1.svg, name);
+	    element = document.createElementNS(ns.svg, name);
 	  }
 
 	  if (attrs) {
-	    attr$2(element, attrs);
+	    attr$1(element, attrs);
 	  }
 
 	  return element;
@@ -1113,7 +1113,7 @@
 
 	function getNode() {
 	  if (node === null) {
-	    node = create$2('svg');
+	    node = create$1('svg');
 	  }
 
 	  return node;
@@ -1253,7 +1253,7 @@
 
 	function set(element, svg) {
 
-	  var parsed = parse$2(svg);
+	  var parsed = parse$1(svg);
 
 	  // clear element contents
 	  clear$1(element);
@@ -1272,7 +1272,7 @@
 
 	  // import + append each node
 	  for (var i = 0; i < nodes.length; i++) {
-	    appendTo$1(nodes[i], element);
+	    appendTo(nodes[i], element);
 	  }
 
 	}
@@ -1376,18 +1376,18 @@
 
 	function createLine(points, attrs) {
 
-	  var line = create$2('polyline');
-	  attr$2(line, { points: toSVGPoints(points) });
+	  var line = create$1('polyline');
+	  attr$1(line, { points: toSVGPoints(points) });
 
 	  if (attrs) {
-	    attr$2(line, attrs);
+	    attr$1(line, attrs);
 	  }
 
 	  return line;
 	}
 
 	function updateLine(gfx, points) {
-	  attr$2(gfx, { points: toSVGPoints(points) });
+	  attr$1(gfx, { points: toSVGPoints(points) });
 
 	  return gfx;
 	}
@@ -1656,7 +1656,7 @@
 	 * @param {String} [val]
 	 * @api public
 	 */
-	function attr$1(el, name, val) {
+	function attr(el, name, val) {
 
 	  // get
 	  if (arguments.length == 2) {
@@ -1965,7 +1965,7 @@
 	 * Expose `parse`.
 	 */
 
-	var domify = parse$1;
+	var domify = parse;
 
 	/**
 	 * Tests for browser support.
@@ -2029,7 +2029,7 @@
 	 * @api private
 	 */
 
-	function parse$1(html, doc) {
+	function parse(html, doc) {
 	  if ('string' != typeof html) throw new TypeError('String expected');
 
 	  // default to the global `document` object
@@ -2313,7 +2313,7 @@
 	    config, eventBus, styles, pathMap,
 	    canvas, textRenderer, priority) {
 
-	  BaseRenderer$1.call(this, eventBus, priority);
+	  BaseRenderer.call(this, eventBus, priority);
 
 	  var defaultFillColor = config && config.defaultFillColor,
 	      defaultStrokeColor = config && config.defaultStrokeColor,
@@ -2343,13 +2343,13 @@
 	      attrs.strokeDasharray = [ 10000, 1 ];
 	    }
 
-	    var marker = create$2('marker');
+	    var marker = create$1('marker');
 
-	    attr$2(options.element, attrs);
+	    attr$1(options.element, attrs);
 
-	    append$1(marker, options.element);
+	    append(marker, options.element);
 
-	    attr$2(marker, {
+	    attr$1(marker, {
 	      id: id,
 	      viewBox: '0 0 20 20',
 	      refX: ref.x,
@@ -2362,12 +2362,12 @@
 	    var defs = query('defs', canvas._svg);
 
 	    if (!defs) {
-	      defs = create$2('defs');
+	      defs = create$1('defs');
 
-	      append$1(canvas._svg, defs);
+	      append(canvas._svg, defs);
 	    }
 
-	    append$1(defs, marker);
+	    append(defs, marker);
 
 	    markers[id] = marker;
 	  }
@@ -2391,8 +2391,8 @@
 	  function createMarker(id, type, fill, stroke) {
 
 	    if (type === 'sequenceflow-end') {
-	      var sequenceflowEnd = create$2('path');
-	      attr$2(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+	      var sequenceflowEnd = create$1('path');
+	      attr$1(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
 
 	      addMarker(id, {
 	        element: sequenceflowEnd,
@@ -2406,8 +2406,8 @@
 	    }
 
 	    if (type === 'messageflow-start') {
-	      var messageflowStart = create$2('circle');
-	      attr$2(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+	      var messageflowStart = create$1('circle');
+	      attr$1(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
 
 	      addMarker(id, {
 	        element: messageflowStart,
@@ -2420,8 +2420,8 @@
 	    }
 
 	    if (type === 'messageflow-end') {
-	      var messageflowEnd = create$2('path');
-	      attr$2(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+	      var messageflowEnd = create$1('path');
+	      attr$1(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
 
 	      addMarker(id, {
 	        element: messageflowEnd,
@@ -2435,8 +2435,8 @@
 	    }
 
 	    if (type === 'association-start') {
-	      var associationStart = create$2('path');
-	      attr$2(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
+	      var associationStart = create$1('path');
+	      attr$1(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
 
 	      addMarker(id, {
 	        element: associationStart,
@@ -2451,8 +2451,8 @@
 	    }
 
 	    if (type === 'association-end') {
-	      var associationEnd = create$2('path');
-	      attr$2(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
+	      var associationEnd = create$1('path');
+	      attr$1(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
 
 	      addMarker(id, {
 	        element: associationEnd,
@@ -2467,8 +2467,8 @@
 	    }
 
 	    if (type === 'conditional-flow-marker') {
-	      var conditionalflowMarker = create$2('path');
-	      attr$2(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
+	      var conditionalflowMarker = create$1('path');
+	      attr$1(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
 
 	      addMarker(id, {
 	        element: conditionalflowMarker,
@@ -2482,8 +2482,8 @@
 	    }
 
 	    if (type === 'conditional-default-flow-marker') {
-	      var conditionaldefaultflowMarker = create$2('path');
-	      attr$2(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+	      var conditionaldefaultflowMarker = create$1('path');
+	      attr$1(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
 
 	      addMarker(id, {
 	        element: conditionaldefaultflowMarker,
@@ -2518,15 +2518,15 @@
 	    var cx = width / 2,
 	        cy = height / 2;
 
-	    var circle = create$2('circle');
-	    attr$2(circle, {
+	    var circle = create$1('circle');
+	    attr$1(circle, {
 	      cx: cx,
 	      cy: cy,
 	      r: Math.round((width + height) / 4 - offset)
 	    });
-	    attr$2(circle, attrs);
+	    attr$1(circle, attrs);
 
-	    append$1(parentGfx, circle);
+	    append(parentGfx, circle);
 
 	    return circle;
 	  }
@@ -2546,8 +2546,8 @@
 	      fill: 'white'
 	    });
 
-	    var rect = create$2('rect');
-	    attr$2(rect, {
+	    var rect = create$1('rect');
+	    attr$1(rect, {
 	      x: offset,
 	      y: offset,
 	      width: width - offset * 2,
@@ -2555,9 +2555,9 @@
 	      rx: r,
 	      ry: r
 	    });
-	    attr$2(rect, attrs);
+	    attr$1(rect, attrs);
 
-	    append$1(parentGfx, rect);
+	    append(parentGfx, rect);
 
 	    return rect;
 	  }
@@ -2579,13 +2579,13 @@
 	      fill: 'white'
 	    });
 
-	    var polygon = create$2('polygon');
-	    attr$2(polygon, {
+	    var polygon = create$1('polygon');
+	    attr$1(polygon, {
 	      points: pointsString
 	    });
-	    attr$2(polygon, attrs);
+	    attr$1(polygon, attrs);
 
-	    append$1(parentGfx, polygon);
+	    append(parentGfx, polygon);
 
 	    return polygon;
 	  }
@@ -2599,7 +2599,7 @@
 
 	    var line = createLine(waypoints, attrs);
 
-	    append$1(parentGfx, line);
+	    append(parentGfx, line);
 
 	    return line;
 	  }
@@ -2611,11 +2611,11 @@
 	      stroke: black
 	    });
 
-	    var path = create$2('path');
-	    attr$2(path, { d: d });
-	    attr$2(path, attrs);
+	    var path = create$1('path');
+	    attr$1(path, { d: d });
+	    attr$1(path, attrs);
 
-	    append$1(parentGfx, path);
+	    append(parentGfx, path);
 
 	    return path;
 	  }
@@ -2703,7 +2703,7 @@
 
 	    classes$1(text).add('djs-label');
 
-	    append$1(parentGfx, text);
+	    append(parentGfx, text);
 
 	    return text;
 	  }
@@ -3313,7 +3313,7 @@
 	      });
 
 	      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-	      attr$2(businessHeaderPath, {
+	      attr$1(businessHeaderPath, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, '#aaaaaa'),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3327,7 +3327,7 @@
 	      });
 
 	      var businessPath = drawPath(parentGfx, headerData);
-	      attr$2(businessPath, {
+	      attr$1(businessPath, {
 	        strokeWidth: 1,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
 	      });
@@ -3345,7 +3345,7 @@
 	      var expanded = isExpanded(element);
 
 	      if (isEventSubProcess(element)) {
-	        attr$2(rect, {
+	        attr$1(rect, {
 	          strokeDasharray: '1,2'
 	        });
 	      }
@@ -3567,7 +3567,7 @@
 	        });
 
 	        var parallelPath = drawPath(parentGfx, pathData);
-	        attr$2(parallelPath, {
+	        attr$1(parallelPath, {
 	          strokeWidth: 1,
 	          fill: 'none'
 	        });
@@ -3575,7 +3575,7 @@
 
 	        if (!instantiate) {
 	          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-	          attr$2(innerCircle, {
+	          attr$1(innerCircle, {
 	            strokeWidth: 1,
 	            fill: 'none',
 	            stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3620,7 +3620,7 @@
 
 	        // conditional flow marker
 	        if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-	          attr$2(path, {
+	          attr$1(path, {
 	            markerStart: marker('conditional-flow-marker', fill, stroke)
 	          });
 	        }
@@ -3628,7 +3628,7 @@
 	        // default marker
 	        if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
 	            source.default === sequenceFlow) {
-	          attr$2(path, {
+	          attr$1(path, {
 	            markerStart: marker('conditional-default-flow-marker', fill, stroke)
 	          });
 	        }
@@ -4118,7 +4118,7 @@
 	}
 
 
-	e(BpmnRenderer, BaseRenderer$1);
+	e(BpmnRenderer, BaseRenderer);
 
 	BpmnRenderer.$inject = [
 	  'config.bpmnRenderer',
@@ -4346,9 +4346,9 @@
 	  var helperSvg = document.getElementById('helper-svg');
 
 	  if (!helperSvg) {
-	    helperSvg = create$2('svg');
+	    helperSvg = create$1('svg');
 
-	    attr$2(helperSvg, {
+	    attr$1(helperSvg, {
 	      id: 'helper-svg'
 	    });
 
@@ -4442,13 +4442,13 @@
 	  var maxWidth = box.width - padding.left - padding.right;
 
 	  // ensure correct rendering by attaching helper text node to invisible SVG
-	  var helperText = create$2('text');
-	  attr$2(helperText, { x: 0, y: 0 });
-	  attr$2(helperText, style);
+	  var helperText = create$1('text');
+	  attr$1(helperText, { x: 0, y: 0 });
+	  attr$1(helperText, style);
 
 	  var helperSvg = getHelperSvg();
 
-	  append$1(helperSvg, helperText);
+	  append(helperSvg, helperText);
 
 	  while (lines.length) {
 	    layouted.push(layoutNext(lines, maxWidth, helperText));
@@ -4477,9 +4477,9 @@
 	  y -= (lineHeight || layouted[0].height) / 4;
 
 
-	  var textElement = create$2('text');
+	  var textElement = create$1('text');
 
-	  attr$2(textElement, style);
+	  attr$1(textElement, style);
 
 	  // layout each line taking into account that parent
 	  // shape might resize to fit text size
@@ -4506,12 +4506,12 @@
 	        - line.width) / 2 + padding.left), 0);
 	    }
 
-	    var tspan = create$2('tspan');
-	    attr$2(tspan, { x: x, y: y });
+	    var tspan = create$1('tspan');
+	    attr$1(tspan, { x: x, y: y });
 
 	    tspan.textContent = line.text;
 
-	    append$1(textElement, tspan);
+	    append(textElement, tspan);
 	  });
 
 	  remove$2(helperText);
@@ -6089,13 +6089,13 @@
 	      throw new Error('invalid hit type <' + type + '>');
 	    }
 
-	    attr$2(hit, attrs);
+	    attr$1(hit, attrs);
 
 	    return hit;
 	  }
 
 	  function appendHit(gfx, hit) {
-	    append$1(gfx, hit);
+	    append(gfx, hit);
 	  }
 
 
@@ -6173,11 +6173,11 @@
 	      y: 0
 	    }, attrs);
 
-	    var hit = create$2('rect');
+	    var hit = create$1('rect');
 
 	    applyStyle(hit, type);
 
-	    attr$2(hit, attrs);
+	    attr$1(hit, attrs);
 
 	    appendHit(gfx, hit);
 
@@ -6203,7 +6203,7 @@
 	    if (element.waypoints) {
 	      updateLine(hit, element.waypoints);
 	    } else {
-	      attr$2(hit, {
+	      attr$1(hit, {
 	        width: element.width,
 	        height: element.height
 	      });
@@ -6411,9 +6411,9 @@
 	  var self = this;
 
 	  function createOutline(gfx, bounds) {
-	    var outline = create$2('rect');
+	    var outline = create$1('rect');
 
-	    attr$2(outline, assign$1({
+	    attr$1(outline, assign$1({
 	      x: 10,
 	      y: 10,
 	      rx: 3,
@@ -6421,7 +6421,7 @@
 	      height: 100
 	    }, OUTLINE_STYLE));
 
-	    append$1(gfx, outline);
+	    append(gfx, outline);
 
 	    return outline;
 	  }
@@ -6465,7 +6465,7 @@
 	 */
 	Outline.prototype.updateShapeOutline = function(outline, element) {
 
-	  attr$2(outline, {
+	  attr$1(outline, {
 	    x: -this.offset,
 	    y: -this.offset,
 	    width: element.width + this.offset * 2,
@@ -6486,7 +6486,7 @@
 
 	  var bbox = getBBox(connection);
 
-	  attr$2(outline, {
+	  attr$1(outline, {
 	    x: bbox.x - this.offset,
 	    y: bbox.y - this.offset,
 	    width: bbox.width + this.offset * 2,
@@ -6704,15 +6704,15 @@
 
 	  var bBox = addSelectionOutlinePadding(getBBox(selection));
 
-	  var rect = create$2('rect');
+	  var rect = create$1('rect');
 
-	  attr$2(rect, assign$1({
+	  attr$1(rect, assign$1({
 	    rx: 3
 	  }, bBox));
 
 	  classes$1(rect).add('djs-selection-outline');
 
-	  append$1(layer, rect);
+	  append(layer, rect);
 	};
 
 	// helpers //////////
@@ -7176,7 +7176,7 @@
 
 	  setPosition(html, x, y);
 
-	  attr$1(container.html, 'data-container-id', element.id);
+	  attr(container.html, 'data-container-id', element.id);
 	};
 
 
@@ -9010,7 +9010,7 @@
 
 	// apply default renderer with lowest possible priority
 	// so that it only kicks in if noone else could render
-	var DEFAULT_RENDER_PRIORITY$1 = 1;
+	var DEFAULT_RENDER_PRIORITY = 1;
 
 	/**
 	 * The default renderer used for shapes and connections.
@@ -9021,14 +9021,14 @@
 	function DefaultRenderer(eventBus, styles) {
 
 	  //
-	  BaseRenderer$1.call(this, eventBus, DEFAULT_RENDER_PRIORITY$1);
+	  BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);
 
 	  this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });
 	  this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: 'fuchsia', strokeWidth: 2 });
 	  this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, strokeWidth: 2 });
 	}
 
-	e(DefaultRenderer, BaseRenderer$1);
+	e(DefaultRenderer, BaseRenderer);
 
 
 	DefaultRenderer.prototype.canRender = function() {
@@ -9036,9 +9036,9 @@
 	};
 
 	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
-	  var rect = create$2('rect');
+	  var rect = create$1('rect');
 
-	  attr$2(rect, {
+	  attr$1(rect, {
 	    x: 0,
 	    y: 0,
 	    width: element.width || 0,
@@ -9046,12 +9046,12 @@
 	  });
 
 	  if (isFrameElement(element)) {
-	    attr$2(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
+	    attr$1(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
 	  } else {
-	    attr$2(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
+	    attr$1(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
 	  }
 
-	  append$1(visuals, rect);
+	  append(visuals, rect);
 
 	  return rect;
 	};
@@ -9059,7 +9059,7 @@
 	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
 	  var line = createLine(connection.waypoints, assign$1({}, this.CONNECTION_STYLE, attrs || {}));
-	  append$1(visuals, line);
+	  append(visuals, line);
 
 	  return line;
 	};
@@ -9282,7 +9282,7 @@
 	  // this way we can always get the correct container size
 	  // (this is impossible for <svg> elements at the moment)
 	  const parent = document.createElement('div');
-	  parent.setAttribute('class', 'djs-container');
+	  parent.setAttribute('class', 'djs-container djs-parent');
 
 	  assign(parent, {
 	    position: 'relative',
@@ -9297,7 +9297,7 @@
 	}
 
 	function createGroup(parent, cls, childIndex) {
-	  const group = create$2('g');
+	  const group = create$1('g');
 	  classes$1(group).add(cls);
 
 	  const index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;
@@ -9376,10 +9376,10 @@
 	  // html container
 	  const container = this._container = createContainer(config);
 
-	  const svg = this._svg = create$2('svg');
-	  attr$2(svg, { width: '100%', height: '100%' });
+	  const svg = this._svg = create$1('svg');
+	  attr$1(svg, { width: '100%', height: '100%' });
 
-	  append$1(container, svg);
+	  append(container, svg);
 
 	  const viewport = this._viewport = createGroup(svg, 'viewport');
 
@@ -10691,10 +10691,10 @@
 	  this._validateId(id);
 
 	  // associate dom node with element
-	  attr$2(gfx, ELEMENT_ID, id);
+	  attr$1(gfx, ELEMENT_ID, id);
 
 	  if (secondaryGfx) {
-	    attr$2(secondaryGfx, ELEMENT_ID, id);
+	    attr$1(secondaryGfx, ELEMENT_ID, id);
 	  }
 
 	  this._elements[id] = { element: element, gfx: gfx, secondaryGfx: secondaryGfx };
@@ -10703,7 +10703,7 @@
 	/**
 	 * Removes an element from the registry.
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 */
 	ElementRegistry.prototype.remove = function(element) {
 	  var elements = this._elements,
@@ -10713,10 +10713,10 @@
 	  if (container) {
 
 	    // unset element id on gfx
-	    attr$2(container.gfx, ELEMENT_ID, '');
+	    attr$1(container.gfx, ELEMENT_ID, '');
 
 	    if (container.secondaryGfx) {
-	      attr$2(container.secondaryGfx, ELEMENT_ID, '');
+	      attr$1(container.secondaryGfx, ELEMENT_ID, '');
 	    }
 
 	    delete elements[id];
@@ -10726,7 +10726,7 @@
 	/**
 	 * Update the id of an element
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 * @param {string} newId
 	 */
 	ElementRegistry.prototype.updateId = function(element, newId) {
@@ -10755,7 +10755,7 @@
 	/**
 	 * Update the graphics of an element
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 * @param {SVGElement} gfx
 	 * @param {boolean} [secondary=false] whether to update the secondary connected element
 	 */
@@ -10771,7 +10771,7 @@
 	  }
 
 	  if (gfx) {
-	    attr$2(gfx, ELEMENT_ID, id);
+	    attr$1(gfx, ELEMENT_ID, id);
 	  }
 
 	  return gfx;
@@ -10796,7 +10796,7 @@
 	  if (typeof filter === 'string') {
 	    id = filter;
 	  } else {
-	    id = filter && attr$2(filter, ELEMENT_ID);
+	    id = filter && attr$1(filter, ELEMENT_ID);
 	  }
 
 	  var container = this._elements[id];
@@ -11461,7 +11461,7 @@
 	 *
 	 * @return {Base} the new model instance
 	 */
-	function create$1(type, attrs) {
+	function create(type, attrs) {
 	  var Type = types$7[type];
 	  if (!Type) {
 	    throw new Error('unknown type: <' + type + '>');
@@ -11509,7 +11509,7 @@
 	    attrs.id = type + '_' + (this._uid++);
 	  }
 
-	  return create$1(type, attrs);
+	  return create(type, attrs);
 	};
 
 	var FN_REF = '__fn';
@@ -12079,10 +12079,10 @@
 	  } else {
 	    childrenGfx = getChildren(gfx);
 	    if (!childrenGfx) {
-	      childrenGfx = create$2('g');
+	      childrenGfx = create$1('g');
 	      classes$1(childrenGfx).add('djs-children');
 
-	      append$1(gfx.parentNode, childrenGfx);
+	      append(gfx.parentNode, childrenGfx);
 	    }
 	  }
 
@@ -12131,17 +12131,17 @@
 	GraphicsFactory.prototype._createContainer = function(
 	    type, childrenGfx, parentIndex, isFrame
 	) {
-	  var outerGfx = create$2('g');
+	  var outerGfx = create$1('g');
 	  classes$1(outerGfx).add('djs-group');
 
 	  // insert node at position
 	  if (typeof parentIndex !== 'undefined') {
 	    prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);
 	  } else {
-	    append$1(childrenGfx, outerGfx);
+	    append(childrenGfx, outerGfx);
 	  }
 
-	  var gfx = create$2('g');
+	  var gfx = create$1('g');
 	  classes$1(gfx).add('djs-element');
 	  classes$1(gfx).add('djs-' + type);
 
@@ -12149,13 +12149,13 @@
 	    classes$1(gfx).add('djs-frame');
 	  }
 
-	  append$1(outerGfx, gfx);
+	  append(outerGfx, gfx);
 
 	  // create visual
-	  var visual = create$2('g');
+	  var visual = create$1('g');
 	  classes$1(visual).add('djs-visual');
 
-	  append$1(gfx, visual);
+	  append(gfx, visual);
 
 	  return gfx;
 	};
@@ -12247,9 +12247,9 @@
 	  }
 
 	  if (element.hidden) {
-	    attr$2(gfx, 'display', 'none');
+	    attr$1(gfx, 'display', 'none');
 	  } else {
-	    attr$2(gfx, 'display', 'block');
+	    attr$1(gfx, 'display', 'block');
 	  }
 	};
 
@@ -21567,356 +21567,6 @@
 	// default moddle extensions the viewer is composed of
 	Viewer$1.prototype._moddleExtensions = {};
 
-	var DEFAULT_RENDER_PRIORITY = 1000;
-
-	/**
-	 * The base implementation of shape and connection renderers.
-	 *
-	 * @param {EventBus} eventBus
-	 * @param {number} [renderPriority=1000]
-	 */
-	function BaseRenderer(eventBus, renderPriority) {
-	  var self = this;
-
-	  renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY;
-
-	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
-	    var type = evt.type,
-	        element = context.element,
-	        visuals = context.gfx,
-	        attrs = context.attrs;
-
-	    if (self.canRender(element)) {
-	      if (type === 'render.shape') {
-	        return self.drawShape(visuals, element, attrs);
-	      } else {
-	        return self.drawConnection(visuals, element, attrs);
-	      }
-	    }
-	  });
-
-	  eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {
-	    if (self.canRender(element)) {
-	      if (evt.type === 'render.getShapePath') {
-	        return self.getShapePath(element);
-	      } else {
-	        return self.getConnectionPath(element);
-	      }
-	    }
-	  });
-	}
-
-	/**
-	 * Should check whether *this* renderer can render
-	 * the element/connection.
-	 *
-	 * @param {element} element
-	 *
-	 * @returns {boolean}
-	 */
-	BaseRenderer.prototype.canRender = function() {};
-
-	/**
-	 * Provides the shape's snap svg element to be drawn on the `canvas`.
-	 *
-	 * @param {djs.Graphics} visuals
-	 * @param {Shape} shape
-	 *
-	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
-	 */
-	BaseRenderer.prototype.drawShape = function() {};
-
-	/**
-	 * Provides the shape's snap svg element to be drawn on the `canvas`.
-	 *
-	 * @param {djs.Graphics} visuals
-	 * @param {Connection} connection
-	 *
-	 * @returns {Snap.svg} [returns a Snap.svg paper element ]
-	 */
-	BaseRenderer.prototype.drawConnection = function() {};
-
-	/**
-	 * Gets the SVG path of a shape that represents it's visual bounds.
-	 *
-	 * @param {Shape} shape
-	 *
-	 * @return {string} svg path
-	 */
-	BaseRenderer.prototype.getShapePath = function() {};
-
-	/**
-	 * Gets the SVG path of a connection that represents it's visual bounds.
-	 *
-	 * @param {Connection} connection
-	 *
-	 * @return {string} svg path
-	 */
-	BaseRenderer.prototype.getConnectionPath = function() {};
-
-	function ensureImported(element, target) {
-
-	  if (element.ownerDocument !== target.ownerDocument) {
-	    try {
-
-	      // may fail on webkit
-	      return target.ownerDocument.importNode(element, true);
-	    } catch (e) {
-
-	      // ignore
-	    }
-	  }
-
-	  return element;
-	}
-
-	/**
-	 * appendTo utility
-	 */
-
-	/**
-	 * Append a node to a target element and return the appended node.
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} target
-	 *
-	 * @return {SVGElement} the appended node
-	 */
-	function appendTo(element, target) {
-	  return target.appendChild(ensureImported(element, target));
-	}
-
-	/**
-	 * append utility
-	 */
-
-	/**
-	 * Append a node to an element
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} node
-	 *
-	 * @return {SVGElement} the element
-	 */
-	function append(target, node) {
-	  appendTo(node, target);
-	  return target;
-	}
-
-	/**
-	 * attribute accessor utility
-	 */
-
-	var LENGTH_ATTR = 2;
-
-	var CSS_PROPERTIES = {
-	  'alignment-baseline': 1,
-	  'baseline-shift': 1,
-	  'clip': 1,
-	  'clip-path': 1,
-	  'clip-rule': 1,
-	  'color': 1,
-	  'color-interpolation': 1,
-	  'color-interpolation-filters': 1,
-	  'color-profile': 1,
-	  'color-rendering': 1,
-	  'cursor': 1,
-	  'direction': 1,
-	  'display': 1,
-	  'dominant-baseline': 1,
-	  'enable-background': 1,
-	  'fill': 1,
-	  'fill-opacity': 1,
-	  'fill-rule': 1,
-	  'filter': 1,
-	  'flood-color': 1,
-	  'flood-opacity': 1,
-	  'font': 1,
-	  'font-family': 1,
-	  'font-size': LENGTH_ATTR,
-	  'font-size-adjust': 1,
-	  'font-stretch': 1,
-	  'font-style': 1,
-	  'font-variant': 1,
-	  'font-weight': 1,
-	  'glyph-orientation-horizontal': 1,
-	  'glyph-orientation-vertical': 1,
-	  'image-rendering': 1,
-	  'kerning': 1,
-	  'letter-spacing': 1,
-	  'lighting-color': 1,
-	  'marker': 1,
-	  'marker-end': 1,
-	  'marker-mid': 1,
-	  'marker-start': 1,
-	  'mask': 1,
-	  'opacity': 1,
-	  'overflow': 1,
-	  'pointer-events': 1,
-	  'shape-rendering': 1,
-	  'stop-color': 1,
-	  'stop-opacity': 1,
-	  'stroke': 1,
-	  'stroke-dasharray': 1,
-	  'stroke-dashoffset': 1,
-	  'stroke-linecap': 1,
-	  'stroke-linejoin': 1,
-	  'stroke-miterlimit': 1,
-	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR,
-	  'text-anchor': 1,
-	  'text-decoration': 1,
-	  'text-rendering': 1,
-	  'unicode-bidi': 1,
-	  'visibility': 1,
-	  'word-spacing': 1,
-	  'writing-mode': 1
-	};
-
-
-	function getAttribute(node, name) {
-	  if (CSS_PROPERTIES[name]) {
-	    return node.style[name];
-	  } else {
-	    return node.getAttributeNS(null, name);
-	  }
-	}
-
-	function setAttribute(node, name, value) {
-	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-
-	  var type = CSS_PROPERTIES[hyphenated];
-
-	  if (type) {
-
-	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR && typeof value === 'number') {
-	      value = String(value) + 'px';
-	    }
-
-	    node.style[hyphenated] = value;
-	  } else {
-	    node.setAttributeNS(null, name, value);
-	  }
-	}
-
-	function setAttributes(node, attrs) {
-
-	  var names = Object.keys(attrs), i, name;
-
-	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute(node, name, attrs[name]);
-	  }
-	}
-
-	/**
-	 * Gets or sets raw attributes on a node.
-	 *
-	 * @param  {SVGElement} node
-	 * @param  {Object} [attrs]
-	 * @param  {String} [name]
-	 * @param  {String} [value]
-	 *
-	 * @return {String}
-	 */
-	function attr(node, name, value) {
-	  if (typeof name === 'string') {
-	    if (value !== undefined) {
-	      setAttribute(node, name, value);
-	    } else {
-	      return getAttribute(node, name);
-	    }
-	  } else {
-	    setAttributes(node, name);
-	  }
-
-	  return node;
-	}
-
-	var ns = {
-	  svg: 'http://www.w3.org/2000/svg'
-	};
-
-	/**
-	 * DOM parsing utility
-	 */
-
-	var SVG_START = '<svg xmlns="' + ns.svg + '"';
-
-	function parse(svg) {
-
-	  var unwrap = false;
-
-	  // ensure we import a valid svg document
-	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns.svg) === -1) {
-	      svg = SVG_START + svg.substring(4);
-	    }
-	  } else {
-
-	    // namespace svg
-	    svg = SVG_START + '>' + svg + '</svg>';
-	    unwrap = true;
-	  }
-
-	  var parsed = parseDocument(svg);
-
-	  if (!unwrap) {
-	    return parsed;
-	  }
-
-	  var fragment = document.createDocumentFragment();
-
-	  var parent = parsed.firstChild;
-
-	  while (parent.firstChild) {
-	    fragment.appendChild(parent.firstChild);
-	  }
-
-	  return fragment;
-	}
-
-	function parseDocument(svg) {
-
-	  var parser;
-
-	  // parse
-	  parser = new DOMParser();
-	  parser.async = false;
-
-	  return parser.parseFromString(svg, 'text/xml');
-	}
-
-	/**
-	 * Create utility for SVG elements
-	 */
-
-
-	/**
-	 * Create a specific type from name or SVG markup.
-	 *
-	 * @param {String} name the name or markup of the element
-	 * @param {Object} [attrs] attributes to set on the element
-	 *
-	 * @returns {SVGElement}
-	 */
-	function create(name, attrs) {
-	  var element;
-
-	  if (name.charAt(0) === '<') {
-	    element = parse(name).firstChild;
-	    element = document.importNode(element, true);
-	  } else {
-	    element = document.createElementNS(ns.svg, name);
-	  }
-
-	  if (attrs) {
-	    attr(element, attrs);
-	  }
-
-	  return element;
-	}
-
 	function getModelerTemplateIcon(element) {
 	  var modelerTemplateIcon = getBusinessObject(element).get('zeebe:modelerTemplateIcon');
 	  return modelerTemplateIcon;
@@ -21956,8 +21606,8 @@
 
 	  var modelerTemplateIcon = getModelerTemplateIcon(element);
 
-	  var icon = create('image');
-	  attr(icon, {
+	  var icon = create$1('image');
+	  attr$1(icon, {
 	    href: modelerTemplateIcon,
 	    x: 5,
 	    y: 5,
@@ -22387,6 +22037,29 @@
 					type: "String"
 				}
 			]
+		},
+		{
+			name: "Script",
+			superClass: [
+				"Element"
+			],
+			meta: {
+				allowedIn: [
+					"bpmn:ScriptTask"
+				]
+			},
+			properties: [
+				{
+					name: "expression",
+					type: "String",
+					isAttr: true
+				},
+				{
+					name: "resultVariable",
+					type: "String",
+					isAttr: true
+				}
+			]
 		}
 	];
 	var zeebeModdle = {