camunda-bpmn-js 3.7.0 → 3.8.0

package/dist/camunda-platform-viewer.development.js

@@ -7220,6 +7220,92 @@
     interactionEvents: [ 'type', InteractionEvents ]
   };
 
+  /**
+   * Returns the surrounding bbox for all elements in
+   * the array or the element primitive.
+   *
+   * @param {Element|Element[]} elements
+   * @param {boolean} [stopRecursion=false]
+   *
+   * @return {Rect}
+   */
+  function getBBox(elements, stopRecursion) {
+
+    stopRecursion = !!stopRecursion;
+    if (!isArray$2(elements)) {
+      elements = [ elements ];
+    }
+
+    var minX,
+        minY,
+        maxX,
+        maxY;
+
+    forEach$1(elements, function(element) {
+
+      // If element is a connection the bbox must be computed first
+      var bbox = element;
+      if (element.waypoints && !stopRecursion) {
+        bbox = getBBox(element.waypoints, true);
+      }
+
+      var x = bbox.x,
+          y = bbox.y,
+          height = bbox.height || 0,
+          width = bbox.width || 0;
+
+      if (x < minX || minX === undefined) {
+        minX = x;
+      }
+      if (y < minY || minY === undefined) {
+        minY = y;
+      }
+
+      if ((x + width) > maxX || maxX === undefined) {
+        maxX = x + width;
+      }
+      if ((y + height) > maxY || maxY === undefined) {
+        maxY = y + height;
+      }
+    });
+
+    return {
+      x: minX,
+      y: minY,
+      height: maxY - minY,
+      width: maxX - minX
+    };
+  }
+
+  /**
+   * Get the element's type
+   *
+   * @param {Element} element
+   *
+   * @return {'connection' | 'shape' | 'root'}
+   */
+  function getType(element) {
+
+    if ('waypoints' in element) {
+      return 'connection';
+    }
+
+    if ('x' in element) {
+      return 'shape';
+    }
+
+    return 'root';
+  }
+
+  /**
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  function isFrameElement(element) {
+    return !!(element && element.isFrame);
+  }
+
   var LOW_PRIORITY$2 = 500;
 
   var DEFAULT_PRIORITY$2 = 1000;
@@ -7281,6 +7367,19 @@
       }
     });
 
+    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = createOutline(gfx, element);
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
   }
 
 
@@ -7312,6 +7411,25 @@
     }
   };
 
+  /**
+   * Updates the outline of a connection respecting the bounding box of
+   * the connection and an outline offset.
+   * Register an outline provider with the given priority.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} connection
+   **/
+  Outline.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr$1(outline, {
+      x: bbox.x - this.offset,
+      y: bbox.y - this.offset,
+      width: bbox.width + this.offset * 2,
+      height: bbox.height + this.offset * 2
+    });
+  };
+
   /**
    * Register an outline provider with the given priority.
    *
@@ -7496,92 +7614,6 @@
     this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
   };
 
-  /**
-   * Returns the surrounding bbox for all elements in
-   * the array or the element primitive.
-   *
-   * @param {Element|Element[]} elements
-   * @param {boolean} [stopRecursion=false]
-   *
-   * @return {Rect}
-   */
-  function getBBox(elements, stopRecursion) {
-
-    stopRecursion = !!stopRecursion;
-    if (!isArray$2(elements)) {
-      elements = [ elements ];
-    }
-
-    var minX,
-        minY,
-        maxX,
-        maxY;
-
-    forEach$1(elements, function(element) {
-
-      // If element is a connection the bbox must be computed first
-      var bbox = element;
-      if (element.waypoints && !stopRecursion) {
-        bbox = getBBox(element.waypoints, true);
-      }
-
-      var x = bbox.x,
-          y = bbox.y,
-          height = bbox.height || 0,
-          width = bbox.width || 0;
-
-      if (x < minX || minX === undefined) {
-        minX = x;
-      }
-      if (y < minY || minY === undefined) {
-        minY = y;
-      }
-
-      if ((x + width) > maxX || maxX === undefined) {
-        maxX = x + width;
-      }
-      if ((y + height) > maxY || maxY === undefined) {
-        maxY = y + height;
-      }
-    });
-
-    return {
-      x: minX,
-      y: minY,
-      height: maxY - minY,
-      width: maxX - minX
-    };
-  }
-
-  /**
-   * Get the element's type
-   *
-   * @param {Element} element
-   *
-   * @return {'connection' | 'shape' | 'root'}
-   */
-  function getType(element) {
-
-    if ('waypoints' in element) {
-      return 'connection';
-    }
-
-    if ('x' in element) {
-      return 'shape';
-    }
-
-    return 'root';
-  }
-
-  /**
-   * @param {Element} element
-   *
-   * @return {boolean}
-   */
-  function isFrameElement(element) {
-    return !!(element && element.isFrame);
-  }
-
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus