camunda-bpmn-js 3.2.0 → 3.3.1

package/dist/camunda-cloud-modeler.development.js

@@ -82,15 +82,14 @@
    *
    * @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.
    *
@@ -98,10 +97,10 @@
    *
    * @return {String} id
    */
-
   Ids.prototype.next = function (element) {
     return this._seed(element || true);
   };
+
   /**
    * Generate a next id with a given prefix.
    *
@@ -109,61 +108,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);
     }
@@ -16263,62 +16255,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$1(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
 
@@ -17316,28 +17252,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 = [];
@@ -17415,8 +17330,6 @@
     }
   };
 
-  BaseViewer.prototype.importXML = wrapForCompatibility(BaseViewer.prototype.importXML);
-
 
   /**
    * Import parsed definitions and render a BPMN 2.0 diagram.
@@ -17447,8 +17360,6 @@
     return { warnings: result.warnings };
   };
 
-  BaseViewer.prototype.importDefinitions = wrapForCompatibility(BaseViewer.prototype.importDefinitions);
-
 
   /**
    * Open diagram of previously imported XML.
@@ -17510,8 +17421,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.
@@ -17586,8 +17495,6 @@
     return result;
   };
 
-  BaseViewer.prototype.saveXML = wrapForCompatibility(BaseViewer.prototype.saveXML);
-
 
   /**
    * Export the currently displayed BPMN 2.0 diagram as
@@ -17655,40 +17562,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;
   };
@@ -38311,7 +38184,7 @@
             property = reference.property;
 
         if (key === descriptor.id) {
-          element[ property ] = businessObject;
+          element.set(property, businessObject);
 
           array.push(descriptor.id);
         }
@@ -41519,7 +41392,8 @@
       assign$2(actions, {
         'append.text-annotation': appendAction(
           'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
         )
       });
     }
@@ -41535,7 +41409,8 @@
       assign$2(actions, {
         'append.text-annotation': appendAction(
           'bpmn:TextAnnotation',
-          'bpmn-icon-text-annotation'
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
         ),
 
         'connect': {
@@ -41586,7 +41461,11 @@
 
     if (is$6(businessObject, 'bpmn:Group')) {
       assign$2(actions, {
-        'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
+        'append.text-annotation': appendAction(
+          'bpmn:TextAnnotation',
+          'bpmn-icon-text-annotation',
+          translate('Append TextAnnotation')
+        )
       });
     }
 
@@ -46707,12 +46586,18 @@
       var sequenceFlows = [];
 
       if (is$6(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$6(connection.source, 'bpmn:EventBasedGateway');
-        });
+        sequenceFlows = target.incoming
+          .filter(flow =>
+            flow !== connection &&
+            isSequenceFlow(flow) &&
+            is$6(flow.source, 'bpmn:EventBasedGateway')
+          );
       }
 
       sequenceFlows.forEach(function(sequenceFlow) {
@@ -48736,51 +48621,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$6(target, 'bpmn:Collaboration') && is$6(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
@@ -50969,7 +50809,6 @@
       'labelBehavior',
       'layoutConnectionBehavior',
       'messageFlowBehavior',
-      'modelingFeedback',
       'removeElementBehavior',
       'removeEmbeddedLabelBoundsBehavior',
       'removeParticipantBehavior',
@@ -51008,7 +50847,6 @@
     labelBehavior: [ 'type', LabelBehavior ],
     layoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ],
     messageFlowBehavior: [ 'type', MessageFlowBehavior ],
-    modelingFeedback: [ 'type', ModelingFeedback ],
     removeElementBehavior: [ 'type', RemoveElementBehavior ],
     removeEmbeddedLabelBoundsBehavior: [ 'type', RemoveEmbeddedLabelBoundsBehavior ],
     removeParticipantBehavior: [ 'type', RemoveParticipantBehavior ],
@@ -54318,393 +54156,6 @@
     commandStack: [ 'type', CommandStack$1 ]
   };
 
-  /**
-   * @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$1 = new IdGenerator('tt');
-
-
-  function createRoot(parentNode) {
-    var root = domify$1(
-      '<div class="djs-tooltip-container" />'
-    );
-
-    assign$1(root, {
-      position: 'absolute',
-      width: '0',
-      height: '0'
-    });
-
-    parentNode.insertBefore(root, parentNode.firstChild);
-
-    return root;
-  }
-
-
-  function setPosition(el, x, y) {
-    assign$1(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$1;
-
-    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$2({}, 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$4(tooltip.html);
-      remove$4(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$2(html)) {
-      html = domify$1(html);
-    }
-
-    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
-    assign$1(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$2(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.
    *
@@ -61944,299 +61395,740 @@
     return matches && matches[0];
   }
 
-  function isOppositeOrientation(a, b) {
-    return oppositeOrientationMapping[a] === b;
-  }
+  function isOppositeOrientation(a, b) {
+    return oppositeOrientationMapping[a] === b;
+  }
+
+  function isOppositeHorizontalOrientation(a, b) {
+    var horizontalOrientation = getHorizontalOrientation(a);
+
+    var oppositeHorizontalOrientation = oppositeOrientationMapping[horizontalOrientation];
+
+    return b.indexOf(oppositeHorizontalOrientation) !== -1;
+  }
+
+  function isOppositeVerticalOrientation(a, b) {
+    var verticalOrientation = getVerticalOrientation(a);
+
+    var oppositeVerticalOrientation = oppositeOrientationMapping[verticalOrientation];
+
+    return b.indexOf(oppositeVerticalOrientation) !== -1;
+  }
+
+  function isHorizontalOrientation(orientation) {
+    return orientation === 'right' || orientation === 'left';
+  }
+
+  function getLoopPreferredLayout(source, connection) {
+    var waypoints = connection.waypoints;
+
+    var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
+
+    if (orientation === 'top') {
+      return [ 't:r' ];
+    } else if (orientation === 'right') {
+      return [ 'r:b' ];
+    } else if (orientation === 'left') {
+      return [ 'l:t' ];
+    }
+
+    return [ 'b:l' ];
+  }
+
+  function getBoundaryEventPreferredLayouts(source, target, end) {
+    var sourceMid = getMid(source),
+        targetMid = getMid(target),
+        attachOrientation = getAttachOrientation(source),
+        sourceLayout,
+        targetLayout;
+
+    var isLoop = isSame(source.host, target);
+
+    var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);
+
+    var targetOrientation = getOrientation(targetMid, sourceMid, {
+      x: source.width / 2 + target.width / 2,
+      y: source.height / 2 + target.height / 2
+    });
+
+    if (isLoop) {
+      return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end);
+    }
+
+    // source layout
+    sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide);
+
+    // target layout
+    targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide);
+
+    return [ sourceLayout + ':' + targetLayout ];
+  }
+
+  function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end) {
+    var orientation = attachedToSide ? attachOrientation : getVerticalOrientation(attachOrientation),
+        sourceLayout = orientationDirectionMapping[ orientation ],
+        targetLayout;
+
+    if (attachedToSide) {
+      if (isHorizontalOrientation(attachOrientation)) {
+        targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : 'b';
+      } else {
+        targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : 'l';
+      }
+    } else {
+      targetLayout = 'v';
+    }
+
+    return [ sourceLayout + ':' + targetLayout ];
+  }
+
+  function shouldConnectToSameSide(axis, source, target, end) {
+    var threshold = BOUNDARY_TO_HOST_THRESHOLD$1;
+
+    return !(
+      areCloseOnAxis(axis, end, target, threshold) ||
+      areCloseOnAxis(axis, end, {
+        x: target.x + target.width,
+        y: target.y + target.height
+      }, threshold) ||
+      areCloseOnAxis(axis, end, getMid(source), threshold)
+    );
+  }
+
+  function areCloseOnAxis(axis, a, b, threshold) {
+    return Math.abs(a[ axis ] - b[ axis ]) < threshold;
+  }
+
+  function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide) {
+
+    // attached to either top, right, bottom or left side
+    if (attachedToSide) {
+      return orientationDirectionMapping[ attachOrientation ];
+    }
+
+    // attached to either top-right, top-left, bottom-right or bottom-left corner
+
+    // same vertical or opposite horizontal orientation
+    if (isSame(
+      getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)
+    ) || isOppositeOrientation(
+      getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation)
+    )) {
+      return orientationDirectionMapping[ getVerticalOrientation(attachOrientation) ];
+    }
+
+    // fallback
+    return orientationDirectionMapping[ getHorizontalOrientation(attachOrientation) ];
+  }
+
+  function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide) {
+
+    // attached to either top, right, bottom or left side
+    if (attachedToSide) {
+      if (isHorizontalOrientation(attachOrientation)) {
+
+        // orientation is right or left
+
+        // opposite horizontal orientation or same orientation
+        if (
+          isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||
+          isSame(attachOrientation, targetOrientation)
+        ) {
+          return 'h';
+        }
+
+        // fallback
+        return 'v';
+      } else {
+
+        // orientation is top or bottom
+
+        // opposite vertical orientation or same orientation
+        if (
+          isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||
+          isSame(attachOrientation, targetOrientation)
+        ) {
+          return 'v';
+        }
+
+        // fallback
+        return 'h';
+      }
+    }
+
+    // attached to either top-right, top-left, bottom-right or bottom-left corner
+
+    // orientation is right, left
+    // or same vertical orientation but also right or left
+    if (isHorizontalOrientation(targetOrientation) ||
+      (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)) &&
+        getHorizontalOrientation(targetOrientation))) {
+      return 'h';
+    } else {
+      return 'v';
+    }
+  }
+
+  /**
+   * @typedef {import('../core/ElementRegistry').default} ElementRegistry
+   * @typedef {import('../core/GraphicsFactory').default} GraphicsFactory
+   */
+
+  function dockingToPoint(docking) {
+
+    // use the dockings actual point and
+    // retain the original docking
+    return assign$2({ original: docking.point.original || docking.point }, docking.actual);
+  }
+
+
+  /**
+   * A {@link ConnectionDocking} that crops connection waypoints based on
+   * the path(s) of the connection source and target.
+   *
+   * @param {ElementRegistry} elementRegistry
+   * @param {GraphicsFactory} graphicsFactory
+   */
+  function CroppingConnectionDocking(elementRegistry, graphicsFactory) {
+    this._elementRegistry = elementRegistry;
+    this._graphicsFactory = graphicsFactory;
+  }
+
+  CroppingConnectionDocking.$inject = [ 'elementRegistry', 'graphicsFactory' ];
+
+
+  /**
+   * @inheritDoc ConnectionDocking#getCroppedWaypoints
+   */
+  CroppingConnectionDocking.prototype.getCroppedWaypoints = function(connection, source, target) {
+
+    source = source || connection.source;
+    target = target || connection.target;
+
+    var sourceDocking = this.getDockingPoint(connection, source, true),
+        targetDocking = this.getDockingPoint(connection, target);
+
+    var croppedWaypoints = connection.waypoints.slice(sourceDocking.idx + 1, targetDocking.idx);
+
+    croppedWaypoints.unshift(dockingToPoint(sourceDocking));
+    croppedWaypoints.push(dockingToPoint(targetDocking));
+
+    return croppedWaypoints;
+  };
+
+  /**
+   * Return the connection docking point on the specified shape
+   *
+   * @inheritDoc ConnectionDocking#getDockingPoint
+   */
+  CroppingConnectionDocking.prototype.getDockingPoint = function(connection, shape, dockStart) {
+
+    var waypoints = connection.waypoints,
+        dockingIdx,
+        dockingPoint,
+        croppedPoint;
+
+    dockingIdx = dockStart ? 0 : waypoints.length - 1;
+    dockingPoint = waypoints[dockingIdx];
+
+    croppedPoint = this._getIntersection(shape, connection, dockStart);
+
+    return {
+      point: dockingPoint,
+      actual: croppedPoint || dockingPoint,
+      idx: dockingIdx
+    };
+  };
+
+
+  // helpers //////////////////////
+
+  CroppingConnectionDocking.prototype._getIntersection = function(shape, connection, takeFirst) {
+
+    var shapePath = this._getShapePath(shape),
+        connectionPath = this._getConnectionPath(connection);
+
+    return getElementLineIntersection(shapePath, connectionPath, takeFirst);
+  };
+
+  CroppingConnectionDocking.prototype._getConnectionPath = function(connection) {
+    return this._graphicsFactory.getConnectionPath(connection);
+  };
+
+  CroppingConnectionDocking.prototype._getShapePath = function(shape) {
+    return this._graphicsFactory.getShapePath(shape);
+  };
+
+  CroppingConnectionDocking.prototype._getGfx = function(element) {
+    return this._elementRegistry.getGraphics(element);
+  };
+
+  var ModelingModule = {
+    __init__: [
+      'modeling',
+      'bpmnUpdater'
+    ],
+    __depends__: [
+      BehaviorModule,
+      RulesModule,
+      DiOrderingModule,
+      OrderingModule,
+      ReplaceModule,
+      CommandModule,
+      LabelSupportModule,
+      AttachSupportModule,
+      SelectionModule,
+      ChangeSupportModule,
+      SpaceToolModule
+    ],
+    bpmnFactory: [ 'type', BpmnFactory ],
+    bpmnUpdater: [ 'type', BpmnUpdater ],
+    elementFactory: [ 'type', ElementFactory ],
+    modeling: [ 'type', Modeling ],
+    layouter: [ 'type', BpmnLayouter ],
+    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$1 = new IdGenerator('tt');
+
+
+  function createRoot(parentNode) {
+    var root = domify$1(
+      '<div class="djs-tooltip-container" />'
+    );
+
+    assign$1(root, {
+      position: 'absolute',
+      width: '0',
+      height: '0'
+    });
+
+    parentNode.insertBefore(root, parentNode.firstChild);
+
+    return root;
+  }
+
+
+  function setPosition(el, x, y) {
+    assign$1(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$1;
+
+    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$2({}, this._tooltipDefaults, tooltip, {
+      id: id
+    });
+
+    this._addTooltip(tooltip);
 
-  function isOppositeHorizontalOrientation(a, b) {
-    var horizontalOrientation = getHorizontalOrientation(a);
+    if (tooltip.timeout) {
+      this.setTimeout(tooltip);
+    }
 
-    var oppositeHorizontalOrientation = oppositeOrientationMapping[horizontalOrientation];
+    return id;
+  };
 
-    return b.indexOf(oppositeHorizontalOrientation) !== -1;
-  }
+  /**
+   * @param {string} action
+   * @param {Event} event
+   */
+  Tooltips.prototype.trigger = function(action, event) {
 
-  function isOppositeVerticalOrientation(a, b) {
-    var verticalOrientation = getVerticalOrientation(a);
+    var node = event.delegateTarget || event.target;
 
-    var oppositeVerticalOrientation = oppositeOrientationMapping[verticalOrientation];
+    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));
 
-    return b.indexOf(oppositeVerticalOrientation) !== -1;
-  }
+    if (!tooltip) {
+      return;
+    }
 
-  function isHorizontalOrientation(orientation) {
-    return orientation === 'right' || orientation === 'left';
-  }
+    if (action === 'mouseover' && tooltip.timeout) {
+      this.clearTimeout(tooltip);
+    }
 
-  function getLoopPreferredLayout(source, connection) {
-    var waypoints = connection.waypoints;
+    if (action === 'mouseout' && tooltip.timeout) {
 
-    var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
+      // cut timeout after mouse out
+      tooltip.timeout = 1000;
 
-    if (orientation === 'top') {
-      return [ 't:r' ];
-    } else if (orientation === 'right') {
-      return [ 'r:b' ];
-    } else if (orientation === 'left') {
-      return [ 'l:t' ];
+      this.setTimeout(tooltip);
     }
+  };
 
-    return [ 'b:l' ];
-  }
+  /**
+   * Get tooltip with given ID.
+   *
+   * @param {Tooltip|string} id
+   *
+   * @return {Tooltip|undefined}
+   */
+  Tooltips.prototype.get = function(id) {
 
-  function getBoundaryEventPreferredLayouts(source, target, end) {
-    var sourceMid = getMid(source),
-        targetMid = getMid(target),
-        attachOrientation = getAttachOrientation(source),
-        sourceLayout,
-        targetLayout;
+    if (typeof id !== 'string') {
+      id = id.id;
+    }
 
-    var isLoop = isSame(source.host, target);
+    return this._tooltips[id];
+  };
 
-    var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);
+  /**
+   * @param {Tooltip} tooltip
+   */
+  Tooltips.prototype.clearTimeout = function(tooltip) {
 
-    var targetOrientation = getOrientation(targetMid, sourceMid, {
-      x: source.width / 2 + target.width / 2,
-      y: source.height / 2 + target.height / 2
-    });
+    tooltip = this.get(tooltip);
 
-    if (isLoop) {
-      return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end);
+    if (!tooltip) {
+      return;
     }
 
-    // source layout
-    sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide);
+    var removeTimer = tooltip.removeTimer;
 
-    // target layout
-    targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide);
+    if (removeTimer) {
+      clearTimeout(removeTimer);
+      tooltip.removeTimer = null;
+    }
+  };
 
-    return [ sourceLayout + ':' + targetLayout ];
-  }
+  /**
+   * @param {Tooltip} tooltip
+   */
+  Tooltips.prototype.setTimeout = function(tooltip) {
 
-  function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end) {
-    var orientation = attachedToSide ? attachOrientation : getVerticalOrientation(attachOrientation),
-        sourceLayout = orientationDirectionMapping[ orientation ],
-        targetLayout;
+    tooltip = this.get(tooltip);
 
-    if (attachedToSide) {
-      if (isHorizontalOrientation(attachOrientation)) {
-        targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : 'b';
-      } else {
-        targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : 'l';
-      }
-    } else {
-      targetLayout = 'v';
+    if (!tooltip) {
+      return;
     }
 
-    return [ sourceLayout + ':' + targetLayout ];
-  }
+    this.clearTimeout(tooltip);
 
-  function shouldConnectToSameSide(axis, source, target, end) {
-    var threshold = BOUNDARY_TO_HOST_THRESHOLD$1;
+    var self = this;
 
-    return !(
-      areCloseOnAxis(axis, end, target, threshold) ||
-      areCloseOnAxis(axis, end, {
-        x: target.x + target.width,
-        y: target.y + target.height
-      }, threshold) ||
-      areCloseOnAxis(axis, end, getMid(source), threshold)
-    );
-  }
+    tooltip.removeTimer = setTimeout(function() {
+      self.remove(tooltip);
+    }, tooltip.timeout);
+  };
 
