From fe47b072290ab15187cac36114d096eb7ecf0907 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Wed, 9 Feb 2022 11:00:09 +0000 Subject: [PATCH] Add feature: search next, search previous --- .../editor-client/locales/en-US/editor.json | 5 +- .../editor-client/src/js/keymap.json | 4 +- .../editor-client/src/js/ui/search.js | 64 ++++++++++++++++++- .../editor-client/src/js/ui/statusBar.js | 1 + .../@node-red/editor-client/src/js/ui/view.js | 30 +++++++++ .../editor-client/src/sass/workspace.scss | 7 ++ 6 files changed, 107 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 1ab148217..f297d87f8 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -149,7 +149,10 @@ "toggle-navigator": "Toggle navigator", "zoom-out": "Zoom out", "zoom-reset": "Reset zoom", - "zoom-in": "Zoom in" + "zoom-in": "Zoom in", + "search-flows": "Search flows", + "search-prev": "Previous", + "search-next": "Next" }, "user": { "loggedInAs": "Logged in as __name__", diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index f1f3f46e7..23e6eb42e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -90,6 +90,8 @@ "alt-a m": "core:align-selection-to-middle", "alt-a c": "core:align-selection-to-center", "alt-a h": "core:distribute-selection-horizontally", - "alt-a v": "core:distribute-selection-vertically" + "alt-a v": "core:distribute-selection-vertically", + "shift-f": "core:search-prev", + "f": "core:search-next" } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 52eee6c67..270e8b90d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -25,6 +25,7 @@ RED.search = (function() { var searchHistory = []; var index = {}; var currentResults = []; + var currentIndex = 0; var previousActiveElement; function indexProperty(node,label,property) { @@ -324,7 +325,8 @@ RED.search = (function() { } } else if (!$(children[selected]).hasClass("red-ui-search-historyHeader")) { if (currentResults.length > 0) { - reveal(currentResults[Math.max(0,selected)].node); + currentIndex = Math.max(0,selected); + reveal(currentResults[currentIndex].node); } } } @@ -408,6 +410,7 @@ RED.search = (function() { div.on("click", function(evt) { evt.preventDefault(); + currentIndex = i; reveal(node); }); } @@ -428,8 +431,50 @@ RED.search = (function() { RED.view.reveal(node.id); } + function revealPrev() { + if(disabled) { + updateSearchToolbar(); + return; + } + if(!searchResults || !currentResults.length) { + show(); + return; + } + if(currentIndex > 0) { + currentIndex--; + } else { + currentIndex = currentResults.length-1; + } + const n = currentResults[currentIndex]; + if(n && n.node && n.node.id) { + RED.view.reveal(n.node.id); + } + updateSearchToolbar(); + } + function revealNext() { + if(disabled) { + updateSearchToolbar(); + return; + } + if(!searchResults || !currentResults.length) { + show(); + return; + } + if(currentIndex < currentResults.length-1) { + currentIndex++ + } else { + currentIndex = 0; + } + const n = currentResults[currentIndex]; + if(n && n.node && n.node.id) { + RED.view.reveal(n.node.id); + } + updateSearchToolbar(); + } + function show(v) { if (disabled) { + updateSearchToolbar(); return; } if (!visible) { @@ -475,8 +520,16 @@ RED.search = (function() { previousActiveElement = null; } } + updateSearchToolbar(); + } + function updateSearchToolbar() { + if(!disabled && currentIndex >= 0 && currentResults && currentResults.length ) { + $("#red-ui-view-searchtools-counter").text((currentIndex+1) + " of " + currentResults.length ) + $("#view-search-tools > :not(:first-child)").show(); //show other tools + } else { + $("#view-search-tools > :not(:first-child)").hide(); //hide all but search button + } } - function clearIndex() { index = {}; } @@ -501,6 +554,8 @@ RED.search = (function() { function init() { RED.actions.add("core:search",show); + RED.actions.add("core:search-prev",revealPrev); + RED.actions.add("core:search-next",revealNext); RED.events.on("editor:open",function() { disabled = true; }); RED.events.on("editor:close",function() { disabled = false; }); @@ -516,6 +571,11 @@ RED.search = (function() { $("#red-ui-palette-shade").on('mousedown',hide); $("#red-ui-sidebar-shade").on('mousedown',hide); + $("#red-ui-view-searchtools-close").on("click", function close() { + currentResults = []; + updateSearchToolbar(); + }); + $("#red-ui-view-searchtools-close").trigger("click"); RED.events.on("workspace:clear", clearIndex); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js index 4c9156207..7fde232c3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js @@ -31,6 +31,7 @@ RED.statusBar = (function() { function addWidget(options) { widgets[options.id] = options; var el = $(''); + el.prop('id', options.id); options.element.appendTo(el); if (options.align === 'left') { leftBucket.append(el); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 5b9285152..0bdc63768 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -443,6 +443,33 @@ RED.view = (function() { } }); + //add search to status-toolbar + RED.statusBar.add({ + id: "view-search-tools", + align: "left", + hidden: false, + element: $(''+ + '' + + '' + + '' + + '? of ?' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '') + }) + $("#red-ui-view-searchtools-search").on("click", searchFlows); + RED.popover.tooltip($("#red-ui-view-searchtools-search"),RED._('actions.search-flows'),'core:search'); + $("#red-ui-view-searchtools-prev").on("click", searchPrev); + RED.popover.tooltip($("#red-ui-view-searchtools-prev"),RED._('actions.search-prev'),'core:search-prev'); + $("#red-ui-view-searchtools-next").on("click", searchNext); + RED.popover.tooltip($("#red-ui-view-searchtools-next"),RED._('actions.search-next'),'core:search-next'); + RED.popover.tooltip($("#red-ui-view-searchtools-close"),RED._('common.label.close')); + // Handle nodes dragged from the palette chart.droppable({ accept:".red-ui-palette-node", @@ -1997,6 +2024,9 @@ RED.view = (function() { } } function zoomZero() { zoomView(1); } + function searchFlows() { RED.actions.invoke("core:search"); } + function searchPrev() { RED.actions.invoke("core:search-prev"); } + function searchNext() { RED.actions.invoke("core:search-next"); } function zoomView(factor) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 2adfb89ba..0ca7c2f84 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -135,6 +135,13 @@ margin-top: -1px; } } + + .search-counter { + display: inline-block; + font-size: smaller; + font-weight: 600; + white-space: nowrap; + } } a.red-ui-footer-button,