Add feature: search next, search previous

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__",

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"
      }
 }

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);
 

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 = $('<span class="red-ui-statusbar-widget"></span>');
+        el.prop('id', options.id);
         options.element.appendTo(el);
         if (options.align === 'left') {
             leftBucket.append(el);

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: $('<span class="button-group">'+
+                    '<button class="red-ui-footer-button" id="red-ui-view-searchtools-search"><i class="fa fa-search"></i></button>' +
+                    '</span>' +
+                    '<span class="button-group search-counter">' +
+                    '<span class="red-ui-footer-button" id="red-ui-view-searchtools-counter">? of ?</span>' +
+                    '</span>' +
+                    '<span class="button-group">' +
+                    '<button class="red-ui-footer-button" id="red-ui-view-searchtools-prev"><i class="fa fa-chevron-left"></i></button>' +
+                    '<button class="red-ui-footer-button" id="red-ui-view-searchtools-next"><i class="fa fa-chevron-right"></i></button>' +
+                    '</span>' +
+                    '<span class="button-group">' +
+                    '<button class="red-ui-footer-button" id="red-ui-view-searchtools-close"><i class="fa fa-close"></i></button>' +
+                    '</span>')
+        })
+        $("#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) {

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,