bpmn-js 8.8.2 → 8.10.0

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v8.8.2
+ * bpmn-js - bpmn-viewer 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() :
@@ -389,13 +389,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);
         }
       }
     });
@@ -473,7 +474,6 @@
     return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
   }
 
-
   /**
    * Return the business object for a given element.
    *
@@ -7041,22 +7041,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(htmlContainer, visible);
     }
 
+    setVisible(htmlContainer, visible);
+
     this._updateOverlayScale(overlay, viewbox);
   };
 
@@ -7589,7 +7593,7 @@
     return true;
   };
 
-  DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
+  DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
     var rect = create$1('rect');
 
     attr$1(rect, {
@@ -7600,9 +7604,9 @@
     });
 
     if (isFrameElement(element)) {
-      attr$1(rect, this.FRAME_STYLE);
+      attr$1(rect, assign({}, this.FRAME_STYLE, attrs || {}));
     } else {
-      attr$1(rect, this.SHAPE_STYLE);
+      attr$1(rect, assign({}, this.SHAPE_STYLE, attrs || {}));
     }
 
     append(visuals, rect);
@@ -7610,9 +7614,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;
@@ -7866,6 +7870,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' ],
@@ -7964,7 +7972,8 @@
       'connection.added',
       'shape.removed',
       'connection.removed',
-      'elements.changed'
+      'elements.changed',
+      'plane.set'
     ], function() {
       delete this._cachedViewbox;
     }, this);
@@ -8025,7 +8034,7 @@
    * @returns {SVGElement}
    */
   Canvas.prototype.getDefaultLayer = function() {
-    return this.getLayer(BASE_LAYER);
+    return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
   };
 
   /**
@@ -8074,8 +8083,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) {
@@ -8105,9 +8114,7 @@
       throw new Error('must specify a name');
     }
 
-    var plane = this._planes[name];
-
-    return plane;
+    return this._planes[name];
   };
 
   /**
@@ -8136,7 +8143,7 @@
       };
     }
 
-    var svgLayer = this.getLayer(name);
+    var svgLayer = this.getLayer(name, PLANE_LAYER_INDEX);
     classes$1(svgLayer).add(HIDDEN_MARKER);
 
     var plane = this._planes[name] = {
@@ -8745,9 +8752,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();
@@ -8763,10 +8771,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
       };
@@ -8819,13 +8827,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) {