bpmn-js 17.10.0 → 17.11.1

package/README.md

@@ -88,6 +88,8 @@ bpmn-js builds on top of a few powerful tools:
 * [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers
 * [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
 
+It is an extensible toolkit, complemented by many [additional utilities](https://github.com/bpmn-io/awesome-bpmn-io). 
+
 ## License
 
 Use under the terms of the [bpmn.io license](http://bpmn.io/license).

package/dist/assets/diagram-js.css

@@ -74,14 +74,15 @@
   --resizer-fill-color: var(--color-blue-205-100-45);
   --resizer-stroke-color: var(--canvas-fill-color);
 
-  --search-container-background-color: var(--color-grey-225-10-97);
-  --search-container-border-color: var(--color-blue-205-100-50);
-  --search-container-box-shadow-color: var(--color-blue-205-100-95);
-  --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
+  --search-font-family: "IBM Plex Sans", sans-serif;
+  --search-font-size: 14px;
+  --search-container-background-color: var(--color-white);
+  --search-shadow-color: var(--color-black-opacity-30);
   --search-input-border-color: var(--color-grey-225-10-75);
-  --search-result-border-color: var(--color-grey-225-10-75);
-  --search-result-highlight-color: var(--color-black);
-  --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
+  --search-input-focus-border-color: var(--color-blue-205-100-50);
+  --search-input-focus-background-color: var(--color-blue-205-100-95);
+  --search-result-hover-background-color: var(--color-grey-225-10-95);
+  --search-result-secondary-color: var(--color-grey-225-10-55);
 
   --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
   --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
@@ -532,7 +533,7 @@ svg.new-parent {
   width: 100%;
   box-sizing: border-box;
   font-size: var(--popup-font-size);
-  padding: 3px 6px;
+  padding: 3px 6px 3px 28px;
   border-radius: 2px;
   border: solid 1px var(--popup-search-border-color);
   line-height: 21px;
@@ -593,6 +594,8 @@ svg.new-parent {
 }
 
 .djs-popup-search {
+  position: relative;
+  width: auto;
   margin: 10px 12px;
 }
 
@@ -603,21 +606,12 @@ svg.new-parent {
   margin: 0;
 }
 
-.djs-popup-search {
-  position: relative;
-  width: auto;
-}
-
 .djs-popup-search-icon {
   position: absolute;
   left: 8px;
   top: 7px;
 }
 
-.djs-popup-search input {
-  padding-left: 25px;
-}
-
 .djs-popup-results {
   margin: 7px 3px 7px 12px;
   list-style: none;
@@ -889,6 +883,14 @@ svg.new-parent {
 /**
  * search pad
  */
+.djs-search-open .djs-context-pad {
+  display: none;
+}
+
+.djs-search-open .djs-connection.selected .djs-outline {
+  display: block;
+}
+
 .djs-search-container {
   position: absolute;
   top: 20px;
@@ -902,76 +904,79 @@ svg.new-parent {
   max-width: 400px;
   z-index: 10;
 
-  font-size: 1.05em;
-  opacity: 0.9;
-  background: var(--search-container-background-color);
-  border: solid 1px var(--search-container-border-color);
+  font-family: var(--search-font-family);
+  font-size: var(--search-font-size);
   border-radius: 2px;
-  box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset;
+  box-shadow: 0px 2px 6px var(--search-shadow-color);
 }
 
 .djs-search-container:not(.open) {
   display: none;
 }
 
+.djs-search-input {
+  position: relative;
+}
+
+.djs-search-input svg {
+  position: absolute;
+  left: 8px;
+  top: 7px;
+}
+
 .djs-search-input input {
-  font-size: 1.05em;
+  font-size: var(--search-font-size);
   width: 100%;
-  padding: 6px 10px;
+  padding: 3px 6px 3px 28px;
   border: 1px solid var(--search-input-border-color);
+  border-radius: 2px;
   box-sizing: border-box;
+  line-height: 21px;
 }
 
 .djs-search-input input:focus {
+  background-color: var(--search-input-focus-background-color);
+  border: solid 1px var(--search-input-focus-border-color);
   outline: none;
-  border-color: var(--search-input-border-color);
 }
 
 .djs-search-results {
   position: relative;
   overflow-y: auto;
   max-height: 200px;
-}
-
-.djs-search-results:hover {
-  cursor: pointer;
+  background: var(--search-container-background-color);
 }
 
 .djs-search-result {
-  width: 100%;
-  padding: 6px 10px;
-  background: white;
-  border-bottom: solid 1px var(--search-result-border-color);
-  border-radius: 1px;
-}
-
-.djs-search-highlight {
-  color: var(--search-result-highlight-color);
+  padding: 6px 8px;
 }
 
 .djs-search-result-primary {
-  margin: 0 0 10px;
+  margin: 0 0 3px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .djs-search-result-secondary {
   font-family: monospace;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--search-result-secondary-color);
 }
 
 .djs-search-result:hover {
-  background: var(--search-result-selected-color);
+  background: var(--search-result-hover-background-color);
 }
 
 .djs-search-result-selected {
-  background: var(--search-result-selected-color);
+  background: var(--search-result-hover-background-color);
 }
 
 .djs-search-result-selected:hover {
-  background: var(--search-result-selected-color);
-}
-
-.djs-search-overlay {
-  background: var(--search-result-selected-color);
+  background: var(--search-result-hover-background-color);
 }
 
 /**

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v17.10.0
+ * bpmn-js - bpmn-modeler v17.11.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2024-09-09
+ * Date: 2024-09-16
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -64769,12 +64769,9 @@
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../overlays/Overlays').default} Overlays
    * @typedef {import('../selection/Selection').default} Selection
    * @typedef {import('../../i18n/translate/translate.js').default} Translate
    *
-   * @typedef {import('../overlays/Overlays').OverlayAttrs} OverlayAttrs
-   *
    * @typedef {import('../../util/Types').Dimensions} Dimensions
    *
    * @typedef {import('./SearchPadProvider').default} SearchPadProvider
@@ -64787,18 +64784,20 @@
    *
    * @param {Canvas} canvas
    * @param {EventBus} eventBus
-   * @param {Overlays} overlays
    * @param {Selection} selection
    * @param {Translate} translate
    */
-  function SearchPad(canvas, eventBus, overlays, selection, translate) {
+  function SearchPad(canvas, eventBus, selection, translate) {
     this._open = false;
     this._results = [];
     this._eventMaps = [];
 
+    this._cachedRootElement = null;
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
+
     this._canvas = canvas;
     this._eventBus = eventBus;
-    this._overlays = overlays;
     this._selection = selection;
     this._translate = translate;
 
@@ -64810,15 +64809,19 @@
     // attach search pad
     this._canvas.getContainer().appendChild(this._container);
 
-    // cleanup on destroy
-    eventBus.on([ 'canvas.destroy', 'diagram.destroy' ], this.close, this);
+    // cleanup whenever appropriate
+    eventBus.on([
+      'canvas.destroy',
+      'diagram.destroy',
+      'drag.init',
+      'elements.changed'
+    ], this.close, this);
   }
 
 
   SearchPad.$inject = [
     'canvas',
     'eventBus',
-    'overlays',
     'selection',
     'translate'
   ];
@@ -64840,7 +64843,7 @@
 
     // close search on clicking anywhere outside
     listen(document, 'html', 'click', function(e) {
-      self.close();
+      self.close(false);
     });
 
     // stop event from propagating and closing search
@@ -64886,7 +64889,7 @@
       if (isKey('Enter', e)) {
         var selected = self._getCurrentResult();
 
-        return selected ? self._select(selected) : self.close();
+        return selected ? self._select(selected) : self.close(false);
       }
 
       if (isKey('ArrowUp', e)) {
@@ -64935,6 +64938,10 @@
 
     var searchResults = this._searchProvider.find(pattern);
 
+    searchResults = searchResults.filter(function(searchResult) {
+      return !self._canvas.getRootElements().includes(searchResult.element);
+    });
+
     if (!searchResults.length) {
       return;
     }
@@ -65006,8 +65013,6 @@
 
     this._results = [];
 
-    this._resetOverlay();
-
     this._eventBus.fire('searchPad.cleared');
   };
 
@@ -65076,10 +65081,15 @@
       return;
     }
 
+    this._cachedRootElement = this._canvas.getRootElement();
+    this._cachedSelection = this._selection.get();
+    this._cachedViewbox = this._canvas.viewbox();
+
     this._bindEvents();
 
     this._open = true;
 
+    classes$1(this._canvas.getContainer()).add('djs-search-open');
     classes$1(this._container).add('open');
 
     this._searchInput.focus();
@@ -65091,15 +65101,36 @@
   /**
    * Close search pad.
    */
-  SearchPad.prototype.close = function() {
+  SearchPad.prototype.close = function(restoreCached = true) {
     if (!this.isOpen()) {
       return;
     }
 
+    if (restoreCached) {
+      if (this._cachedRootElement) {
+        this._canvas.setRootElement(this._cachedRootElement);
+      }
+
+      if (this._cachedSelection) {
+        this._selection.select(this._cachedSelection);
+      }
+
+      if (this._cachedViewbox) {
+        this._canvas.viewbox(this._cachedViewbox);
+      }
+
+      this._eventBus.fire('searchPad.restored');
+    }
+
+    this._cachedRootElement = null;
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
+
     this._unbindEvents();
 
     this._open = false;
 
+    classes$1(this._canvas.getContainer()).remove('djs-search-open');
     classes$1(this._container).remove('open');
 
     this._clearResults();
@@ -65107,8 +65138,6 @@
     this._searchInput.value = '';
     this._searchInput.blur();
 
-    this._resetOverlay();
-
     this._eventBus.fire('searchPad.closed');
   };
 
@@ -65152,9 +65181,11 @@
 
     classes$1(node).add(SearchPad.RESULT_SELECTED_CLASS);
 
-    this._resetOverlay(element);
+    this._canvas.zoom(1);
 
-    this._canvas.scrollToElement(element, { top: 400 });
+    this._canvas.scrollToElement(element, {
+      top: 300
+    });
 
     this._selection.select(element);
 
@@ -65171,9 +65202,10 @@
     var id = attr$1(node, SearchPad.RESULT_ID_ATTRIBUTE);
     var element = this._results[id].element;
 
-    this.close();
+    this._cachedSelection = null;
+    this._cachedViewbox = null;
 
-    this._resetOverlay();
+    this.close(false);
 
     this._canvas.scrollToElement(element, { top: 400 });
 
@@ -65183,24 +65215,6 @@
   };
 
 
-  /**
-   * Reset overlay removes and, optionally, set
-   * overlay to a new element.
-   *
-   * @param {HTMLElement} element
-   */
-  SearchPad.prototype._resetOverlay = function(element) {
-    if (this._overlayId) {
-      this._overlays.remove(this._overlayId);
-    }
-
-    if (element) {
-      var box = getBBox(element);
-      var overlay = constructOverlay(box);
-      this._overlayId = this._overlays.add(element, overlay);
-    }
-  };
-
   SearchPad.prototype._getBoxHtml = function() {
     const box = domify$1(SearchPad.BOX_HTML);
     const input = query(SearchPad.INPUT_SELECTOR, box);
@@ -65213,39 +65227,6 @@
   };
 
 
-  /**
-   * Construct overlay object for the given bounding box.
-   *
-   * @param {Dimensions} box
-   *
-   * @return {OverlayAttrs}
-   */
-  function constructOverlay(box) {
-
-    var offset = 6;
-    var w = box.width + offset * 2;
-    var h = box.height + offset * 2;
-
-    var styles = {
-      width: w + 'px',
-      height: h + 'px'
-    };
-
-    var html = domify$1('<div class="' + SearchPad.OVERLAY_CLASS + '"></div>');
-
-    assign(html, styles);
-
-    return {
-      position: {
-        bottom: h - offset,
-        right: w - offset
-      },
-      show: true,
-      html: html
-    };
-  }
-
-
   /**
    * Creates and appends child node from result tokens and HTML template.
    *
@@ -65273,7 +65254,7 @@
 
     tokens.forEach(function(t) {
       if (t.matched) {
-        htmlText += '<strong class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</strong>';
+        htmlText += '<b class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</b>';
       } else {
         htmlText += escapeHTML(t.normal);
       }
@@ -65294,15 +65275,17 @@
   SearchPad.RESULT_SELECTED_SELECTOR = '.' + SearchPad.RESULT_SELECTED_CLASS;
   SearchPad.RESULT_ID_ATTRIBUTE = 'data-result-id';
   SearchPad.RESULT_HIGHLIGHT_CLASS = 'djs-search-highlight';
-  SearchPad.OVERLAY_CLASS = 'djs-search-overlay';
 
   SearchPad.BOX_HTML =
-    '<div class="djs-search-container djs-draggable djs-scrollable">' +
-      '<div class="djs-search-input">' +
-        '<input type="text"/>' +
-      '</div>' +
-      '<div class="djs-search-results"></div>' +
-    '</div>';
+`<div class="djs-search-container djs-scrollable">
+  <div class="djs-search-input">
+    <svg class="djs-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" spellcheck="false" />
+  </div>
+  <div class="djs-search-results" />
+</div>`  ;
 
   SearchPad.RESULT_HTML =
     '<div class="djs-search-result"></div>';
@@ -65365,48 +65348,114 @@
     var rootElements = this._canvas.getRootElements();
 
     var elements = this._elementRegistry.filter(function(element) {
-      if (element.labelTarget) {
-        return false;
-      }
-      return true;
+      return !isLabel(element) && !rootElements.includes(element);
     });
 
-    // do not include root element
-    elements = filter(elements, function(element) {
-      return !rootElements.includes(element);
-    });
+    return elements
+      .reduce(function(results, element) {
+        var label = getLabel(element);
 
-    elements = map$1(elements, function(element) {
-      return {
-        primaryTokens: matchAndSplit(getLabel(element), pattern),
-        secondaryTokens: matchAndSplit(element.id, pattern),
-        element: element
-      };
-    });
+        var primaryTokens = findMatches(label, pattern),
+            secondaryTokens = findMatches(element.id, pattern);
 
-    // exclude non-matched elements
-    elements = filter(elements, function(element) {
-      return hasMatched(element.primaryTokens) || hasMatched(element.secondaryTokens);
-    });
-
-    elements = sortBy(elements, function(element) {
-      return getLabel(element.element) + element.element.id;
-    });
+        if (hasMatch(primaryTokens) || hasMatch(secondaryTokens)) {
+          return [
+            ...results,
+            {
+              primaryTokens,
+              secondaryTokens,
+              element
+            }
+          ];
+        }
 
-    return elements;
+        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 {
+          element: result.element,
+          primaryTokens: result.primaryTokens.map(function(token) {
+            return omit(token, [ 'index' ]);
+          }),
+          secondaryTokens: result.secondaryTokens.map(function(token) {
+            return omit(token, [ 'index' ]);
+          })
+        };
+      });
   };
 
+  /**
+   * @param {Token} token
+   *
+   * @return {boolean}
+   */
+  function isMatch(token) {
+    return 'matched' in token;
+  }
+
   /**
    * @param {Token[]} tokens
    *
    * @return {boolean}
    */
-  function hasMatched(tokens) {
-    var matched = filter(tokens, function(token) {
-      return !!token.matched;
-    });
+  function hasMatch(tokens) {
+    return tokens.find(isMatch);
+  }
+
+  /**
+   * Compares two token arrays.
+   *
+   * @param {Token[]} tokensA
+   * @param {Token[]} tokensB
+   *
+   * @returns {number}
+   */
+  function compareTokens(tokensA, tokensB) {
+    const tokensAHasMatch = hasMatch(tokensA),
+          tokensBHasMatch = hasMatch(tokensB);
+
+    if (tokensAHasMatch && !tokensBHasMatch) {
+      return -1;
+    }
+
+    if (!tokensAHasMatch && tokensBHasMatch) {
+      return 1;
+    }
+
+    if (!tokensAHasMatch && !tokensBHasMatch) {
+      return 0;
+    }
+
+    const tokensAFirstMatch = tokensA.find(isMatch),
+          tokensBFirstMatch = tokensB.find(isMatch);
+
+    if (tokensAFirstMatch.index < tokensBFirstMatch.index) {
+      return -1;
+    }
+
+    if (tokensAFirstMatch.index > tokensBFirstMatch.index) {
+      return 1;
+    }
 
-    return matched.length > 0;
+    return 0;
+  }
+
+  /**
+   * Compares two strings.
+   *
+   * @param {string} [a]
+   * @param {string} [b]
+   *
+   * @returns {number}
+   */
+  function compareStrings(a = '', b = '') {
+    return a.localeCompare(b);
   }
 
   /**
@@ -65415,7 +65464,7 @@
    *
    * @return {Token[]}
    */
-  function matchAndSplit(text, pattern) {
+  function findMatches(text, pattern) {
     var tokens = [],
         originalText = text;
 
@@ -65426,27 +65475,31 @@
     text = text.toLowerCase();
     pattern = pattern.toLowerCase();
 
-    var i = text.indexOf(pattern);
+    var index = text.indexOf(pattern);
 
-    if (i > -1) {
-      if (i !== 0) {
+    if (index > -1) {
+      if (index !== 0) {
         tokens.push({
-          normal: originalText.substr(0, i)
+          normal: originalText.slice(0, index),
+          index: 0
         });
       }
 
       tokens.push({
-        matched: originalText.substr(i, pattern.length)
+        matched: originalText.slice(index, index + pattern.length),
+        index: index
       });
 
-      if (pattern.length + i < text.length) {
+      if (pattern.length + index < text.length) {
         tokens.push({
-          normal: originalText.substr(pattern.length + i, text.length)
+          normal: originalText.slice(index + pattern.length),
+          index: index + pattern.length
         });
       }
     } else {
       tokens.push({
-        normal: originalText
+        normal: originalText,
+        index: 0
       });
     }