Bump to 15.2.4

.github/workflows/CODE_SCANNING.yml

@@ -9,7 +9,7 @@ on:
       - '**/*.md'
 
 jobs:
-  CodeQL-Build:
+  codeql_build:
     # CodeQL runs on ubuntu-latest, windows-latest, and macos-latest
     runs-on: ubuntu-latest
 

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+tmp/
 coverage/
 lib/**/*.d.ts
 .idea/

CHANGELOG.md

@@ -6,6 +6,84 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+## 15.2.4
+
+* `FIX`: canvas `autoFocus` must explicitly be enabled ([#956](https://github.com/bpmn-io/diagram-js/pull/956))
+* `FIX`: properly integrate `zoomscroll` with canvas focus ([#956](https://github.com/bpmn-io/diagram-js/pull/956))
+* `FIX`: properly integrate `movecanvas` with canvas focus ([#956](https://github.com/bpmn-io/diagram-js/pull/956))
+
+## 15.2.3
+
+* `FIX`: adjust search to prioritize start of word and exact matches ([#953](https://github.com/bpmn-io/diagram-js/pull/953))
+* `FIX`: ignore whitespace when searching ([#954](https://github.com/bpmn-io/diagram-js/pull/954))
+
+## 15.2.2
+
+* `FIX`: correct `Keyboard#bind` and config types ([#948](https://github.com/bpmn-io/diagram-js/pull/948))
+
+## 15.2.1
+
+* `FIX`: limit overly permissive regex ([#949](https://github.com/bpmn-io/diagram-js/pull/949))
+
+## 15.2.0
+
+* `FIX`: clear selection when opening search pad ([#947](https://github.com/bpmn-io/diagram-js/pull/947))
+* `FIX`: correct dangling selection after search pad interaction ([#947](https://github.com/bpmn-io/diagram-js/pull/947))
+* `CHORE`: simplify search pad pre-selection behavior ([#947](https://github.com/bpmn-io/diagram-js/pull/947))
+
+## 15.1.0
+
+* `FEAT`: integrate `popup-menu` with `search` ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+* `FEAT`: recognize modern `search` tokens in `search-pad` ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+* `FEAT`: improve `search` types ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+* `FIX`: correctly handle duplicate entries and whitespace in `search` ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+* `FIX`: find `search` terms across all keys ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+* `FIX`: `search` always returns tokens for matched items ([#932](https://github.com/bpmn-io/diagram-js/pull/932))
+
+## 15.0.0
+
+* `FEAT`: make canvas browser selectable ([#659](https://github.com/bpmn-io/diagram-js/pull/659))
+* `FEAT`: make keyboard binding implicit ([#661](https://github.com/bpmn-io/diagram-js/issues/661))
+* `FEAT`: make multi-selection outline an outline concern ([#944](https://github.com/bpmn-io/diagram-js/issues/944))
+
+### Breaking Changes
+
+* `Keyboard` binding target can no longer be chosen. Configure keyboard binding via the `keyboard.bind` configuration and rely on keybindings to work if the canvas has browser focus. ([#661](https://github.com/bpmn-io/diagram-js/issues/661))
+* The `Canvas` is now a focusable component, that is recognized accordingly by the browser, with all benefits for UX and interaction. Components that pull focus from the `Canvas` during modeling must ensure to restore the focus (if intended), via `Canvas#restoreFocus`. ([#661](https://github.com/bpmn-io/diagram-js/issues/661))
+* The `selection` feature does not provide visual outline by default anymore. Use the `outline` feature to re-enable it. ([#944](https://github.com/bpmn-io/diagram-js/issues/944))
+
+## 14.11.3
+
+* `CHORE`: simplify viewbox cloning ([#935](https://github.com/bpmn-io/diagram-js/pull/935))
+
+## 14.11.2
+
+* `FIX`: restore search result highlight ([#931](https://github.com/bpmn-io/diagram-js/pull/931))
+* `FIX`: correct search result highlight not being removed ([#931](https://github.com/bpmn-io/diagram-js/pull/931))
+* `FIX`: do not change zoom when search openes ([#931](https://github.com/bpmn-io/diagram-js/pull/931))
+
+## 14.11.1
+
+_Partially reverts v14.11.0._
+
+* `FIX`: revert `search` integration into popup menu
+
+## 14.11.0
+
+* `FEAT`: add `search` utility
+* `FEAT`: sort popup entry search results semantically ([#916](https://github.com/bpmn-io/diagram-js/pull/916))
+
+## 14.10.0
+
+* `FEAT`: align search styling with other popups ([#913](https://github.com/bpmn-io/diagram-js/pull/913))
+* `CHORE`: use existing outline in search ([#913](https://github.com/bpmn-io/diagram-js/pull/913))
+* `FIX`: only commit search viewport changes on `ENTER` ([#913](https://github.com/bpmn-io/diagram-js/pull/913))
+
+## 14.9.0
+
+* `CHORE`: export types compatible with `verbatimModuleSyntax` ([#927](https://github.com/bpmn-io/diagram-js/pull/927), [#864](https://github.com/bpmn-io/diagram-js/issues/864))
+* `CHORE`: re-compute context pad position next frame ([#920](https://github.com/bpmn-io/diagram-js/pull/920))
+
 ## 14.8.0
 
 * `FEAT`: add `scheduler` service ([#915](https://github.com/bpmn-io/diagram-js/pull/915))
@@ -137,7 +215,7 @@ _**Note:** Yet to be released changes appear here._
 ## 12.8.1
 
 * `FIX`: reposition popup menu if it opens above the viewport ([#829](https://github.com/bpmn-io/diagram-js/pull/829))
- 
+
 ## 12.8.0
 
 * `FEAT`: remove selection outline from connections ([#826](https://github.com/bpmn-io/diagram-js/pull/826))

assets/diagram-js.css

@@ -74,14 +74,16 @@
   --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);
+  --search-preselected-background-color: var(--color-blue-205-100-50-opacity-15);
 
   --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
   --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
@@ -98,6 +100,18 @@
   --tooltip-error-color: var(--color-red-360-100-45);
 }
 
+/**
+ * SVG styles
+ */
+
+.djs-container svg.drop-not-ok {
+  background: var(--shape-drop-not-allowed-fill-color) !important;
+}
+
+.djs-container svg.new-parent {
+  background: var(--shape-drop-allowed-fill-color) !important;
+}
+
 /**
  * outline styles
  */
@@ -140,14 +154,6 @@
   fill: var(--shape-drop-allowed-fill-color) !important;
 }
 
-svg.drop-not-ok {
-  background: var(--shape-drop-not-allowed-fill-color) !important;
-}
-
-svg.new-parent {
-  background: var(--shape-drop-allowed-fill-color) !important;
-}
-
 
 /* Override move cursor during drop and connect */
 .drop-not-ok,
@@ -527,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;
@@ -588,6 +594,8 @@ svg.new-parent {
 }
 
 .djs-popup-search {
+  position: relative;
+  width: auto;
   margin: 10px 12px;
 }
 
@@ -598,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;
@@ -884,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;
@@ -897,76 +904,83 @@ 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);
+  background: var(--search-result-hover-background-color);
 }
 
-.djs-search-overlay {
-  background: var(--search-result-selected-color);
+.djs-search-open .djs-element .djs-outline {
+  fill: var(--search-preselected-background-color) !important;
 }
 
 /**