feat(search-pad): add custom marker to preselected element

Related to camunda/camunda-modeler#4538

assets/diagram-js.css

@@ -83,6 +83,7 @@
   --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);
@@ -979,6 +980,10 @@ svg.new-parent {
   background: var(--search-result-hover-background-color);
 }
 
+.djs-element.djs-search-preselected .djs-outline {
+  fill: var(--search-preselected-background-color) !important;
+}
+
 /**
  * hidden styles
  */

lib/features/search-pad/SearchPad.js

@@ -190,6 +190,9 @@ SearchPad.prototype._search = function(pattern) {
   });
 
   if (!searchResults.length) {
+    this._clearMarkers();
+    this._selection.select(null);
+
     return;
   }
 
@@ -264,6 +267,16 @@ SearchPad.prototype._clearResults = function() {
 };
 
 
+/**
+ * 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.
  *
@@ -380,6 +393,8 @@ SearchPad.prototype.close = function(restoreCached = true) {
   domClasses(this._canvas.getContainer()).remove('djs-search-open');
   domClasses(this._container).remove('open');
 
+  this._clearMarkers();
+
   this._clearResults();
 
   this._searchInput.value = '';
@@ -418,6 +433,8 @@ SearchPad.prototype._preselect = function(node) {
     return;
   }
 
+  this._clearMarkers();
+
   // removing preselection from current node
   if (selectedNode) {
     domClasses(selectedNode).remove(SearchPad.RESULT_SELECTED_CLASS);
@@ -436,6 +453,8 @@ SearchPad.prototype._preselect = function(node) {
 
   this._selection.select(element);
 
+  this._canvas.addMarker(element, 'djs-search-preselected');
+
   this._eventBus.fire('searchPad.preselected', element);
 };
 

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

@@ -362,7 +362,7 @@ describe('features/searchPad', function() {
     }));
 
 
-    it('should preselect first result', inject(function(canvas) {
+    it('should preselect first result', inject(function(canvas, selection) {
 
       // when
       typeText(input_node, 'two');
@@ -371,10 +371,12 @@ describe('features/searchPad', function() {
       var result_nodes = domQueryAll(SearchPad.RESULT_SELECTOR, canvas.getContainer());
       expect(domClasses(result_nodes[0]).has(SearchPad.RESULT_SELECTED_CLASS)).to.be.true;
       expect(capturedEvents).to.eql([ EVENTS.opened, EVENTS.preselected ]);
+      expect(selection.isSelected(elements.two.a)).to.be.true;
+      expect(domClasses(canvas.getGraphics(elements.two.a)).has('djs-search-preselected')).to.be.true;
     }));
 
 
-    it('should select result on enter', function() {
+    it('should select result on enter', inject(function(canvas, selection) {
 
       // given
       typeText(input_node, 'two');
@@ -389,10 +391,13 @@ describe('features/searchPad', function() {
         EVENTS.closed,
         EVENTS.selected
       ]);
-    });
+
+      expect(selection.isSelected(elements.two.a)).to.be.true;
+      expect(domClasses(canvas.getGraphics(elements.two.a)).has('djs-search-preselected')).to.be.false;
+    }));
 
 
-    it('should reset selection on escape without enter', inject(function(selection) {
+    it('should reset selection on escape without enter', inject(function(canvas, selection) {
 
       // given
       selection.select(elements.one.a);
@@ -406,6 +411,8 @@ describe('features/searchPad', function() {
 
       // then
       expect(selection.isSelected(elements.one.a)).to.be.true;
+
+      expect(domClasses(canvas.getGraphics(elements.two.a)).has('djs-search-preselected')).to.be.false;
     }));