diff --git a/assets/diagram-js.css b/assets/diagram-js.css index aacb7ed35..380d06f88 100644 --- a/assets/diagram-js.css +++ b/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 */ diff --git a/lib/features/search-pad/SearchPad.js b/lib/features/search-pad/SearchPad.js index 63e6b64e6..e56148f3b 100644 --- a/lib/features/search-pad/SearchPad.js +++ b/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); }; diff --git a/test/spec/features/search-pad/SearchPadSpec.js b/test/spec/features/search-pad/SearchPadSpec.js index d0469352e..f10f9c7b3 100644 --- a/test/spec/features/search-pad/SearchPadSpec.js +++ b/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; }));