-  function areCloseOnAxis(axis, a, b, threshold) {
-    return Math.abs(a[ axis ] - b[ axis ]) < threshold;
-  }
+  /**
+   * Remove tooltip with given ID.
+   *
+   * @param {string | Tooltip} id
+   */
+  Tooltips.prototype.remove = function(id) {
 
-  function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide) {
+    var tooltip = this.get(id);
 
-    // attached to either top, right, bottom or left side
-    if (attachedToSide) {
-      return orientationDirectionMapping[ attachOrientation ];
-    }
+    if (tooltip) {
+      remove$4(tooltip.html);
+      remove$4(tooltip.htmlContainer);
 
-    // attached to either top-right, top-left, bottom-right or bottom-left corner
+      delete tooltip.htmlContainer;
 
-    // same vertical or opposite horizontal orientation
-    if (isSame(
-      getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)
-    ) || isOppositeOrientation(
-      getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation)
-    )) {
-      return orientationDirectionMapping[ getVerticalOrientation(attachOrientation) ];
+      delete this._tooltips[tooltip.id];
     }
+  };
 
-    // fallback
-    return orientationDirectionMapping[ getHorizontalOrientation(attachOrientation) ];
-  }
 
-  function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide) {
+  Tooltips.prototype.show = function() {
+    setVisible(this._tooltipRoot);
+  };
 
-    // attached to either top, right, bottom or left side
-    if (attachedToSide) {
-      if (isHorizontalOrientation(attachOrientation)) {
 
-        // orientation is right or left
+  Tooltips.prototype.hide = function() {
+    setVisible(this._tooltipRoot, false);
+  };
 
-        // opposite horizontal orientation or same orientation
-        if (
-          isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||
-          isSame(attachOrientation, targetOrientation)
-        ) {
-          return 'h';
-        }
 
-        // fallback
-        return 'v';
-      } else {
+  Tooltips.prototype._updateRoot = function(viewbox) {
+    var a = viewbox.scale || 1;
+    var d = viewbox.scale || 1;
 
-        // orientation is top or bottom
+    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';
 
-        // opposite vertical orientation or same orientation
-        if (
-          isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||
-          isSame(attachOrientation, targetOrientation)
-        ) {
-          return 'v';
-        }
+    this._tooltipRoot.style.transform = matrix;
+    this._tooltipRoot.style['-ms-transform'] = matrix;
+  };
 
-        // fallback
-        return 'h';
-      }
-    }
 
-    // attached to either top-right, top-left, bottom-right or bottom-left corner
+  Tooltips.prototype._addTooltip = function(tooltip) {
 
-    // orientation is right, left
-    // or same vertical orientation but also right or left
-    if (isHorizontalOrientation(targetOrientation) ||
-      (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)) &&
-        getHorizontalOrientation(targetOrientation))) {
-      return 'h';
-    } else {
-      return 'v';
+    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);
     }
