bpmn-js 8.8.0 → 8.9.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v8.8.0
+ * bpmn-js - bpmn-modeler v8.9.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-10-13
+ * Date: 2022-01-14
  */
 (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) {
@@ -21491,22 +21500,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 +25513,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 +25540,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 +25607,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);
 
@@ -33784,11 +33805,16 @@
 
 	  var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);
 
-	  // do NOT copy Ids and references
-	  if (propertyDescriptor.isId || propertyDescriptor.isReference) {
+	  // do NOT copy references
+	  if (propertyDescriptor.isReference) {
 	    return;
 	  }
 
+	  // copy id
+	  if (propertyDescriptor.isId) {
+	    return this._copyId(property, parent);
+	  }
+
 	  // copy arrays
 	  if (isArray$2(property)) {
 	    return reduce(property, function(childProperties, childProperty) {
@@ -33827,6 +33853,18 @@
 	  return property;
 	};
 
+	ModdleCopy.prototype._copyId = function(id, element) {
+
+	  // disallow if already taken
+	  if (this._moddle.ids.assigned(id)) {
+	    return;
+	  } else {
+
+	    this._moddle.ids.claim(id, element);
+	    return id;
+	  }
+	};
+
 	// helpers //////////
 
 	function getPropertyNames(descriptor, keepDefaultProperties) {
@@ -39169,7 +39207,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);
@@ -41275,12 +41313,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));
 	      }
 	    }
@@ -43428,6 +43466,49 @@
 	  'selection'
 	];
 
+	var HIGH_PRIORITY$8 = 1500;
+
+	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
+
+	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
+
+	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
+
+	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
+
+	/**
+	 * Set minimum bounds/resize constraints on resize.
+	 *
+	 * @param {EventBus} eventBus
+	 */
+	function ResizeBehavior(eventBus) {
+	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
+	    var context = event.context,
+	        shape = context.shape,
+	        direction = context.direction,
+	        balanced = context.balanced;
+
+	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
+	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
+	    }
+
+	    if (is$1(shape, 'bpmn:Participant')) {
+	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
+	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:TextAnnotation')) {
+	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
+	    }
+	  });
+	}
+
+	ResizeBehavior.$inject = [ 'eventBus' ];
+
+
 	var abs$2 = Math.abs,
 	    min = Math.min,
 	    max$2 = Math.max;
@@ -43455,7 +43536,6 @@
 	    LANE_TOP_PADDING = 20,
 	    LANE_BOTTOM_PADDING = 20;
 
-
 	function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
 	  var lanesRoot = getLanesRoot(laneShape);
 
@@ -43548,49 +43628,6 @@
 	  };
 	}
 
-	var HIGH_PRIORITY$8 = 1500;
-
-	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
-
-	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
-
-	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
-
-	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
-
-
-	/**
-	 * Set minimum bounds/resize constraints on resize.
-	 *
-	 * @param {EventBus} eventBus
-	 */
-	function ResizeBehavior(eventBus) {
-	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
-	    var context = event.context,
-	        shape = context.shape,
-	        direction = context.direction,
-	        balanced = context.balanced;
-
-	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
-	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
-	    }
-
-	    if (is$1(shape, 'bpmn:Participant')) {
-	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
-	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:TextAnnotation')) {
-	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
-	    }
-	  });
-	}
-
-	ResizeBehavior.$inject = [ 'eventBus' ];
-
 	var SLIGHTLY_HIGHER_PRIORITY = 1001;
 
 
@@ -48066,7 +48103,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52251,12 +52289,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
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -54366,7 +54418,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;
@@ -54484,6 +54538,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) {
 
@@ -54541,7 +54596,8 @@
 
 	  var twoColumn;
 
-	  var cls = classes$1(container);
+	  var cls = classes$1(container),
+	      parentCls = classes$1(parent);
 
 	  if ('twoColumn' in state) {
 	    twoColumn = state.twoColumn;
@@ -54551,9 +54607,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', {
@@ -55460,7 +55518,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }