bpmn-js 17.11.1 → 18.0.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v17.11.1
+ * bpmn-js - bpmn-modeler v18.0.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2024-09-16
+ * Date: 2024-11-06
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -5060,6 +5060,11 @@
      */
     this._rootElement = null;
 
+    /**
+     * @type {boolean}
+     */
+    this._focused = false;
+
     this._init(config || {});
   }
 
@@ -5086,14 +5091,33 @@
    * @param {CanvasConfig} config
    */
   Canvas.prototype._init = function(config) {
-
     const eventBus = this._eventBus;
 
     // html container
     const container = this._container = createContainer(config);
 
     const svg = this._svg = create$1('svg');
-    attr(svg, { width: '100%', height: '100%' });
+
+    attr(svg, {
+      width: '100%',
+      height: '100%'
+    });
+
+    attr$1(svg, 'tabindex', 0);
+
+    eventBus.on('element.hover', () => {
+      this.restoreFocus();
+    });
+
+    svg.addEventListener('focusin', () => {
+      this._focused = true;
+      eventBus.fire('canvas.focus.changed', { focused: true });
+    });
+
+    svg.addEventListener('focusout', () => {
+      this._focused = false;
+      eventBus.fire('canvas.focus.changed', { focused: false });
+    });
 
     append(container, svg);
 
@@ -5185,6 +5209,31 @@
     delete this._cachedViewbox;
   };
 
+  /**
+  * Sets focus on the canvas SVG element.
+  */
+  Canvas.prototype.focus = function() {
+    this._svg.focus({ preventScroll: true });
+  };
+
+  /**
+  * Sets focus on the canvas SVG element if `document.body` is currently focused.
+  */
+  Canvas.prototype.restoreFocus = function() {
+    if (document.activeElement === document.body) {
+      this.focus();
+    }
+  };
+
+  /**
+  * Returns true if the canvas is focused.
+  *
+  * @return {boolean}
+  */
+  Canvas.prototype.isFocused = function() {
+    return this._focused;
+  };
+
   /**
    * Returns the default layer on which
    * all elements are drawn.
@@ -6024,7 +6073,7 @@
   Canvas.prototype.viewbox = function(box) {
 
     if (box === undefined && this._cachedViewbox) {
-      return this._cachedViewbox;
+      return structuredClone(this._cachedViewbox);
     }
 
     const viewport = this._viewport,
@@ -8708,13 +8757,15 @@
     if (parts.length === 1) {
       localName = name;
       prefix = defaultPrefix;
-    } else
+    }
 
     // prefix + local name
-    if (parts.length === 2) {
+    else if (parts.length === 2) {
       localName = parts[1];
       prefix = parts[0];
-    } else {
+    }
+
+    else {
       throw new Error('expected <prefix:localName> or <localName>, got ' + name);
     }
 
@@ -9616,7 +9667,7 @@
    * sub-set of reserved names (&amp;) as well as
    * hex (&#xaaf;) and decimal (&#1231;) encoded characters.
    *
-   * @param {string} str
+   * @param {string} s
    *
    * @return {string} decoded string
    */
@@ -9628,10 +9679,6 @@
     return s;
   }
 
-  var XSI_URI = 'http://www.w3.org/2001/XMLSchema-instance';
-  var XSI_PREFIX = 'xsi';
-  var XSI_TYPE$1 = 'xsi:type';
-
   var NON_WHITESPACE_OUTSIDE_ROOT_NODE = 'non-whitespace outside of root node';
 
   function error$2(msg) {
@@ -9676,7 +9723,7 @@
   }
 
   function noopGetContext() {
-    return { 'line': 0, 'column': 0 };
+    return { line: 0, column: 0 };
   }
 
   function throwFunc(err) {
@@ -9842,9 +9889,6 @@
         _nsUriToPrefix[k] = nsMap[k];
       }
 
-      // FORCE default mapping for schema instance
-      _nsUriToPrefix[XSI_URI] = XSI_PREFIX;
-
       isNamespace = true;
       nsUriToPrefix = _nsUriToPrefix;
 
@@ -10168,23 +10212,6 @@
 
           // end: normalize ns attribute name
 
-          // normalize xsi:type ns attribute value
-          if (name === XSI_TYPE$1) {
-            w = value.indexOf(':');
-
-            if (w !== -1) {
-              nsName = value.substring(0, w);
-
-              // handle default prefixes, i.e. xs:String gracefully
-              nsName = nsMatrix[nsName] || nsName;
-              value = nsName + value.substring(w);
-            } else {
-              value = defaultAlias + ':' + value;
-            }
-          }
-
-          // end: normalize xsi:type ns attribute value
-
           attrs[name] = value;
         }
 
@@ -10213,23 +10240,6 @@
                 : nsName + name.substr(w);
 
               // end: normalize ns attribute name
-
-              // normalize xsi:type ns attribute value
-              if (name === XSI_TYPE$1) {
-                w = value.indexOf(':');
-
-                if (w !== -1) {
-                  nsName = value.substring(0, w);
-
-                  // handle default prefixes, i.e. xs:String gracefully
-                  nsName = nsMatrix[nsName] || nsName;
-                  value = nsName + value.substring(w);
-                } else {
-                  value = defaultAlias + ':' + value;
-                }
-              }
-
-              // end: normalize xsi:type ns attribute value
             }
 
             attrs[name] = value;
@@ -10370,11 +10380,11 @@
           }
         }
 
-        w = xml.charCodeAt(i+1);
+        w = xml.charCodeAt(i + 1);
 
         // parse comments + CDATA
         if (w === 33) { // "!"
-          q = xml.charCodeAt(i+2);
+          q = xml.charCodeAt(i + 2);
 
           // CDATA section
           if (q === 91 && xml.substr(i + 3, 6) === 'CDATA[') { // 91 == "["
@@ -10658,18 +10668,16 @@
     'xml': 'http://www.w3.org/XML/1998/namespace'
   };
 
-  var XSI_TYPE = 'xsi:type';
+  var SERIALIZE_PROPERTY = 'property';
 
-  function serializeFormat(element) {
+  function getSerialization(element) {
     return element.xml && element.xml.serialize;
   }
 
-  function serializeAsType(element) {
-    return serializeFormat(element) === XSI_TYPE;
-  }
+  function getSerializationType(element) {
+    const type = getSerialization(element);
 
-  function serializeAsProperty(element) {
-    return serializeFormat(element) === 'property';
+    return type !== SERIALIZE_PROPERTY && (type || null);
   }
 
   function capitalize(str) {
@@ -10685,12 +10693,20 @@
     return aliasNs.prefix + ':' + capitalize(aliasNs.localName);
   }
 
+  /**
+   * Un-prefix a potentially prefixed type name.
+   *
+   * @param {NsName} nameNs
+   * @param {Object} [pkg]
+   *
+   * @return {string}
+   */
   function prefixedToName(nameNs, pkg) {
 
     var name = nameNs.name,
         localName = nameNs.localName;
 
-    var typePrefix = pkg.xml && pkg.xml.typePrefix;
+    var typePrefix = pkg && pkg.xml && pkg.xml.typePrefix;
 
     if (typePrefix && localName.indexOf(typePrefix) === 0) {
       return nameNs.prefix + ':' + localName.slice(typePrefix.length);
@@ -10699,12 +10715,19 @@
     }
   }
 
-  function normalizeXsiTypeName(name, model) {
+  function normalizeTypeName(name, nsMap, model) {
 
-    var nameNs = parseName(name);
-    var pkg = model.getPackage(nameNs.prefix);
+    // normalize against actual NS
+    const nameNs = parseName(name, nsMap.xmlns);
 
-    return prefixedToName(nameNs, pkg);
+    const normalizedName = `${ nsMap[nameNs.prefix] || nameNs.prefix }:${ nameNs.localName }`;
+
+    const normalizedNameNs = parseName(normalizedName);
+
+    // determine actual type name, based on package-defined prefix
+    var pkg = model.getPackage(normalizedNameNs.prefix);
+
+    return prefixedToName(normalizedNameNs, pkg);
   }
 
   function error$1(message) {
@@ -10993,8 +11016,9 @@
       } else {
         if (prop) {
           value = coerceType(prop.type, value);
-        } else
-        if (name !== 'xmlns') {
+        } else if (name === 'xmlns') {
+          name = ':' + name;
+        } else {
           propNameNs = parseName(name, descriptor.ns.prefix);
 
           // check whether attribute is defined in a well-known namespace
@@ -11027,26 +11051,27 @@
         descriptor = getModdleDescriptor(type);
 
     var propertyName = nameNs.name,
-        property = descriptor.propertiesByName[propertyName],
-        elementTypeName,
-        elementType;
+        property = descriptor.propertiesByName[propertyName];
 
     // search for properties by name first
 
     if (property && !property.isAttr) {
 
-      if (serializeAsType(property)) {
-        elementTypeName = node.attributes[XSI_TYPE];
+      const serializationType = getSerializationType(property);
+
+      if (serializationType) {
+        const elementTypeName = node.attributes[serializationType];
 
-        // xsi type is optional, if it does not exists the
+        // type is optional, if it does not exists the
         // default type is assumed
         if (elementTypeName) {
 
+          // convert the prefix used to the mapped form, but also
           // take possible type prefixes from XML
-          // into account, i.e.: xsi:type="t{ActualType}"
-          elementTypeName = normalizeXsiTypeName(elementTypeName, model);
+          // into account, i.e.: xsi:type="t{ActualType}",
+          const normalizedTypeName = normalizeTypeName(elementTypeName, node.ns, model);
 
-          elementType = model.getType(elementTypeName);
+          const elementType = model.getType(normalizedTypeName);
 
           return assign$1({}, property, {
             effectiveType: getModdleDescriptor(elementType).name
@@ -11061,8 +11086,8 @@
     var pkg = model.getPackage(nameNs.prefix);
 
     if (pkg) {
-      elementTypeName = aliasToName(nameNs, pkg);
-      elementType = model.getType(elementTypeName);
+      const elementTypeName = aliasToName(nameNs, pkg);
+      const elementType = model.getType(elementTypeName);
 
       // search for collection members later
       property = find(descriptor.properties, function(p) {
@@ -11484,9 +11509,12 @@
       uriMap[p.uri] = p.prefix;
 
       return uriMap;
-    }, {
-      'http://www.w3.org/XML/1998/namespace': 'xml' // add default xml ns
-    });
+    }, Object.entries(DEFAULT_NS_MAP).reduce(function(map, [ prefix, url ]) {
+      map[url] = prefix;
+
+      return map;
+    }, model.config && model.config.nsMap || {}));
+
     parser
       .ns(uriMap)
       .on('openTag', function(obj, decodeStr, selfClosing, getContext) {
@@ -11587,75 +11615,82 @@
 
   function Namespaces(parent) {
 
-    var prefixMap = {};
-    var uriMap = {};
-    var used = {};
+    this.prefixMap = {};
+    this.uriMap = {};
+    this.used = {};
 
-    var wellknown = [];
-    var custom = [];
+    this.wellknown = [];
+    this.custom = [];
+    this.parent = parent;
 
-    // API
+    this.defaultPrefixMap = parent && parent.defaultPrefixMap || {};
+  }
 
-    this.byUri = function(uri) {
-      return uriMap[uri] || (
-        parent && parent.byUri(uri)
-      );
-    };
+  Namespaces.prototype.mapDefaultPrefixes = function(defaultPrefixMap) {
+    this.defaultPrefixMap = defaultPrefixMap;
+  };
 
-    this.add = function(ns, isWellknown) {
+  Namespaces.prototype.defaultUriByPrefix = function(prefix) {
+    return this.defaultPrefixMap[prefix];
+  };
 
-      uriMap[ns.uri] = ns;
+  Namespaces.prototype.byUri = function(uri) {
+    return this.uriMap[uri] || (
+      this.parent && this.parent.byUri(uri)
+    );
+  };
 
-      if (isWellknown) {
-        wellknown.push(ns);
-      } else {
-        custom.push(ns);
-      }
+  Namespaces.prototype.add = function(ns, isWellknown) {
 
-      this.mapPrefix(ns.prefix, ns.uri);
-    };
+    this.uriMap[ns.uri] = ns;
 
-    this.uriByPrefix = function(prefix) {
-      return prefixMap[prefix || 'xmlns'];
-    };
+    if (isWellknown) {
+      this.wellknown.push(ns);
+    } else {
+      this.custom.push(ns);
+    }
 
-    this.mapPrefix = function(prefix, uri) {
-      prefixMap[prefix || 'xmlns'] = uri;
-    };
+    this.mapPrefix(ns.prefix, ns.uri);
+  };
 
-    this.getNSKey = function(ns) {
-      return (ns.prefix !== undefined) ? (ns.uri + '|' + ns.prefix) : ns.uri;
-    };
+  Namespaces.prototype.uriByPrefix = function(prefix) {
+    return this.prefixMap[prefix || 'xmlns'] || (
+      this.parent && this.parent.uriByPrefix(prefix)
+    );
+  };
 
-    this.logUsed = function(ns) {
+  Namespaces.prototype.mapPrefix = function(prefix, uri) {
+    this.prefixMap[prefix || 'xmlns'] = uri;
+  };
 
-      var uri = ns.uri;
-      var nsKey = this.getNSKey(ns);
+  Namespaces.prototype.getNSKey = function(ns) {
+    return (ns.prefix !== undefined) ? (ns.uri + '|' + ns.prefix) : ns.uri;
+  };
 
-      used[nsKey] = this.byUri(uri);
+  Namespaces.prototype.logUsed = function(ns) {
 
-      // Inform parent recursively about the usage of this NS
-      if (parent) {
-        parent.logUsed(ns);
-      }
-    };
+    var uri = ns.uri;
+    var nsKey = this.getNSKey(ns);
 
-    this.getUsed = function(ns) {
+    this.used[nsKey] = this.byUri(uri);
 
-      function isUsed(ns) {
-        var nsKey = self.getNSKey(ns);
+    // Inform parent recursively about the usage of this NS
+    if (this.parent) {
+      this.parent.logUsed(ns);
+    }
+  };
 
-        return used[nsKey];
-      }
+  Namespaces.prototype.getUsed = function(ns) {
 
-      var self = this;
+    var allNs = [].concat(this.wellknown, this.custom);
 
-      var allNs = [].concat(wellknown, custom);
+    return allNs.filter(ns => {
+      var nsKey = this.getNSKey(ns);
 
-      return allNs.filter(isUsed);
-    };
+      return this.used[nsKey];
+    });
+  };
 
-  }
 
   function lower(string) {
     return string.charAt(0).toLowerCase() + string.slice(1);
@@ -11870,7 +11905,7 @@
     var isGeneric = elementDescriptor.isGeneric;
 
     if (isGeneric) {
-      otherAttrs = this.parseGeneric(element);
+      otherAttrs = this.parseGenericNsAttributes(element);
     } else {
       otherAttrs = this.parseNsAttributes(element);
     }
@@ -11884,7 +11919,9 @@
     // compute tag name
     this.tagName = this.addTagName(this.ns);
 
-    if (!isGeneric) {
+    if (isGeneric) {
+      this.parseGenericContainments(element);
+    } else {
       properties = getSerializableProperties(element);
 
       this.parseAttributes(filterAttributes(properties));
@@ -11947,35 +11984,29 @@
     }
   };
 
-  ElementSerializer.prototype.parseGeneric = function(element) {
-
-    var self = this,
-        body = this.body;
-
-    var attributes = [];
+  ElementSerializer.prototype.parseGenericNsAttributes = function(element) {
 
-    forEach$1(element, function(val, key) {
+    return Object.entries(element).filter(
+      ([ key, value ]) => !key.startsWith('$') && this.parseNsAttribute(element, key, value)
+    ).map(
+      ([ key, value ]) => ({ name: key, value: value })
+    );
+  };
 
-      var nonNsAttr;
+  ElementSerializer.prototype.parseGenericContainments = function(element) {
+    var body = element.$body;
 
-      if (key === '$body') {
-        body.push(new BodySerializer().build({ type: 'String' }, val));
-      } else
-      if (key === '$children') {
-        forEach$1(val, function(child) {
-          body.push(new ElementSerializer(self).build(child));
-        });
-      } else
-      if (key.indexOf('$') !== 0) {
-        nonNsAttr = self.parseNsAttribute(element, key, val);
+    if (body) {
+      this.body.push(new BodySerializer().build({ type: 'String' }, body));
+    }
 
-        if (nonNsAttr) {
-          attributes.push({ name: key, value: val });
-        }
-      }
-    });
+    var children = element.$children;
 
-    return attributes;
+    if (children) {
+      forEach$1(children, child => {
+        this.body.push(new ElementSerializer(this).build(child));
+      });
+    }
   };
 
   ElementSerializer.prototype.parseNsAttribute = function(element, name, value) {
@@ -12022,7 +12053,7 @@
    * @param  {Object} element
    * @return {Array<Object>}
    */
-  ElementSerializer.prototype.parseNsAttributes = function(element, attrs) {
+  ElementSerializer.prototype.parseNsAttributes = function(element) {
     var self = this;
 
     var genericAttrs = element.$attrs;
@@ -12050,21 +12081,16 @@
 
     forEach$1(attributes, function(attr) {
 
-      // do not serialize xsi:type attribute
-      // it is set manually based on the actual implementation type
-      if (attr.name === XSI_TYPE) {
-        return;
-      }
-
       try {
         self.addAttribute(self.nsAttributeName(attr.name), attr.value);
       } catch (e) {
-        /* global console */
 
-        console.warn(
-          'missing namespace information for ',
-          attr.name, '=', attr.value, 'on', element,
-          e);
+        // eslint-disable-next-line no-undef
+        typeof console !== 'undefined' && console.warn(
+          `missing namespace information for <${
+          attr.name
+        }=${ attr.value }> on`, element, e
+        );
       }
     });
   };
@@ -12086,13 +12112,11 @@
 
       if (p.isBody) {
         body.push(new BodySerializer().build(p, value[0]));
-      } else
-      if (isSimple(p.type)) {
+      } else if (isSimple(p.type)) {
         forEach$1(value, function(v) {
           body.push(new ValueSerializer(self.addTagName(self.nsPropertyTagName(p))).build(p, v));
         });
-      } else
-      if (isReference) {
+      } else if (isReference) {
         forEach$1(value, function(v) {
           body.push(new ReferenceSerializer(self.addTagName(self.nsPropertyTagName(p))).build(v));
         });
@@ -12100,17 +12124,17 @@
 
         // allow serialization via type
         // rather than element name
-        var asType = serializeAsType(p),
-            asProperty = serializeAsProperty(p);
+        var serialization = getSerialization(p);
 
         forEach$1(value, function(v) {
           var serializer;
 
-          if (asType) {
-            serializer = new TypeSerializer(self, p);
-          } else
-          if (asProperty) {
-            serializer = new ElementSerializer(self, p);
+          if (serialization) {
+            if (serialization === SERIALIZE_PROPERTY) {
+              serializer = new ElementSerializer(self, p);
+            } else {
+              serializer = new TypeSerializer(self, p, serialization);
+            }
           } else {
             serializer = new ElementSerializer(self);
           }
@@ -12158,9 +12182,7 @@
   };
 
   ElementSerializer.prototype.logNamespaceUsed = function(ns, local) {
-    var element = this.element,
-        model = element.$model,
-        namespaces = this.getNamespaces(local);
+    var namespaces = this.getNamespaces(local);
 
     // ns may be
     //
@@ -12178,7 +12200,7 @@
       return { localName: ns.localName };
     }
 
-    wellknownUri = DEFAULT_NS_MAP[prefix] || model && (model.getPackage(prefix) || {}).uri;
+    wellknownUri = namespaces.defaultUriByPrefix(prefix);
 
     uri = uri || wellknownUri || namespaces.uriByPrefix(prefix);
 
@@ -12188,6 +12210,11 @@
 
     ns = namespaces.byUri(uri);
 
+    // register new default prefix <xmlns> in local scope
+    if (!ns && !prefix) {
+      ns = this.logNamespace({ uri }, wellknownUri === uri, true);
+    }
+
     if (!ns) {
       newPrefix = prefix;
       idx = 1;
@@ -12219,8 +12246,7 @@
 
         if (!p.isMany) {
           value = value.id;
-        }
-        else {
+        } else {
           var values = [];
           forEach$1(value, function(v) {
             values.push(v.id);
@@ -12324,20 +12350,25 @@
   /**
    * A serializer for types that handles serialization of data types
    */
-  function TypeSerializer(parent, propertyDescriptor) {
+  function TypeSerializer(parent, propertyDescriptor, serialization) {
     ElementSerializer.call(this, parent, propertyDescriptor);
+
+    this.serialization = serialization;
   }
 
   inherits(TypeSerializer, ElementSerializer);
 
   TypeSerializer.prototype.parseNsAttributes = function(element) {
 
-    // extracted attributes
-    var attributes = ElementSerializer.prototype.parseNsAttributes.call(this, element);
+    // extracted attributes with serialization attribute
+    // <type=typeName> stripped; it may be later
+    var attributes = ElementSerializer.prototype.parseNsAttributes.call(this, element).filter(
+      attr => attr.name !== this.serialization
+    );
 
     var descriptor = element.$descriptor;
 
-    // only serialize xsi:type if necessary
+    // only serialize <type=typeName> if necessary
     if (descriptor.name === this.propertyDescriptor.type) {
       return attributes;
     }
@@ -12352,7 +12383,7 @@
         typePrefix = (pkg.xml && pkg.xml.typePrefix) || '';
 
     this.addAttribute(
-      this.nsAttributeName(XSI_TYPE),
+      this.nsAttributeName(this.serialization),
       (typeNs.prefix ? typeNs.prefix + ':' : '') + typePrefix + descriptor.ns.localName
     );
 
@@ -12425,7 +12456,13 @@
         formatingWriter.append(XML_PREAMBLE);
       }
 
-      new ElementSerializer().build(tree).serializeTo(formatingWriter);
+      var serializer = new ElementSerializer();
+
+      var model = tree.$model;
+
+      serializer.getNamespaces().mapDefaultPrefixes(getDefaultPrefixMappings(model));
+
+      serializer.build(tree).serializeTo(formatingWriter);
 
       if (!writer) {
         return internalWriter.value;
@@ -12437,6 +12474,39 @@
     };
   }
 
+
+  // helpers ///////////
+
+  /**
+   * @param {Moddle} model
+   *
+   * @return { Record<string, string> } map from prefix to URI
+   */
+  function getDefaultPrefixMappings(model) {
+
+    const nsMap = model.config && model.config.nsMap || {};
+
+    const prefixMap = {};
+
+    // { prefix -> uri }
+    for (const prefix in DEFAULT_NS_MAP) {
+      prefixMap[prefix] = DEFAULT_NS_MAP[prefix];
+    }
+
+    // { uri -> prefix }
+    for (const uri in nsMap) {
+      const prefix = nsMap[uri];
+
+      prefixMap[prefix] = uri;
+    }
+
+    for (const pkg of model.getPackages()) {
+      prefixMap[pkg.prefix] = pkg.uri;
+    }
+
+    return prefixMap;
+  }
+
   /**
    * A sub class of {@link Moddle} with support for import and export of BPMN 2.0 xml files.
    *
@@ -16163,7 +16233,7 @@
   	associations: associations
   };
 
-  var packages = {
+  const packages = {
     bpmn: BpmnPackage,
     bpmndi: BpmnDiPackage,
     dc: DcPackage,
@@ -16172,8 +16242,8 @@
     color: BpmnInColorPackage
   };
 
-  function simple(additionalPackages, options) {
-    var pks = assign$1({}, packages, additionalPackages);
+  function SimpleBpmnModdle(additionalPackages, options) {
+    const pks = assign$1({}, packages, additionalPackages);
 
     return new BpmnModdle(pks, options);
   }
@@ -17728,7 +17798,7 @@
   BaseViewer.prototype._createModdle = function(options) {
     const moddleOptions = assign$1({}, this._moddleExtensions, options.moddleExtensions);
 
-    return new simple(moddleOptions);
+    return new SimpleBpmnModdle(moddleOptions);
   };
 
   BaseViewer.prototype._modules = [];
@@ -18260,7 +18330,11 @@
     if (attr) {
 
       if (attr === 'categoryValueRef') {
-        semantic['categoryValueRef'].value = text;
+        if (!semantic[attr]) {
+          return element;
+        }
+
+        semantic[attr].value = text;
       } else {
         semantic[attr] = text;
       }
@@ -20888,6 +20962,8 @@
 
       return bbox;
     } catch (e) {
+      console.log(e);
+
       return { width: 0, height: 0 };
     }
   }
@@ -24171,607 +24247,204 @@
     subprocessCompatibility: [ 'type', SubprocessCompatibility ]
   };
 
-  var LOW_PRIORITY$o = 500;
+  /**
+   * @typedef {import('../util/Types').Point} Point
+   */
 
-  var DEFAULT_PRIORITY$4 = 1000;
+  function __stopPropagation(event) {
+    if (!event || typeof event.stopPropagation !== 'function') {
+      return;
+    }
+
+    event.stopPropagation();
+  }
 
   /**
-   * @typedef {import('../../model/Types').Element} Element
+   * @param {import('../core/EventBus').Event} event
    *
-   * @typedef {import('./OutlineProvider').default} OutlineProvider
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
+   * @return {Event}
    */
+  function getOriginal$1(event) {
+    return event.originalEvent || event.srcEvent;
+  }
 
   /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Styles} styles
+   * @param {Event|import('../core/EventBus').Event} event
    */
-  function Outline(eventBus, styles) {
-
-    this._eventBus = eventBus;
-
-    this.offset = 5;
-
-    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var self = this;
-
-    /**
-     * @param {SVGElement} gfx
-     *
-     * @return {SVGElement} outline
-     */
-    function createOutline(gfx) {
-      var outline = create$1('rect');
-
-      attr(outline, assign$1({
-        x: 0,
-        y: 0,
-        rx: 4,
-        width: 100,
-        height: 100
-      }, OUTLINE_STYLE));
-
-      return outline;
-    }
-
-    // A low priortity is necessary, because outlines of labels have to be updated
-    // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$o, function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = self.getOutline(element) || createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateShapeOutline(outline, element);
-    });
-
-    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateConnectionOutline(outline, element);
-    });
+  function stopPropagation$1(event) {
+    __stopPropagation(event);
+    __stopPropagation(getOriginal$1(event));
   }
 
-
   /**
-   * Updates the outline of a shape respecting the dimension of the
-   * element and an outline offset.
+   * @param {Event} event
    *
-   * @param {SVGElement} outline
-   * @param {Element} element
+   * @return {Point|null}
    */
-  Outline.prototype.updateShapeOutline = function(outline, element) {
-
-    var updated = false;
-    var providers = this._getProviders();
+  function toPoint(event) {
 
-    if (providers.length) {
-      forEach$1(providers, function(provider) {
-        updated = updated || provider.updateOutline(element, outline);
-      });
+    if (event.pointers && event.pointers.length) {
+      event = event.pointers[0];
     }
 
-    if (!updated) {
-      attr(outline, {
-        x: -this.offset,
-        y: -this.offset,
-        width: element.width + this.offset * 2,
-        height: element.height + this.offset * 2
-      });
+    if (event.touches && event.touches.length) {
+      event = event.touches[0];
     }
-  };
+
+    return event ? {
+      x: event.clientX,
+      y: event.clientY
+    } : null;
+  }
+
+  function isMac() {
+    return (/mac/i).test(navigator.platform);
+  }
 
   /**
-   * Updates the outline of a connection respecting the bounding box of
-   * the connection and an outline offset.
-   * Register an outline provider with the given priority.
+   * @param {MouseEvent} event
+   * @param {string} button
    *
-   * @param {SVGElement} outline
-   * @param {Element} connection
+   * @return {boolean}
    */
-  Outline.prototype.updateConnectionOutline = function(outline, connection) {
-    var bbox = getBBox(connection);
-
-    attr(outline, {
-      x: bbox.x - this.offset,
-      y: bbox.y - this.offset,
-      width: bbox.width + this.offset * 2,
-      height: bbox.height + this.offset * 2
-    });
-  };
+  function isButton(event, button) {
+    return (getOriginal$1(event) || event).button === button;
+  }
 
   /**
-   * Register an outline provider with the given priority.
+   * @param {MouseEvent} event
    *
-   * @param {number} priority
-   * @param {OutlineProvider} provider
+   * @return {boolean}
    */
-  Outline.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$4;
-    }
+  function isPrimaryButton(event) {
 
-    this._eventBus.on('outline.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
+    // button === 0 -> left áka primary mouse button
+    return isButton(event, 0);
+  }
 
   /**
-   * Returns the registered outline providers.
+   * @param {MouseEvent} event
    *
-   * @returns {OutlineProvider[]}
+   * @return {boolean}
    */
-  Outline.prototype._getProviders = function() {
-    var event = this._eventBus.createEvent({
-      type: 'outline.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
+  function isAuxiliaryButton(event) {
 
-    return event.providers;
-  };
+    // button === 1 -> auxiliary áka wheel button
+    return isButton(event, 1);
+  }
 
   /**
-   * Returns the outline for an element.
+   * @param {MouseEvent} event
    *
-   * @param {Element} element
+   * @return {boolean}
    */
-  Outline.prototype.getOutline = function(element) {
-    var outline;
-    var providers = this._getProviders();
-
-    forEach$1(providers, function(provider) {
-
-      if (!isFunction(provider.getOutline)) {
-        return;
-      }
-
-      outline = outline || provider.getOutline(element);
-    });
+  function hasPrimaryModifier(event) {
+    var originalEvent = getOriginal$1(event) || event;
 
-    return outline;
-  };
+    if (!isPrimaryButton(event)) {
+      return false;
+    }
 
-  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+    // Use cmd as primary modifier key for mac OS
+    if (isMac()) {
+      return originalEvent.metaKey;
+    } else {
+      return originalEvent.ctrlKey;
+    }
+  }
 
   /**
-   * @type { import('didi').ModuleDeclaration }
+   * @param {MouseEvent} event
+   *
+   * @return {boolean}
    */
-  var OutlineModule$1 = {
-    __init__: [ 'outline' ],
-    outline: [ 'type', Outline ]
-  };
-
-  const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
-  const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
+  function hasSecondaryModifier(event) {
+    var originalEvent = getOriginal$1(event) || event;
 
-  /**
-   * @typedef { import('diagram-js/lib/util/Types').Dimensions} Dimensions
-   */
+    return isPrimaryButton(event) && originalEvent.shiftKey;
+  }
 
   /**
-   * @type {Dimensions}
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   *
+   * @typedef {import('../../util/Types').Point} Point
    */
-  const DATA_OBJECT_REFERENCE_STANDARD_SIZE = { width: 36, height: 50 };
 
-  /**
-   * @type {Dimensions}
-   */
-  const DATA_STORE_REFERENCE_STANDARD_SIZE = { width: 50, height: 50 };
+  function allowAll(event) { return true; }
 
-  /**
-   * Create a path element with given attributes.
-   * @param {string} path
-   * @param {Object} attrs
-   * @param {Object} OUTLINE_STYLE
-   * @return {SVGElement}
-   */
-  function createPath(path, attrs, OUTLINE_STYLE) {
-    return create$1('path', {
-      d: path,
-      strokeWidth: 2,
-      transform: `translate(${attrs.x}, ${attrs.y})`,
-      ...OUTLINE_STYLE
-    });
+  function allowPrimaryAndAuxiliary(event) {
+    return isPrimaryButton(event) || isAuxiliaryButton(event);
   }
 
+  var LOW_PRIORITY$o = 500;
+
+
   /**
-   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').default } BaseOutlineProvider
+   * A plugin that provides interaction events for diagram elements.
    *
-   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').Outline } Outline
+   * It emits the following events:
    *
-   * @typedef { import('diagram-js/lib/draw/Styles').default } Styles
+   *   * element.click
+   *   * element.contextmenu
+   *   * element.dblclick
+   *   * element.hover
+   *   * element.mousedown
+   *   * element.mousemove
+   *   * element.mouseup
+   *   * element.out
    *
-   * @typedef { import('diagram-js/lib/model/Types').Element } Element
-   */
-
-  const DEFAULT_OFFSET = 5;
-
-  /**
-   * BPMN-specific outline provider.
+   * Each event is a tuple { element, gfx, originalEvent }.
    *
-   * @implements {BaseOutlineProvider}
+   * Canceling the event via Event#preventDefault()
+   * prevents the original DOM operation.
    *
-   * @param {Outline} outline
+   * @param {EventBus} eventBus
+   * @param {ElementRegistry} elementRegistry
    * @param {Styles} styles
    */
-  function OutlineProvider(outline, styles) {
+  function InteractionEvents(eventBus, elementRegistry, styles) {
 
-    this._styles = styles;
-    outline.registerProvider(this);
-  }
+    var self = this;
 
-  OutlineProvider.$inject = [
-    'outline',
-    'styles'
-  ];
+    /**
+     * Fire an interaction event.
+     *
+     * @param {string} type local event name, e.g. element.click.
+     * @param {MouseEvent|TouchEvent} event native event
+     * @param {Element} [element] the diagram element to emit the event on;
+     *                                   defaults to the event target
+     */
+    function fire(type, event, element) {
 
-  /**
-   * Returns outline for a given element.
-   *
-   * @param {Element} element
-   *
-   * @return {Outline}
-   */
-  OutlineProvider.prototype.getOutline = function(element) {
+      if (isIgnored(type, event)) {
+        return;
+      }
 
-    const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]);
+      var target, gfx, returnValue;
 
-    var outline;
+      if (!element) {
+        target = event.delegateTarget || event.target;
 
-    if (isLabel(element)) {
-      return;
-    }
+        if (target) {
+          gfx = target;
+          element = elementRegistry.get(gfx);
+        }
+      } else {
+        gfx = elementRegistry.getGraphics(element);
+      }
 
-    if (is$1(element, 'bpmn:Gateway')) {
-      outline = create$1('rect');
+      if (!gfx || !element) {
+        return;
+      }
 
-      assign$1(outline.style, {
-        'transform-box': 'fill-box',
-        'transform': 'rotate(45deg)',
-        'transform-origin': 'center'
-      });
-
-      attr(outline, assign$1({
-        x: 2,
-        y: 2,
-        rx: 4,
-        width: element.width - 4,
-        height: element.height - 4,
-      }, OUTLINE_STYLE));
-
-    } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group', 'bpmn:CallActivity' ])) {
-      outline = create$1('rect');
-
-      attr(outline, assign$1({
-        x: -DEFAULT_OFFSET,
-        y: -DEFAULT_OFFSET,
-        rx: 14,
-        width: element.width + DEFAULT_OFFSET * 2,
-        height: element.height + DEFAULT_OFFSET * 2
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:EndEvent')) {
-
-      outline = create$1('circle');
-
-      // Extra 1px offset needed due to increased stroke-width of end event
-      // which makes it bigger than other events.
-
-      attr(outline, assign$1({
-        cx: element.width / 2,
-        cy: element.height / 2,
-        r: element.width / 2 + DEFAULT_OFFSET + 1
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:Event')) {
-      outline = create$1('circle');
-
-      attr(outline, assign$1({
-        cx: element.width / 2,
-        cy: element.height / 2,
-        r: element.width / 2 + DEFAULT_OFFSET
-      }, OUTLINE_STYLE));
-
-    } else if (is$1(element, 'bpmn:DataObjectReference') && isStandardSize(element, 'bpmn:DataObjectReference')) {
-
-      outline = createPath(
-        DATA_OBJECT_REFERENCE_OUTLINE_PATH,
-        { x: -6, y: -6 },
-        OUTLINE_STYLE
-      );
-
-    } else if (is$1(element, 'bpmn:DataStoreReference') && isStandardSize(element, 'bpmn:DataStoreReference')) {
-
-      outline = createPath(
-        DATA_STORE_REFERENCE_OUTLINE_PATH,
-        { x: -6, y: -6 },
-        OUTLINE_STYLE
-      );
-    }
-
-    return outline;
-  };
-
-  /**
-   * Updates the outline for a given element.
-   * Returns true if the update for the given element was handled by this provider.
-   *
-   * @param {Element} element
-   * @param {Outline} outline
-   * @returns {boolean}
-   */
-  OutlineProvider.prototype.updateOutline = function(element, outline) {
-
-    if (isLabel(element)) {
-      return;
-    }
-
-    if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
-
-      attr(outline, {
-        width: element.width + DEFAULT_OFFSET * 2,
-        height: element.height + DEFAULT_OFFSET * 2
-      });
-
-      return true;
-
-    } else if (isAny(element, [
-      'bpmn:Event',
-      'bpmn:Gateway',
-      'bpmn:DataStoreReference',
-      'bpmn:DataObjectReference'
-    ])) {
-      return true;
-    }
-
-    return false;
-  };
-
-
-  // helpers //////////
-
-  function isStandardSize(element, type) {
-    var standardSize;
-
-    if (type === 'bpmn:DataObjectReference') {
-      standardSize = DATA_OBJECT_REFERENCE_STANDARD_SIZE;
-    } else if (type === 'bpmn:DataStoreReference') {
-      standardSize = DATA_STORE_REFERENCE_STANDARD_SIZE;
-    }
-
-    return element.width === standardSize.width
-            && element.height === standardSize.height;
-  }
-
-  var OutlineModule = {
-    __depends__: [
-      OutlineModule$1
-    ],
-    __init__: [ 'outlineProvider' ],
-    outlineProvider: [ 'type', OutlineProvider ]
-  };
-
-  /**
-   * @typedef {import('../util/Types').Point} Point
-   */
-
-  function __stopPropagation(event) {
-    if (!event || typeof event.stopPropagation !== 'function') {
-      return;
-    }
-
-    event.stopPropagation();
-  }
-
-  /**
-   * @param {import('../core/EventBus').Event} event
-   *
-   * @return {Event}
-   */
-  function getOriginal$1(event) {
-    return event.originalEvent || event.srcEvent;
-  }
-
-  /**
-   * @param {Event|import('../core/EventBus').Event} event
-   */
-  function stopPropagation$1(event) {
-    __stopPropagation(event);
-    __stopPropagation(getOriginal$1(event));
-  }
-
-  /**
-   * @param {Event} event
-   *
-   * @return {Point|null}
-   */
-  function toPoint(event) {
-
-    if (event.pointers && event.pointers.length) {
-      event = event.pointers[0];
-    }
-
-    if (event.touches && event.touches.length) {
-      event = event.touches[0];
-    }
-
-    return event ? {
-      x: event.clientX,
-      y: event.clientY
-    } : null;
-  }
-
-  function isMac() {
-    return (/mac/i).test(navigator.platform);
-  }
-
-  /**
-   * @param {MouseEvent} event
-   * @param {string} button
-   *
-   * @return {boolean}
-   */
-  function isButton$1(event, button) {
-    return (getOriginal$1(event) || event).button === button;
-  }
-
-  /**
-   * @param {MouseEvent} event
-   *
-   * @return {boolean}
-   */
-  function isPrimaryButton(event) {
-
-    // button === 0 -> left áka primary mouse button
-    return isButton$1(event, 0);
-  }
-
-  /**
-   * @param {MouseEvent} event
-   *
-   * @return {boolean}
-   */
-  function isAuxiliaryButton(event) {
-
-    // button === 1 -> auxiliary áka wheel button
-    return isButton$1(event, 1);
-  }
-
-  /**
-   * @param {MouseEvent} event
-   *
-   * @return {boolean}
-   */
-  function hasPrimaryModifier(event) {
-    var originalEvent = getOriginal$1(event) || event;
-
-    if (!isPrimaryButton(event)) {
-      return false;
-    }
-
-    // Use cmd as primary modifier key for mac OS
-    if (isMac()) {
-      return originalEvent.metaKey;
-    } else {
-      return originalEvent.ctrlKey;
-    }
-  }
-
-  /**
-   * @param {MouseEvent} event
-   *
-   * @return {boolean}
-   */
-  function hasSecondaryModifier(event) {
-    var originalEvent = getOriginal$1(event) || event;
-
-    return isPrimaryButton(event) && originalEvent.shiftKey;
-  }
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
-   *
-   * @typedef {import('../../util/Types').Point} Point
-   */
-
-  function allowAll(event) { return true; }
-
-  function allowPrimaryAndAuxiliary(event) {
-    return isPrimaryButton(event) || isAuxiliaryButton(event);
-  }
-
-  var LOW_PRIORITY$n = 500;
-
-
-  /**
-   * A plugin that provides interaction events for diagram elements.
-   *
-   * It emits the following events:
-   *
-   *   * element.click
-   *   * element.contextmenu
-   *   * element.dblclick
-   *   * element.hover
-   *   * element.mousedown
-   *   * element.mousemove
-   *   * element.mouseup
-   *   * element.out
-   *
-   * Each event is a tuple { element, gfx, originalEvent }.
-   *
-   * Canceling the event via Event#preventDefault()
-   * prevents the original DOM operation.
-   *
-   * @param {EventBus} eventBus
-   * @param {ElementRegistry} elementRegistry
-   * @param {Styles} styles
-   */
-  function InteractionEvents(eventBus, elementRegistry, styles) {
-
-    var self = this;
-
-    /**
-     * Fire an interaction event.
-     *
-     * @param {string} type local event name, e.g. element.click.
-     * @param {MouseEvent|TouchEvent} event native event
-     * @param {Element} [element] the diagram element to emit the event on;
-     *                                   defaults to the event target
-     */
-    function fire(type, event, element) {
-
-      if (isIgnored(type, event)) {
-        return;
-      }
-
-      var target, gfx, returnValue;
-
-      if (!element) {
-        target = event.delegateTarget || event.target;
-
-        if (target) {
-          gfx = target;
-          element = elementRegistry.get(gfx);
-        }
-      } else {
-        gfx = elementRegistry.getGraphics(element);
-      }
-
-      if (!gfx || !element) {
-        return;
-      }
-
-      returnValue = eventBus.fire(type, {
-        element: element,
-        gfx: gfx,
-        originalEvent: event
+      returnValue = eventBus.fire(type, {
+        element: element,
+        gfx: gfx,
+        originalEvent: event
       });
 
       if (returnValue === false) {
@@ -24904,7 +24577,7 @@
     eventBus.on([
       'shape.changed',
       'connection.changed'
-    ], LOW_PRIORITY$n, function(event) {
+    ], LOW_PRIORITY$o, function(event) {
 
       var element = event.element,
           gfx = event.gfx;
@@ -24912,7 +24585,7 @@
       eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
     });
 
-    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$n, function(event) {
+    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$o, function(event) {
       var element = event.element,
           gfx = event.gfx;
 
@@ -25315,15 +24988,11 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('./Selection').default} Selection
    */
 
   var MARKER_HOVER = 'hover',
       MARKER_SELECTED = 'selected';
 
-  var SELECTION_OUTLINE_PADDING = 6;
-
-
   /**
    * A plugin that adds a visible selection UI to shapes and connections
    * by appending the <code>hover</code> and <code>selected</code> classes to them.
@@ -25334,15 +25003,10 @@
    *
    * @param {Canvas} canvas
    * @param {EventBus} eventBus
-   * @param {Selection} selection
    */
-  function SelectionVisuals(canvas, eventBus, selection) {
+  function SelectionVisuals(canvas, eventBus) {
     this._canvas = canvas;
 
-    var self = this;
-
-    this._multiSelectionBox = null;
-
     function addMarker(e, cls) {
       canvas.addMarker(e, cls);
     }
@@ -25383,63 +25047,14 @@
           select(e);
         }
       });
-
-      self._updateSelectionOutline(newSelection);
-    });
-
-
-    eventBus.on('element.changed', function(event) {
-      if (selection.isSelected(event.element)) {
-        self._updateSelectionOutline(selection.get());
-      }
     });
   }
 
   SelectionVisuals.$inject = [
     'canvas',
-    'eventBus',
-    'selection'
+    'eventBus'
   ];
 
-  SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
-    var layer = this._canvas.getLayer('selectionOutline');
-
-    clear(layer);
-
-    var enabled = selection.length > 1;
-
-    var container = this._canvas.getContainer();
-
-    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
-
-    if (!enabled) {
-      return;
-    }
-
-    var bBox = addSelectionOutlinePadding(getBBox(selection));
-
-    var rect = create$1('rect');
-
-    attr(rect, assign$1({
-      rx: 3
-    }, bBox));
-
-    classes(rect).add('djs-selection-outline');
-
-    append(layer, rect);
-  };
-
-  // helpers //////////
-
-  function addSelectionOutlinePadding(bBox) {
-    return {
-      x: bBox.x - SELECTION_OUTLINE_PADDING,
-      y: bBox.y - SELECTION_OUTLINE_PADDING,
-      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
-      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
-    };
-  }
-
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
@@ -25566,7 +25181,6 @@
     __init__: [ 'selectionVisuals', 'selectionBehavior' ],
     __depends__: [
       InteractionEventsModule$1,
-      OutlineModule$1
     ],
     selection: [ 'type', Selection ],
     selectionVisuals: [ 'type', SelectionVisuals ],
@@ -25632,7 +25246,6 @@
   Viewer.prototype._modules = [
     CoreModule,
     DrilldownModdule,
-    OutlineModule,
     OverlaysModule,
     SelectionModule,
     TranslateModule
@@ -25730,9 +25343,10 @@
   var KEYDOWN_EVENT = 'keyboard.keydown',
       KEYUP_EVENT = 'keyboard.keyup';
 
-  var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
+  var DEFAULT_PRIORITY$4 = 1000;
+
+  var compatMessage = 'Keyboard binding is now implicit; explicit binding to an element got removed. For more information, see https://github.com/bpmn-io/diagram-js/issues/661';
 
-  var DEFAULT_PRIORITY$3 = 1000;
 
   /**
    * A keyboard abstraction that may be activated and
@@ -25752,8 +25366,8 @@
    *
    * All events contain one field which is node.
    *
-   * A default binding for the keyboard may be specified via the
-   * `keyboard.bindTo` configuration option.
+   * Specify the initial keyboard binding state via the
+   * `keyboard.bind=true|false` configuration option.
    *
    * @param {Object} config
    * @param {EventTarget} [config.bindTo]
@@ -25762,7 +25376,8 @@
   function Keyboard(config, eventBus) {
     var self = this;
 
-    this._config = config || {};
+    this._config = config = config || {};
+
     this._eventBus = eventBus;
 
     this._keydownHandler = this._keydownHandler.bind(this);
@@ -25775,19 +25390,22 @@
       self.unbind();
     });
 
-    eventBus.on('diagram.init', function() {
-      self._fire('init');
-    });
+    if (config.bindTo) {
+      console.error('unsupported configuration <keyboard.bindTo>', new Error(compatMessage));
+    }
+
+    var bind = config && config.bind !== false;
 
-    eventBus.on('attach', function() {
-      if (config && config.bindTo) {
-        self.bind(config.bindTo);
+    eventBus.on('canvas.init', function(event) {
+      self._target = event.svg;
+
+      if (bind) {
+        self.bind();
       }
-    });
 
-    eventBus.on('detach', function() {
-      self.unbind();
+      self._fire('init');
     });
+
   }
 
   Keyboard.$inject = [
@@ -25822,34 +25440,7 @@
   };
 
   Keyboard.prototype._isEventIgnored = function(event) {
-    if (event.defaultPrevented) {
-      return true;
-    }
-
-    return (
-      isInput(event.target) || (
-        isButton(event.target) && isKey([ ' ', 'Enter' ], event)
-      )
-    ) && this._isModifiedKeyIgnored(event);
-  };
-
-  Keyboard.prototype._isModifiedKeyIgnored = function(event) {
-    if (!isCmd(event)) {
-      return true;
-    }
-
-    var allowedModifiers = this._getAllowedModifiers(event.target);
-    return allowedModifiers.indexOf(event.key) === -1;
-  };
-
-  Keyboard.prototype._getAllowedModifiers = function(element) {
-    var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
-
-    if (!modifierContainer || (this._node && !this._node.contains(modifierContainer))) {
-      return [];
-    }
-
-    return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
+    return false;
   };
 
   /**
@@ -25859,10 +25450,14 @@
    */
   Keyboard.prototype.bind = function(node) {
 
+    if (node) {
+      console.error('unsupported argument <node>', new Error(compatMessage));
+    }
+
     // make sure that the keyboard is only bound once to the DOM
     this.unbind();
 
-    this._node = node;
+    node = this._node = this._target;
 
     // bind key events
     event.bind(node, 'keydown', this._keydownHandler);
@@ -25912,7 +25507,7 @@
     if (isFunction(priority)) {
       type = listener;
       listener = priority;
-      priority = DEFAULT_PRIORITY$3;
+      priority = DEFAULT_PRIORITY$4;
     }
 
     this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
@@ -25933,19 +25528,7 @@
   Keyboard.prototype.isShift = isShift;
   Keyboard.prototype.isKey = isKey;
 
-
-
-  // helpers ///////
-
-  function isInput(target) {
-    return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
-  }
-
-  function isButton(target) {
-    return target && matches(target, 'button, input[type=submit], input[type=button], a[href], [aria-role=button]');
-  }
-
-  var LOW_PRIORITY$m = 500;
+  var LOW_PRIORITY$n = 500;
 
 
   /**
@@ -25961,7 +25544,7 @@
 
     var self = this;
 
-    eventBus.on('editorActions.init', LOW_PRIORITY$m, function(event) {
+    eventBus.on('editorActions.init', LOW_PRIORITY$n, function(event) {
 
       var editorActions = event.editorActions;
 
@@ -27027,23 +26610,26 @@
 
   Scheduler.prototype._schedule = function(taskFn, id) {
 
-    const {
-      promise,
-      resolve,
-      reject
-    } = defer();
+    const deferred = defer();
+
+    const executionId = setTimeout(() => {
 
-    const executionId = requestAnimationFrame(() => {
       try {
-        resolve(taskFn());
+        this._scheduled[id] = null;
+
+        try {
+          deferred.resolve(taskFn());
+        } catch (error) {
+          deferred.reject(error);
+        }
       } catch (error) {
-        reject(error);
+        console.error('Scheduler#_schedule execution failed', error);
       }
     });
 
     return {
       executionId,
-      promise
+      promise: deferred.promise
     };
   };
 
@@ -27064,7 +26650,7 @@
   };
 
   Scheduler.prototype._cancel = function(scheduled) {
-    cancelAnimationFrame(scheduled.executionId);
+    clearTimeout(scheduled.executionId);
   };
 
   /**
@@ -27076,19 +26662,14 @@
    */
   function defer() {
 
-    let resolve;
-    let reject;
+    const deferred = {};
 
-    const promise = new Promise((_resolve, _reject) => {
-      resolve = _resolve;
-      reject = _reject;
+    deferred.promise = new Promise((resolve, reject) => {
+      deferred.resolve = resolve;
+      deferred.reject = reject;
     });
 
-    return {
-      promise,
-      resolve,
-      reject
-    };
+    return deferred;
   }
 
   var SchedulerModule = {
@@ -27121,7 +26702,7 @@
 
   var entrySelector = '.entry';
 
-  var DEFAULT_PRIORITY$2 = 1000;
+  var DEFAULT_PRIORITY$3 = 1000;
   var CONTEXT_PAD_MARGIN = 8;
   var HOVER_DELAY = 300;
 
@@ -27263,7 +26844,7 @@
   ContextPad.prototype.registerProvider = function(priority, provider) {
     if (!provider) {
       provider = priority;
-      priority = DEFAULT_PRIORITY$2;
+      priority = DEFAULT_PRIORITY$3;
     }
 
     this._eventBus.on('contextPad.getProviders', priority, function(event) {
@@ -28116,6 +27697,8 @@
    * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
    * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
    *
+   * @typedef {import('../search/search').default} search
+   *
    * @typedef {import('../../util/Types').Point} Point
    */
 
@@ -28134,6 +27717,7 @@
    * @param {boolean} [props.search]
    * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
    * @param {number} [props.width]
+   * @param {search} props.searchFn
    */
   function PopupMenuComponent(props) {
     const {
@@ -28147,6 +27731,7 @@
       scale,
       search,
       emptyPlaceholder,
+      searchFn,
       entries: originalEntries,
       onOpened,
       onClosed
@@ -28168,29 +27753,19 @@
         return originalEntries;
       }
 
-      const filter = entry => {
-        if (!value) {
-          return (entry.rank || 0) >= 0;
-        }
-
-        if (entry.searchable === false) {
-          return false;
-        }
+      if (!value) {
+        return originalEntries.filter(({ rank = 0 }) => rank >= 0);
+      }
 
-        const searchableFields = [
-          entry.description || '',
-          entry.label || '',
-          entry.search || ''
-        ].map(string => string.toLowerCase());
-
-        // every word of `value` should be included in one of the searchable fields
-        return value
-          .toLowerCase()
-          .split(/\s/g)
-          .every(word => searchableFields.some(field => field.includes(word)));
-      };
+      const searchableEntries = originalEntries.filter(({ searchable }) => searchable !== false);
 
-      return originalEntries.filter(filter);
+      return searchFn(searchableEntries, value, {
+        keys: [
+          'label',
+          'description',
+          'search'
+        ]
+      }).map(({ item }) => item);
     }, [ searchable ]);
 
     const [ entries, setEntries ] = p(filterEntries(originalEntries, value));
@@ -28291,7 +27866,7 @@
             <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
             </svg>
-            <input type="text" aria-label="${ title }" />
+            <input type="text" spellcheck=${ false } aria-label="${ title }" />
           </div>
           ` }
 
@@ -28409,6 +27984,7 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../search/search').default} search
    *
    * @typedef {import('../../util/Types').Point} Point
    *
@@ -28438,7 +28014,7 @@
     'commandStack.changed'
   ];
 
-  var DEFAULT_PRIORITY$1 = 1000;
+  var DEFAULT_PRIORITY$2 = 1000;
 
   /**
    * A popup menu to show a number of actions on the canvas.
@@ -28446,10 +28022,12 @@
    * @param {PopupMenuConfig} config
    * @param {EventBus} eventBus
    * @param {Canvas} canvas
+   * @param {search} search
    */
-  function PopupMenu(config, eventBus, canvas) {
+  function PopupMenu(config, eventBus, canvas, search) {
     this._eventBus = eventBus;
     this._canvas = canvas;
+    this._search = search;
 
     this._current = null;
 
@@ -28481,7 +28059,8 @@
   PopupMenu.$inject = [
     'config.popupMenu',
     'eventBus',
-    'canvas'
+    'canvas',
+    'search'
   ];
 
   PopupMenu.prototype._render = function() {
@@ -28525,6 +28104,7 @@
         scale=${ scale }
         onOpened=${ this._onOpened.bind(this) }
         onClosed=${ this._onClosed.bind(this) }
+        searchFn=${ this._search }
         ...${{ ...options }}
       />
     `,
@@ -28649,6 +28229,8 @@
 
     this.reset();
 
+    this._canvas.restoreFocus();
+
     this._current = null;
   };
 
@@ -28825,7 +28407,7 @@
   PopupMenu.prototype.registerProvider = function(id, priority, provider) {
     if (!provider) {
       provider = priority;
-      priority = DEFAULT_PRIORITY$1;
+      priority = DEFAULT_PRIORITY$2;
     }
 
     this._eventBus.on('popupMenu.getProviders.' + id, priority, function(event) {
@@ -28935,7 +28517,6 @@
 
 
   PopupMenu.prototype._getEmptyPlaceholder = function(providers) {
-
     const provider = providers.find(
       provider => isFunction(provider.getEmptyPlaceholder)
     );
@@ -29011,10 +28592,289 @@
     return entry;
   };
 
+  /**
+   * @typedef { {
+   *   index: number;
+   *   match: boolean;
+   *   value: string;
+   * } } Token
+   *
+   * @typedef {Token[]} Tokens
+   */
+
+  /**
+   * @template R
+   *
+   * @typedef { {
+   *   item: R,
+   *   tokens: Record<string, Tokens>
+   * } } SearchResult
+   */
+
+  /**
+   * Search items by query.
+   *
+   * @template T
+   *
+   * @param {T[]} items
+   * @param {string} pattern
+   * @param { {
+   *   keys: string[];
+   * } } options
+   *
+   * @returns {SearchResult<T>[]}
+   */
+  function search(items, pattern, options) {
+
+    const {
+      keys
+    } = options;
+
+    const words = pattern.trim().toLowerCase().split(/\s+/);
+
+    return items.flatMap((item) => {
+      const tokens = matchItem(item, words, keys);
+
+      if (!tokens) {
+        return [];
+      }
+
+      return {
+        item,
+        tokens
+      };
+    }).sort(createResultSorter(keys));
+  }
+
+  /**
+   * Match an item and return tokens in case of a match.
+   *
+   * @param {Object} item
+   * @param {string[]} words
+   * @param {string[]} keys
+   *
+   * @returns {Record<string, Tokens>}
+   */
+  function matchItem(item, words, keys) {
+
+    const {
+      matchedWords,
+      tokens
+    } = keys.reduce((result, key) => {
+      const string = item[ key ];
+
+      const {
+        tokens,
+        matchedWords
+      } = matchString(string, words);
+
+      return {
+        tokens: {
+          ...result.tokens,
+          [ key ]: tokens,
+        },
+        matchedWords: {
+          ...result.matchedWords,
+          ...matchedWords
+        }
+      };
+    }, {
+      matchedWords: {},
+      tokens: {}
+    });
+
+    // only return result if every word got matched
+    if (Object.keys(matchedWords).length !== words.length) {
+      return null;
+    }
+
+    return tokens;
+  }
+
+  /**
+   * Get index of result in list of results.
+   *
+   * @param {string[]} keys
+   *
+   * @returns { (resultA: SearchResult, resultB: SearchResult) => number}
+   */
+  function createResultSorter(keys) {
+
+    /**
+     * @param {SearchResult} resultA
+     * @param {SearchResult} resultB
+     */
+    return (resultA, resultB) => {
+
+      for (const key of keys) {
+
+        const tokenComparison = compareTokens(
+          resultA.tokens[key],
+          resultB.tokens[key]
+        );
+
+        if (tokenComparison !== 0) {
+          return tokenComparison;
+        }
+
+        const stringComparison = compareStrings(
+          resultA.item[ key ],
+          resultB.item[ key ]
+        );
+
+        if (stringComparison !== 0) {
+          return stringComparison;
+        }
+
+        // fall back to next key
+        continue;
+      }
+
+      // eventually call equality
+      return 0;
+    };
+
+  }
+
+  /**
+   * Compares two token arrays.
+   *
+   * @param {Token[]} [tokensA]
+   * @param {Token[]} [tokensB]
+   *
+   * @returns {number}
+   */
+  function compareTokens(tokensA, tokensB) {
+    return scoreTokens(tokensB) - scoreTokens(tokensA);
+  }
+
+  /**
+   * @param { Token[] } tokens
+   * @returns { number }
+   */
+  function scoreTokens(tokens) {
+    return tokens.reduce((sum, token) => sum + scoreToken(token), 0);
+  }
+
+  /**
+   * Score a token.
+   *
+   * @param { Token } token
+   *
+   * @returns { number }
+   */
+  function scoreToken(token) {
+    if (!token.match) {
+      return 0;
+    }
+
+    return token.start
+      ? 1.37
+      : token.wordStart
+        ? 1.13
+        : 1;
+  }
+
+  /**
+   * Compares two strings.
+   *
+   * @param {string} [a = '']
+   * @param {string} [b = '']
+   *
+   * @returns {number}
+   */
+  function compareStrings(a = '', b = '') {
+    return a.localeCompare(b);
+  }
+
+  /**
+   * Match a given string against a set of words,
+   * and return the result.
+   *
+   * @param {string} string
+   * @param {string[]} words
+   *
+   * @return { {
+   *   tokens: Token[],
+   *   matchedWords: Record<string, boolean>
+   * } }
+   */
+  function matchString(string, words) {
+
+    if (!string) {
+      return {
+        tokens: [],
+        matchedWords: {}
+      };
+    }
+
+    const tokens = [];
+    const matchedWords = {};
+
+    const regexpString = words.map(escapeRegexp).flatMap(str => [ '(?<wordStart>\\b' + str + ')', str ]).join('|');
+
+    const regexp = new RegExp(regexpString, 'ig');
+
+    let match;
+    let lastIndex = 0;
+
+    while ((match = regexp.exec(string))) {
+
+      const [ value ] = match;
+
+      if (match.index > lastIndex) {
+
+        // add previous token (NO match)
+        tokens.push({
+          value: string.slice(lastIndex, match.index),
+          index: lastIndex
+        });
+      }
+
+      // add current token (match)
+      tokens.push({
+        value,
+        index: match.index,
+        match: true,
+        wordStart: !!match.groups.wordStart,
+        start: match.index === 0
+      });
+
+      matchedWords[value.toLowerCase()] = true;
+
+      lastIndex = match.index + value.length;
+    }
+
+    // add after token (NO match)
+    if (lastIndex < string.length) {
+      tokens.push({
+        value: string.slice(lastIndex),
+        index: lastIndex
+      });
+    }
+
+    return {
+      tokens,
+      matchedWords
+    };
+  }
+
+  function escapeRegexp(string) {
+    return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var SearchModule$1 = {
+    search: [ 'value', search ]
+  };
+
   /**
    * @type { import('didi').ModuleDeclaration }
    */
   var PopupMenuModule$1 = {
+    __depends__: [ SearchModule$1 ],
     __init__: [ 'popupMenu' ],
     popupMenu: [ 'type', PopupMenu ]
   };
@@ -29072,7 +28932,7 @@
    * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default<Element>} ContextPadProvider
    */
 
-  var LOW_PRIORITY$l = 900;
+  var LOW_PRIORITY$m = 900;
 
   /**
    * A provider for the `Align elements` context pad entry.
@@ -29086,7 +28946,7 @@
    */
   function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {
 
-    contextPad.registerProvider(LOW_PRIORITY$l, this);
+    contextPad.registerProvider(LOW_PRIORITY$m, this);
 
     this._contextPad = contextPad;
     this._popupMenu = popupMenu;
@@ -29716,7 +29576,7 @@
    * @typedef {import('../modeling/Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$k = 100;
+  var LOW_PRIORITY$l = 100;
 
 
   /**
@@ -29729,7 +29589,7 @@
    */
   function AutoPlace$1(eventBus, modeling, canvas) {
 
-    eventBus.on('autoPlace', LOW_PRIORITY$k, function(context) {
+    eventBus.on('autoPlace', LOW_PRIORITY$l, function(context) {
       var shape = context.shape,
           source = context.source;
 
@@ -33813,7 +33673,7 @@
    */
 
   var HIGH_PRIORITY$h = 1100,
-      LOW_PRIORITY$j = 900;
+      LOW_PRIORITY$k = 900;
 
   var MARKER_OK$3 = 'connect-ok',
       MARKER_NOT_OK$3 = 'connect-not-ok';
@@ -33857,7 +33717,7 @@
       });
     });
 
-    eventBus.on('connect.hover', LOW_PRIORITY$j, function(event) {
+    eventBus.on('connect.hover', LOW_PRIORITY$k, function(event) {
       var context = event.context,
           hover = event.hover,
           canExecute = context.canExecute;
@@ -34338,12 +34198,10 @@
 
     if (gfx.childNodes) {
 
-      // TODO: use forEach once we drop PhantomJS
-      for (var i = 0; i < gfx.childNodes.length; i++) {
+      gfx.childNodes.forEach((childNode) => {
+        self._cloneMarkers(childNode, className, rootGfx);
+      });
 
-        // recursively clone markers of child nodes
-        self._cloneMarkers(gfx.childNodes[ i ], className, rootGfx);
-      }
     }
 
     if (!canHaveMarker(gfx)) {
@@ -34630,9 +34488,8 @@
   var ELEMENT_LABEL_DISTANCE = 10;
 
   /**
-   * A component that makes sure that external labels are added
-   * together with respective elements and properly updated (DI wise)
-   * during move.
+   * A behavior that ensures that labels are positioned in a way that they do not
+   * overlap with other elements or connections.
    *
    * @param {EventBus} eventBus
    * @param {Modeling} modeling
@@ -34693,6 +34550,10 @@
         return;
       }
 
+      if (isConnection(element)) {
+        return;
+      }
+
       var optimalPosition = getOptimalPosition(element);
 
       // no optimal position found
@@ -34953,7 +34814,7 @@
    * @typedef {import('didi').Injector} Injector
    */
 
-  var LOW_PRIORITY$i = 500;
+  var LOW_PRIORITY$j = 500;
 
 
   /**
@@ -34969,7 +34830,7 @@
 
     var self = this;
 
-    this.postExecuted('elements.create', LOW_PRIORITY$i, function(context) {
+    this.postExecuted('elements.create', LOW_PRIORITY$j, function(context) {
       var elements = context.elements;
 
       elements = elements.filter(function(shape) {
@@ -34992,7 +34853,7 @@
     }, true);
 
 
-    this.preExecute('elements.move', LOW_PRIORITY$i, function(context) {
+    this.preExecute('elements.move', LOW_PRIORITY$j, function(context) {
       var shapes = context.shapes,
           host = context.newHost;
 
@@ -36424,7 +36285,7 @@
    * @typedef {import('../../space-tool/BpmnSpaceTool').default} SpaceTool
    */
 
-  var LOW_PRIORITY$h = 500;
+  var LOW_PRIORITY$i = 500;
 
 
   /**
@@ -36537,7 +36398,7 @@
     /**
      * Adjust sizes of other lanes after lane deletion
      */
-    this.postExecuted('shape.delete', LOW_PRIORITY$h, function(event) {
+    this.postExecuted('shape.delete', LOW_PRIORITY$i, function(event) {
 
       var context = event.context,
           hints = context.hints,
@@ -36570,7 +36431,7 @@
    * @typedef {import('didi').Injector} Injector
    */
 
-  var LOW_PRIORITY$g = 500;
+  var LOW_PRIORITY$h = 500;
 
 
   /**
@@ -36586,7 +36447,7 @@
 
     var self = this;
 
-    this.postExecuted('elements.create', LOW_PRIORITY$g, function(context) {
+    this.postExecuted('elements.create', LOW_PRIORITY$h, function(context) {
       var elements = context.elements;
 
       elements.filter(function(shape) {
@@ -36600,7 +36461,7 @@
       });
     }, true);
 
-    this.preExecute('elements.move', LOW_PRIORITY$g, function(context) {
+    this.preExecute('elements.move', LOW_PRIORITY$h, function(context) {
       var shapes = context.shapes,
           newHost = context.newHost;
 
@@ -39644,14 +39505,11 @@
 
     if (/n/.test(resizeDirection)) {
       minTrbl.top = laneTrbl.bottom - minDimensions.height;
-    } else
-    if (/e/.test(resizeDirection)) {
+    } else if (/e/.test(resizeDirection)) {
       minTrbl.right = laneTrbl.left + minDimensions.width;
-    } else
-    if (/s/.test(resizeDirection)) {
+    } else if (/s/.test(resizeDirection)) {
       minTrbl.bottom = laneTrbl.top + minDimensions.height;
-    } else
-    if (/w/.test(resizeDirection)) {
+    } else if (/w/.test(resizeDirection)) {
       minTrbl.left = laneTrbl.right - minDimensions.width;
     }
 
@@ -39842,7 +39700,7 @@
    * @typedef {import('diagram-js/lib/util/Types').DirectionTRBL} DirectionTRBL
    */
 
-  var LOW_PRIORITY$f = 500;
+  var LOW_PRIORITY$g = 500;
 
 
   /**
@@ -39972,7 +39830,7 @@
       }
     });
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$f, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$g, function(context) {
       var descriptor = context.descriptor,
           businessObject = descriptor.businessObject,
           referencedRootElement = descriptor.referencedRootElement;
@@ -40217,7 +40075,7 @@
    * @typedef {import('../../../model/Types').ModdleElement} ModdleElement
    */
 
-  var LOW_PRIORITY$e = 400;
+  var LOW_PRIORITY$f = 400;
   var HIGH_PRIORITY$d = 600;
 
   var DEFAULT_POSITION = {
@@ -40470,7 +40328,7 @@
 
 
     // create/remove plane for the subprocess
-    this.executed('shape.toggleCollapse', LOW_PRIORITY$e, function(context) {
+    this.executed('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
       var shape = context.shape;
 
       if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -40488,7 +40346,7 @@
 
 
     // create/remove plane for the subprocess
-    this.reverted('shape.toggleCollapse', LOW_PRIORITY$e, function(context) {
+    this.reverted('shape.toggleCollapse', LOW_PRIORITY$f, function(context) {
       var shape = context.shape;
 
       if (!is$1(shape, 'bpmn:SubProcess')) {
@@ -40935,7 +40793,7 @@
    * @typedef {import('../Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$d = 500;
+  var LOW_PRIORITY$e = 500;
 
   /**
    * @param {EventBus} eventBus
@@ -40996,7 +40854,7 @@
       };
     }
 
-    this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$d, function(e) {
+    this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
 
       var context = e.context,
           shape = context.shape;
@@ -41019,7 +40877,7 @@
       }
     });
 
-    this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$d, function(e) {
+    this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
 
       var context = e.context;
       var shape = context.shape;
@@ -41034,7 +40892,7 @@
       }
     });
 
-    this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$d, function(e) {
+    this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$e, function(e) {
       var shape = e.context.shape,
           defaultSize = elementFactory.getDefaultSize(shape),
           newBounds;
@@ -41189,7 +41047,7 @@
    * @typedef {import('../Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$c = 500,
+  var LOW_PRIORITY$d = 500,
       HIGH_PRIORITY$c = 5000;
 
 
@@ -41267,7 +41125,7 @@
       initContext();
     });
 
-    this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$c, function(event) {
+    this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$d, function(event) {
       releaseContext();
     });
 
@@ -43403,7 +43261,7 @@
    * @typedef {import('../../draw/Styles').default} Styles
    */
 
-  var LOW_PRIORITY$b = 750;
+  var LOW_PRIORITY$c = 750;
 
   /**
    * @param {Canvas} canvas
@@ -43454,7 +43312,7 @@
       return dragGroup;
     }
 
-    eventBus.on('create.move', LOW_PRIORITY$b, function(event) {
+    eventBus.on('create.move', LOW_PRIORITY$c, function(event) {
 
       var hover = event.hover,
           context = event.context,
@@ -44213,7 +44071,7 @@
     });
   }
 
-  var LOW_PRIORITY$a = 750;
+  var LOW_PRIORITY$b = 750;
 
   /**
    * BPMN-specific copy & paste.
@@ -44230,7 +44088,7 @@
       return moddleCopy.copyElement(bo, targetBo, null, clone);
     }
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$a, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$b, function(context) {
       var descriptor = context.descriptor,
           element = context.element,
           businessObject = getBusinessObject(element);
@@ -44327,7 +44185,7 @@
 
     // copy + paste processRef with participant
 
-    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$a, function(context) {
+    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$b, function(context) {
       var descriptor = context.descriptor,
           element = context.element;
 
@@ -44353,7 +44211,7 @@
 
     // resolve references
 
-    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$a, function(context) {
+    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$b, function(context) {
       var cache = context.cache,
           descriptor = context.descriptor;
 
@@ -45139,7 +44997,7 @@
    * @typedef {import('../../core/EventBus').Event} Event
    */
 
-  var LOW_PRIORITY$9 = 250;
+  var LOW_PRIORITY$a = 250;
 
   /**
    * The tool manager acts as middle-man between the available tool's and the Palette,
@@ -45218,7 +45076,7 @@
       eventsToRegister.push(event + '.canceled');
     });
 
-    eventBus.on(eventsToRegister, LOW_PRIORITY$9, function(event) {
+    eventBus.on(eventsToRegister, LOW_PRIORITY$a, function(event) {
 
       // We defer the de-activation of the tool to the .activate phase,
       // so we're able to check if we want to toggle off the current
@@ -46008,7 +45866,7 @@
   var MARKER_DRAGGING$1 = 'djs-dragging',
       MARKER_RESIZING$1 = 'djs-resizing';
 
-  var LOW_PRIORITY$8 = 250;
+  var LOW_PRIORITY$9 = 250;
 
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
@@ -46090,7 +45948,7 @@
     });
 
     // add and update move/resize previews
-    eventBus.on('spaceTool.move', LOW_PRIORITY$8, function(event) {
+    eventBus.on('spaceTool.move', LOW_PRIORITY$9, function(event) {
 
       var context = event.context,
           line = context.line,
@@ -46970,7 +46828,7 @@
     return collection;
   }
 
-  var LOW_PRIORITY$7 = 250,
+  var LOW_PRIORITY$8 = 250,
       HIGH_PRIORITY$8 = 1400;
 
   /**
@@ -47009,7 +46867,7 @@
     });
 
     // add labels to visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$7, function(e) {
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$8, function(e) {
 
       var context = e.context,
           shapes = context.shapes;
@@ -47152,7 +47010,7 @@
    * @typedef {import('../modeling/Modeling').default} Modeling
    */
 
-  var LOW_PRIORITY$6 = 251,
+  var LOW_PRIORITY$7 = 251,
       HIGH_PRIORITY$7 = 1401;
 
   var MARKER_ATTACH$1 = 'attach-ok';
@@ -47194,7 +47052,7 @@
     });
 
     // add attachers to the visual's group
-    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$6, function(e) {
+    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$7, function(e) {
 
       var context = e.context,
           shapes = context.shapes,
@@ -48197,17 +48055,13 @@
       }
 
       containment = 'lanes';
-    } else
-
-    if (is$1(businessObject, 'bpmn:FlowElement')) {
+    } else if (is$1(businessObject, 'bpmn:FlowElement')) {
 
       if (newParent) {
 
         if (is$1(newParent, 'bpmn:Participant')) {
           newParent = newParent.processRef;
-        } else
-
-        if (is$1(newParent, 'bpmn:Lane')) {
+        } else if (is$1(newParent, 'bpmn:Lane')) {
           do {
 
             // unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)
@@ -48219,9 +48073,7 @@
 
       containment = 'flowElements';
 
-    } else
-
-    if (is$1(businessObject, 'bpmn:Artifact')) {
+    } else if (is$1(businessObject, 'bpmn:Artifact')) {
 
       while (newParent &&
              !is$1(newParent, 'bpmn:Process') &&
@@ -48237,14 +48089,9 @@
       }
 
       containment = 'artifacts';
-    } else
-
-    if (is$1(businessObject, 'bpmn:MessageFlow')) {
+    } else if (is$1(businessObject, 'bpmn:MessageFlow')) {
       containment = 'messageFlows';
-
-    } else
-
-    if (is$1(businessObject, 'bpmn:Participant')) {
+    } else if (is$1(businessObject, 'bpmn:Participant')) {
       containment = 'participants';
 
       // make sure the participants process is properly attached / detached
@@ -48266,13 +48113,9 @@
           process.$parent = definitions;
         }
       }
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
       containment = 'dataOutputAssociations';
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
       containment = 'dataInputAssociations';
     }
 
@@ -48368,9 +48211,7 @@
 
         businessObject.targetRef = newTargetBo;
       }
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
 
       // handle obnoxious isMsome sourceRef
       businessObject.get('sourceRef')[0] = newSourceBo;
@@ -48378,9 +48219,7 @@
       visualParent = context.parent || context.newParent || newTargetBo;
 
       this.updateSemanticParent(businessObject, newTargetBo, visualParent);
-    } else
-
-    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
+    } else if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
       visualParent = context.parent || context.newParent || newSourceBo;
 
       this.updateSemanticParent(businessObject, newSourceBo, visualParent);
@@ -48597,8 +48436,7 @@
 
       if (elementType === 'root') {
         di = this._bpmnFactory.createDiPlane(businessObject, diAttrs);
-      } else
-      if (elementType === 'connection') {
+      } else if (elementType === 'connection') {
         di = this._bpmnFactory.createDiEdge(businessObject, diAttrs);
       } else {
         di = this._bpmnFactory.createDiShape(businessObject, diAttrs);
@@ -52071,15 +51909,13 @@
     if (isHorizontalLane) {
       if (location === 'left') {
         location = 'top';
-      } else
-      if (location === 'right') {
+      } else if (location === 'right') {
         location = 'bottom';
       }
     } else {
       if (location === 'top') {
         location = 'left';
-      } else
-      if (location === 'bottom') {
+      } else if (location === 'bottom') {
         location = 'right';
       }
     }
@@ -52140,22 +51976,19 @@
       spacePos = lanePosition + 10;
       direction = 'n';
       axis = 'y';
-    } else
-    if (location === 'left') {
+    } else if (location === 'left') {
       offset = -120;
       lanePosition = shape.x;
       spacePos = lanePosition + 10;
       direction = 'w';
       axis = 'x';
-    } else
-    if (location === 'bottom') {
+    } else if (location === 'bottom') {
       offset = 120;
       lanePosition = shape.y + shape.height;
       spacePos = lanePosition - 10;
       direction = 's';
       axis = 'y';
-    } else
-    if (location === 'right') {
+    } else if (location === 'right') {
       offset = 120;
       lanePosition = shape.x + shape.width;
       spacePos = lanePosition - 10;
@@ -55176,10 +55009,12 @@
    * to edit an elements text directly in the diagram
    *
    * @param {EventBus} eventBus the event bus
+   * @param {Canvas} canvas the canvas
    */
   function DirectEditing(eventBus, canvas) {
 
     this._eventBus = eventBus;
+    this._canvas = canvas;
 
     this._providers = [];
     this._textbox = new TextBox({
@@ -55243,6 +55078,9 @@
     this._active = null;
 
     this.resizable = undefined;
+
+    // restoreFocus API is available from diagram-js@15.0.0
+    this._canvas.restoreFocus && this._canvas.restoreFocus();
   };
 
 
@@ -56794,26 +56632,24 @@
     var self = this;
     var translate = this._translate;
 
-    function toggleLoopEntry(event, entry) {
-
-      // remove
+    function toggleLoopCharacteristics(event, entry) {
       if (entry.active) {
         self._modeling.updateProperties(target, { loopCharacteristics: undefined });
+
         return;
       }
 
-      const currentLoopCharacteristics = target.businessObject.get('loopCharacteristics'),
-            newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
-
-      // copy old properties
-      if (currentLoopCharacteristics) {
-        self._moddleCopy.copyElement(currentLoopCharacteristics, newLoopCharacteristics);
-      }
+      var loopCharacteristics = target.businessObject.get('loopCharacteristics');
 
-      // update `isSequential` property
-      newLoopCharacteristics.set('isSequential', entry.options.isSequential);
+      if (loopCharacteristics && is$1(loopCharacteristics, entry.options.loopCharacteristics)) {
+        self._modeling.updateModdleProperties(target, loopCharacteristics, { isSequential: entry.options.isSequential });
+      } else {
+        loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics, {
+          isSequential: entry.options.isSequential
+        });
 
-      self._modeling.updateProperties(target, { loopCharacteristics: newLoopCharacteristics });
+        self._modeling.updateProperties(target, { loopCharacteristics: loopCharacteristics });
+      }
     }
 
     var businessObject = getBusinessObject(target),
@@ -56835,7 +56671,7 @@
         className: 'bpmn-icon-parallel-mi-marker',
         title: translate('Parallel multi-instance'),
         active: isParallel,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
           isSequential: false
@@ -56845,7 +56681,7 @@
         className: 'bpmn-icon-sequential-mi-marker',
         title: translate('Sequential multi-instance'),
         active: isSequential,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
           isSequential: true
@@ -56855,7 +56691,7 @@
         className: 'bpmn-icon-loop-marker',
         title: translate('Loop'),
         active: isLoop,
-        action: toggleLoopEntry,
+        action: toggleLoopCharacteristics,
         options: {
           loopCharacteristics: 'bpmn:StandardLoopCharacteristics'
         }
@@ -57392,9 +57228,7 @@
             { eventDefinitionType: 'bpmn:SignalEventDefinition' }
           )
         });
-      } else
-
-      if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
+      } else if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {
 
         assign$1(actions, {
           'append.compensation-activity':
@@ -57407,9 +57241,7 @@
                 }
               )
         });
-      } else
-
-      if (!is$1(businessObject, 'bpmn:EndEvent') &&
+      } else if (!is$1(businessObject, 'bpmn:EndEvent') &&
           !businessObject.isForCompensation &&
           !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
           !isEventSubProcess(businessObject)) {
@@ -57889,7 +57721,7 @@
    * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget
    */
 
-  var LOW_PRIORITY$5 = 900;
+  var LOW_PRIORITY$6 = 900;
 
   /**
    * A provider for the distribute elements popup menu.
@@ -57908,7 +57740,7 @@
     this._popupMenu = popupMenu;
     this._rules = rules;
 
-    popupMenu.registerProvider('align-elements', LOW_PRIORITY$5, this);
+    popupMenu.registerProvider('align-elements', LOW_PRIORITY$6, this);
   }
 
   DistributeElementsMenuProvider.$inject = [
@@ -58481,7 +58313,7 @@
    */
 
   var LOWER_PRIORITY = 1200;
-  var LOW_PRIORITY$4 = 800;
+  var LOW_PRIORITY$5 = 800;
 
   /**
    * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
@@ -58499,7 +58331,7 @@
 
     var self = this;
 
-    eventBus.on('diagram.init', LOW_PRIORITY$4, function() {
+    eventBus.on('diagram.init', LOW_PRIORITY$5, function() {
       self.setActive(active);
     });
 
@@ -59383,17 +59215,13 @@
 
       if (is$1(element, 'bpmn:Lane')) {
         return self._createParticipantHit(element, gfx);
-      } else
-
-      if (is$1(element, 'bpmn:Participant')) {
+      } else if (is$1(element, 'bpmn:Participant')) {
         if (isExpanded(element)) {
           return self._createParticipantHit(element, gfx);
         } else {
           return self._createDefaultHit(element, gfx);
         }
-      } else
-
-      if (is$1(element, 'bpmn:SubProcess')) {
+      } else if (is$1(element, 'bpmn:SubProcess')) {
         if (isExpanded(element)) {
           return self._createSubProcessHit(element, gfx);
         } else {
@@ -60132,7 +59960,7 @@
   var MARKER_RESIZING = 'djs-resizing',
       MARKER_RESIZE_NOT_OK = 'resize-not-ok';
 
-  var LOW_PRIORITY$3 = 500;
+  var LOW_PRIORITY$4 = 500;
 
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
@@ -60198,7 +60026,7 @@
     }
 
     // add and update previews
-    eventBus.on('resize.move', LOW_PRIORITY$3, function(event) {
+    eventBus.on('resize.move', LOW_PRIORITY$4, function(event) {
       updateFrame(event.context);
     });
 
@@ -61503,6 +61331,285 @@
     modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
+  var LOW_PRIORITY$3 = 500;
+
+  var DEFAULT_PRIORITY$1 = 1000;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Styles} styles
+   */
+  function Outline(eventBus, styles) {
+
+    this._eventBus = eventBus;
+
+    this.offset = 5;
+
+    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+
+    var self = this;
+
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
+      var outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: 0,
+        y: 0,
+        rx: 4,
+        width: 100,
+        height: 100
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
+    // A low priortity is necessary, because outlines of labels have to be updated
+    // after the label bounds have been updated in the renderer.
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$3, function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateShapeOutline(outline, element);
+    });
+
+    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
+  }
+
+
+  /**
+   * Updates the outline of a shape respecting the dimension of the
+   * element and an outline offset.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} element
+   */
+  Outline.prototype.updateShapeOutline = function(outline, element) {
+
+    var updated = false;
+    var providers = this._getProviders();
+
+    if (providers.length) {
+      forEach$1(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
+
+    if (!updated) {
+      attr(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
+
+  /**
+   * Updates the outline of a connection respecting the bounding box of
+   * the connection and an outline offset.
+   * Register an outline provider with the given priority.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} connection
+   */
+  Outline.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr(outline, {
+      x: bbox.x - this.offset,
+      y: bbox.y - this.offset,
+      width: bbox.width + this.offset * 2,
+      height: bbox.height + this.offset * 2
+    });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$1;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   */
+  Outline.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$1(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
+
+  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+
+  var SELECTION_OUTLINE_PADDING = 6;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../core/Canvas').default} Canvas
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {Selection} selection
+   */
+  function MultiSelectionOutline(eventBus, canvas, selection) {
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('element.changed', function(event) {
+      if (selection.isSelected(event.element)) {
+        self._updateMultiSelectionOutline(selection.get());
+      }
+    });
+
+    eventBus.on('selection.changed', function(event) {
+      var newSelection = event.newSelection;
+
+      self._updateMultiSelectionOutline(newSelection);
+    });
+  }
+
+
+
+  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
+    var layer = this._canvas.getLayer('selectionOutline');
+
+    clear(layer);
+
+    var enabled = selection.length > 1;
+
+    var container = this._canvas.getContainer();
+
+    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+    if (!enabled) {
+      return;
+    }
+
+    var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+    var rect = create$1('rect');
+
+    attr(rect, assign$1({
+      rx: 3
+    }, bBox));
+
+    classes(rect).add('djs-selection-outline');
+
+    append(layer, rect);
+  };
+
+
+  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
+
+  // helpers //////////
+
+  function addSelectionOutlinePadding(bBox) {
+    return {
+      x: bBox.x - SELECTION_OUTLINE_PADDING,
+      y: bBox.y - SELECTION_OUTLINE_PADDING,
+      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+    };
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var Ouline = {
+    __depends__: [
+      SelectionModule
+    ],
+    __init__: [ 'outline', 'multiSelectionOutline' ],
+    outline: [ 'type', Outline ],
+    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
+  };
+
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -62005,7 +62112,7 @@
     __depends__: [
       InteractionEventsModule$1,
       SelectionModule,
-      OutlineModule$1,
+      Ouline,
       RulesModule$1,
       DraggingModule,
       PreviewSupportModule
@@ -64779,6 +64886,8 @@
    * @typedef {import('./SearchPadProvider').Token} Token
    */
 
+  var SCROLL_TO_ELEMENT_PADDING = 300;
+
   /**
    * Provides searching infrastructure.
    *
@@ -64789,7 +64898,7 @@
    */
   function SearchPad(canvas, eventBus, selection, translate) {
     this._open = false;
-    this._results = [];
+    this._results = {};
     this._eventMaps = [];
 
     this._cachedRootElement = null;
@@ -64943,6 +65052,9 @@
     });
 
     if (!searchResults.length) {
+      this._clearMarkers();
+      this._selection.select(null);
+
       return;
     }
 
@@ -65011,12 +65123,22 @@
   SearchPad.prototype._clearResults = function() {
     clear$1(this._resultsContainer);
 
-    this._results = [];
+    this._results = {};
 
     this._eventBus.fire('searchPad.cleared');
   };
 
 
+  /**
+   * Clears all markers.
+   */
+  SearchPad.prototype._clearMarkers = function() {
+    for (var id in this._results) {
+      this._canvas.removeMarker(this._results[id].element, 'djs-search-preselected');
+    }
+  };
+
+
   /**
    * Get currently selected result.
    *
@@ -65133,12 +65255,16 @@
     classes$1(this._canvas.getContainer()).remove('djs-search-open');
     classes$1(this._container).remove('open');
 
+    this._clearMarkers();
+
     this._clearResults();
 
     this._searchInput.value = '';
     this._searchInput.blur();
 
     this._eventBus.fire('searchPad.closed');
+
+    this._canvas.restoreFocus();
   };
 
 
@@ -65171,6 +65297,8 @@
       return;
     }
 
+    this._clearMarkers();
+
     // removing preselection from current node
     if (selectedNode) {
       classes$1(selectedNode).remove(SearchPad.RESULT_SELECTED_CLASS);
@@ -65181,14 +65309,14 @@
 
     classes$1(node).add(SearchPad.RESULT_SELECTED_CLASS);
 
-    this._canvas.zoom(1);
-
     this._canvas.scrollToElement(element, {
-      top: 300
+      top: SCROLL_TO_ELEMENT_PADDING
     });
 
     this._selection.select(element);
 
+    this._canvas.addMarker(element, 'djs-search-preselected');
+
     this._eventBus.fire('searchPad.preselected', element);
   };
 
@@ -65207,7 +65335,9 @@
 
     this.close(false);
 
-    this._canvas.scrollToElement(element, { top: 400 });
+    this._canvas.scrollToElement(element, {
+      top: SCROLL_TO_ELEMENT_PADDING
+    });
 
     this._selection.select(element);
 
@@ -65253,10 +65383,13 @@
     var htmlText = '';
 
     tokens.forEach(function(t) {
-      if (t.matched) {
-        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</b>';
+      var text = escapeHTML(t.value || t.matched || t.normal);
+      var match = t.match || t.matched;
+
+      if (match) {
+        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + text + '</b>';
       } else {
-        htmlText += escapeHTML(t.normal);
+        htmlText += text;
       }
     });
 
@@ -65314,7 +65447,11 @@
    * @typedef {import('diagram-js/lib/features/search-pad/SearchPad').default} SearchPad
    *
    * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').default} SearchPadProvider
-   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').SearchResult} SearchResult
+   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').SearchResult} SearchPadResult
+   * @typedef {import('diagram-js/lib/features/search-pad/SearchPadProvider').Token} SearchPadToken
+   * @typedef {import('diagram-js/lib/features/search/search').default} Search
+   * @typedef {import('diagram-js/lib/features/search/search').SearchResult} SearchResult
+   * @typedef {import('diagram-js/lib/features/search/search').Token} SearchToken
    */
 
   /**
@@ -65325,10 +65462,12 @@
    * @param {ElementRegistry} elementRegistry
    * @param {SearchPad} searchPad
    * @param {Canvas} canvas
+   * @param {Search} search
    */
-  function BpmnSearchProvider(elementRegistry, searchPad, canvas) {
+  function BpmnSearchProvider(elementRegistry, searchPad, canvas, search) {
     this._elementRegistry = elementRegistry;
     this._canvas = canvas;
+    this._search = search;
 
     searchPad.registerProvider(this);
   }
@@ -65336,13 +65475,14 @@
   BpmnSearchProvider.$inject = [
     'elementRegistry',
     'searchPad',
-    'canvas'
+    'canvas',
+    'search'
   ];
 
   /**
    * @param {string} pattern
    *
-   * @return {SearchResult[]}
+   * @return {SearchPadResult[]}
    */
   BpmnSearchProvider.prototype.find = function(pattern) {
     var rootElements = this._canvas.getRootElements();
@@ -65351,167 +65491,261 @@
       return !isLabel(element) && !rootElements.includes(element);
     });
 
-    return elements
-      .reduce(function(results, element) {
-        var label = getLabel(element);
-
-        var primaryTokens = findMatches(label, pattern),
-            secondaryTokens = findMatches(element.id, pattern);
-
-        if (hasMatch(primaryTokens) || hasMatch(secondaryTokens)) {
-          return [
-            ...results,
-            {
-              primaryTokens,
-              secondaryTokens,
-              element
-            }
-          ];
-        }
-
-        return results;
-      }, [])
-      .sort(function(a, b) {
-        return compareTokens(a.primaryTokens, b.primaryTokens)
-          || compareTokens(a.secondaryTokens, b.secondaryTokens)
-          || compareStrings(getLabel(a.element), getLabel(b.element))
-          || compareStrings(a.element.id, b.element.id);
-      })
-      .map(function(result) {
+    return this._search(
+      elements.map(element => {
         return {
-          element: result.element,
-          primaryTokens: result.primaryTokens.map(function(token) {
-            return omit(token, [ 'index' ]);
-          }),
-          secondaryTokens: result.secondaryTokens.map(function(token) {
-            return omit(token, [ 'index' ]);
-          })
+          element,
+          label: getLabel(element),
+          id: element.id
         };
-      });
+      }),
+      pattern, {
+        keys: [
+          'label',
+          'id'
+        ]
+      }
+    ).map(toSearchPadResult);
   };
 
   /**
-   * @param {Token} token
+   * @param {SearchResult} token
    *
-   * @return {boolean}
+   * @return {SearchPadResult}
    */
-  function isMatch(token) {
-    return 'matched' in token;
+  function toSearchPadResult(result) {
+
+    const {
+      item: {
+        element
+      },
+      tokens
+    } = result;
+
+    return {
+      element,
+      primaryTokens: tokens.label,
+      secondaryTokens: tokens.id
+    };
   }
 
+  var SearchModule = {
+    __depends__: [
+      SearchPadModule,
+      SearchModule$1
+    ],
+    __init__: [ 'bpmnSearch' ],
+    bpmnSearch: [ 'type', BpmnSearchProvider ]
+  };
+
+  const DATA_OBJECT_REFERENCE_OUTLINE_PATH = 'M44.7648 11.3263L36.9892 2.64074C36.0451 1.58628 34.5651 0.988708 33.1904 0.988708H5.98667C3.22688 0.988708 0.989624 3.34892 0.989624 6.26039V55.0235C0.989624 57.9349 3.22688 60.2952 5.98667 60.2952H40.966C43.7257 60.2952 45.963 57.9349 45.963 55.0235V14.9459C45.963 13.5998 45.6407 12.3048 44.7648 11.3263Z';
+  const DATA_STORE_REFERENCE_OUTLINE_PATH = 'M1.03845 48.1347C1.03845 49.3511 1.07295 50.758 1.38342 52.064C1.69949 53.3938 2.32428 54.7154 3.56383 55.6428C6.02533 57.4841 10.1161 58.7685 14.8212 59.6067C19.5772 60.4538 25.1388 60.8738 30.6831 60.8738C36.2276 60.8738 41.7891 60.4538 46.545 59.6067C51.2504 58.7687 55.3412 57.4842 57.8028 55.6429C59.0424 54.7156 59.6673 53.3938 59.9834 52.064C60.2938 50.7579 60.3285 49.351 60.3285 48.1344V13.8415C60.3285 12.6249 60.2938 11.218 59.9834 9.91171C59.6673 8.58194 59.0423 7.2602 57.8027 6.33294C55.341 4.49168 51.2503 3.20723 46.545 2.36914C41.7891 1.522 36.2276 1.10204 30.6831 1.10205C25.1388 1.10206 19.5772 1.52206 14.8213 2.36923C10.1162 3.20734 6.02543 4.49183 3.5639 6.33314C2.32433 7.26038 1.69951 8.58206 1.38343 9.91181C1.07295 11.2179 1.03845 12.6247 1.03845 13.8411V48.1347Z';
+
   /**
-   * @param {Token[]} tokens
+   * @typedef { import('diagram-js/lib/util/Types').Dimensions} Dimensions
+   */
+
+  /**
+   * @type {Dimensions}
+   */
+  const DATA_OBJECT_REFERENCE_STANDARD_SIZE = { width: 36, height: 50 };
+
+  /**
+   * @type {Dimensions}
+   */
+  const DATA_STORE_REFERENCE_STANDARD_SIZE = { width: 50, height: 50 };
+
+  /**
+   * Create a path element with given attributes.
+   * @param {string} path
+   * @param {Object} attrs
+   * @param {Object} OUTLINE_STYLE
+   * @return {SVGElement}
+   */
+  function createPath(path, attrs, OUTLINE_STYLE) {
+    return create$1('path', {
+      d: path,
+      strokeWidth: 2,
+      transform: `translate(${attrs.x}, ${attrs.y})`,
+      ...OUTLINE_STYLE
+    });
+  }
+
+  /**
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').default } BaseOutlineProvider
    *
-   * @return {boolean}
+   * @typedef { import('diagram-js/lib/features/outline/OutlineProvider').Outline } Outline
+   *
+   * @typedef { import('diagram-js/lib/draw/Styles').default } Styles
+   *
+   * @typedef { import('diagram-js/lib/model/Types').Element } Element
    */
-  function hasMatch(tokens) {
-    return tokens.find(isMatch);
+
+  const DEFAULT_OFFSET = 5;
+
+  /**
+   * BPMN-specific outline provider.
+   *
+   * @implements {BaseOutlineProvider}
+   *
+   * @param {Outline} outline
+   * @param {Styles} styles
+   */
+  function OutlineProvider(outline, styles) {
+
+    this._styles = styles;
+    outline.registerProvider(this);
   }
 
+  OutlineProvider.$inject = [
+    'outline',
+    'styles'
+  ];
+
   /**
-   * Compares two token arrays.
+   * Returns outline for a given element.
    *
-   * @param {Token[]} tokensA
-   * @param {Token[]} tokensB
+   * @param {Element} element
    *
-   * @returns {number}
+   * @return {Outline}
    */
-  function compareTokens(tokensA, tokensB) {
-    const tokensAHasMatch = hasMatch(tokensA),
-          tokensBHasMatch = hasMatch(tokensB);
+  OutlineProvider.prototype.getOutline = function(element) {
 
-    if (tokensAHasMatch && !tokensBHasMatch) {
-      return -1;
-    }
+    const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]);
 
-    if (!tokensAHasMatch && tokensBHasMatch) {
-      return 1;
-    }
+    var outline;
 
-    if (!tokensAHasMatch && !tokensBHasMatch) {
-      return 0;
+    if (isLabel(element)) {
+      return;
     }
 
-    const tokensAFirstMatch = tokensA.find(isMatch),
-          tokensBFirstMatch = tokensB.find(isMatch);
+    if (is$1(element, 'bpmn:Gateway')) {
+      outline = create$1('rect');
 
-    if (tokensAFirstMatch.index < tokensBFirstMatch.index) {
-      return -1;
-    }
+      assign$1(outline.style, {
+        'transform-box': 'fill-box',
+        'transform': 'rotate(45deg)',
+        'transform-origin': 'center'
+      });
+
+      attr(outline, assign$1({
+        x: 2,
+        y: 2,
+        rx: 4,
+        width: element.width - 4,
+        height: element.height - 4,
+      }, OUTLINE_STYLE));
 
-    if (tokensAFirstMatch.index > tokensBFirstMatch.index) {
-      return 1;
+    } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Group', 'bpmn:CallActivity' ])) {
+      outline = create$1('rect');
+
+      attr(outline, assign$1({
+        x: -DEFAULT_OFFSET,
+        y: -DEFAULT_OFFSET,
+        rx: 14,
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:EndEvent')) {
+
+      outline = create$1('circle');
+
+      // Extra 1px offset needed due to increased stroke-width of end event
+      // which makes it bigger than other events.
+
+      attr(outline, assign$1({
+        cx: element.width / 2,
+        cy: element.height / 2,
+        r: element.width / 2 + DEFAULT_OFFSET + 1
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:Event')) {
+      outline = create$1('circle');
+
+      attr(outline, assign$1({
+        cx: element.width / 2,
+        cy: element.height / 2,
+        r: element.width / 2 + DEFAULT_OFFSET
+      }, OUTLINE_STYLE));
+
+    } else if (is$1(element, 'bpmn:DataObjectReference') && isStandardSize(element, 'bpmn:DataObjectReference')) {
+
+      outline = createPath(
+        DATA_OBJECT_REFERENCE_OUTLINE_PATH,
+        { x: -6, y: -6 },
+        OUTLINE_STYLE
+      );
+
+    } else if (is$1(element, 'bpmn:DataStoreReference') && isStandardSize(element, 'bpmn:DataStoreReference')) {
+
+      outline = createPath(
+        DATA_STORE_REFERENCE_OUTLINE_PATH,
+        { x: -6, y: -6 },
+        OUTLINE_STYLE
+      );
     }
 
-    return 0;
-  }
+    return outline;
+  };
 
   /**
-   * Compares two strings.
-   *
-   * @param {string} [a]
-   * @param {string} [b]
+   * Updates the outline for a given element.
+   * Returns true if the update for the given element was handled by this provider.
    *
-   * @returns {number}
+   * @param {Element} element
+   * @param {Outline} outline
+   * @returns {boolean}
    */
-  function compareStrings(a = '', b = '') {
-    return a.localeCompare(b);
-  }
+  OutlineProvider.prototype.updateOutline = function(element, outline) {
 
-  /**
-   * @param {string} text
-   * @param {string} pattern
-   *
-   * @return {Token[]}
-   */
-  function findMatches(text, pattern) {
-    var tokens = [],
-        originalText = text;
+    if (isLabel(element)) {
+      return;
+    }
 
-    if (!text) {
-      return tokens;
+    if (isAny(element, [ 'bpmn:SubProcess', 'bpmn:Group' ])) {
+
+      attr(outline, {
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      });
+
+      return true;
+
+    } else if (isAny(element, [
+      'bpmn:Event',
+      'bpmn:Gateway',
+      'bpmn:DataStoreReference',
+      'bpmn:DataObjectReference'
+    ])) {
+      return true;
     }
 
-    text = text.toLowerCase();
-    pattern = pattern.toLowerCase();
+    return false;
+  };
 
-    var index = text.indexOf(pattern);
 
-    if (index > -1) {
-      if (index !== 0) {
-        tokens.push({
-          normal: originalText.slice(0, index),
-          index: 0
-        });
-      }
+  // helpers //////////
 
-      tokens.push({
-        matched: originalText.slice(index, index + pattern.length),
-        index: index
-      });
+  function isStandardSize(element, type) {
+    var standardSize;
 
-      if (pattern.length + index < text.length) {
-        tokens.push({
-          normal: originalText.slice(index + pattern.length),
-          index: index + pattern.length
-        });
-      }
-    } else {
-      tokens.push({
-        normal: originalText,
-        index: 0
-      });
+    if (type === 'bpmn:DataObjectReference') {
+      standardSize = DATA_OBJECT_REFERENCE_STANDARD_SIZE;
+    } else if (type === 'bpmn:DataStoreReference') {
+      standardSize = DATA_STORE_REFERENCE_STANDARD_SIZE;
     }
 
-    return tokens;
+    return element.width === standardSize.width
+            && element.height === standardSize.height;
   }
 
-  var SearchModule = {
+  var OutlineModule = {
     __depends__: [
-      SearchPadModule
+      Ouline
     ],
-    __init__: [ 'bpmnSearch' ],
-    bpmnSearch: [ 'type', BpmnSearchProvider ]
+    __init__: [ 'outlineProvider' ],
+    outlineProvider: [ 'type', OutlineProvider ]
   };
 
   var initialDiagram =
@@ -65666,7 +65900,8 @@
     ReplacePreviewModule,
     ResizeModule,
     SnappingModule,
-    SearchModule
+    SearchModule,
+    OutlineModule
   ];