chore(search-pad): simplify element selection styles

assets/diagram-js.css

@@ -83,8 +83,6 @@
   --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-result-selected-background-color: var(--color-blue-205-100-45-opacity-30);
-  --search-result-selected-border-color: var(--color-blue-205-100-45);
 
   --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
   --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
@@ -885,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;
@@ -973,17 +979,6 @@ svg.new-parent {
   background: var(--search-result-hover-background-color);
 }
 
-.djs-search-overlay {
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  right: -10px;
-  bottom: -10px;
-  border: solid 2px var(--search-result-selected-border-color);
-  background: var(--search-result-selected-background-color);
-  border-radius: 4px;
-}
-
 /**
  * hidden styles
  */

lib/features/search-pad/SearchPad.js

@@ -21,12 +21,9 @@ import { isKey } from '../keyboard/KeyboardUtil';
 /**
  * @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
@@ -39,11 +36,10 @@ import { isKey } from '../keyboard/KeyboardUtil';
  *
  * @param {Canvas} canvas
  * @param {EventBus} eventBus
- * @param {Overlays} overlays
  * @param {Selection} selection
  * @param {Translate} translate
  */
-export default function SearchPad(canvas, eventBus, overlays, selection, translate) {
+export default function SearchPad(canvas, eventBus, selection, translate) {
   this._open = false;
   this._results = [];
   this._eventMaps = [];
@@ -52,7 +48,6 @@ export default function SearchPad(canvas, eventBus, overlays, selection, transla
 
   this._canvas = canvas;
   this._eventBus = eventBus;
-  this._overlays = overlays;
   this._selection = selection;
   this._translate = translate;
 
@@ -72,7 +67,6 @@ export default function SearchPad(canvas, eventBus, overlays, selection, transla
 SearchPad.$inject = [
   'canvas',
   'eventBus',
-  'overlays',
   'selection',
   'translate'
 ];
@@ -260,8 +254,6 @@ SearchPad.prototype._clearResults = function() {
 
   this._results = [];
 
-  this._resetOverlay();
-
   this._eventBus.fire('searchPad.cleared');
 };
 
@@ -337,6 +329,7 @@ SearchPad.prototype.open = function() {
 
   this._open = true;
 
+  domClasses(this._canvas.getContainer()).add('djs-search-open');
   domClasses(this._container).add('open');
 
   this._searchInput.focus();
@@ -365,15 +358,14 @@ SearchPad.prototype.close = function() {
 
   this._open = false;
 
+  domClasses(this._canvas.getContainer()).remove('djs-search-open');
   domClasses(this._container).remove('open');
 
   this._clearResults();
 
   this._searchInput.value = '';
   this._searchInput.blur();
 
-  this._resetOverlay();
-
   this._eventBus.fire('searchPad.closed');
 };
 
@@ -417,8 +409,6 @@ SearchPad.prototype._preselect = function(node) {
 
   domClasses(node).add(SearchPad.RESULT_SELECTED_CLASS);
 
-  this._resetOverlay(element);
-
   this._canvas.zoom(1);
   this._canvas.scrollToElement(element, { top: 400 });
 
@@ -442,8 +432,6 @@ SearchPad.prototype._select = function(node) {
 
   this.close();
 
-  this._resetOverlay();
-
   this._canvas.scrollToElement(element, { top: 400 });
 
   this._selection.select(element);
@@ -452,24 +440,6 @@ SearchPad.prototype._select = function(node) {
 };
 
 
-/**
- * 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 = getBoundingBox(element);
-    var overlay = constructOverlay(box);
-    this._overlayId = this._overlays.add(element, overlay);
-  }
-};
-
 SearchPad.prototype._getBoxHtml = function() {
   const box = domify(SearchPad.BOX_HTML);
   const input = domQuery(SearchPad.INPUT_SELECTOR, box);
@@ -482,39 +452,6 @@ SearchPad.prototype._getBoxHtml = function() {
 };
 
 
-/**
- * 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('<div><div class="' + SearchPad.OVERLAY_CLASS + '"></div></div>');
-
-  assignStyle(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.
  *
@@ -563,7 +500,6 @@ SearchPad.RESULT_SELECTED_CLASS = 'djs-search-result-selected';
 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-scrollable">

test/spec/features/search-pad/SearchPadSpec.js

@@ -302,31 +302,6 @@ describe('features/searchPad', function() {
     }));
 
 
-    it('should set overlay on an highlighted element', inject(function(overlays) {
-
-      // when
-      typeText(input_node, 'one');
-
-      // then
-      var overlay = overlays.get({ element: elements.one.a });
-      expect(overlay).length(1);
-    }));
-
-
-    it('should remove overlay from an element on enter', inject(function(overlays) {
-
-      // given
-      typeText(input_node, 'one');
-
-      // when
-      triggerKeyEvent(input_node, 'keyup', 'Enter');
-
-      // then
-      var overlay = overlays.get({ element: elements.one.a });
-      expect(overlay).length(0);
-    }));
-
-
     it('select should scroll element into view', inject(function(canvas) {
 
       // given