camunda-bpmn-js 0.13.1 → 0.15.0

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

@@ -41,6 +41,8 @@
 	}
 	});
 
+	function e(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
+
 	/**
 	 * Flatten array, one level deep.
 	 *
@@ -507,6 +509,21 @@
 	  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
 	}
 
+
+	/**
+	 * Return true if element has any of the given types.
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<string>} types
+	 *
+	 * @return {boolean}
+	 */
+	function isAny(element, types) {
+	  return some(types, function(t) {
+	    return is(element, t);
+	  });
+	}
+
 	/**
 	 * Return the business object for a given element.
 	 *
@@ -1374,6 +1391,8 @@
 	  return gfx;
 	}
 
+	var black = 'hsl(225, 10%, 15%)';
+
 	// element utils //////////////////////
 
 	/**
@@ -1424,7 +1443,7 @@
 	function getStrokeColor(element, defaultColor) {
 	  var di = getDi(element);
 
-	  return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || 'black';
+	  return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
 	}
 
 	function getLabelColor(element, defaultColor, defaultStrokeColor) {
@@ -1514,6 +1533,101 @@
 	  return componentsToPath(rectPath);
 	}
 
+	/**
+	 * Flatten array, one level deep.
+	 *
+	 * @param {Array<?>} arr
+	 *
+	 * @return {Array<?>}
+	 */
+
+	var nativeToString$1 = Object.prototype.toString;
+	var nativeHasOwnProperty$1 = Object.prototype.hasOwnProperty;
+	function isUndefined$1(obj) {
+	  return obj === undefined;
+	}
+	function isArray$1(obj) {
+	  return nativeToString$1.call(obj) === '[object Array]';
+	}
+	/**
+	 * Return true, if target owns a property with the given key.
+	 *
+	 * @param {Object} target
+	 * @param {String} key
+	 *
+	 * @return {Boolean}
+	 */
+
+	function has$1(target, key) {
+	  return nativeHasOwnProperty$1.call(target, key);
+	}
+	/**
+	 * Iterate over collection; returning something
+	 * (non-undefined) will stop iteration.
+	 *
+	 * @param  {Array|Object} collection
+	 * @param  {Function} iterator
+	 *
+	 * @return {Object} return result that stopped the iteration
+	 */
+
+	function forEach$1(collection, iterator) {
+	  var val, result;
+
+	  if (isUndefined$1(collection)) {
+	    return;
+	  }
+
+	  var convertKey = isArray$1(collection) ? toNum$1 : identity$1;
+
+	  for (var key in collection) {
+	    if (has$1(collection, key)) {
+	      val = collection[key];
+	      result = iterator(val, convertKey(key));
+
+	      if (result === false) {
+	        return val;
+	      }
+	    }
+	  }
+	}
+
+	function identity$1(arg) {
+	  return arg;
+	}
+
+	function toNum$1(arg) {
+	  return Number(arg);
+	}
+
+	/**
+	 * Assigns style attributes in a style-src compliant way.
+	 *
+	 * @param {Element} element
+	 * @param {...Object} styleSources
+	 *
+	 * @return {Element} the element
+	 */
+	function assign$1(element) {
+	  var target = element.style;
+
+	  for (var _len = arguments.length, styleSources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	    styleSources[_key - 1] = arguments[_key];
+	  }
+
+	  forEach$1(styleSources, function (style) {
+	    if (!style) {
+	      return;
+	    }
+
+	    forEach$1(style, function (value, key) {
+	      target[key] = value;
+	    });
+	  });
+
+	  return element;
+	}
+
 	/**
 	 * Set attribute `name` to `val`, or get attr `name`.
 	 *
@@ -1863,7 +1977,7 @@
 	// when delegating.
 	var forceCaptureEvents = ['focus', 'blur'];
 
-	function bind$1$1(el, selector, type, fn, capture) {
+	function bind$2(el, selector, type, fn, capture) {
 	  if (forceCaptureEvents.indexOf(type) !== -1) {
 	    capture = true;
 	  }
@@ -1895,7 +2009,7 @@
 	}
 
 	var delegate = {
-	  bind: bind$1$1,
+	  bind: bind$2,
 	  unbind: unbind$1
 	};
 
@@ -2263,7 +2377,7 @@
 
 	  function addMarker(id, options) {
 	    var attrs = assign({
-	      fill: 'black',
+	      fill: black,
 	      strokeWidth: 1,
 	      strokeLinecap: 'round',
 	      strokeDasharray: 'none'
@@ -2442,7 +2556,7 @@
 	    offset = offset || 0;
 
 	    attrs = computeStyle(attrs, {
-	      stroke: 'black',
+	      stroke: black,
 	      strokeWidth: 2,
 	      fill: 'white'
 	    });
@@ -2477,7 +2591,7 @@
 	    offset = offset || 0;
 
 	    attrs = computeStyle(attrs, {
-	      stroke: 'black',
+	      stroke: black,
 	      strokeWidth: 2,
 	      fill: 'white'
 	    });
@@ -2510,7 +2624,7 @@
 	    }).join(' ');
 
 	    attrs = computeStyle(attrs, {
-	      stroke: 'black',
+	      stroke: black,
 	      strokeWidth: 2,
 	      fill: 'white'
 	    });
@@ -2528,7 +2642,7 @@
 
 	  function drawLine(parentGfx, waypoints, attrs) {
 	    attrs = computeStyle(attrs, [ 'no-fill' ], {
-	      stroke: 'black',
+	      stroke: black,
 	      strokeWidth: 2,
 	      fill: 'none'
 	    });
@@ -2544,7 +2658,7 @@
 
 	    attrs = computeStyle(attrs, [ 'no-fill' ], {
 	      strokeWidth: 2,
-	      stroke: 'black'
+	      stroke: black
 	    });
 
 	    var path = create('path');
@@ -3649,7 +3763,7 @@
 
 	        if (di.messageVisibleKind === 'initiating') {
 	          messageAttrs.fill = 'white';
-	          messageAttrs.stroke = 'black';
+	          messageAttrs.stroke = black;
 	        } else {
 	          messageAttrs.fill = '#888';
 	          messageAttrs.stroke = 'white';
@@ -3724,7 +3838,7 @@
 
 	      /* output arrow path */ drawPath(parentGfx, arrowPathData, {
 	        strokeWidth: 1,
-	        fill: 'black'
+	        fill: black
 	      });
 
 	      return elementObject;
@@ -4054,7 +4168,7 @@
 	}
 
 
-	inherits_browser(BpmnRenderer, BaseRenderer);
+	e(BpmnRenderer, BaseRenderer);
 
 	BpmnRenderer.$inject = [
 	  'config.bpmnRenderer',
@@ -4288,7 +4402,8 @@
 	      id: 'helper-svg',
 	      width: 0,
 	      height: 0,
-	      style: 'visibility: hidden; position: fixed'
+	      visibility: 'hidden',
+	      position: 'fixed'
 	    });
 
 	    document.body.appendChild(helperSvg);
@@ -5275,13 +5390,98 @@
 	 *
 	 * @return {Point}
 	 */
-	function getMid(bounds) {
+	function getBoundsMid(bounds) {
 	  return roundPoint({
 	    x: bounds.x + (bounds.width || 0) / 2,
 	    y: bounds.y + (bounds.height || 0) / 2
 	  });
 	}
 
+
+	/**
+	 * Get the mid of the given Connection.
+	 *
+	 * @param {djs.Base.Connection} connection
+	 *
+	 * @return {Point}
+	 */
+	function getConnectionMid(connection) {
+	  var waypoints = connection.waypoints;
+
+	  // calculate total length and length of each segment
+	  var parts = waypoints.reduce(function(parts, point, index) {
+
+	    var lastPoint = waypoints[index - 1];
+
+	    if (lastPoint) {
+	      var lastPart = parts[parts.length - 1];
+
+	      var startLength = lastPart && lastPart.endLength || 0;
+	      var length = distance(lastPoint, point);
+
+	      parts.push({
+	        start: lastPoint,
+	        end: point,
+	        startLength: startLength,
+	        endLength: startLength + length,
+	        length: length
+	      });
+	    }
+
+	    return parts;
+	  }, []);
+
+	  var totalLength = parts.reduce(function(length, part) {
+	    return length + part.length;
+	  }, 0);
+
+	  // find which segement contains middle point
+	  var midLength = totalLength / 2;
+
+	  var i = 0;
+	  var midSegment = parts[i];
+
+	  while (midSegment.endLength < midLength) {
+	    midSegment = parts[++i];
+	  }
+
+	  // calculate relative position on mid segment
+	  var segmentProgress = (midLength - midSegment.startLength) / midSegment.length;
+
+	  var midPoint = {
+	    x: midSegment.start.x + (midSegment.end.x - midSegment.start.x) * segmentProgress,
+	    y: midSegment.start.y + (midSegment.end.y - midSegment.start.y) * segmentProgress
+	  };
+
+	  return midPoint;
+	}
+
+
+	/**
+	 * Get the mid of the given Element.
+	 *
+	 * @param {djs.Base.Connection} connection
+	 *
+	 * @return {Point}
+	 */
+	function getMid(element) {
+	  if (isConnection(element)) {
+	    return getConnectionMid(element);
+	  }
+
+	  return getBoundsMid(element);
+	}
+
+	// helpers //////////////////////
+
+	function distance(a, b) {
+	  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+	}
+
+	function isConnection(element) {
+	  return !!element.waypoints;
+	}
+
 	function elementToString(e) {
 	  if (!e) {
 	    return '<null>';
@@ -5924,10 +6124,13 @@
 
 	  var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all');
 
+	  var NO_MOVE_HIT_STYLE = createHitStyle('djs-hit djs-hit-no-move');
+
 	  var HIT_TYPES = {
 	    'all': ALL_HIT_STYLE,
 	    'click-stroke': CLICK_STROKE_HIT_STYLE,
-	    'stroke': STROKE_HIT_STYLE
+	    'stroke': STROKE_HIT_STYLE,
+	    'no-move': NO_MOVE_HIT_STYLE
 	  };
 
 	  function createHitStyle(classNames, attrs) {
@@ -6180,7 +6383,9 @@
 	 * the array or the element primitive.
 	 *
 	 * @param {Array<djs.model.Shape>|djs.model.Shape} elements
-	 * @param {boolean} stopRecursion
+	 * @param {boolean} [stopRecursion=false]
+	 *
+	 * @return {Bounds}
 	 */
 	function getBBox(elements, stopRecursion) {
 
@@ -6276,6 +6481,7 @@
 	    attr(outline, assign({
 	      x: 10,
 	      y: 10,
+	      rx: 3,
 	      width: 100,
 	      height: 100
 	    }, OUTLINE_STYLE));
@@ -6467,6 +6673,8 @@
 	var MARKER_HOVER = 'hover',
 	    MARKER_SELECTED = 'selected';
 
+	var SELECTION_OUTLINE_PADDING = 6;
+
 
 	/**
 	 * A plugin that adds a visible selection UI to shapes and connections
@@ -6476,11 +6684,13 @@
 	 *
 	 * Makes elements selectable, too.
 	 *
-	 * @param {EventBus} events
-	 * @param {SelectionService} selection
 	 * @param {Canvas} canvas
+	 * @param {EventBus} eventBus
 	 */
-	function SelectionVisuals(events, canvas, selection, styles) {
+	function SelectionVisuals(canvas, eventBus, selection) {
+	  this._canvas = canvas;
+
+	  var self = this;
 
 	  this._multiSelectionBox = null;
 
@@ -6492,15 +6702,15 @@
 	    canvas.removeMarker(e, cls);
 	  }
 
-	  events.on('element.hover', function(event) {
+	  eventBus.on('element.hover', function(event) {
 	    addMarker(event.element, MARKER_HOVER);
 	  });
 
-	  events.on('element.out', function(event) {
+	  eventBus.on('element.out', function(event) {
 	    removeMarker(event.element, MARKER_HOVER);
 	  });
 
-	  events.on('selection.changed', function(event) {
+	  eventBus.on('selection.changed', function(event) {
 
 	    function deselect(s) {
 	      removeMarker(s, MARKER_SELECTED);
@@ -6524,16 +6734,63 @@
 	        select(e);
 	      }
 	    });
+
+	    self._updateSelectionOutline(newSelection);
+	  });
+
+
+	  eventBus.on('element.changed', function(event) {
+	    if (selection.isSelected(event.element)) {
+	      self._updateSelectionOutline(selection.get());
+	    }
 	  });
 	}
 
 	SelectionVisuals.$inject = [
-	  'eventBus',
 	  'canvas',
-	  'selection',
-	  'styles'
+	  'eventBus',
+	  'selection'
 	];
 
+	SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
+	  var layer = this._canvas.getLayer('selectionOutline');
+
+	  clear(layer);
+
+	  var enabled = selection.length > 1;
+
+	  var container = this._canvas.getContainer();
+
+	  classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+	  if (!enabled) {
+	    return;
+	  }
+
+	  var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+	  var rect = create('rect');
+
+	  attr(rect, assign({
+	    rx: 3
+	  }, bBox));
+
+	  classes(rect).add('djs-selection-outline');
+
+	  append(layer, rect);
+	};
+
+	// helpers //////////
+
+	function addSelectionOutlinePadding(bBox) {
+	  return {
+	    x: bBox.x - SELECTION_OUTLINE_PADDING,
+	    y: bBox.y - SELECTION_OUTLINE_PADDING,
+	    width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+	    height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+	  };
+	}
+
 	function SelectionBehavior(eventBus, selection, canvas, elementRegistry) {
 
 	  // Select elements on create
@@ -6564,11 +6821,10 @@
 	  // Select connection targets on connect
 	  eventBus.on('connect.end', 500, function(event) {
 	    var context = event.context,
-	        canExecute = context.canExecute,
-	        hover = context.hover;
+	        connection = context.connection;
 
-	    if (canExecute && hover) {
-	      selection.select(hover);
+	    if (connection) {
+	      selection.select(connection);
 	    }
 	  });
 
@@ -7034,7 +7290,8 @@
 
 
 	Overlays.prototype._createOverlayContainer = function(element) {
-	  var html = domify('<div class="djs-overlays" style="position: absolute" />');
+	  var html = domify('<div class="djs-overlays" />');
+	  assign$1(html, { position: 'absolute' });
 
 	  this._overlayRoot.appendChild(html);
 
@@ -7105,7 +7362,8 @@
 
 	  overlayContainer = this._getOverlayContainer(element);
 
-	  htmlContainer = domify('<div class="djs-overlay" data-overlay-id="' + id + '" style="position: absolute">');
+	  htmlContainer = domify('<div class="djs-overlay" data-overlay-id="' + id + '">');
+	  assign$1(htmlContainer, { position: 'absolute' });
 
 	  htmlContainer.appendChild(html);
 
@@ -7290,18 +7548,30 @@
 
 	function createRoot(parentNode) {
 	  var root = domify(
-	    '<div class="djs-overlay-container" style="position: absolute; width: 0; height: 0;" />'
+	    '<div class="djs-overlay-container" />'
 	  );
 
+	  assign$1(root, {
+	    position: 'absolute',
+	    width: 0,
+	    height: 0
+	  });
+
 	  parentNode.insertBefore(root, parentNode.firstChild);
 
 	  return root;
 	}
 
 	function setPosition(el, x, y) {
-	  assign(el.style, { left: x + 'px', top: y + 'px' });
+	  assign$1(el, { left: x + 'px', top: y + 'px' });
 	}
 
+	/**
+	 * Set element visible
+	 *
+	 * @param {DOMElement} el
+	 * @param {boolean} [visible=true]
+	 */
 	function setVisible(el, visible) {
 	  el.style.display = visible === false ? 'none' : '';
 	}
@@ -7399,7 +7669,7 @@
 	 *
 	 * @example
 	 *
-	 * import inherits from 'inherits';
+	 * import inherits from 'inherits-browser';
 	 *
 	 * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 	 *
@@ -7555,7 +7825,7 @@
 	  });
 	}
 
-	inherits_browser(RootElementsBehavior, CommandInterceptor);
+	e(RootElementsBehavior, CommandInterceptor);
 
 	RootElementsBehavior.$inject = [ 'canvas', 'injector' ];
 
@@ -8015,7 +8285,7 @@
 	      collapsedElements.push(bo);
 	    }
 
-	    if (is(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
+	    if (shouldMoveToPlane(bo, plane)) {
 
 	      // don't change the array while we iterate over it
 	      elementsToMove.push({ diElement: diElement, parent: parent });
@@ -8104,7 +8374,7 @@
 	SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
 
 
-	// helpers
+	// helpers //////////////////////////
 
 	function findRootDiagram(element) {
 	  if (is(element, 'bpmndi:BPMNDiagram')) {
@@ -8136,6 +8406,23 @@
 	  return asBounds(planeTrbl);
 	}
 
+	function shouldMoveToPlane(bo, plane) {
+	  var parent = bo.$parent;
+
+	  // don't move elements that are already on the plane
+	  if (!is(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {
+	    return false;
+	  }
+
+	  // dataAssociations are children of the subprocess but rendered on process level
+	  // cf. https://github.com/bpmn-io/bpmn-js/issues/1619
+	  if (isAny(bo, ['bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation'])) {
+	    return false;
+	  }
+
+	  return true;
+	}
+
 	var LOW_PRIORITY$3 = 250;
 	var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
@@ -8211,7 +8498,7 @@
 	    }, true);
 
 
-	  eventBus.on('import.done', function() {
+	  eventBus.on('import.render.complete', function() {
 	    elementRegistry.filter(function(e) {
 	      return self.canDrillDown(e);
 	    }).map(function(el) {
@@ -8221,7 +8508,7 @@
 
 	}
 
-	inherits_browser(DrilldownOverlayBehavior, CommandInterceptor);
+	e(DrilldownOverlayBehavior, CommandInterceptor);
 
 	DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
 	  var canvas = this._canvas;
@@ -8322,22 +8609,50 @@
 
 	var CLASS_PATTERN = /^class /;
 
+
+	/**
+	 * @param {function} fn
+	 *
+	 * @return {boolean}
+	 */
 	function isClass(fn) {
 	  return CLASS_PATTERN.test(fn.toString());
 	}
 
-	function isArray$1(obj) {
+	/**
+	 * @param {any} obj
+	 *
+	 * @return {boolean}
+	 */
+	function isArray$2(obj) {
 	  return Object.prototype.toString.call(obj) === '[object Array]';
 	}
 
+	/**
+	 * @param {any} obj
+	 * @param {string} prop
+	 *
+	 * @return {boolean}
+	 */
 	function hasOwnProp(obj, prop) {
 	  return Object.prototype.hasOwnProperty.call(obj, prop);
 	}
 
+	/**
+	 * @typedef {import('./index').InjectAnnotated } InjectAnnotated
+	 */
+
+	/**
+	 * @template T
+	 *
+	 * @params {[...string[], T] | ...string[], T} args
+	 *
+	 * @return {T & InjectAnnotated}
+	 */
 	function annotate() {
 	  var args = Array.prototype.slice.call(arguments);
 
-	  if (args.length === 1 && isArray$1(args[0])) {
+	  if (args.length === 1 && isArray$2(args[0])) {
 	    args = args[0];
 	  }
 
@@ -8363,9 +8678,14 @@
 	// of a nested class, too.
 
 	var CONSTRUCTOR_ARGS = /constructor\s*[^(]*\(\s*([^)]*)\)/m;
-	var FN_ARGS = /^(?:async )?(?:function\s*)?[^(]*\(\s*([^)]*)\)/m;
+	var FN_ARGS = /^(?:async\s+)?(?:function\s*[^(]*)?(?:\(\s*([^)]*)\)|(\w+))/m;
 	var FN_ARG = /\/\*([^*]*)\*\//m;
 
+	/**
+	 * @param {unknown} fn
+	 *
+	 * @return {string[]}
+	 */
 	function parseAnnotations(fn) {
 
 	  if (typeof fn !== 'function') {
@@ -8379,36 +8699,26 @@
 	    return [];
 	  }
 
-	  return match[1] && match[1].split(',').map(function(arg) {
-	    match = arg.match(FN_ARG);
-	    return match ? match[1].trim() : arg.trim();
+	  var args = match[1] || match[2];
+
+	  return args && args.split(',').map(function(arg) {
+	    var argMatch = arg.match(FN_ARG);
+	    return (argMatch && argMatch[1] || arg).trim();
 	  }) || [];
 	}
 
-	function Module() {
-	  var providers = [];
-
-	  this.factory = function(name, factory) {
-	    providers.push([name, 'factory', factory]);
-	    return this;
-	  };
-
-	  this.value = function(name, value) {
-	    providers.push([name, 'value', value]);
-	    return this;
-	  };
-
-	  this.type = function(name, type) {
-	    providers.push([name, 'type', type]);
-	    return this;
-	  };
-
-	  this.forEach = function(iterator) {
-	    providers.forEach(iterator);
-	  };
-
-	}
+	/**
+	 * @typedef { import('./index').ModuleDeclaration } ModuleDeclaration
+	 * @typedef { import('./index').ModuleDefinition } ModuleDefinition
+	 * @typedef { import('./index').InjectorContext } InjectorContext
+	 */
 
+	/**
+	 * Create a new injector with the given modules.
+	 *
+	 * @param {ModuleDefinition[]} modules
+	 * @param {InjectorContext} [parent]
+	 */
 	function Injector(modules, parent) {
 	  parent = parent || {
 	    get: function(name, strict) {
@@ -8437,12 +8747,12 @@
 	  /**
 	   * Return a named service.
 	   *
-	   * @param {String} name
-	   * @param {Boolean} [strict=true] if false, resolve missing services to null
+	   * @param {string} name
+	   * @param {boolean} [strict=true] if false, resolve missing services to null
 	   *
-	   * @return {Object}
+	   * @return {any}
 	   */
-	  var get = function(name, strict) {
+	  function get(name, strict) {
 	    if (!providers[name] && name.indexOf('.') !== -1) {
 	      var parts = name.split('.');
 	      var pivot = get(parts.shift());
@@ -8472,16 +8782,16 @@
 	    }
 
 	    return parent.get(name, strict);
-	  };
+	  }
 
-	  var fnDef = function(fn, locals) {
+	  function fnDef(fn, locals) {
 
 	    if (typeof locals === 'undefined') {
 	      locals = {};
 	    }
 
 	    if (typeof fn !== 'function') {
-	      if (isArray$1(fn)) {
+	      if (isArray$2(fn)) {
 	        fn = annotate(fn.slice());
 	      } else {
 	        throw new Error('Cannot invoke "' + fn + '". Expected a function!');
@@ -8501,9 +8811,9 @@
 	      fn: fn,
 	      dependencies: dependencies
 	    };
-	  };
+	  }
 
-	  var instantiate = function(Type) {
+	  function instantiate(Type) {
 	    var def = fnDef(Type);
 
 	    var fn = def.fn,
@@ -8513,25 +8823,35 @@
 	    var Constructor = Function.prototype.bind.apply(fn, [ null ].concat(dependencies));
 
 	    return new Constructor();
-	  };
+	  }
 
-	  var invoke = function(func, context, locals) {
+	  function invoke(func, context, locals) {
 	    var def = fnDef(func, locals);
 
 	    var fn = def.fn,
 	        dependencies = def.dependencies;
 
 	    return fn.apply(context, dependencies);
-	  };
-
+	  }
 
-	  var createPrivateInjectorFactory = function(privateChildInjector) {
+	  /**
+	   * @param {Injector} childInjector
+	   *
+	   * @return {Function}
+	   */
+	  function createPrivateInjectorFactory(childInjector) {
 	    return annotate(function(key) {
-	      return privateChildInjector.get(key);
+	      return childInjector.get(key);
 	    });
-	  };
+	  }
 
-	  var createChild = function(modules, forceNewInstances) {
+	  /**
+	   * @param {ModuleDefinition[]} modules
+	   * @param {string[]} [forceNewInstances]
+	   *
+	   * @return {Injector}
+	   */
+	  function createChild(modules, forceNewInstances) {
 	    if (forceNewInstances && forceNewInstances.length) {
 	      var fromParentModule = Object.create(null);
 	      var matchedScopes = Object.create(null);
@@ -8556,12 +8876,12 @@
 	              privateInjectorsCache.push(provider[3]);
 	              privateChildInjectors.push(privateChildInjector);
 	              privateChildFactories.push(privateChildInjectorFactory);
-	              fromParentModule[name] = [privateChildInjectorFactory, name, 'private', privateChildInjector];
+	              fromParentModule[name] = [ privateChildInjectorFactory, name, 'private', privateChildInjector ];
 	            } else {
-	              fromParentModule[name] = [privateChildFactories[cacheIdx], name, 'private', privateChildInjectors[cacheIdx]];
+	              fromParentModule[name] = [ privateChildFactories[cacheIdx], name, 'private', privateChildInjectors[cacheIdx] ];
 	            }
 	          } else {
-	            fromParentModule[name] = [provider[2], provider[1]];
+	            fromParentModule[name] = [ provider[2], provider[1] ];
 	          }
 	          matchedScopes[name] = true;
 	        }
@@ -8570,7 +8890,7 @@
 	          /* jshint -W083 */
 	          forceNewInstances.forEach(function(scope) {
 	            if (provider[1].$scope.indexOf(scope) !== -1) {
-	              fromParentModule[name] = [provider[2], provider[1]];
+	              fromParentModule[name] = [ provider[2], provider[1] ];
 	              matchedScopes[scope] = true;
 	            }
 	          });
@@ -8587,7 +8907,7 @@
 	    }
 
 	    return new Injector(modules, self);
-	  };
+	  }
 
 	  var factoryMap = {
 	    factory: invoke,
@@ -8597,62 +8917,169 @@
 	    }
 	  };
 
-	  modules.forEach(function(module) {
+	  /**
+	   * @param {ModuleDefinition} moduleDefinition
+	   * @param {Injector} injector
+	   */
+	  function createInitializer(moduleDefinition, injector) {
 
-	    function arrayUnwrap(type, value) {
-	      if (type !== 'value' && isArray$1(value)) {
-	        value = annotate(value.slice());
-	      }
+	    var initializers = moduleDefinition.__init__ || [];
 
-	      return value;
-	    }
+	    return function() {
+	      initializers.forEach(function(initializer) {
 
-	    // TODO(vojta): handle wrong inputs (modules)
-	    if (module instanceof Module) {
-	      module.forEach(function(provider) {
-	        var name = provider[0];
-	        var type = provider[1];
-	        var value = provider[2];
+	        try {
 
-	        providers[name] = [factoryMap[type], arrayUnwrap(type, value), type];
-	      });
-	    } else if (typeof module === 'object') {
-	      if (module.__exports__) {
-	        var clonedModule = Object.keys(module).reduce(function(m, key) {
-	          if (key.substring(0, 2) !== '__') {
-	            m[key] = module[key];
+	          // eagerly resolve component (fn or string)
+	          if (typeof initializer === 'string') {
+	            injector.get(initializer);
+	          } else {
+	            injector.invoke(initializer);
 	          }
-	          return m;
-	        }, Object.create(null));
-
-	        var privateInjector = new Injector((module.__modules__ || []).concat([clonedModule]), self);
-	        var getFromPrivateInjector = annotate(function(key) {
-	          return privateInjector.get(key);
-	        });
-	        module.__exports__.forEach(function(key) {
-	          providers[key] = [getFromPrivateInjector, key, 'private', privateInjector];
-	        });
-	      } else {
-	        Object.keys(module).forEach(function(name) {
-	          if (module[name][2] === 'private') {
-	            providers[name] = module[name];
-	            return;
+	        } catch (error) {
+	          if (typeof AggregateError !== 'undefined') {
+	            throw new AggregateError([ error ], 'Failed to initialize!');
 	          }
 
-	          var type = module[name][0];
-	          var value = module[name][1];
+	          throw new Error('Failed to initialize! ' + error.message);
+	        }
+	      });
+	    };
+	  }
 
-	          providers[name] = [factoryMap[type], arrayUnwrap(type, value), type];
-	        });
+	  /**
+	   * @param {ModuleDefinition} moduleDefinition
+	   */
+	  function loadModule(moduleDefinition) {
+
+	    var moduleExports = moduleDefinition.__exports__;
+
+	    // private module
+	    if (moduleExports) {
+	      var nestedModules = moduleDefinition.__modules__;
+
+	      var clonedModule = Object.keys(moduleDefinition).reduce(function(clonedModule, key) {
+
+	        if (key !== '__exports__' && key !== '__modules__' && key !== '__init__' && key !== '__depends__') {
+	          clonedModule[key] = moduleDefinition[key];
+	        }
+
+	        return clonedModule;
+	      }, Object.create(null));
+
+	      var childModules = (nestedModules || []).concat(clonedModule);
+
+	      var privateInjector = createChild(childModules);
+	      var getFromPrivateInjector = annotate(function(key) {
+	        return privateInjector.get(key);
+	      });
+
+	      moduleExports.forEach(function(key) {
+	        providers[key] = [ getFromPrivateInjector, key, 'private', privateInjector ];
+	      });
+
+	      // ensure child injector initializes
+	      var initializers = (moduleDefinition.__init__ || []).slice();
+
+	      initializers.unshift(function() {
+	        privateInjector.init();
+	      });
+
+	      moduleDefinition = Object.assign({}, moduleDefinition, {
+	        __init__: initializers
+	      });
+
+	      return createInitializer(moduleDefinition, privateInjector);
+	    }
+
+	    // normal module
+	    Object.keys(moduleDefinition).forEach(function(key) {
+
+	      if (key === '__init__' || key === '__depends__') {
+	        return;
+	      }
+
+	      if (moduleDefinition[key][2] === 'private') {
+	        providers[key] = moduleDefinition[key];
+	        return;
 	      }
+
+	      var type = moduleDefinition[key][0];
+	      var value = moduleDefinition[key][1];
+
+	      providers[key] = [ factoryMap[type], arrayUnwrap(type, value), type ];
+	    });
+
+	    return createInitializer(moduleDefinition, self);
+	  }
+
+	  /**
+	   * @param {ModuleDefinition[]} moduleDefinitions
+	   * @param {ModuleDefinition} moduleDefinition
+	   *
+	   * @return {ModuleDefinition[]}
+	   */
+	  function resolveDependencies(moduleDefinitions, moduleDefinition) {
+
+	    if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {
+	      return moduleDefinitions;
 	    }
-	  });
+
+	    moduleDefinitions = (moduleDefinition.__depends__ || []).reduce(resolveDependencies, moduleDefinitions);
+
+	    if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {
+	      return moduleDefinitions;
+	    }
+
+	    return moduleDefinitions.concat(moduleDefinition);
+	  }
+
+	  /**
+	   * @param {ModuleDefinition[]} moduleDefinitions
+	   *
+	   * @return { () => void } initializerFn
+	   */
+	  function bootstrap(moduleDefinitions) {
+
+	    var initializers = moduleDefinitions
+	      .reduce(resolveDependencies, [])
+	      .map(loadModule);
+
+	    var initialized = false;
+
+	    return function() {
+
+	      if (initialized) {
+	        return;
+	      }
+
+	      initialized = true;
+
+	      initializers.forEach(function(initializer) {
+	        return initializer();
+	      });
+	    };
+	  }
 
 	  // public API
 	  this.get = get;
 	  this.invoke = invoke;
 	  this.instantiate = instantiate;
 	  this.createChild = createChild;
+
+	  // setup
+	  this.init = bootstrap(modules);
+	}
+
+
+	// helpers ///////////////
+
+	function arrayUnwrap(type, value) {
+	  if (type !== 'value' && isArray$2(value)) {
+	    value = annotate(value.slice());
+	  }
+
+	  return value;
 	}
 
 	// apply default renderer with lowest possible priority
@@ -8675,7 +9102,7 @@
 	  this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, strokeWidth: 2 });
 	}
 
-	inherits_browser(DefaultRenderer, BaseRenderer);
+	e(DefaultRenderer, BaseRenderer);
 
 
 	DefaultRenderer.prototype.canRender = function() {
@@ -8931,7 +9358,7 @@
 	  var parent = document.createElement('div');
 	  parent.setAttribute('class', 'djs-container');
 
-	  assign(parent.style, {
+	  assign$1(parent, {
 	    position: 'relative',
 	    overflow: 'hidden',
 	    width: ensurePx(options.width),
@@ -11010,7 +11437,7 @@
 	  attacherRefs.bind(this, 'attachers');
 	}
 
-	inherits_browser(Shape, Base);
+	e(Shape, Base);
 
 
 	/**
@@ -11025,7 +11452,7 @@
 	  Shape.call(this);
 	}
 
-	inherits_browser(Root, Shape);
+	e(Root, Shape);
 
 
 	/**
@@ -11048,7 +11475,7 @@
 	  labelRefs.bind(this, 'labelTarget');
 	}
 
-	inherits_browser(Label, Shape);
+	e(Label, Shape);
 
 
 	/**
@@ -11079,7 +11506,7 @@
 	  incomingRefs.bind(this, 'target');
 	}
 
-	inherits_browser(Connection, Base);
+	e(Connection, Base);
 
 
 	var types = {
@@ -11930,62 +12357,21 @@
 	  graphicsFactory: [ 'type', GraphicsFactory ]
 	};
 
+	/**
+	 * @typedef { import('didi').ModuleDeclaration } Module
+	 */
+
 	/**
 	 * Bootstrap an injector from a list of modules, instantiating a number of default components
 	 *
-	 * @ignore
-	 * @param {Array<didi.Module>} bootstrapModules
+	 * @param {Array<Module>} modules
 	 *
-	 * @return {didi.Injector} a injector to use to access the components
+	 * @return {Injector} a injector to use to access the components
 	 */
-	function bootstrap(bootstrapModules) {
-
-	  var modules = [],
-	      components = [];
-
-	  function hasModule(m) {
-	    return modules.indexOf(m) >= 0;
-	  }
-
-	  function addModule(m) {
-	    modules.push(m);
-	  }
-
-	  function visit(m) {
-	    if (hasModule(m)) {
-	      return;
-	    }
-
-	    (m.__depends__ || []).forEach(visit);
-
-	    if (hasModule(m)) {
-	      return;
-	    }
-
-	    addModule(m);
-
-	    (m.__init__ || []).forEach(function(c) {
-	      components.push(c);
-	    });
-	  }
-
-	  bootstrapModules.forEach(visit);
-
+	function bootstrap(modules) {
 	  var injector = new Injector(modules);
 
-	  components.forEach(function(c) {
-
-	    try {
-
-	      // eagerly resolve component (fn or string)
-	      injector[typeof c === 'string' ? 'get' : 'invoke'](c);
-	    } catch (e) {
-	      console.error('Failed to instantiate component');
-	      console.error(e.stack);
-
-	      throw e;
-	    }
-	  });
+	  injector.init();
 
 	  return injector;
 	}
@@ -11993,9 +12379,8 @@
 	/**
 	 * Creates an injector from passed options.
 	 *
-	 * @ignore
-	 * @param  {Object} options
-	 * @return {didi.Injector}
+	 * @param {Object} options
+	 * @return {Injector}
 	 */
 	function createInjector(options) {
 
@@ -12015,7 +12400,7 @@
 	 * The main diagram-js entry point that bootstraps the diagram with the given
 	 * configuration.
 	 *
-	 * To register extensions with the diagram, pass them as Array<didi.Module> to the constructor.
+	 * To register extensions with the diagram, pass them as Array<Module> to the constructor.
 	 *
 	 * @class djs.Diagram
 	 * @memberOf djs
@@ -12057,8 +12442,8 @@
 	 * // 'shape ... was added to the diagram' logged to console
 	 *
 	 * @param {Object} options
-	 * @param {Array<didi.Module>} [options.modules] external modules to instantiate with the diagram
-	 * @param {didi.Injector} [injector] an (optional) injector to bootstrap the diagram with
+	 * @param {Array<Module>} [options.modules] external modules to instantiate with the diagram
+	 * @param {Injector} [injector] an (optional) injector to bootstrap the diagram with
 	 */
 	function Diagram(options, injector) {
 
@@ -12723,7 +13108,7 @@
 
 	  var propertyName = property && property.name;
 
-	  if (isUndefined$1(value)) {
+	  if (isUndefined$2(value)) {
 	    // unset the property, if the specified value is undefined;
 	    // delete from $attrs (for extensions) or the target itself
 	    if (property) {
@@ -12814,7 +13199,7 @@
 	};
 
 
-	function isUndefined$1(val) {
+	function isUndefined$2(val) {
 	  return typeof val === 'undefined';
 	}
 
@@ -20261,7 +20646,7 @@
 	}
 
 	/**
-	 * Returns all diagrams in the same hirarchy as the requested diagram.
+	 * Returns all diagrams in the same hierarchy as the requested diagram.
 	 * Includes all parent and sub process diagrams.
 	 *
 	 * @param {Array} definitions
@@ -20369,53 +20754,53 @@
 
 
 	// inlined ../../resources/logo.svg
-	var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21" style="vertical-align:middle"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
+	var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
 
 	var BPMNIO_IMG = BPMNIO_LOGO_SVG;
 
-	function css(attrs) {
-	  return attrs.join(';');
-	}
-
-	var LINK_STYLES = css([
-	  'color: #404040'
-	]);
-
-	var LIGHTBOX_STYLES = css([
-	  'z-index: 1001',
-	  'position: fixed',
-	  'top: 0',
-	  'left: 0',
-	  'right: 0',
-	  'bottom: 0'
-	]);
-
-	var BACKDROP_STYLES = css([
-	  'width: 100%',
-	  'height: 100%',
-	  'background: rgba(40,40,40,0.2)'
-	]);
-
-	var NOTICE_STYLES = css([
-	  'position: absolute',
-	  'left: 50%',
-	  'top: 40%',
-	  'transform: translate(-50%)',
-	  'width: 260px',
-	  'padding: 10px',
-	  'background: white',
-	  'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
-	  'font-family: Helvetica, Arial, sans-serif',
-	  'font-size: 14px',
-	  'display: flex',
-	  'line-height: 1.3'
-	]);
+	var LOGO_STYLES = {
+	  verticalAlign: 'middle'
+	};
+
+	var LINK_STYLES = {
+	  'color': '#404040'
+	};
+
+	var LIGHTBOX_STYLES = {
+	  'zIndex': '1001',
+	  'position': 'fixed',
+	  'top': '0',
+	  'left': '0',
+	  'right': '0',
+	  'bottom': '0'
+	};
+
+	var BACKDROP_STYLES = {
+	  'width': '100%',
+	  'height': '100%',
+	  'background': 'rgba(40,40,40,0.2)'
+	};
+
+	var NOTICE_STYLES = {
+	  'position': 'absolute',
+	  'left': '50%',
+	  'top': '40%',
+	  'transform': 'translate(-50%)',
+	  'width': '260px',
+	  'padding': '10px',
+	  'background': 'white',
+	  'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
+	  'fontFamily': 'Helvetica, Arial, sans-serif',
+	  'fontSize': '14px',
+	  'display': 'flex',
+	  'lineHeight': '1.3'
+	};
 
 	var LIGHTBOX_MARKUP =
-	  '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
-	    '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
-	    '<div class="notice" style="' + NOTICE_STYLES + '">' +
-	      '<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' +
+	  '<div class="bjs-powered-by-lightbox">' +
+	    '<div class="backdrop"></div>' +
+	    '<div class="notice">' +
+	      '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
 	        BPMNIO_IMG +
 	      '</a>' +
 	      '<span>' +
@@ -20428,10 +20813,23 @@
 
 	var lightbox;
 
+	function createLightbox() {
+	  lightbox = domify(LIGHTBOX_MARKUP);
+
+	  assign$1(lightbox, LIGHTBOX_STYLES);
+	  assign$1(query('svg', lightbox), LOGO_STYLES);
+	  assign$1(query('.backdrop', lightbox), BACKDROP_STYLES);
+	  assign$1(query('.notice', lightbox), NOTICE_STYLES);
+	  assign$1(query('.link', lightbox), LINK_STYLES, {
+	    'margin': '15px 20px 15px 10px',
+	    'alignSelf': 'center'
+	  });
+	}
+
 	function open() {
 
 	  if (!lightbox) {
-	    lightbox = domify(LIGHTBOX_MARKUP);
+	    createLightbox();
 
 	    delegate.bind(lightbox, '.backdrop', 'click', function(event) {
 	      document.body.removeChild(lightbox);
@@ -20479,7 +20877,7 @@
 	  this._init(this._container, this._moddle, options);
 	}
 
-	inherits_browser(BaseViewer, Diagram);
+	e(BaseViewer, Diagram);
 
 	/**
 	* The importXML result.
@@ -21067,7 +21465,7 @@
 
 	  var container = domify('<div class="bjs-container"></div>');
 
-	  assign(container.style, {
+	  assign$1(container, {
 	    width: ensureUnit(options.width),
 	    height: ensureUnit(options.height),
 	    position: options.position
@@ -21157,12 +21555,20 @@
 	       'target="_blank" ' +
 	       'class="bjs-powered-by" ' +
 	       'title="Powered by bpmn.io" ' +
-	       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + LINK_STYLES + '">' +
+	      '>' +
 	      img +
 	    '</a>';
 
 	  var linkElement = domify(linkMarkup);
 
+	  assign$1(query('svg', linkElement), LOGO_STYLES);
+	  assign$1(linkElement, LINK_STYLES, {
+	    position: 'absolute',
+	    bottom: '15px',
+	    right: '15px',
+	    zIndex: '100'
+	  });
+
 	  container.appendChild(linkElement);
 
 	  componentEvent.bind(linkElement, 'click', function(event) {
@@ -21225,7 +21631,7 @@
 	  BaseViewer.call(this, options);
 	}
 
-	inherits_browser(Viewer, BaseViewer);
+	e(Viewer, BaseViewer);
 
 	// modules the viewer is composed of
 	Viewer.prototype._modules = [
@@ -22199,7 +22605,7 @@
 	  Viewer.call(this, options);
 	}
 
-	inherits_browser(NavigatedViewer, Viewer);
+	e(NavigatedViewer, Viewer);
 
 
 	NavigatedViewer.prototype._navigationModules = [
@@ -23385,27 +23791,27 @@
 		emumerations: emumerations
 	};
 
-	const commonModdleExtensions = {
-	  camunda: camundaModdle
+	const commonModdleExtensions = {
+	  camunda: camundaModdle
 	};
 
-	/**
-	 *
-	 * @param {Object} options
-	 */
-	function NavigatedViewer$1(options = {}) {
-
-	  options = {
-	    ...options,
-	    moddleExtensions: {
-	      ...commonModdleExtensions,
-	      ...options.moddleExtensions
-	    }
-	  };
-
-	  NavigatedViewer.call(this, options);
-	}
-
+	/**
+	 *
+	 * @param {Object} options
+	 */
+	function NavigatedViewer$1(options = {}) {
+
+	  options = {
+	    ...options,
+	    moddleExtensions: {
+	      ...commonModdleExtensions,
+	      ...options.moddleExtensions
+	    }
+	  };
+
+	  NavigatedViewer.call(this, options);
+	}
+
 	inherits_browser(NavigatedViewer$1, NavigatedViewer);
 
 	return NavigatedViewer$1;