bpmn-js 13.2.2 → 14.1.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v13.2.2
+ * bpmn-js - bpmn-modeler v14.1.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2023-07-07
+ * Date: 2023-10-17
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -18,8 +18,9 @@
 
   function e$3(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
 
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  function createCommonjsModule(fn) {
+    var module = { exports: {} };
+  	return fn(module, module.exports), module.exports;
   }
 
   var hat_1 = createCommonjsModule(function (module) {
@@ -87,22 +88,25 @@
   };
   });
 
+  /**
+   * @typedef { [ number, number ] | [ number, number, number ] } Seed
+   */
+
   /**
    * Create a new id generator / cache instance.
    *
    * You may optionally provide a seed that is used internally.
    *
-   * @param {Seed} seed
+   * @param {Seed} [seed]
    */
-
   function Ids(seed) {
     if (!(this instanceof Ids)) {
       return new Ids(seed);
     }
-
     seed = seed || [128, 36, 1];
     this._seed = seed.length ? hat_1.rack(seed[0], seed[1], seed[2]) : seed;
   }
+
   /**
    * Generate a next id.
    *
@@ -110,10 +114,10 @@
    *
    * @return {String} id
    */
-
   Ids.prototype.next = function (element) {
     return this._seed(element || true);
   };
+
   /**
    * Generate a next id with a given prefix.
    *
@@ -121,61 +125,54 @@
    *
    * @return {String} id
    */
-
-
   Ids.prototype.nextPrefixed = function (prefix, element) {
     var id;
-
     do {
       id = prefix + this.next(true);
-    } while (this.assigned(id)); // claim {prefix}{random}
-
+    } while (this.assigned(id));
 
-    this.claim(id, element); // return
+    // claim {prefix}{random}
+    this.claim(id, element);
 
+    // return
     return id;
   };
+
   /**
    * Manually claim an existing id.
    *
    * @param {String} id
    * @param {String} [element] element the id is claimed by
    */
-
-
   Ids.prototype.claim = function (id, element) {
     this._seed.set(id, element || true);
   };
+
   /**
    * Returns true if the given id has already been assigned.
    *
    * @param  {String} id
    * @return {Boolean}
    */
-
-
   Ids.prototype.assigned = function (id) {
     return this._seed.get(id) || false;
   };
+
   /**
    * Unclaim an id.
    *
    * @param  {String} id the id to unclaim
    */
-
-
   Ids.prototype.unclaim = function (id) {
     delete this._seed.hats[id];
   };
+
   /**
    * Clear all claimed ids.
    */
-
-
   Ids.prototype.clear = function () {
     var hats = this._seed.hats,
-        id;
-
+      id;
     for (id in hats) {
       this.unclaim(id);
     }
@@ -5076,9 +5073,9 @@
 
     const viewport = this._viewport = createGroup(svg, 'viewport');
 
-    // debounce canvas.viewbox.changed events
-    // for smoother diagram interaction
-    if (config.deferUpdate !== false) {
+    // debounce canvas.viewbox.changed events when deferUpdate is set
+    // to help with potential performance issues
+    if (config.deferUpdate) {
       this._viewboxChanged = debounce(bind$2(this._viewboxChanged, this), 300);
     }
 
@@ -6102,6 +6099,11 @@
       this.setRootElement(rootElement);
     }
 
+    // element is rootElement, do not change viewport
+    if (rootElement === element) {
+      return;
+    }
+
     if (!padding) {
       padding = {};
     }
@@ -13203,7 +13205,6 @@
   			{
   				name: "target",
   				type: "LinkEventDefinition",
-  				isAttr: true,
   				isReference: true
   			},
   			{
@@ -16042,62 +16043,6 @@
    * @typedef {import('../model/Types').ModdleElement} ModdleElement
    */
 
-  // TODO(nikku): remove with future bpmn-js version
-
-  /**
-   * Wraps APIs to check:
-   *
-   * 1) If a callback is passed -> Warn users about callback deprecation.
-   * 2) If Promise class is implemented in current environment.
-   *
-   * @private
-   *
-   * @param {Function} api
-   *
-   * @return {Function}
-   */
-  function wrapForCompatibility(api) {
-
-    return function() {
-
-      if (!window.Promise) {
-        throw new Error('Promises is not supported in this environment. Please polyfill Promise.');
-      }
-
-      var argLen = arguments.length;
-      if (argLen >= 1 && isFunction(arguments[argLen - 1])) {
-
-        var callback = arguments[argLen - 1];
-
-        console.warn(new Error(
-          'Passing callbacks to ' + api.name + ' is deprecated and will be removed in a future major release. ' +
-          'Please switch to promises: https://bpmn.io/l/moving-to-promises.html'
-        ));
-
-        var argsWithoutCallback = Array.prototype.slice.call(arguments, 0, -1);
-
-        api.apply(this, argsWithoutCallback).then(function(result) {
-
-          var firstKey = Object.keys(result)[0];
-
-          // The APIs we are wrapping all resolve a single item depending on the API.
-          // For instance, importXML resolves { warnings } and saveXML returns { xml }.
-          // That's why we can call the callback with the first item of result.
-          return callback(null, result[firstKey]);
-
-          // Passing a second paramter instead of catch because we don't want to
-          // catch errors thrown by callback().
-        }, function(err) {
-
-          return callback(err, err.warnings);
-        });
-      } else {
-
-        return api.apply(this, arguments);
-      }
-    };
-  }
-
 
   // TODO(nikku): remove with future bpmn-js version
 
@@ -17095,28 +17040,7 @@
     const self = this;
 
     function ParseCompleteEvent(data) {
-
-      const event = self.get('eventBus').createEvent(data);
-
-      // TODO(nikku): remove with future bpmn-js version
-      Object.defineProperty(event, 'context', {
-        enumerable: true,
-        get: function() {
-
-          console.warn(new Error(
-            'import.parse.complete <context> is deprecated ' +
-            'and will be removed in future library versions'
-          ));
-
-          return {
-            warnings: data.warnings,
-            references: data.references,
-            elementsById: data.elementsById
-          };
-        }
-      });
-
-      return event;
+      return self.get('eventBus').createEvent(data);
     }
 
     let aggregatedWarnings = [];
@@ -17194,8 +17118,6 @@
     }
   };
 
-  BaseViewer.prototype.importXML = wrapForCompatibility(BaseViewer.prototype.importXML);
-
 
   /**
    * Import parsed definitions and render a BPMN 2.0 diagram.
@@ -17226,8 +17148,6 @@
     return { warnings: result.warnings };
   };
 
-  BaseViewer.prototype.importDefinitions = wrapForCompatibility(BaseViewer.prototype.importDefinitions);
-
 
   /**
    * Open diagram of previously imported XML.
@@ -17289,8 +17209,6 @@
     return { warnings };
   };
 
-  BaseViewer.prototype.open = wrapForCompatibility(BaseViewer.prototype.open);
-
   /**
    * Export the currently displayed BPMN 2.0 diagram as
    * a BPMN 2.0 XML document.
@@ -17365,8 +17283,6 @@
     return result;
   };
 
-  BaseViewer.prototype.saveXML = wrapForCompatibility(BaseViewer.prototype.saveXML);
-
 
   /**
    * Export the currently displayed BPMN 2.0 diagram as
@@ -17434,40 +17350,6 @@
     return { svg };
   };
 
-  BaseViewer.prototype.saveSVG = wrapForCompatibility(BaseViewer.prototype.saveSVG);
-
-  /**
-   * Get a named diagram service.
-   *
-   * @example
-   *
-   * const elementRegistry = viewer.get('elementRegistry');
-   * const startEventShape = elementRegistry.get('StartEvent_1');
-   *
-   * @param {string} name
-   *
-   * @return {Object} diagram service instance
-   *
-   * @method BaseViewer#get
-   */
-
-  /**
-   * Invoke a function in the context of this viewer.
-   *
-   * @example
-   *
-   * viewer.invoke(function(elementRegistry) {
-   *   const startEventShape = elementRegistry.get('StartEvent_1');
-   * });
-   *
-   * @param {Function} fn to be invoked
-   *
-   * @return {Object} the functions return value
-   *
-   * @method BaseViewer#invoke
-   */
-
-
   BaseViewer.prototype._setDefinitions = function(definitions) {
     this._definitions = definitions;
   };
@@ -25837,7 +25719,7 @@
     // pinch to zoom is mapped to wheel + ctrlKey = true
     // in modern browsers (!)
 
-    var isZoom = event.ctrlKey;
+    var isZoom = event.ctrlKey || (isMac() && event.metaKey);
 
     var isHorizontalScroll = event.shiftKey;
 
@@ -38090,7 +37972,7 @@
             property = reference.property;
 
         if (key === descriptor.id) {
-          element[ property ] = businessObject;
+          element.set(property, businessObject);
 
           array.push(descriptor.id);
         }
@@ -39870,12 +39752,13 @@
   ];
 
   /**
-   * @typedef {import('../features/BpmnFactory').default} BpmnFactory
+   * @typedef {import('../modeling/BpmnFactory').default} BpmnFactory
    * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu
-   * @typedef {import('../features/Modeling').default} Modeling
-   * @typedef {import('../features/BpmnReplace').default} BpmnReplace
+   * @typedef {import('../modeling/Modeling').default} Modeling
+   * @typedef {import('../replace/BpmnReplace').default} BpmnReplace
    * @typedef {import('diagram-js/lib/features/Rules').default} Rules
    * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
+   * @typedef {import('../copy-paste/ModdleCopy').default} ModdleCopy
    *
    * @typedef {import('../../model/Types').Element} Element
    * @typedef {import('../../model/Types').Moddle} Moddle
@@ -39902,10 +39785,11 @@
    * @param {BpmnReplace} bpmnReplace
    * @param {Rules} rules
    * @param {Translate} translate
+   * @param {ModdleCopy} moddleCopy
    */
   function ReplaceMenuProvider(
       bpmnFactory, popupMenu, modeling, moddle,
-      bpmnReplace, rules, translate) {
+      bpmnReplace, rules, translate, moddleCopy) {
 
     this._bpmnFactory = bpmnFactory;
     this._popupMenu = popupMenu;
@@ -39914,6 +39798,7 @@
     this._bpmnReplace = bpmnReplace;
     this._rules = rules;
     this._translate = translate;
+    this._moddleCopy = moddleCopy;
 
     this._register();
   }
@@ -39925,7 +39810,8 @@
     'moddle',
     'bpmnReplace',
     'rules',
-    'translate'
+    'translate',
+    'moddleCopy'
   ];
 
   ReplaceMenuProvider.prototype._register = function() {
@@ -40309,18 +40195,24 @@
     var translate = this._translate;
 
     function toggleLoopEntry(event, entry) {
-      var newLoopCharacteristics = getBusinessObject(target).loopCharacteristics;
 
+      // remove
       if (entry.active) {
-        newLoopCharacteristics = undefined;
-      } else {
-        if (isUndefined$2(entry.options.isSequential) || !newLoopCharacteristics
-        || !is$1(newLoopCharacteristics, entry.options.loopCharacteristics)) {
-          newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
-        }
+        self._modeling.updateProperties(target, { loopCharacteristics: undefined });
+        return;
+      }
 
-        newLoopCharacteristics.isSequential = entry.options.isSequential;
+      const currentLoopCharacteristics = target.businessObject.get('loopCharacteristics'),
+            newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
+
+      // copy old properties
+      if (currentLoopCharacteristics) {
+        self._moddleCopy.copyElement(currentLoopCharacteristics, newLoopCharacteristics);
       }
+
+      // update `isSequential` property
+      newLoopCharacteristics.set('isSequential', entry.options.isSequential);
+
       self._modeling.updateProperties(target, { loopCharacteristics: newLoopCharacteristics });
     }
 
@@ -41298,7 +41190,8 @@
       assign$1(actions, {
         'append.text-annotation': appendAction(
           'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
         )
       });
     }
@@ -41314,7 +41207,8 @@
       assign$1(actions, {
         'append.text-annotation': appendAction(
           'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
         ),
 
         'connect': {
@@ -41365,7 +41259,11 @@
 
     if (is$1(businessObject, 'bpmn:Group')) {
       assign$1(actions, {
-        'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
+        'append.text-annotation': appendAction(
+          'bpmn:TextAnnotation',
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
+        )
       });
     }
 
@@ -46486,12 +46384,18 @@
       var sequenceFlows = [];
 
       if (is$1(source, 'bpmn:EventBasedGateway')) {
-        sequenceFlows = target.incoming.filter(isSequenceFlow);
+        sequenceFlows = target.incoming
+          .filter(flow =>
+            flow !== connection &&
+            isSequenceFlow(flow)
+          );
       } else {
-        sequenceFlows = target.incoming.filter(function(connection) {
-          return isSequenceFlow(connection)
-            && is$1(connection.source, 'bpmn:EventBasedGateway');
-        });
+        sequenceFlows = target.incoming
+          .filter(flow =>
+            flow !== connection &&
+            isSequenceFlow(flow) &&
+            is$1(flow.source, 'bpmn:EventBasedGateway')
+          );
       }
 
       sequenceFlows.forEach(function(sequenceFlow) {
@@ -46657,6 +46561,16 @@
       }
     });
 
+    // ensure lanes aren't resized without their parent participant when using
+    // space tool
+    eventBus.on('spaceTool.move', HIGHEST_PRIORITY, function(event) {
+      var hover = event.hover;
+
+      if (hover && is$1(hover, 'bpmn:Lane')) {
+        event.hover = getLanesRoot(hover);
+      }
+    });
+
   }
 
   FixHoverBehavior.$inject = [
@@ -48515,51 +48429,6 @@
     };
   }
 
-  /**
-   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
-   * @typedef {import('diagram-js/lib/features/tooltips/Tooltips').default} Tooltips
-   * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
-   */
-
-  var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants';
-
-  /**
-   * @param {EventBus} eventBus
-   * @param {Tooltips} tooltips
-   * @param {Translate} translate
-   */
-  function ModelingFeedback(eventBus, tooltips, translate) {
-
-    function showError(position, message, timeout) {
-      tooltips.add({
-        position: {
-          x: position.x + 5,
-          y: position.y + 5
-        },
-        type: 'error',
-        timeout: timeout || 2000,
-        html: '<div>' + message + '</div>'
-      });
-    }
-
-    eventBus.on([ 'shape.move.rejected', 'create.rejected' ], function(event) {
-      var context = event.context,
-          shape = context.shape,
-          target = context.target;
-
-      if (is$1(target, 'bpmn:Collaboration') && is$1(shape, 'bpmn:FlowNode')) {
-        showError(event, translate(COLLAB_ERR_MSG));
-      }
-    });
-
-  }
-
-  ModelingFeedback.$inject = [
-    'eventBus',
-    'tooltips',
-    'translate'
-  ];
-
   /**
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
    * @typedef {import('../Modeling').default} Modeling
@@ -50748,7 +50617,6 @@
       'labelBehavior',
       'layoutConnectionBehavior',
       'messageFlowBehavior',
-      'modelingFeedback',
       'removeElementBehavior',
       'removeEmbeddedLabelBoundsBehavior',
       'removeParticipantBehavior',
@@ -50787,7 +50655,6 @@
     labelBehavior: [ 'type', LabelBehavior ],
     layoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ],
     messageFlowBehavior: [ 'type', MessageFlowBehavior ],
-    modelingFeedback: [ 'type', ModelingFeedback ],
     removeElementBehavior: [ 'type', RemoveElementBehavior ],
     removeEmbeddedLabelBoundsBehavior: [ 'type', RemoveEmbeddedLabelBoundsBehavior ],
     removeParticipantBehavior: [ 'type', RemoveParticipantBehavior ],
@@ -52784,7 +52651,14 @@
 
     var root = this._canvas.getRootElement();
 
-    var children = selfAndAllChildren(root, true);
+    if (hasSecondaryModifier(event) && event.hover) {
+      root = event.hover;
+    }
+
+    var children = [
+      ...selfAndAllChildren(root, true),
+      ...(root.attachers || [])
+    ];
 
     var elements = this.calculateAdjustments(children, axis, delta, start);
 
@@ -54097,393 +53971,6 @@
     commandStack: [ 'type', CommandStack ]
   };
 
-  /**
-   * @typedef {import('../../core/Canvas').default} Canvas
-   * @typedef {import('../../core/EventBus').default} EventBus
-   *
-   * @typedef {import('../../util/Types').RectTRBL} RectTRBL
-   *
-   * @typedef { {
-   *   html: string | HTMLElement;
-   *   position: RectTRBL;
-   *   show?: {
-   *     minZoom?: number;
-   *     maxZoom?: number;
-   *   };
-   *   timeout?: number;
-   * } } Tooltip
-   */
-
-  // document wide unique tooltip ids
-  var ids = new IdGenerator('tt');
-
-
-  function createRoot(parentNode) {
-    var root = domify$1(
-      '<div class="djs-tooltip-container" />'
-    );
-
-    assign(root, {
-      position: 'absolute',
-      width: '0',
-      height: '0'
-    });
-
-    parentNode.insertBefore(root, parentNode.firstChild);
-
-    return root;
-  }
-
-
-  function setPosition(el, x, y) {
-    assign(el, { left: x + 'px', top: y + 'px' });
-  }
-
-  function setVisible(el, visible) {
-    el.style.display = visible === false ? 'none' : '';
-  }
-
-
-  var tooltipClass = 'djs-tooltip',
-      tooltipSelector = '.' + tooltipClass;
-
-  /**
-   * A service that allows users to render tool tips on the diagram.
-   *
-   * The tooltip service will take care of updating the tooltip positioning
-   * during navigation + zooming.
-   *
-   * @example
-   *
-   * ```javascript
-   *
-   * // add a pink badge on the top left of the shape
-   * tooltips.add({
-   *   position: {
-   *     x: 50,
-   *     y: 100
-   *   },
-   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
-   * });
-   *
-   * // or with optional life span
-   * tooltips.add({
-   *   position: {
-   *     top: -5,
-   *     left: -5
-   *   },
-   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
-   *   ttl: 2000
-   * });
-   *
-   * // remove a tool tip
-   * var id = tooltips.add(...);
-   *
-   * tooltips.remove(id);
-   * ```
-   *
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   */
-  function Tooltips(eventBus, canvas) {
-
-    this._eventBus = eventBus;
-    this._canvas = canvas;
-
-    this._ids = ids;
-
-    this._tooltipDefaults = {
-      show: {
-        minZoom: 0.7,
-        maxZoom: 5.0
-      }
-    };
-
-    /**
-     * @type {Record<string, Tooltip>}
-     */
-    this._tooltips = {};
-
-    // root html element for all tooltips
-    this._tooltipRoot = createRoot(canvas.getContainer());
-
-
-    var self = this;
-
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
-      event.stopPropagation();
-    });
-
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
-      self.trigger('mouseover', event);
-    });
-
-    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
-      self.trigger('mouseout', event);
-    });
-
-    this._init();
-  }
-
-
-  Tooltips.$inject = [ 'eventBus', 'canvas' ];
-
-
-  /**
-   * Adds an HTML tooltip to the diagram.
-   *
-   * @param {Tooltip} tooltip
-   *
-   * @return {string} ID of the tooltip.
-   */
-  Tooltips.prototype.add = function(tooltip) {
-
-    if (!tooltip.position) {
-      throw new Error('must specifiy tooltip position');
-    }
-
-    if (!tooltip.html) {
-      throw new Error('must specifiy tooltip html');
-    }
-
-    var id = this._ids.next();
-
-    tooltip = assign$1({}, this._tooltipDefaults, tooltip, {
-      id: id
-    });
-
-    this._addTooltip(tooltip);
-
-    if (tooltip.timeout) {
-      this.setTimeout(tooltip);
-    }
-
-    return id;
-  };
-
-  /**
-   * @param {string} action
-   * @param {Event} event
-   */
-  Tooltips.prototype.trigger = function(action, event) {
-
-    var node = event.delegateTarget || event.target;
-
-    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));
-
-    if (!tooltip) {
-      return;
-    }
-
-    if (action === 'mouseover' && tooltip.timeout) {
-      this.clearTimeout(tooltip);
-    }
-
-    if (action === 'mouseout' && tooltip.timeout) {
-
-      // cut timeout after mouse out
-      tooltip.timeout = 1000;
-
-      this.setTimeout(tooltip);
-    }
-  };
-
-  /**
-   * Get tooltip with given ID.
-   *
-   * @param {Tooltip|string} id
-   *
-   * @return {Tooltip|undefined}
-   */
-  Tooltips.prototype.get = function(id) {
-
-    if (typeof id !== 'string') {
-      id = id.id;
-    }
-
-    return this._tooltips[id];
-  };
-
-  /**
-   * @param {Tooltip} tooltip
-   */
-  Tooltips.prototype.clearTimeout = function(tooltip) {
-
-    tooltip = this.get(tooltip);
-
-    if (!tooltip) {
-      return;
-    }
-
-    var removeTimer = tooltip.removeTimer;
-
-    if (removeTimer) {
-      clearTimeout(removeTimer);
-      tooltip.removeTimer = null;
-    }
-  };
-
-  /**
-   * @param {Tooltip} tooltip
-   */
-  Tooltips.prototype.setTimeout = function(tooltip) {
-
-    tooltip = this.get(tooltip);
-
-    if (!tooltip) {
-      return;
-    }
-
-    this.clearTimeout(tooltip);
-
-    var self = this;
-
-    tooltip.removeTimer = setTimeout(function() {
-      self.remove(tooltip);
-    }, tooltip.timeout);
-  };
-
-  /**
-   * Remove tooltip with given ID.
-   *
-   * @param {string | Tooltip} id
-   */
-  Tooltips.prototype.remove = function(id) {
-
-    var tooltip = this.get(id);
-
-    if (tooltip) {
-      remove$2(tooltip.html);
-      remove$2(tooltip.htmlContainer);
-
-      delete tooltip.htmlContainer;
-
-      delete this._tooltips[tooltip.id];
-    }
-  };
-
-
-  Tooltips.prototype.show = function() {
-    setVisible(this._tooltipRoot);
-  };
-
-
-  Tooltips.prototype.hide = function() {
-    setVisible(this._tooltipRoot, false);
-  };
-
-
-  Tooltips.prototype._updateRoot = function(viewbox) {
-    var a = viewbox.scale || 1;
-    var d = viewbox.scale || 1;
-
-    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
-
-    this._tooltipRoot.style.transform = matrix;
-    this._tooltipRoot.style['-ms-transform'] = matrix;
-  };
-
-
-  Tooltips.prototype._addTooltip = function(tooltip) {
-
-    var id = tooltip.id,
-        html = tooltip.html,
-        htmlContainer,
-        tooltipRoot = this._tooltipRoot;
-
-    // unwrap jquery (for those who need it)
-    if (html.get && html.constructor.prototype.jquery) {
-      html = html.get(0);
-    }
-
-    // create proper html elements from
-    // tooltip HTML strings
-    if (isString(html)) {
-      html = domify$1(html);
-    }
-
-    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
-    assign(htmlContainer, { position: 'absolute' });
-
-    htmlContainer.appendChild(html);
-
-    if (tooltip.type) {
-      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
-    }
-
-    if (tooltip.className) {
-      classes$1(htmlContainer).add(tooltip.className);
-    }
-
-    tooltip.htmlContainer = htmlContainer;
-
-    tooltipRoot.appendChild(htmlContainer);
-
-    this._tooltips[id] = tooltip;
-
-    this._updateTooltip(tooltip);
-  };
-
-
-  Tooltips.prototype._updateTooltip = function(tooltip) {
-
-    var position = tooltip.position,
-        htmlContainer = tooltip.htmlContainer;
-
-    // update overlay html based on tooltip x, y
-
-    setPosition(htmlContainer, position.x, position.y);
-  };
-
-
-  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {
-
-    forEach$1(this._tooltips, function(tooltip) {
-      var show = tooltip.show,
-          htmlContainer = tooltip.htmlContainer,
-          visible = true;
-
-      if (show) {
-        if (show.minZoom > viewbox.scale ||
-            show.maxZoom < viewbox.scale) {
-          visible = false;
-        }
-
-        setVisible(htmlContainer, visible);
-      }
-    });
-  };
-
-  Tooltips.prototype._init = function() {
-
-    var self = this;
-
-    // scroll/zoom integration
-
-    function updateViewbox(viewbox) {
-      self._updateRoot(viewbox);
-      self._updateTooltipVisibilty(viewbox);
-
-      self.show();
-    }
-
-    this._eventBus.on('canvas.viewbox.changing', function(event) {
-      self.hide();
-    });
-
-    this._eventBus.on('canvas.viewbox.changed', function(event) {
-      updateViewbox(event.viewbox);
-    });
-  };
-
-  /**
-   * @type { import('didi').ModuleDeclaration }
-   */
-  var TooltipsModule = {
-    __init__: [ 'tooltips' ],
-    tooltips: [ 'type', Tooltips ]
-  };
-
   /**
    * Remove from the beginning of a collection until it is empty.
    *
@@ -62003,7 +61490,6 @@
       OrderingModule,
       ReplaceModule,
       CommandModule,
-      TooltipsModule,
       LabelSupportModule,
       AttachSupportModule,
       SelectionModule,
@@ -62018,6 +61504,448 @@
     connectionDocking: [ 'type', CroppingConnectionDocking ]
   };
 
+  /**
+   * @typedef {import('../../core/Canvas').default} Canvas
+   * @typedef {import('../../core/EventBus').default} EventBus
+   *
+   * @typedef {import('../../util/Types').RectTRBL} RectTRBL
+   *
+   * @typedef { {
+   *   html: string | HTMLElement;
+   *   position: RectTRBL;
+   *   show?: {
+   *     minZoom?: number;
+   *     maxZoom?: number;
+   *   };
+   *   timeout?: number;
+   * } } Tooltip
+   */
+
+  // document wide unique tooltip ids
+  var ids = new IdGenerator('tt');
+
+
+  function createRoot(parentNode) {
+    var root = domify$1(
+      '<div class="djs-tooltip-container" />'
+    );
+
+    assign(root, {
+      position: 'absolute',
+      width: '0',
+      height: '0'
+    });
+
+    parentNode.insertBefore(root, parentNode.firstChild);
+
+    return root;
+  }
+
+
+  function setPosition(el, x, y) {
+    assign(el, { left: x + 'px', top: y + 'px' });
+  }
+
+  function setVisible(el, visible) {
+    el.style.display = visible === false ? 'none' : '';
+  }
+
+
+  var tooltipClass = 'djs-tooltip',
+      tooltipSelector = '.' + tooltipClass;
+
+  /**
+   * A service that allows users to render tool tips on the diagram.
+   *
+   * The tooltip service will take care of updating the tooltip positioning
+   * during navigation + zooming.
+   *
+   * @example
+   *
+   * ```javascript
+   *
+   * // add a pink badge on the top left of the shape
+   * tooltips.add({
+   *   position: {
+   *     x: 50,
+   *     y: 100
+   *   },
+   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
+   * });
+   *
+   * // or with optional life span
+   * tooltips.add({
+   *   position: {
+   *     top: -5,
+   *     left: -5
+   *   },
+   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
+   *   ttl: 2000
+   * });
+   *
+   * // remove a tool tip
+   * var id = tooltips.add(...);
+   *
+   * tooltips.remove(id);
+   * ```
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   */
+  function Tooltips(eventBus, canvas) {
+
+    this._eventBus = eventBus;
+    this._canvas = canvas;
+
+    this._ids = ids;
+
+    this._tooltipDefaults = {
+      show: {
+        minZoom: 0.7,
+        maxZoom: 5.0
+      }
+    };
+
+    /**
+     * @type {Record<string, Tooltip>}
+     */
+    this._tooltips = {};
+
+    // root html element for all tooltips
+    this._tooltipRoot = createRoot(canvas.getContainer());
+
+
+    var self = this;
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
+      event.stopPropagation();
+    });
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
+      self.trigger('mouseover', event);
+    });
+
+    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
+      self.trigger('mouseout', event);
+    });
+
+    this._init();
+  }
+
+
+  Tooltips.$inject = [ 'eventBus', 'canvas' ];
+
+
+  /**
+   * Adds an HTML tooltip to the diagram.
+   *
+   * @param {Tooltip} tooltip
+   *
+   * @return {string} ID of the tooltip.
+   */
+  Tooltips.prototype.add = function(tooltip) {
+
+    if (!tooltip.position) {
+      throw new Error('must specifiy tooltip position');
+    }
+
+    if (!tooltip.html) {
+      throw new Error('must specifiy tooltip html');
+    }
+
+    var id = this._ids.next();
+
+    tooltip = assign$1({}, this._tooltipDefaults, tooltip, {
+      id: id
+    });
+
+    this._addTooltip(tooltip);
+
+    if (tooltip.timeout) {
+      this.setTimeout(tooltip);
+    }
+
+    return id;
+  };
+
+  /**
+   * @param {string} action
+   * @param {Event} event
+   */
+  Tooltips.prototype.trigger = function(action, event) {
+
+    var node = event.delegateTarget || event.target;
+
+    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));
+
+    if (!tooltip) {
+      return;
+    }
+
+    if (action === 'mouseover' && tooltip.timeout) {
+      this.clearTimeout(tooltip);
+    }
+
+    if (action === 'mouseout' && tooltip.timeout) {
+
+      // cut timeout after mouse out
+      tooltip.timeout = 1000;
+
+      this.setTimeout(tooltip);
+    }
+  };
+
+  /**
+   * Get tooltip with given ID.
+   *
+   * @param {Tooltip|string} id
+   *
+   * @return {Tooltip|undefined}
+   */
+  Tooltips.prototype.get = function(id) {
+
+    if (typeof id !== 'string') {
+      id = id.id;
+    }
+
+    return this._tooltips[id];
+  };
+
+  /**
+   * @param {Tooltip} tooltip
+   */
+  Tooltips.prototype.clearTimeout = function(tooltip) {
+
+    tooltip = this.get(tooltip);
+
+    if (!tooltip) {
+      return;
+    }
+
+    var removeTimer = tooltip.removeTimer;
+
+    if (removeTimer) {
+      clearTimeout(removeTimer);
+      tooltip.removeTimer = null;
+    }
+  };
+
+  /**
+   * @param {Tooltip} tooltip
+   */
+  Tooltips.prototype.setTimeout = function(tooltip) {
+
+    tooltip = this.get(tooltip);
+
+    if (!tooltip) {
+      return;
+    }
+
+    this.clearTimeout(tooltip);
+
+    var self = this;
+
+    tooltip.removeTimer = setTimeout(function() {
+      self.remove(tooltip);
+    }, tooltip.timeout);
+  };
+
+  /**
+   * Remove tooltip with given ID.
+   *
+   * @param {string | Tooltip} id
+   */
+  Tooltips.prototype.remove = function(id) {
+
+    var tooltip = this.get(id);
+
+    if (tooltip) {
+      remove$2(tooltip.html);
+      remove$2(tooltip.htmlContainer);
+
+      delete tooltip.htmlContainer;
+
+      delete this._tooltips[tooltip.id];
+    }
+  };
+
+
+  Tooltips.prototype.show = function() {
+    setVisible(this._tooltipRoot);
+  };
+
+
+  Tooltips.prototype.hide = function() {
+    setVisible(this._tooltipRoot, false);
+  };
+
+
+  Tooltips.prototype._updateRoot = function(viewbox) {
+    var a = viewbox.scale || 1;
+    var d = viewbox.scale || 1;
+
+    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
+
+    this._tooltipRoot.style.transform = matrix;
+    this._tooltipRoot.style['-ms-transform'] = matrix;
+  };
+
+
+  Tooltips.prototype._addTooltip = function(tooltip) {
+
+    var id = tooltip.id,
+        html = tooltip.html,
+        htmlContainer,
+        tooltipRoot = this._tooltipRoot;
+
+    // unwrap jquery (for those who need it)
+    if (html.get && html.constructor.prototype.jquery) {
+      html = html.get(0);
+    }
+
+    // create proper html elements from
+    // tooltip HTML strings
+    if (isString(html)) {
+      html = domify$1(html);
+    }
+
+    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
+    assign(htmlContainer, { position: 'absolute' });
+
+    htmlContainer.appendChild(html);
+
+    if (tooltip.type) {
+      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
+    }
+
+    if (tooltip.className) {
+      classes$1(htmlContainer).add(tooltip.className);
+    }
+
+    tooltip.htmlContainer = htmlContainer;
+
+    tooltipRoot.appendChild(htmlContainer);
+
+    this._tooltips[id] = tooltip;
+
+    this._updateTooltip(tooltip);
+  };
+
+
+  Tooltips.prototype._updateTooltip = function(tooltip) {
+
+    var position = tooltip.position,
+        htmlContainer = tooltip.htmlContainer;
+
+    // update overlay html based on tooltip x, y
+
+    setPosition(htmlContainer, position.x, position.y);
+  };
+
+
+  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {
+
+    forEach$1(this._tooltips, function(tooltip) {
+      var show = tooltip.show,
+          htmlContainer = tooltip.htmlContainer,
+          visible = true;
+
+      if (show) {
+        if (show.minZoom > viewbox.scale ||
+            show.maxZoom < viewbox.scale) {
+          visible = false;
+        }
+
+        setVisible(htmlContainer, visible);
+      }
+    });
+  };
+
+  Tooltips.prototype._init = function() {
+
+    var self = this;
+
+    // scroll/zoom integration
+
+    function updateViewbox(viewbox) {
+      self._updateRoot(viewbox);
+      self._updateTooltipVisibilty(viewbox);
+
+      self.show();
+    }
+
+    this._eventBus.on('canvas.viewbox.changing', function(event) {
+      self.hide();
+    });
+
+    this._eventBus.on('canvas.viewbox.changed', function(event) {
+      updateViewbox(event.viewbox);
+    });
+  };
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var TooltipsModule = {
+    __init__: [ 'tooltips' ],
+    tooltips: [ 'type', Tooltips ]
+  };
+
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/features/tooltips/Tooltips').default} Tooltips
+   * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
+   */
+
+  var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants';
+
+  /**
+   * @param {EventBus} eventBus
+   * @param {Tooltips} tooltips
+   * @param {Translate} translate
+   */
+  function ModelingFeedback(eventBus, tooltips, translate) {
+
+    function showError(position, message, timeout) {
+      tooltips.add({
+        position: {
+          x: position.x + 5,
+          y: position.y + 5
+        },
+        type: 'error',
+        timeout: timeout || 2000,
+        html: '<div>' + message + '</div>'
+      });
+    }
+
+    eventBus.on([ 'shape.move.rejected', 'create.rejected' ], function(event) {
+      var context = event.context,
+          shape = context.shape,
+          target = context.target;
+
+      if (is$1(target, 'bpmn:Collaboration') && is$1(shape, 'bpmn:FlowNode')) {
+        showError(event, translate(COLLAB_ERR_MSG));
+      }
+    });
+
+  }
+
+  ModelingFeedback.$inject = [
+    'eventBus',
+    'tooltips',
+    'translate'
+  ];
+
+  var ModelingFeedbackModule = {
+    __depends__: [
+      TooltipsModule
+    ],
+    __init__: [
+      'modelingFeedback'
+    ],
+    modelingFeedback: [ 'type', ModelingFeedback ]
+  };
+
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -66030,8 +65958,6 @@
     return this.importXML(initialDiagram);
   };
 
-  Modeler.prototype.createDiagram = wrapForCompatibility(Modeler.prototype.createDiagram);
-
 
   Modeler.prototype._interactionModules = [
 
@@ -66063,6 +65989,7 @@
     KeyboardMoveSelectionModule,
     LabelEditingModule,
     ModelingModule,
+    ModelingFeedbackModule,
     MoveModule,
     PaletteModule,
     ReplacePreviewModule,