camunda-bpmn-js 0.13.0-alpha.0 → 0.13.0-alpha.1

package/dist/base-modeler.development.js

@@ -8153,6 +8153,20 @@
 	 * @param  {Object} options
 	 */
 	Properties.prototype.define = function(target, name, options) {
+
+	  if (!options.writable) {
+
+	    var value = options.value;
+
+	    // use getters for read-only variables to support ES6 proxies
+	    // cf. https://github.com/bpmn-io/internal-docs/issues/386
+	    options = assign({}, options, {
+	      get: function() { return value; }
+	    });
+
+	    delete options.value;
+	  }
+
 	  Object.defineProperty(target, name, options);
 	};
 
@@ -25555,14 +25569,23 @@
 	  // the touch recognizer
 	  var recognizer;
 
-	  function handler(type) {
+	  function handler(type, buttonType) {
 
 	    return function(event) {
 
-	      interactionEvents.fire(type, event);
+	      var gfx = getGfx(event.target),
+	          element = gfx && elementRegistry.get(gfx);
+
+	      // translate into an actual mouse click event
+	      if (buttonType) {
+	        event.srcEvent.button = buttonType;
+	      }
+
+	      return interactionEvents.fire(type, event, element);
 	    };
 	  }
 
+
 	  function getGfx(target) {
 	    var node = closest(target, 'svg, .djs-element', true);
 	    return node;
@@ -25573,10 +25596,6 @@
 	    // touch recognizer
 	    recognizer = createTouchRecognizer(svg);
 
-	    recognizer.on('doubletap', handler('element.dblclick'));
-
-	    recognizer.on('tap', handler('element.click'));
-
 	    function startGrabCanvas(event) {
 
 	      var lx = 0, ly = 0;
@@ -25644,6 +25663,9 @@
 	      recognizer.on('pinchcancel', end);
 	    }
 
+	    recognizer.on('tap', handler('element.click'));
+	    recognizer.on('doubletap', handler('element.dblclick', 1));
+
 	    recognizer.on('panstart', startGrab);
 	    recognizer.on('press', startGrab);
 
@@ -35767,7 +35789,7 @@
 	    return this._createEntries(element, DATA_OBJECT_REFERENCE);
 	  }
 
-	  if (is$1(businessObject, 'bpmn:DataStoreReference')) {
+	  if (is$1(businessObject, 'bpmn:DataStoreReference') && !is$1(element.parent, 'bpmn:Collaboration')) {
 	    return this._createEntries(element, DATA_STORE_REFERENCE);
 	  }
 
@@ -39768,7 +39790,7 @@
 
 	  function activateDirectEdit(element, force) {
 	    if (force ||
-	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
 	        isCollapsedSubProcess(element)) {
 
 	      directEditing.activate(element);
@@ -41110,122 +41132,97 @@
 	    }
 	  });
 
-	  function ensureCollaboration(context) {
-	    var parent = context.parent,
-	        collaboration;
-
+	  // turn process into collaboration when creating first participant
+	  function getOrCreateCollaboration() {
 	    var rootElement = canvas.getRootElement();
 
 	    if (is$1(rootElement, 'bpmn:Collaboration')) {
-	      collaboration = rootElement;
-	    } else {
-
-	      // update root element by making collaboration
-	      collaboration = modeling.makeCollaboration();
-
-	      // re-use process when creating first participant
-	      context.process = parent;
+	      return rootElement;
 	    }
 
-	    context.parent = collaboration;
+	    return modeling.makeCollaboration();
 	  }
 
-	  // turn process into collaboration before adding participant
-	  this.preExecute('shape.create', function(context) {
-	    var parent = context.parent,
-	        shape = context.shape;
-
-	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-	    }
-	  }, true);
-
-	  this.execute('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
-
-	    if (process) {
-	      context.oldProcessRef = shape.businessObject.processRef;
-
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = process.businessObject;
-	    }
-	  }, true);
+	  // when creating mutliple elements through `elements.create` parent must be set to collaboration
+	  // and passed to `shape.create` as hint
+	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
+	    var elements = context.elements,
+	        parent = context.parent,
+	        participant = findParticipant(elements),
+	        hints;
 
-	  this.revert('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
+	    if (participant && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	    if (process) {
+	      hints = context.hints = context.hints || {};
 
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = context.oldProcessRef;
+	      hints.participant = participant;
+	      hints.process = parent;
+	      hints.processRef = getBusinessObject(participant).get('processRef');
 	    }
 	  }, true);
 
-	  this.postExecute('shape.create', function(context) {
-	    var process = context.process,
+	  // when creating single shape through `shape.create` parent must be set to collaboration
+	  // unless it was already set through `elements.create`
+	  this.preExecute('shape.create', function(context) {
+	    var parent = context.parent,
 	        shape = context.shape;
 
-	    if (process) {
-
-	      // move children from process to participant
-	      var processChildren = process.children.slice();
+	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, shape);
+	      context.process = parent;
+	      context.processRef = getBusinessObject(shape).get('processRef');
 	    }
-
 	  }, true);
 
-	  // turn process into collaboration when creating participants
-	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
-	    var elements = context.elements,
-	        parent = context.parent,
-	        participant;
-
-	    var hasParticipants = findParticipant(elements);
-
-	    if (hasParticipants && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-
-	      participant = findParticipant(elements);
+	  // #execute necessary because #preExecute not called on CommandStack#redo
+	  this.execute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	      context.oldProcessRef = participant.businessObject.processRef;
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = parent.businessObject;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', getBusinessObject(process));
 	    }
 	  }, true);
 
-	  this.revert('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.revert('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        processRef = context.processRef || hints.processRef,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	    if (process) {
-	      participant = findParticipant(elements);
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = context.oldProcessRef;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', processRef);
 	    }
 	  }, true);
 
-	  this.postExecute('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.postExecute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || context.hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
 	    if (process) {
-	      participant = findParticipant(elements);
-
-	      // move children from process to first participant
-	      var processChildren = process.children.slice();
+	      var children = process.children.slice();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, participant);
+	      // both shape.create and elements.create must be handled
+	      if (!participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, shape);
+	      } else if (shape === participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, participant);
+	      }
 	    }
-
 	  }, true);
-
 	}
 
 	CreateParticipantBehavior$1.$inject = [
@@ -44646,7 +44643,9 @@
 	    var rootElement = canvas.getRootElement(),
 	        rootElementBo = rootElement.businessObject;
 
-	    moddle.ids.unclaim(rootElementBo.id);
+	    if (is$1(rootElement, 'bpmn:Collaboration')) {
+	      moddle.ids.unclaim(rootElementBo.id);
+	    }
 	  });
 	}
 
