bpmn-js 8.8.2 → 8.10.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v8.8.2
+ * bpmn-js - bpmn-modeler v8.10.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-10-20
+ * Date: 2022-02-17
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2337,13 +2337,14 @@
 	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
 	    var type = evt.type,
 	        element = context.element,
-	        visuals = context.gfx;
+	        visuals = context.gfx,
+	        attrs = context.attrs;
 
 	    if (self.canRender(element)) {
 	      if (type === 'render.shape') {
-	        return self.drawShape(visuals, element);
+	        return self.drawShape(visuals, element, attrs);
 	      } else {
-	        return self.drawConnection(visuals, element);
+	        return self.drawConnection(visuals, element, attrs);
 	      }
 	    }
 	  });
@@ -2803,7 +2804,7 @@
 	  return true;
 	};
 
-	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
+	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
 	  var rect = create$1('rect');
 
 	  attr(rect, {
@@ -2814,9 +2815,9 @@
 	  });
 
 	  if (isFrameElement$1(element)) {
-	    attr(rect, this.FRAME_STYLE);
+	    attr(rect, assign({}, this.FRAME_STYLE, attrs || {}));
 	  } else {
-	    attr(rect, this.SHAPE_STYLE);
+	    attr(rect, assign({}, this.SHAPE_STYLE, attrs || {}));
 	  }
 
 	  append(visuals, rect);
@@ -2824,9 +2825,9 @@
 	  return rect;
 	};
 
-	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection) {
+	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
-	  var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
+	  var line = createLine(connection.waypoints, assign({}, this.CONNECTION_STYLE, attrs || {}));
 	  append(visuals, line);
 
 	  return line;
@@ -4365,6 +4366,10 @@
 	var BASE_LAYER = 'base';
 	var HIDDEN_MARKER = 'djs-element-hidden';
 
+	// render plane contents behind utility layers
+	var PLANE_LAYER_INDEX = 0;
+	var UTILITY_LAYER_INDEX = 1;
+
 
 	var REQUIRED_MODEL_ATTRS = {
 	  shape: [ 'x', 'y', 'width', 'height' ],
@@ -4463,7 +4468,8 @@
 	    'connection.added',
 	    'shape.removed',
 	    'connection.removed',
-	    'elements.changed'
+	    'elements.changed',
+	    'plane.set'
 	  ], function() {
 	    delete this._cachedViewbox;
 	  }, this);