-  }
 
-  /**
-   * @typedef {import('../core/ElementRegistry').default} ElementRegistry
-   * @typedef {import('../core/GraphicsFactory').default} GraphicsFactory
-   */
+    // create proper html elements from
+    // tooltip HTML strings
+    if (isString$2(html)) {
+      html = domify$1(html);
+    }
 
-  function dockingToPoint(docking) {
+    htmlContainer = domify$1('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
+    assign$1(htmlContainer, { position: 'absolute' });
 
-    // use the dockings actual point and
-    // retain the original docking
-    return assign$2({ original: docking.point.original || docking.point }, docking.actual);
-  }
+    htmlContainer.appendChild(html);
 
+    if (tooltip.type) {
+      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
+    }
 
-  /**
-   * A {@link ConnectionDocking} that crops connection waypoints based on
-   * the path(s) of the connection source and target.
-   *
-   * @param {ElementRegistry} elementRegistry
-   * @param {GraphicsFactory} graphicsFactory
-   */
-  function CroppingConnectionDocking(elementRegistry, graphicsFactory) {
-    this._elementRegistry = elementRegistry;
-    this._graphicsFactory = graphicsFactory;
-  }
+    if (tooltip.className) {
+      classes$1(htmlContainer).add(tooltip.className);
+    }
 
-  CroppingConnectionDocking.$inject = [ 'elementRegistry', 'graphicsFactory' ];
+    tooltip.htmlContainer = htmlContainer;
 
+    tooltipRoot.appendChild(htmlContainer);
 
-  /**
-   * @inheritDoc ConnectionDocking#getCroppedWaypoints
-   */
-  CroppingConnectionDocking.prototype.getCroppedWaypoints = function(connection, source, target) {
+    this._tooltips[id] = tooltip;
 
-    source = source || connection.source;
-    target = target || connection.target;
+    this._updateTooltip(tooltip);
+  };
 
-    var sourceDocking = this.getDockingPoint(connection, source, true),
-        targetDocking = this.getDockingPoint(connection, target);
 
-    var croppedWaypoints = connection.waypoints.slice(sourceDocking.idx + 1, targetDocking.idx);
+  Tooltips.prototype._updateTooltip = function(tooltip) {
 
-    croppedWaypoints.unshift(dockingToPoint(sourceDocking));
-    croppedWaypoints.push(dockingToPoint(targetDocking));
+    var position = tooltip.position,
+        htmlContainer = tooltip.htmlContainer;
 
-    return croppedWaypoints;
+    // update overlay html based on tooltip x, y
+
+    setPosition(htmlContainer, position.x, position.y);
   };
 
-  /**
-   * Return the connection docking point on the specified shape
-   *
-   * @inheritDoc ConnectionDocking#getDockingPoint
-   */
-  CroppingConnectionDocking.prototype.getDockingPoint = function(connection, shape, dockStart) {
 
-    var waypoints = connection.waypoints,
-        dockingIdx,
-        dockingPoint,
-        croppedPoint;
+  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {
 
-    dockingIdx = dockStart ? 0 : waypoints.length - 1;
-    dockingPoint = waypoints[dockingIdx];
+    forEach$2(this._tooltips, function(tooltip) {
+      var show = tooltip.show,
+          htmlContainer = tooltip.htmlContainer,
+          visible = true;
 
-    croppedPoint = this._getIntersection(shape, connection, dockStart);
+      if (show) {
+        if (show.minZoom > viewbox.scale ||
+            show.maxZoom < viewbox.scale) {
+          visible = false;
+        }
 
-    return {
-      point: dockingPoint,
-      actual: croppedPoint || dockingPoint,
-      idx: dockingIdx
-    };
+        setVisible(htmlContainer, visible);
+      }
+    });
   };
 
+  Tooltips.prototype._init = function() {
 
-  // helpers //////////////////////
+    var self = this;
 
-  CroppingConnectionDocking.prototype._getIntersection = function(shape, connection, takeFirst) {
+    // scroll/zoom integration
 
-    var shapePath = this._getShapePath(shape),
-        connectionPath = this._getConnectionPath(connection);
+    function updateViewbox(viewbox) {
+      self._updateRoot(viewbox);
+      self._updateTooltipVisibilty(viewbox);
 
-    return getElementLineIntersection(shapePath, connectionPath, takeFirst);
-  };
+      self.show();
+    }
 
-  CroppingConnectionDocking.prototype._getConnectionPath = function(connection) {
-    return this._graphicsFactory.getConnectionPath(connection);
-  };
+    this._eventBus.on('canvas.viewbox.changing', function(event) {
+      self.hide();
+    });
 
-  CroppingConnectionDocking.prototype._getShapePath = function(shape) {
-    return this._graphicsFactory.getShapePath(shape);
+    this._eventBus.on('canvas.viewbox.changed', function(event) {
+      updateViewbox(event.viewbox);
+    });
   };
 
-  CroppingConnectionDocking.prototype._getGfx = function(element) {
-    return this._elementRegistry.getGraphics(element);
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var TooltipsModule = {
+    __init__: [ 'tooltips' ],
+    tooltips: [ 'type', Tooltips ]
   };
 
-  var ModelingModule = {
-    __init__: [
-      'modeling',
-      'bpmnUpdater'
-    ],
+  /**
+   * @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$6(target, 'bpmn:Collaboration') && is$6(shape, 'bpmn:FlowNode')) {
+        showError(event, translate(COLLAB_ERR_MSG));
+      }
+    });
+
+  }
+
+  ModelingFeedback.$inject = [
+    'eventBus',
+    'tooltips',
+    'translate'
+  ];
+
+  var ModelingFeedbackModule = {
     __depends__: [
-      BehaviorModule,
-      RulesModule,
-      DiOrderingModule,
-      OrderingModule,
-      ReplaceModule,
-      CommandModule,
-      TooltipsModule,
-      LabelSupportModule,
-      AttachSupportModule,
-      SelectionModule,
-      ChangeSupportModule,
-      SpaceToolModule
+      TooltipsModule
     ],
-    bpmnFactory: [ 'type', BpmnFactory ],
-    bpmnUpdater: [ 'type', BpmnUpdater ],
-    elementFactory: [ 'type', ElementFactory ],
-    modeling: [ 'type', Modeling ],
-    layouter: [ 'type', BpmnLayouter ],
-    connectionDocking: [ 'type', CroppingConnectionDocking ]
+    __init__: [
+      'modelingFeedback'
+    ],
+    modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
   /**
@@ -66251,8 +66143,6 @@
     return this.importXML(initialDiagram);
   };
 
-  Modeler$2.prototype.createDiagram = wrapForCompatibility(Modeler$2.prototype.createDiagram);
-
 
   Modeler$2.prototype._interactionModules = [
 
@@ -66284,6 +66174,7 @@
     KeyboardMoveSelectionModule,
     LabelEditingModule,
     ModelingModule,
+    ModelingFeedbackModule,
     MoveModule,
     PaletteModule,
     ReplacePreviewModule,
@@ -118877,7 +118768,8 @@
       feel: 'optional',
       getValue,
       setValue,
-      debounce
+      debounce,
+      tooltip: translate('Specifies the number of times the job is retried when a worker signals failure. The default is three.')
     });
   }
 
@@ -119944,159 +119836,235 @@
   const TooltipProvider = {
     'group-assignmentDefinition': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/user-tasks/#assignments",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('User task documentation'),
-        children: translate('How to configure a user task')
+      return o$3("div", {
+        children: [translate('Define who the task is assigned to. One or all of the following attributes can be specified simultaneously. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/user-tasks/#assignments",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('User task documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-condition': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/exclusive-gateways/#conditions",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Conditions documentation'),
-        children: translate('How to define conditions')
+      return o$3("div", {
+        children: [translate('Define a boolean condition expression that defines when this flow is taken. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/exclusive-gateways/#conditions",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Conditions documentation'),
+          children: translate('Learn how to define conditions.')
+        })]
       });
     },
     'group-businessRuleImplementation': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/business-rule-tasks/#defining-a-task",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Business rule task documentation'),
-        children: translate('How to configure a business rule task')
+      return o$3("div", {
+        children: [translate('Evaluate a business rule, for example a DMN. To add a custom implementation, use a job worker. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/business-rule-tasks/#defining-a-task",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Business rule task documentation'),
+          children: translate('Learn more.')
+        })]
+      });
+    },
+    'group-scriptImplementation': element => {
+      const translate = useService('translate');
+      return o$3("div", {
+        children: [translate('Implement a script task using an inline FEEL expression. To add a custom implementation, use a job worker. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/script-tasks/#defining-a-script-task",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Script task documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-form': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/guides/utilizing-forms/#connect-your-form-to-a-bpmn-diagram",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('User task form documentation'),
-        children: translate('How to link a form')
+      return o$3("div", {
+        children: [translate('Embed a form created with the Camunda Forms editor. To associate a custom form, application, or URL to the user task, specify a form key. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/guides/utilizing-forms/#connect-your-form-to-a-bpmn-diagram",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('User task form documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-message': element => {
       const translate = useService('translate');
       if (is$6(element, 'bpmn:ReceiveTask')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/receive-tasks/#messages",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Receive task documentation'),
-          children: translate('How to configure a receive task')
+        return o$3("div", {
+          children: [translate('Define the name of the message (e.g. '), o$3("code", {
+            children: "Money collected"
+          }), translate(') and the '), o$3("code", {
+            children: "correlationKey"
+          }), translate(' expression (e.g. '), o$3("code", {
+            children: "= orderId"
+          }), translate(')'), translate(' to subscribe to. '), translate('Learn more how to '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/send-tasks",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Send task documentation'),
+            children: translate('send ')
+          }), translate('and '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/receive-tasks",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Receive task documentation'),
+            children: translate('receive messages. ')
+          })]
         });
       }
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/message-events/#messages",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Message event documentation'),
-        children: translate('How to configure a message event')
+      return o$3("div", {
+        children: [translate('Define the name of the message (e.g. '), o$3("code", {
+          children: "Money collected"
+        }), translate(') and the '), o$3("code", {
+          children: "correlationKey"
+        }), translate(' expression (e.g. '), o$3("code", {
+          children: "= orderId"
+        }), translate(')'), translate(' to subscribe to. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/message-events/#messages",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Message event documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-calledElement': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/call-activities/",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Call activity documentation'),
-        children: translate('How to call another process')
+      return o$3("div", {
+        children: [translate('Define the ID of the process to call (e.g. '), " ", o$3("code", {
+          children: "shipping-process"
+        }), translate(' or '), o$3("code", {
+          children: "= \"shipping-\" + tenantId"
+        }), " ", translate('). '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/call-activities/",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Call activity documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-taskDefinition': element => {
       const translate = useService('translate');
       if (is$6(element, 'bpmn:ServiceTask')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/service-tasks/#task-definition",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Service task documentation'),
-          children: translate('How to configure a service task')
+        return o$3("div", {
+          children: [translate('Specify which job workers handle the task work to execute a service (e.g. '), o$3("code", {
+            children: "order-items"
+          }), translate('). '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/service-tasks",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Service task documentation'),
+            children: translate('Learn more.')
+          })]
         });
       }
       if (is$6(element, 'bpmn:BusinessRuleTask')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/business-rule-tasks/#defining-a-task",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Business rule task documentation'),
-          children: translate('How to configure a business rule task')
+        return o$3("div", {
+          children: [translate('Specify which job workers handle the task work to evaluate business rules. '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/business-rule-tasks/#job-worker-implementation",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Business rule task documentation'),
+            children: translate('Learn more.')
+          })]
         });
       }
       if (is$6(element, 'bpmn:ScriptTask')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/script-tasks/#defining-a-task",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Script task documentation'),
-          children: translate('How to configure a script task')
+        return o$3("div", {
+          children: [translate('Specify which job workers handle the task work to execute a script. '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/script-tasks/#defining-a-task",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Script task documentation'),
+            children: translate('Learn more.')
+          })]
         });
       }
       if (is$6(element, 'bpmn:SendTask')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/send-tasks/#defining-a-task",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Send task documentation'),
-          children: translate('How to configure a send task')
+        return o$3("div", {
+          children: [translate('Specify which job workers handle the task work to send a message (e.g. '), o$3("code", {
+            children: "kafka"
+          }), translate(' or '), o$3("code", {
+            children: "mail"
+          }), translate('). '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/send-tasks/#defining-a-task",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Send task documentation'),
+            children: translate('Learn more.')
+          })]
         });
       }
       if (is$6(element, 'bpmn:ThrowEvent')) {
-        return o$3("a", {
-          href: "https://docs.camunda.io/docs/components/modeler/bpmn/message-events/#message-throw-events",
-          target: "_blank",
-          rel: "noopener",
-          title: translate('Message throw event documentation'),
-          children: translate('How to configure a message throw event')
+        return o$3("div", {
+          children: [translate('Specify which job workers handle the event work. '), o$3("a", {
+            href: "https://docs.camunda.io/docs/components/modeler/bpmn/message-events/#message-throw-events",
+            target: "_blank",
+            rel: "noopener",
+            title: translate('Message throw event documentation'),
+            children: translate('Learn more.')
+          })]
         });
       }
     },
     'group-multiInstance': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/multi-instance/#defining-the-collection-to-iterate-over",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Multi instance documentation'),
-        children: translate('How to configure a multi instance activity')
+      return o$3("div", {
+        children: [translate('Execute this task for each element of a given collection. '), o$3("br", {}), translate('Define an input collection expression that defines the collection to iterate over (e.g. '), o$3("code", {
+          children: "= items"
+        }), translate('). '), translate('To collect the output define the output collection and the output element expressions. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/multi-instance/#defining-the-collection-to-iterate-over",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Multi instance documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-error': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/bpmn/error-events/#defining-the-error",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Error event documentation'),
-        children: translate('How to configure an error event')
+      return o$3("div", {
+        children: [translate('Define an error code (e.g. '), o$3("code", {
+          children: "order-not-found"
+        }), translate('). '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/modeler/bpmn/error-events/#defining-the-error",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Error event documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-inputs': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/concepts/variables/#input-mappings",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Input mappings documentation'),
-        children: translate('How to configure input variable mappings')
+      return o$3("div", {
+        children: [translate('Create a new local variable in the scope of this task. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/concepts/variables/#input-mappings",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Input mappings documentation'),
+          children: translate('Learn more.')
+        })]
       });
     },
     'group-outputs': element => {
       const translate = useService('translate');
-      return o$3("a", {
-        href: "https://docs.camunda.io/docs/components/concepts/variables/#output-mappings",
-        target: "_blank",
-        rel: "noopener",
-        title: translate('Output mappings documentation'),
-        children: translate('How to configure output variable mappings')
+      return o$3("div", {
+        children: [translate('Customize how result variables are merged into the global scope of the process instance. '), o$3("a", {
+          href: "https://docs.camunda.io/docs/components/concepts/variables/#output-mappings",
+          target: "_blank",
+          rel: "noopener",
+          title: translate('Output mappings documentation'),
+          children: translate('Learn more.')
+        })]
       });
     }
   };