bpmn-js 8.7.3 → 8.8.3

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v8.7.3
+ * bpmn-js - bpmn-viewer v8.8.3
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-08-27
+ * Date: 2021-12-03
  */
 (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);
         }
       }
     });
@@ -4978,8 +4979,8 @@
 
   // helpers //////////////////////
 
-  // copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
-  var tokenRegex = /\{([^}]+)\}/g,
+  // copied and adjusted from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
+  var tokenRegex = /\{([^{}]+)\}/g,
       objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
 
   function replacer(all, key, obj) {
@@ -6279,9 +6280,10 @@
    *
    * @param {EventBus} eventBus the event bus
    */
-  function Selection(eventBus) {
+  function Selection(eventBus, canvas) {
 
     this._eventBus = eventBus;
+    this._canvas = canvas;
 
     this._selectedElements = [];
 
@@ -6292,12 +6294,12 @@
       self.deselect(element);
     });
 
-    eventBus.on([ 'diagram.clear' ], function(e) {
+    eventBus.on([ 'diagram.clear', 'plane.set' ], function(e) {
       self.select(null);
     });
   }
 
-  Selection.$inject = [ 'eventBus' ];
+  Selection.$inject = [ 'eventBus', 'canvas' ];
 
 
   Selection.prototype.deselect = function(element) {
@@ -6343,6 +6345,14 @@
       elements = elements ? [ elements ] : [];
     }
 
+    var canvas = this._canvas;
+
+    elements = elements.filter(function(element) {
+      var plane = canvas.findPlane(element);
+
+      return plane === canvas.getActivePlane();
+    });
+
     // selection may be cleared by passing an empty array or null
     // to the method
     if (add) {
@@ -7011,6 +7021,13 @@
       classes(htmlContainer).add('djs-overlay-' + overlay.type);
     }
 
+    var plane = this._canvas.findPlane(element);
+    var activePlane = this._canvas.getActivePlane();
+    overlay.plane = plane;
+    if (plane !== activePlane) {
+      setVisible(htmlContainer, false);
+    }
+
     overlay.htmlContainer = htmlContainer;
 
     overlayContainer.overlays.push(overlay);
@@ -7025,22 +7042,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);
   };
 
@@ -7164,6 +7185,12 @@
     });
 
 
+    eventBus.on('plane.set', function(e) {
+      forEach(self._overlays, function(el) {
+        setVisible(el.htmlContainer, el.plane === e.plane);
+      });
+    });
+
     // clear overlays with diagram
 
     eventBus.on('diagram.clear', this.clear, this);
@@ -7567,7 +7594,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, {
@@ -7578,9 +7605,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);
@@ -7588,9 +7615,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;
@@ -7789,6 +7816,14 @@
     return isNumber(number) ? number + 'px' : number;
   }
 
+  function findRoot(element) {
+    while (element.parent) {
+      element = element.parent;
+    }
+
+    return element;
+  }
+
   /**
    * Creates a HTML container element for a SVG element with
    * the given configuration
@@ -7834,6 +7869,11 @@
   }
 
   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 = {
@@ -7870,23 +7910,23 @@
     'elementRegistry'
   ];
 
+  /**
+   * Creates a <svg> element that is wrapped into a <div>.
+   * This way we are always able to correctly figure out the size of the svg element
+   * by querying the parent node.
+
+   * (It is not possible to get the size of a svg element cross browser @ 2014-04-01)
 
+   * <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
+   *   <svg width="100%" height="100%">
+   *    ...
+   *   </svg>
+   * </div>
+   */
   Canvas.prototype._init = function(config) {
 
     var eventBus = this._eventBus;
 
-    // Creates a <svg> element that is wrapped into a <div>.
-    // This way we are always able to correctly figure out the size of the svg element
-    // by querying the parent node.
-    //
-    // (It is not possible to get the size of a svg element cross browser @ 2014-04-01)
-    //
-    // <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
-    //   <svg width="100%" height="100%">
-    //    ...
-    //   </svg>
-    // </div>
-
     // html container
     var container = this._container = createContainer(config);
 
@@ -7898,6 +7938,7 @@
     var viewport = this._viewport = createGroup(svg, 'viewport');
 
     this._layers = {};
+    this._planes = {};
 
     // debounce canvas.viewbox.changed events
     // for smoother diagram interaction
@@ -7932,7 +7973,8 @@
       'connection.added',
       'shape.removed',
       'connection.removed',
-      'elements.changed'
+      'elements.changed',
+      'plane.set'
     ], function() {
       delete this._cachedViewbox;
     }, this);
@@ -7956,7 +7998,8 @@
     delete this._svg;
     delete this._container;
     delete this._layers;
-    delete this._rootElement;
+    delete this._planes;
+    delete this._activePlane;
     delete this._viewport;
   };
 
@@ -7971,12 +8014,16 @@
       var type = getType(element);
 
       if (type === 'root') {
-        self.setRootElement(null, true);
+        self.setRootElementForPlane(null, self.findPlane(element), true);
       } else {
         self._removeElement(element, type);
       }
     });
 
+    // remove all planes
+    this._activePlane = null;
+    this._planes = {};
+
     // force recomputation of view box
     delete this._cachedViewbox;
   };
@@ -7988,7 +8035,7 @@
    * @returns {SVGElement}
    */
   Canvas.prototype.getDefaultLayer = function() {
-    return this.getLayer(BASE_LAYER, 0);
+    return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
   };
 
   /**
@@ -8037,8 +8084,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) {
@@ -8056,6 +8103,140 @@
 
   };
 
+  /**
+   * Returns a plane that is used to draw elements on it.
+   *
+   * @param {string} name
+   *
+   * @return {Object} plane descriptor with { layer, rootElement, name }
+   */
+  Canvas.prototype.getPlane = function(name) {
+    if (!name) {
+      throw new Error('must specify a name');
+    }
+
+    return this._planes[name];
+  };
+
+  /**
+   * Creates a plane that is used to draw elements on it. If no
+   * root element is provided, an implicit root will be used.
+   *
+   * @param {string} name
+   * @param {Object|djs.model.Root} [rootElement] optional root element
+   *
+   * @return {Object} plane descriptor with { layer, rootElement, name }
+   */
+  Canvas.prototype.createPlane = function(name, rootElement) {
+    if (!name) {
+      throw new Error('must specify a name');
+    }
+
+    if (this._planes[name]) {
+      throw new Error('plane ' + name + ' already exists');
+    }
+
+    if (!rootElement) {
+      rootElement = {
+        id: '__implicitroot' + name,
+        children: [],
+        isImplicit: true
+      };
+    }
+
+    var svgLayer = this.getLayer(name, PLANE_LAYER_INDEX);
+    classes$1(svgLayer).add(HIDDEN_MARKER);
+
+    var plane = this._planes[name] = {
+      layer: svgLayer,
+      name: name,
+      rootElement: null
+    };
+
+    this.setRootElementForPlane(rootElement, plane);
+
+    return plane;
+  };
+
+  /**
+   * Sets the active plane and hides the previously active plane.
+   *
+   * @param {string|Object} plane
+   *
+   * @return {Object} plane descriptor with { layer, rootElement, name }
+   */
+  Canvas.prototype.setActivePlane = function(plane) {
+    if (!plane) {
+      throw new Error('must specify a plane');
+    }
+
+    if (typeof plane === 'string') {
+      plane = this.getPlane(plane);
+    }
+
+    // hide previous Plane
+    if (this._activePlane) {
+      classes$1(this._activePlane.layer).add(HIDDEN_MARKER);
+    }
+
+    this._activePlane = plane;
+
+    // show current Plane
+    classes$1(plane.layer).remove(HIDDEN_MARKER);
+
+    if (plane.rootElement) {
+      this._elementRegistry.updateGraphics(plane.rootElement, this._svg, true);
+    }
+
+    this._eventBus.fire('plane.set', { plane: plane });
+
+    return plane;
+  };
+
+  /**
+   * Returns the currently active layer
+   *
+   * @returns {SVGElement}
+   */
+
+  Canvas.prototype.getActiveLayer = function() {
+    return this.getActivePlane().layer;
+  };
+
+  /**
+   * Returns the currently active plane.
+   *
+   * @return {Object} plane descriptor with { layer, rootElement, name }
+   */
+  Canvas.prototype.getActivePlane = function() {
+    var plane = this._activePlane;
+    if (!plane) {
+      plane = this.createPlane(BASE_LAYER);
+      this.setActivePlane(BASE_LAYER);
+    }
+
+    return plane;
+  };
+
+  /**
+   * Returns the plane which contains the given element.
+   *
+   * @param {string|djs.model.Base} element
+   *
+   * @return {Object} plane descriptor with { layer, rootElement, name }
+   */
+  Canvas.prototype.findPlane = function(element) {
+    if (typeof element === 'string') {
+      element = this._elementRegistry.get(element);
+    }
+
+    var root = findRoot(element);
+
+    return find(this._planes, function(plane) {
+      return plane.rootElement === root;
+    });
+  };
+
   /**
    * Returns the html element that encloses the
    * drawing canvas.
@@ -8177,11 +8358,9 @@
   };
 
   Canvas.prototype.getRootElement = function() {
-    if (!this._rootElement) {
-      this.setRootElement({ id: '__implicitroot', children: [] });
-    }
+    var plane = this.getActivePlane();
 
-    return this._rootElement;
+    return plane.rootElement;
   };
 
 
@@ -8198,12 +8377,41 @@
    * @return {Object|djs.model.Root} new root element
    */
   Canvas.prototype.setRootElement = function(element, override) {
+    var activePlane = this._activePlane;
+
+    if (activePlane) {
+      return this.setRootElementForPlane(element, activePlane, override);
+    } else {
+      var basePlane = this.createPlane(BASE_LAYER, element);
+
+      this.setActivePlane(basePlane);
+
+      return basePlane.rootElement;
+    }
+  };
+
+
+  /**
+   * Sets a given element as the new root element for the canvas
+   * and returns the new root element.
+   *
+   * @param {Object|djs.model.Root} element
+   * @param {Object|djs.model.Root} plane
+   * @param {boolean} [override] whether to override the current root element, if any
+   *
+   * @return {Object|djs.model.Root} new root element
+   */
+  Canvas.prototype.setRootElementForPlane = function(element, plane, override) {
+
+    if (typeof plane === 'string') {
+      plane = this.getPlane(plane);
+    }
 
     if (element) {
       this._ensureValid('root', element);
     }
 
-    var currentRoot = this._rootElement,
+    var currentRoot = plane.rootElement,
         elementRegistry = this._elementRegistry,
         eventBus = this._eventBus;
 
@@ -8220,23 +8428,26 @@
     }
 
     if (element) {
-      var gfx = this.getDefaultLayer();
+      var gfx = plane.layer;
 
       // resemble element add event sequence
       eventBus.fire('root.add', { element: element });
 
-      elementRegistry.add(element, gfx, this._svg);
+      elementRegistry.add(element, gfx);
 
       eventBus.fire('root.added', { element: element, gfx: gfx });
+
+      // associate SVG with root element when active
+      if (plane === this._activePlane) {
+        this._elementRegistry.updateGraphics(element, this._svg, true);
+      }
     }
 
-    this._rootElement = element;
+    plane.rootElement = element;
 
     return element;
   };
 
-
-
   // add functionality //////////////////////
 
   Canvas.prototype._ensureValid = function(type, element) {
@@ -8542,9 +8753,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();
@@ -8560,10 +8772,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
       };
@@ -8622,6 +8834,13 @@
    */
   Canvas.prototype.scrollToElement = function(element, padding) {
     var defaultPadding = 100;
+
+    // switch to correct Plane
+    var targetPlane = this.findPlane(element);
+    if (targetPlane !== this._activePlane) {
+      this.setActivePlane(targetPlane);
+    }
+
     if (!padding) {
       padding = {};
     }
@@ -8642,7 +8861,7 @@
         zoom = this.zoom(),
         dx, dy;
 
-    // Shrink viewboxBounds with padding
+    // shrink viewboxBounds with padding
     viewboxBounds.y += padding.top / zoom;
     viewboxBounds.x += padding.left / zoom;
     viewboxBounds.width -= (padding.right + padding.left) / zoom;
@@ -8964,6 +9183,29 @@
     this.add(element, gfx, secondaryGfx);
   };
 
+  /**
+   * Update the graphics of an element
+   *
+   * @param {djs.model.Base} element
+   * @param {SVGElement} gfx
+   * @param {boolean} [secondary=false] whether to update the secondary connected element
+   */
+  ElementRegistry.prototype.updateGraphics = function(filter, gfx, secondary) {
+    var id = filter.id || filter;
+
+    var container = this._elements[id];
+
+    if (secondary) {
+      container.secondaryGfx = gfx;
+    } else {
+      container.gfx = gfx;
+    }
+
+    attr$1(gfx, ELEMENT_ID, id);
+
+    return gfx;
+  };
+
   /**
    * Return the model element for a given id or graphics.
    *
@@ -10071,12 +10313,11 @@
       if (returnValue === false) {
         event.preventDefault();
       }
-    } catch (e) {
-      if (!this.handleError(e)) {
-        console.error('unhandled error in event listener');
-        console.error(e.stack);
+    } catch (error) {
+      if (!this.handleError(error)) {
+        console.error('unhandled error in event listener', error);
 
-        throw e;
+        throw error;
       }
     }