@@ -4524,7 +4530,7 @@
 	 * @returns {SVGElement}
 	 */
 	Canvas.prototype.getDefaultLayer = function() {
-	  return this.getLayer(BASE_LAYER);
+	  return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
 	};
 
 	/**
@@ -4573,8 +4579,8 @@
 	 */
 	Canvas.prototype._createLayer = function(name, index) {
 
-	  if (!index) {
-	    index = 0;
+	  if (typeof index === 'undefined') {
+	    index = UTILITY_LAYER_INDEX;
 	  }
 
 	  var childIndex = reduce(this._layers, function(childIndex, layer) {
@@ -4604,9 +4610,7 @@
 	    throw new Error('must specify a name');
 	  }
 
-	  var plane = this._planes[name];
-
-	  return plane;
+	  return this._planes[name];
 	};
 
 	/**
@@ -4635,7 +4639,7 @@
 	    };
 	  }
 
-	  var svgLayer = this.getLayer(name);
+	  var svgLayer = this.getLayer(name, PLANE_LAYER_INDEX);
 	  classes(svgLayer).add(HIDDEN_MARKER);
 
 	  var plane = this._planes[name] = {
@@ -5244,9 +5248,10 @@
 	  if (!box) {
 
 	    // compute the inner box based on the
-	    // diagrams default layer. This allows us to exclude
+	    // diagrams active plane. This allows us to exclude
 	    // external components, such as overlays
-	    innerBox = this.getDefaultLayer().getBBox();
+
+	    innerBox = (this._activePlane && this._activePlane.layer.getBBox()) || {};
 
 	    transform = transform$1(viewport);
 	    matrix = transform ? transform.matrix : createMatrix();
@@ -5262,10 +5267,10 @@
 	      height: outerBox.height / scale,
 	      scale: scale,
 	      inner: {
-	        width: innerBox.width,
-	        height: innerBox.height,
-	        x: innerBox.x,
-	        y: innerBox.y
+	        width: innerBox.width || 0,
+	        height: innerBox.height || 0,
+	        x: innerBox.x || 0,
+	        y: innerBox.y || 0
 	      },
 	      outer: outerBox
 	    };
@@ -5318,13 +5323,17 @@
 	 * Scrolls the viewbox to contain the given element.
 	 * Optionally specify a padding to be applied to the edges.
 	 *
-	 * @param {Object} [element] the element to scroll to.
+	 * @param {Object|String} [element] the element to scroll to.
 	 * @param {Object|Number} [padding=100] the padding to be applied. Can also specify top, bottom, left and right.
 	 *
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  var defaultPadding = 100;
 
+	  if (typeof element === 'string') {
+	    element = this._elementRegistry.get(element);
+	  }
+
 	  // switch to correct Plane
 	  var targetPlane = this.findPlane(element);
 	  if (targetPlane !== this._activePlane) {
@@ -16442,6 +16451,20 @@
 	}
 
 
+	/**
+	 * 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$1(element, t);
+	  });
+	}
+
 	/**
 	 * Return the business object for a given element.
 	 *
@@ -21491,22 +21514,26 @@
 
 	Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) {
 	  var show = overlay.show,
+	      plane = overlay.plane,
 	      minZoom = show && show.minZoom,
 	      maxZoom = show && show.maxZoom,
 	      htmlContainer = overlay.htmlContainer,
+	      activePlane = this._canvas.getActivePlane(),
 	      visible = true;
 
-	  if (show) {
+	  if (plane !== activePlane) {
+	    visible = false;
+	  } else if (show) {
 	    if (
 	      (isDefined(minZoom) && minZoom > viewbox.scale) ||
 	      (isDefined(maxZoom) && maxZoom < viewbox.scale)
 	    ) {
 	      visible = false;
 	    }
-
-	    setVisible$1(htmlContainer, visible);
 	  }
 
+	  setVisible$1(htmlContainer, visible);
+
 	  this._updateOverlayScale(overlay, viewbox);
 	};
 
@@ -25500,14 +25527,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;
@@ -25518,10 +25554,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;
@@ -25589,6 +25621,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);
 
@@ -26326,21 +26361,6 @@
 	  autoPlaceSelectionBehavior: [ 'type', AutoPlaceSelectionBehavior ]
 	};
 
-	/**
-	 * 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$1(element, t);
-	  });
-	}
-
-
 	/**
 	 * Return the parent of the element with any of the given types.
 	 *
@@ -35185,7 +35205,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);
 	  }
 
@@ -39186,7 +39206,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);
@@ -40528,122 +40548,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$a, 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$a, 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);
+	      var children = process.children.slice();
 
-	      // move children from process to first participant
-	      var processChildren = 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.$inject = [
@@ -41292,12 +41287,12 @@
 	      dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : mid;
 
 	      // if last waypointBefore is inside shape's bounds, ignore docking point
-	      if (!isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
+	      if (waypointsBefore.length === 1 || !isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
 	        waypointsBefore.push(copy(dockingPoint));
 	      }
 
 	      // if first waypointAfter is inside shape's bounds, ignore docking point
-	      if (!isPointInsideBBox(shape, waypointsAfter[0])) {
+	      if (waypointsAfter.length === 1 || !isPointInsideBBox(shape, waypointsAfter[0])) {
 	        waypointsAfter.unshift(copy(dockingPoint));
 	      }
 	    }
@@ -44064,7 +44059,9 @@
 	    var rootElement = canvas.getRootElement(),
 	        rootElementBo = rootElement.businessObject;
 
-	    moddle.ids.unclaim(rootElementBo.id);
+	    if (is$1(rootElement, 'bpmn:Collaboration')) {
+	      moddle.ids.unclaim(rootElementBo.id);
+	    }
 	  });
 	}
 
@@ -48012,6 +48009,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
@@ -48082,7 +48083,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52267,12 +52269,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
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -54382,7 +54398,9 @@
 	    ENTRY_SELECTOR = '.entry',
 	    ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR;
 
-	var PALETTE_OPEN_CLS = 'open',
+	var PALETTE_PREFIX = 'djs-palette-',
+	    PALETTE_SHOWN_CLS = 'shown',
+	    PALETTE_OPEN_CLS = 'open',
 	    PALETTE_TWO_COLUMN_CLS = 'two-column';
 
 	var DEFAULT_PRIORITY = 1000;
@@ -54500,6 +54518,7 @@
 	  var container = this._container = domify(Palette.HTML_MARKUP);
 
 	  parentContainer.appendChild(container);
+	  classes$1(parentContainer).add(PALETTE_PREFIX + PALETTE_SHOWN_CLS);
 
 	  delegate.bind(container, ELEMENT_SELECTOR, 'click', function(event) {
 
@@ -54557,7 +54576,8 @@
 
 	  var twoColumn;
 
-	  var cls = classes$1(container);
+	  var cls = classes$1(container),
+	      parentCls = classes$1(parent);
 
 	  if ('twoColumn' in state) {
 	    twoColumn = state.twoColumn;
@@ -54567,9 +54587,11 @@
 
 	  // always update two column
 	  cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
+	  parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);
 
 	  if ('open' in state) {
 	    cls.toggle(PALETTE_OPEN_CLS, state.open);
+	    parentCls.toggle(PALETTE_PREFIX + PALETTE_OPEN_CLS, state.open);
 	  }
 
 	  eventBus.fire('palette.changed', {
@@ -55476,7 +55498,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }