bpmn-js 18.7.0 → 18.9.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.7.0
+ * bpmn-js - bpmn-modeler v18.9.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2025-09-23
+ * Date: 2025-11-18
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -18354,6 +18354,17 @@
     return element;
   }
 
+  /**
+   * Returns true if the given element is an external label.
+   *
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  function isExternalLabel(element) {
+    return isLabel(element) && isLabelExternal(element.labelTarget);
+  }
+
   var black = 'hsl(225, 10%, 15%)';
   var white = 'white';
 
@@ -18484,11 +18495,11 @@
       [ 'l', width - borderRadius * 2, 0 ],
       [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius ],
       [ 'l', 0, height - borderRadius * 2 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, borderRadius ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius ],
       [ 'l', borderRadius * 2 - width, 0 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius ],
       [ 'l', 0, borderRadius * 2 - height ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius ],
       [ 'z' ]
     ];
 
@@ -18586,7 +18597,8 @@
   var ELEMENT_LABEL_DISTANCE$1 = 10,
       INNER_OUTER_DIST = 3,
       PARTICIPANT_STROKE_WIDTH = 1.5,
-      TASK_BORDER_RADIUS = 10;
+      TASK_BORDER_RADIUS = 10,
+      EXTERNAL_LABEL_BORDER_RADIUS = 4;
 
   var DEFAULT_OPACITY = 0.95,
       FULL_OPACITY = 1,
@@ -20895,6 +20907,11 @@
    * @return {string} path
    */
   BpmnRenderer.prototype.getShapePath = function(shape) {
+
+    if (isLabel(shape)) {
+      return getRoundRectPath(shape, EXTERNAL_LABEL_BORDER_RADIUS);
+    }
+
     if (is(shape, 'bpmn:Event')) {
       return getCirclePath(shape);
     }
@@ -35460,6 +35477,9 @@
         // create a DataObject every time a DataObjectReference is created
         var dataObject = bpmnFactory.create('bpmn:DataObject');
 
+        // Copy the isCollection property if needed.
+        dataObject.isCollection = shape.businessObject.dataObjectRef?.isCollection || false;
+
         // set the reference to the DataObject
         shape.businessObject.dataObjectRef = dataObject;
       }
@@ -44469,7 +44489,8 @@
     'errorRef',
     'escalationRef',
     'messageRef',
-    'signalRef'
+    'signalRef',
+    'dataObjectRef'
   ];
 
   /**
@@ -61413,6 +61434,483 @@
     labelEditingPreview: [ 'type', LabelEditingPreview ]
   };
 
+  var LOW_PRIORITY$3 = 500;
+
+  var DEFAULT_PRIORITY$1 = 1000;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Styles} styles
+   */
+  function Outline$1(eventBus, styles) {
+
+    this._eventBus = eventBus;
+
+    this.offset = 5;
+
+    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+
+    var self = this;
+
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
+      var outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: 0,
+        y: 0,
+        rx: 4,
+        width: 100,
+        height: 100
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
+    // A low priortity is necessary, because outlines of labels have to be updated
+    // after the label bounds have been updated in the renderer.
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$3, function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateShapeOutline(outline, element);
+    });
+
+    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();
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
+  }
+
+
+  /**
+   * Updates the outline of a shape respecting the dimension of the
+   * element and an outline offset.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} element
+   */
+  Outline$1.prototype.updateShapeOutline = function(outline, element) {
+
+    var updated = false;
+    var providers = this._getProviders();
+
+    if (providers.length) {
+      forEach$1(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
+
+    if (!updated) {
+      attr(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
+
+  /**
+   * 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$1.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr(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.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline$1.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$1;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline$1.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   */
+  Outline$1.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$1(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
+
+  Outline$1.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+
+  var SELECTION_OUTLINE_PADDING = 6;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../core/Canvas').default} Canvas
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {Selection} selection
+   */
+  function MultiSelectionOutline(eventBus, canvas, selection) {
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('element.changed', function(event) {
+      if (selection.isSelected(event.element)) {
+        self._updateMultiSelectionOutline(selection.get());
+      }
+    });
+
+    eventBus.on('selection.changed', function(event) {
+      var newSelection = event.newSelection;
+
+      self._updateMultiSelectionOutline(newSelection);
+    });
+  }
+
+
+
+  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
+    var layer = this._canvas.getLayer('selectionOutline');
+
+    clear(layer);
+
+    var enabled = selection.length > 1;
+
+    var container = this._canvas.getContainer();
+
+    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+    if (!enabled) {
+      return;
+    }
+
+    var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+    var rect = create$1('rect');
+
+    attr(rect, assign$1({
+      rx: 3
+    }, bBox));
+
+    classes(rect).add('djs-selection-outline');
+
+    append(layer, rect);
+  };
+
+
+  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
+
+  // helpers //////////
+
+  function addSelectionOutlinePadding(bBox) {
+    return {
+      x: bBox.x - SELECTION_OUTLINE_PADDING,
+      y: bBox.y - SELECTION_OUTLINE_PADDING,
+      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+    };
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var Outline = {
+    __depends__: [
+      SelectionModule
+    ],
+    __init__: [ 'outline', 'multiSelectionOutline' ],
+    outline: [ 'type', Outline$1 ],
+    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
+  };
+
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/GraphicsFactory').default} GraphicsFactory
+   * @typedef {import('../outline/OutlineProvider').default} Outline
+   * @typedef {import('diagram-js/lib/features/selection').default} Selection
+   *
+   * @typedef {import('diagram-js/lib/model/Types').Element} Element
+   */
+
+  const ALLOWED_ELEMENTS = [ 'bpmn:Event', 'bpmn:SequenceFlow', 'bpmn:Gateway' ];
+
+  const LINE_STYLE = {
+    class: 'bjs-label-link',
+    stroke: 'var(--element-selected-outline-secondary-stroke-color)',
+    strokeDasharray: '5, 5',
+  };
+
+  const DISTANCE_THRESHOLD = 15;
+  const PATH_OFFSET = 2;
+
+  /**
+   * Render a line between an external label and its target element,
+   * when either is selected.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {GraphicsFactory} graphicsFactory
+   * @param {Outline} outline
+   */
+  function LabelLink$1(eventBus, canvas, graphicsFactory, outline, selection) {
+
+    const layer = canvas.getLayer('overlays');
+
+    eventBus.on([ 'selection.changed', 'shape.changed' ], function() {
+      cleanUp();
+    });
+
+    eventBus.on('selection.changed', function({ newSelection }) {
+
+      const allowedElements = newSelection.filter(element => isAny(element, ALLOWED_ELEMENTS));
+
+      if (allowedElements.length === 1) {
+        const element = allowedElements[0];
+        if (isLabel(element)) {
+          createLink(element, element.labelTarget, newSelection);
+        } else if (element.labels?.length) {
+          createLink(element.labels[0], element, newSelection);
+        }
+      }
+
+      // Only allowed when both label and its target are selected
+      if (allowedElements.length === 2) {
+        const label = allowedElements.find(isLabel);
+        const target = allowedElements.find(el => el.labels?.includes(label));
+        if (label && target) {
+          createLink(label, target, newSelection);
+        }
+      }
+    });
+
+    eventBus.on('shape.changed', function({ element }) {
+
+      if (!isAny(element, ALLOWED_ELEMENTS)) {
+        return;
+      }
+
+      if (isLabel(element)) {
+        createLink(element, element.labelTarget, selection.get());
+      } else if (element.labels?.length) {
+        createLink(element.labels[0], element, selection.get());
+      }
+    });
+
+    /**
+     * Render a line between an external label and its target.
+     *
+     * @param {Element} label
+     * @param {Element} target
+     * @param {Element[]} selection
+     */
+    function createLink(label, target, selection = []) {
+
+      // Create an auxiliary line between label and target mid points
+      const line = createLine(
+        [ getMid(target), getMid(label) ],
+        LINE_STYLE
+      );
+      const linePath = line.getAttribute('d');
+
+      // Calculate the intersection point between line and label
+      const labelSelected = selection.includes(label);
+      const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);
+      const labelInter = getElementLineIntersection(labelPath, linePath);
+
+      // Label on top of the target
+      if (!labelInter) {
+        return;
+      }
+
+      // Calculate the intersection point between line and label
+      // If the target is a sequence flow, there is no intersection,
+      // so we link to the middle of it.
+      const targetSelected = selection.includes(target);
+      const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+      const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+
+      // Do not draw a link if the points are too close
+      const distance = getDistancePointPoint(targetInter, labelInter);
+      if (distance < DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      // Connect the actual closest points
+      updateLine(line, [ targetInter, labelInter ]);
+      append(layer, line);
+    }
+
+    /**
+     * Remove all existing label links.
+     */
+    function cleanUp() {
+      all(`.${LINE_STYLE.class}`, layer).forEach(remove$1);
+    }
+
+    /**
+     * Get element's slightly expanded outline path.
+     *
+     * @param {Element} element
+     * @returns {string} svg path
+     */
+    function getElementOutlinePath(element) {
+      const outlineShape = outline.getOutline(element);
+      const outlineOffset = outline.offset;
+
+      if (!outlineShape) {
+        return getElementPath(element);
+      }
+
+      if (outlineShape.x) {
+        const shape = {
+          x: element.x + parseSvgNumAttr(outlineShape, 'x') - PATH_OFFSET,
+          y: element.y + parseSvgNumAttr(outlineShape, 'y') - PATH_OFFSET,
+          width: parseSvgNumAttr(outlineShape, 'width') + PATH_OFFSET * 2,
+          height: parseSvgNumAttr(outlineShape, 'height') + PATH_OFFSET * 2
+        };
+
+        return getRoundRectPath(shape, parseSvgNumAttr(outlineShape, 'rx'));
+      }
+
+      if (outlineShape.cx) {
+        const shape = {
+          x: element.x - outlineOffset,
+          y: element.y - outlineOffset,
+          width: parseSvgNumAttr(outlineShape, 'r') * 2,
+          height: parseSvgNumAttr(outlineShape, 'r') * 2,
+        };
+
+        return getCirclePath(shape);
+      }
+    }
+
+    function getElementPath(element) {
+      return graphicsFactory.getShapePath(element);
+    }
+  }
+
+  LabelLink$1.$inject = [
+    'eventBus',
+    'canvas',
+    'graphicsFactory',
+    'outline',
+    'selection'
+  ];
+
+  /**
+   * Get numeric attribute from SVG element
+   * or 0 if not present.
+   *
+   * @param {SVGElement} node
+   * @param {string} attr
+   * @returns {number}
+   */
+  function parseSvgNumAttr(node, attr$1) {
+    return parseFloat(attr(node, attr$1) || 0);
+  }
+
+  var LabelLink = {
+    __depends__: [
+      SelectionModule,
+      Outline
+    ],
+    __init__: [
+      'labelLink'
+    ],
+    labelLink: [ 'type', LabelLink$1 ]
+  };
+
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
@@ -61860,285 +62358,6 @@
     modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
-  var LOW_PRIORITY$3 = 500;
-
-  var DEFAULT_PRIORITY$1 = 1000;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('./OutlineProvider').default} OutlineProvider
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Styles} styles
-   */
-  function Outline(eventBus, styles) {
-
-    this._eventBus = eventBus;
-
-    this.offset = 5;
-
-    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var self = this;
-
-    /**
-     * @param {SVGElement} gfx
-     *
-     * @return {SVGElement} outline
-     */
-    function createOutline(gfx) {
-      var outline = create$1('rect');
-
-      attr(outline, assign$1({
-        x: 0,
-        y: 0,
-        rx: 4,
-        width: 100,
-        height: 100
-      }, OUTLINE_STYLE));
-
-      return outline;
-    }
-
-    // A low priortity is necessary, because outlines of labels have to be updated
-    // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$3, function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = self.getOutline(element) || createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateShapeOutline(outline, element);
-    });
-
-    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();
-        append(gfx, outline);
-      }
-
-      self.updateConnectionOutline(outline, element);
-    });
-  }
-
-
-  /**
-   * Updates the outline of a shape respecting the dimension of the
-   * element and an outline offset.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} element
-   */
-  Outline.prototype.updateShapeOutline = function(outline, element) {
-
-    var updated = false;
-    var providers = this._getProviders();
-
-    if (providers.length) {
-      forEach$1(providers, function(provider) {
-        updated = updated || provider.updateOutline(element, outline);
-      });
-    }
-
-    if (!updated) {
-      attr(outline, {
-        x: -this.offset,
-        y: -this.offset,
-        width: element.width + this.offset * 2,
-        height: element.height + this.offset * 2
-      });
-    }
-  };
-
-  /**
-   * 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(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.
-   *
-   * @param {number} priority
-   * @param {OutlineProvider} provider
-   */
-  Outline.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$1;
-    }
-
-    this._eventBus.on('outline.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
-
-  /**
-   * Returns the registered outline providers.
-   *
-   * @returns {OutlineProvider[]}
-   */
-  Outline.prototype._getProviders = function() {
-    var event = this._eventBus.createEvent({
-      type: 'outline.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
-
-    return event.providers;
-  };
-
-  /**
-   * Returns the outline for an element.
-   *
-   * @param {Element} element
-   */
-  Outline.prototype.getOutline = function(element) {
-    var outline;
-    var providers = this._getProviders();
-
-    forEach$1(providers, function(provider) {
-
-      if (!isFunction(provider.getOutline)) {
-        return;
-      }
-
-      outline = outline || provider.getOutline(element);
-    });
-
-    return outline;
-  };
-
-  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
-
-  var SELECTION_OUTLINE_PADDING = 6;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../selection/Selection').default} Selection
-   * @typedef {import('../../core/Canvas').default} Canvas
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   * @param {Selection} selection
-   */
-  function MultiSelectionOutline(eventBus, canvas, selection) {
-    this._canvas = canvas;
-
-    var self = this;
-
-    eventBus.on('element.changed', function(event) {
-      if (selection.isSelected(event.element)) {
-        self._updateMultiSelectionOutline(selection.get());
-      }
-    });
-
-    eventBus.on('selection.changed', function(event) {
-      var newSelection = event.newSelection;
-
-      self._updateMultiSelectionOutline(newSelection);
-    });
-  }
-
-
-
-  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
-    var layer = this._canvas.getLayer('selectionOutline');
-
-    clear(layer);
-
-    var enabled = selection.length > 1;
-
-    var container = this._canvas.getContainer();
-
-    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
-
-    if (!enabled) {
-      return;
-    }
-
-    var bBox = addSelectionOutlinePadding(getBBox(selection));
-
-    var rect = create$1('rect');
-
-    attr(rect, assign$1({
-      rx: 3
-    }, bBox));
-
-    classes(rect).add('djs-selection-outline');
-
-    append(layer, rect);
-  };
-
-
-  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
-
-  // helpers //////////
-
-  function addSelectionOutlinePadding(bBox) {
-    return {
-      x: bBox.x - SELECTION_OUTLINE_PADDING,
-      y: bBox.y - SELECTION_OUTLINE_PADDING,
-      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
-      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
-    };
-  }
-
-  /**
-   * @type { import('didi').ModuleDeclaration }
-   */
-  var Ouline = {
-    __depends__: [
-      SelectionModule
-    ],
-    __init__: [ 'outline', 'multiSelectionOutline' ],
-    outline: [ 'type', Outline ],
-    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
-  };
-
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -62641,7 +62860,7 @@
     __depends__: [
       InteractionEventsModule$1,
       SelectionModule,
-      Ouline,
+      Outline,
       RulesModule$1,
       DraggingModule,
       PreviewSupportModule
@@ -66129,6 +66348,20 @@
 
     var outline;
 
+    if (isExternalLabel(element)) {
+      outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: -5,
+        y: -5,
+        rx: 4,
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
     if (isLabel(element)) {
       return;
     }
@@ -66256,7 +66489,7 @@
 
   var OutlineModule = {
     __depends__: [
-      Ouline
+      Outline
     ],
     __init__: [ 'outlineProvider' ],
     outlineProvider: [ 'type', OutlineProvider ]
@@ -66407,6 +66640,7 @@
     KeyboardModule,
     KeyboardMoveSelectionModule,
     LabelEditingModule,
+    LabelLink,
     ModelingModule,
     ModelingFeedbackModule,
     MoveModule,