@@ -48594,6 +48593,10 @@
 	};
 
 	BpmnFactory.prototype._ensureId = function(element) {
+	  if (element.id) {
+	    this._model.ids.claim(element.id, element);
+	    return;
+	  }
 
 	  // generate semantic ids for elements
 	  // bpmn:SequenceFlow -> SequenceFlow_ID
@@ -48664,7 +48667,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52849,12 +52853,26 @@
 	    // TODO @barmac: remove once we drop bpmn.io properties
 	    ensureLegacySupport(assignedDi);
 
-	    self._commandStack.execute('element.updateProperties', {
-	      element: element,
-	      properties: {
-	        di: assignedDi
-	      }
-	    });
+	    if (element.labelTarget) {
+
+	      // set label colors as bpmndi:BPMNLabel#color
+	      self._commandStack.execute('element.updateModdleProperties', {
+	        element: element,
+	        moddleElement: element.businessObject.di.label,
+	        properties: {
+	          color: di['background-color']
+	        }
+	      });
+	    } else {
+
+	      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+	      self._commandStack.execute('element.updateProperties', {
+	        element: element,
+	        properties: {
+	          di: assignedDi
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -56064,7 +56082,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }
@@ -61073,7 +61091,7 @@
 	    descriptionLoaded
 	  } = props; // set-up layout context
 
-	  const [layout, setLayout] = l(createLayoutContext(layoutConfig));
+	  const [layout, setLayout] = l(createLayout(layoutConfig));
 	  y$1(() => {
 	    if (typeof layoutChanged === 'function') {
 	      layoutChanged(layout);
@@ -61085,7 +61103,9 @@
 	  };
 
 	  const setLayoutForKey = (key, config) => {
-	    setLayout(set(layout, key, config));
+	    const newLayout = assign({}, layout);
+	    set(newLayout, key, config);
+	    setLayout(newLayout);
 	  };
 
 	  const layoutContext = {
@@ -61144,7 +61164,7 @@
 	  });
 	} // helpers //////////////////
 
-	function createLayoutContext(overrides) {
+	function createLayout(overrides) {
 	  return { ...DEFAULT_LAYOUT,
 	    ...overrides
 	  };
@@ -65601,7 +65621,20 @@
 	    return () => {
 	      eventBus.off('elements.changed', onElementsChanged);
 	    };
-	  }, [selectedElement]); // (2c) provided entries changed
+	  }, [selectedElement]); // (2c) root element changed
+
+	  y$1(() => {
+	    const onRootAdded = e => {
+	      const element = e.element;
+
+	      _update(element);
+	    };
+
+	    eventBus.on('root.added', onRootAdded);
+	    return () => {
+	      eventBus.off('root.added', onRootAdded);
+	    };
+	  }, [selectedElement]); // (2d) provided entries changed
 
 	  y$1(() => {
 	    const onProvidersChanged = () => {
@@ -65612,7 +65645,7 @@
 	    return () => {
 	      eventBus.off('propertiesPanel.providersChanged', onProvidersChanged);
 	    };
-	  }, [selectedElement]); // (2d) element templates changed
+	  }, [selectedElement]); // (2e) element templates changed
 
 	  y$1(() => {
 	    const onTemplatesChanged = () => {
@@ -65702,23 +65735,20 @@
 	    this._layoutConfig = layoutConfig;
 	    this._descriptionConfig = descriptionConfig;
 	    this._container = domify('<div style="height: 100%" class="bio-properties-panel-container" input-handle-modified-keys="y,z"></div>');
-
-	    this._eventBus.on('root.added', event => {
-	      const {
-	        element
-	      } = event;
-
-	      this._render(element);
-
+	    eventBus.on('diagram.init', () => {
 	      if (parent) {
 	        this.attachTo(parent);
 	      }
-
-	      return;
 	    });
+	    eventBus.on('diagram.destroy', () => {
+	      this.detach();
+	    });
+	    eventBus.on('root.added', event => {
+	      const {
+	        element
+	      } = event;
 
-	    eventBus.on('root.removed', () => {
-	      this._destroy();
+	      this._render(element);
 	    });
 	  }
 	  /**
@@ -67448,7 +67478,7 @@
 	    isEdited: isEdited$1
 	  }, {
 	    id: 'completionCondition',
-	    component: o$2(CompletionCondition, {
+	    component: o$2(CompletionCondition$1, {
 	      element: element
 	    }),
 	    isEdited: isEdited$1
@@ -67483,7 +67513,7 @@
 	  });
 	}
 
-	function CompletionCondition(props) {
+	function CompletionCondition$1(props) {
 	  const {
 	    element
 	  } = props;
@@ -67657,7 +67687,7 @@
 	 */
 
 
-	function getCompletionCondition(element) {
+	function getCompletionCondition$1(element) {
 	  return getProperty$2(element, 'completionCondition');
 	}
 	/**
@@ -67670,7 +67700,7 @@
 
 
 	function getCompletionConditionValue(element) {
-	  const completionCondition = getCompletionCondition(element);
+	  const completionCondition = getCompletionCondition$1(element);
 	  return getBody(completionCondition);
 	}
 
@@ -68485,6 +68515,155 @@
 	  bpmnPropertiesProvider: ['type', BpmnPropertiesProvider]
 	};
 
+	var e$2,
+	    o$3 = {};
+
+	function n$1(r, t, e) {
+	  if (3 === r.nodeType) {
+	    var o = "textContent" in r ? r.textContent : r.nodeValue || "";
+
+	    if (!1 !== n$1.options.trim) {
+	      var a = 0 === t || t === e.length - 1;
+	      if ((!(o = o.match(/^[\s\n]+$/g) && "all" !== n$1.options.trim ? " " : o.replace(/(^[\s\n]+|[\s\n]+$)/g, "all" === n$1.options.trim || a ? "" : " ")) || " " === o) && e.length > 1 && a) return null;
+	    }
+
+	    return o;
+	  }
+
+	  if (1 !== r.nodeType) return null;
+	  var p = String(r.nodeName).toLowerCase();
+	  if ("script" === p && !n$1.options.allowScripts) return null;
+	  var l,
+	      s,
+	      u = n$1.h(p, function (r) {
+	    var t = r && r.length;
+	    if (!t) return null;
+
+	    for (var e = {}, o = 0; o < t; o++) {
+	      var a = r[o],
+	          i = a.name,
+	          p = a.value;
+	      "on" === i.substring(0, 2) && n$1.options.allowEvents && (p = new Function(p)), e[i] = p;
+	    }
+
+	    return e;
+	  }(r.attributes), (s = (l = r.childNodes) && Array.prototype.map.call(l, n$1).filter(i$2)) && s.length ? s : null);
+	  return n$1.visitor && n$1.visitor(u), u;
+	}
+
+	var a$2,
+	    i$2 = function (r) {
+	  return r;
+	},
+	    p$2 = {};
+
+	function l$1(r) {
+	  var t = (r.type || "").toLowerCase(),
+	      e = l$1.map;
+	  e && e.hasOwnProperty(t) ? (r.type = e[t], r.props = Object.keys(r.props || {}).reduce(function (t, e) {
+	    var o;
+	    return t[(o = e, o.replace(/-(.)/g, function (r, t) {
+	      return t.toUpperCase();
+	    }))] = r.props[e], t;
+	  }, {})) : r.type = t.replace(/[^a-z0-9-]/i, "");
+	}
+
+	((function (t) {
+	  function i() {
+	    t.apply(this, arguments);
+	  }
+
+	  return t && (i.__proto__ = t), (i.prototype = Object.create(t && t.prototype)).constructor = i, i.setReviver = function (r) {
+	    a$2 = r;
+	  }, i.prototype.shouldComponentUpdate = function (r) {
+	    var t = this.props;
+	    return r.wrap !== t.wrap || r.type !== t.type || r.markup !== t.markup;
+	  }, i.prototype.setComponents = function (r) {
+	    if (this.map = {}, r) for (var t in r) if (r.hasOwnProperty(t)) {
+	      var e = t.replace(/([A-Z]+)([A-Z][a-z0-9])|([a-z0-9]+)([A-Z])/g, "$1$3-$2$4").toLowerCase();
+	      this.map[e] = r[t];
+	    }
+	  }, i.prototype.render = function (t) {
+	    var i = t.wrap;
+	    void 0 === i && (i = !0);
+
+	    var s,
+	        u = t.type,
+	        c = t.markup,
+	        m = t.components,
+	        v = t.reviver,
+	        f = t.onError,
+	        d = t["allow-scripts"],
+	        h$1 = t["allow-events"],
+	        y = t.trim,
+	        w = function (r, t) {
+	      var e = {};
+
+	      for (var o in r) Object.prototype.hasOwnProperty.call(r, o) && -1 === t.indexOf(o) && (e[o] = r[o]);
+
+	      return e;
+	    }(t, ["wrap", "type", "markup", "components", "reviver", "onError", "allow-scripts", "allow-events", "trim"]),
+	        C = v || this.reviver || this.constructor.prototype.reviver || a$2 || a;
+
+	    this.setComponents(m);
+	    var g = {
+	      allowScripts: d,
+	      allowEvents: h$1,
+	      trim: y
+	    };
+
+	    try {
+	      s = function (r, t, a, i, s) {
+	        var u = function (r, t) {
+	          var o,
+	              n,
+	              a,
+	              i,
+	              p = "html" === t ? "text/html" : "application/xml";
+	          "html" === t ? (i = "body", a = "<!DOCTYPE html>\n<html><body>" + r + "</body></html>") : (i = "xml", a = '<?xml version="1.0" encoding="UTF-8"?>\n<xml>' + r + "</xml>");
+
+	          try {
+	            o = new DOMParser().parseFromString(a, p);
+	          } catch (r) {
+	            n = r;
+	          }
+
+	          if (o || "html" !== t || ((o = e$2 || (e$2 = function () {
+	            if (document.implementation && document.implementation.createHTMLDocument) return document.implementation.createHTMLDocument("");
+	            var r = document.createElement("iframe");
+	            return r.style.cssText = "position:absolute; left:0; top:-999em; width:1px; height:1px; overflow:hidden;", r.setAttribute("sandbox", "allow-forms"), document.body.appendChild(r), r.contentWindow.document;
+	          }())).open(), o.write(a), o.close()), o) {
+	            var l = o.getElementsByTagName(i)[0],
+	                s = l.firstChild;
+	            return r && !s && (l.error = "Document parse failed."), s && "parsererror" === String(s.nodeName).toLowerCase() && (s.removeChild(s.firstChild), s.removeChild(s.lastChild), l.error = s.textContent || s.nodeValue || n || "Unknown error", l.removeChild(s)), l;
+	          }
+	        }(r, t);
+
+	        if (u && u.error) throw new Error(u.error);
+	        var c = u && u.body || u;
+	        l$1.map = i || p$2;
+
+	        var m = c && function (r, t, e, a) {
+	          return n$1.visitor = t, n$1.h = e, n$1.options = a || o$3, n$1(r);
+	        }(c, l$1, a, s);
+
+	        return l$1.map = null, m && m.props && m.props.children || null;
+	      }(c, u, C, this.map, g);
+	    } catch (r) {
+	      f ? f({
+	        error: r
+	      }) : "undefined" != typeof console && console.error && console.error("preact-markup: " + r);
+	    }
+
+	    if (!1 === i) return s || null;
+	    var x = w.hasOwnProperty("className") ? "className" : "class",
+	        b = w[x];
+	    return b ? b.splice ? b.splice(0, 0, "markup") : "string" == typeof b ? w[x] += " markup" : "object" == typeof b && (b.markup = !0) : w[x] = "markup", C("div", w, s || null);
+	  }, i;
+	})(p));
+
+	document.createElement('form');
+
 	/**
 	 *
 	 * @param {Object} options