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 f297d87f8..7419e4b9e 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 @@ -152,7 +152,8 @@ "zoom-in": "Zoom in", "search-flows": "Search flows", "search-prev": "Previous", - "search-next": "Next" + "search-next": "Next", + "search-counter": "\"__term__\" __result__ of __count__" }, "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 23e6eb42e..439ed5c8a 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 @@ -91,7 +91,7 @@ "alt-a c": "core:align-selection-to-center", "alt-a h": "core:distribute-selection-horizontally", "alt-a v": "core:distribute-selection-vertically", - "shift-f": "core:search-prev", + "shift-f": "core:search-previous", "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 270e8b90d..9b1ac4c4d 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 @@ -248,6 +248,7 @@ RED.search = (function() { } currentResults = search(value); if (currentResults.length > 0) { + $("#red-ui-view-searchtools-search").data("term", value); for (i=0;i= 0 && currentResults && currentResults.length ) { - $("#red-ui-view-searchtools-counter").text((currentIndex+1) + " of " + currentResults.length ) + //$("#red-ui-view-searchtools-counter").text((currentIndex+1) + " of " + currentResults.length ) + let term = $("#red-ui-view-searchtools-search").data("term") || ""; + if(term.length > 16) { + term = term.substring(0,12) + "..." + } + const i18nSearchCounterData = { + term : term, + result: (currentIndex+1), + count: currentResults.length + } + $("#red-ui-view-searchtools-counter").text(RED._('actions.search-counter', i18nSearchCounterData)); $("#view-search-tools > :not(:first-child)").show(); //show other tools } else { $("#view-search-tools > :not(:first-child)").hide(); //hide all but search button @@ -554,7 +565,7 @@ RED.search = (function() { function init() { RED.actions.add("core:search",show); - RED.actions.add("core:search-prev",revealPrev); + RED.actions.add("core:search-previous",revealPrev); RED.actions.add("core:search-next",revealNext); RED.events.on("editor:open",function() { disabled = true; }); @@ -573,6 +584,7 @@ RED.search = (function() { $("#red-ui-view-searchtools-close").on("click", function close() { currentResults = []; + $("#red-ui-view-searchtools-search").data("term", ""); updateSearchToolbar(); }); $("#red-ui-view-searchtools-close").trigger("click"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index 492600f91..109a7661b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js @@ -15,6 +15,8 @@ **/ RED.sidebar.config = (function() { + let flashingConfigNode; + let flashingConfigNodeTimer; var content = document.createElement("div"); content.className = "red-ui-sidebar-node-config"; @@ -145,6 +147,7 @@ RED.sidebar.config = (function() { var entry = $('
  • ').appendTo(list); var nodeDiv = $('
    ').appendTo(entry); entry.data('node',node.id); + nodeDiv.data('node',node.id); var label = $('
    ').text(label).appendTo(nodeDiv); if (node.d) { nodeDiv.addClass("red-ui-palette-node-config-disabled"); @@ -350,6 +353,32 @@ RED.sidebar.config = (function() { RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'), RED._("sidebar.config.showAllUnusedConfigNodes")); } + + function flashConfigNode(el) { + if(flashingConfigNode && flashingConfigNode.length) { + //cancel current flashing node before flashing new node + clearInterval(flashingConfigNodeTimer); + flashingConfigNodeTimer = null; + flashingConfigNode.children("div").removeClass('highlighted'); + flashingConfigNode = null; + } + if(!el || !el.children("div").length) { return; } + + flashingConfigNodeTimer = setInterval(function(flashEndTime) { + if (flashEndTime >= Date.now()) { + const highlighted = el.children("div").hasClass("highlighted"); + el.children("div").toggleClass('highlighted', !highlighted) + } else { + clearInterval(flashingConfigNodeTimer); + flashingConfigNodeTimer = null; + flashingConfigNode = null; + el.children("div").removeClass('highlighted'); + } + }, 100, Date.now() + 2200); + flashingConfigNode = el; + el.children("div").addClass('highlighted'); + } + function show(id) { if (typeof id === 'boolean') { if (id) { @@ -374,19 +403,7 @@ RED.sidebar.config = (function() { } else if (y<0) { scrollWindow.animate({scrollTop: '+='+(y-10)},150); } - var flash = 21; - var flashFunc = function() { - if ((flash%2)===0) { - node.removeClass('node_highlighted'); - } else { - node.addClass('node_highlighted'); - } - flash--; - if (flash >= 0) { - setTimeout(flashFunc,100); - } - } - flashFunc(); + flashConfigNode(node, id); },100); } RED.sidebar.show("config"); 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 0bdc63768..0ba2ce2d8 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 @@ -90,6 +90,9 @@ RED.view = (function() { var lastClickPosition = []; var selectNodesOptions; + let flashingNodeId; + let flashingNodeTimer; + var clipboard = ""; // Note: these are the permitted status colour aliases. The actual RGB values @@ -465,7 +468,7 @@ RED.view = (function() { $("#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.popover.tooltip($("#red-ui-view-searchtools-prev"),RED._('actions.search-prev'),'core:search-previous'); $("#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')); @@ -2024,8 +2027,8 @@ RED.view = (function() { } } function zoomZero() { zoomView(1); } - function searchFlows() { RED.actions.invoke("core:search"); } - function searchPrev() { RED.actions.invoke("core:search-prev"); } + function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } + function searchPrev() { RED.actions.invoke("core:search-previous"); } function searchNext() { RED.actions.invoke("core:search-next"); } @@ -5554,6 +5557,37 @@ RED.view = (function() { return result; } + + function flashNode(n) { + let node = n; + if(typeof node === "string") { node = RED.nodes.node(n); } + if(!node) { return; } + + const flashingNode = flashingNodeTimer && flashingNodeId && RED.nodes.node(flashingNodeId); + if(flashingNode) { + //cancel current flashing node before flashing new node + clearInterval(flashingNodeTimer); + flashingNodeTimer = null; + flashingNode.dirty = true; + flashingNode.highlighted = false; + } + + flashingNodeTimer = setInterval(function(flashEndTime) { + node.dirty = true; + if (flashEndTime >= Date.now()) { + node.highlighted = !node.highlighted; + } else { + clearInterval(flashingNodeTimer); + flashingNodeTimer = null; + node.highlighted = false; + flashingNodeId = null; + } + RED.view.redraw(); + }, 100, Date.now() + 2200) + flashingNodeId = node.id; + node.highlighted = true; + RED.view.redraw(); + } return { init: init, state:function(state) { @@ -5636,7 +5670,7 @@ RED.view = (function() { getActiveGroup: function() { return activeGroup }, reveal: function(id,triggerHighlight) { if (RED.nodes.workspace(id) || RED.nodes.subflow(id)) { - RED.workspaces.show(id); + RED.workspaces.show(id, null, null, true); } else { var node = RED.nodes.node(id) || RED.nodes.group(id); if (node) { @@ -5661,24 +5695,7 @@ RED.view = (function() { },200); } if (triggerHighlight !== false) { - node.highlighted = true; - if (!node._flashing) { - node._flashing = true; - var flash = 22; - var flashFunc = function() { - flash--; - node.dirty = true; - if (flash >= 0) { - node.highlighted = !node.highlighted; - setTimeout(flashFunc,100); - } else { - node.highlighted = false; - delete node._flashing; - } - RED.view.redraw(); - } - flashFunc(); - } + flashNode(node); } } else if (node._def.category === 'config') { RED.sidebar.config.show(id); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index d3fc939a6..1b0bbbb75 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js @@ -24,6 +24,9 @@ RED.workspaces = (function() { var hideStack = []; var viewStackPos = 0; + let flashingTab; + let flashingTabTimer; + function addToViewStack(id) { if (viewStackPos !== viewStack.length) { viewStack.splice(viewStackPos); @@ -528,6 +531,31 @@ RED.workspaces = (function() { workspace_tabs.order(order); } + function flashTab(tabId) { + if(flashingTab && flashingTab.length) { + //cancel current flashing node before flashing new node + clearInterval(flashingTabTimer); + flashingTabTimer = null; + flashingTab.removeClass('highlighted'); + flashingTab = null; + } + let tab = $("#red-ui-tab-" + tabId); + if(!tab || !tab.length) { return; } + + flashingTabTimer = setInterval(function(flashEndTime) { + if (flashEndTime >= Date.now()) { + const highlighted = tab.hasClass("highlighted"); + tab.toggleClass('highlighted', !highlighted) + } else { + clearInterval(flashingTabTimer); + flashingTabTimer = null; + flashingTab = null; + tab.removeClass('highlighted'); + } + }, 100, Date.now() + 2200); + flashingTab = tab; + tab.addClass('highlighted'); + } return { init: init, add: addWorkspace, @@ -560,7 +588,7 @@ RED.workspaces = (function() { isHidden: function(id) { return hideStack.includes(id) }, - show: function(id,skipStack,unhideOnly) { + show: function(id,skipStack,unhideOnly,flash) { if (!workspace_tabs.contains(id)) { var sf = RED.nodes.subflow(id); if (sf) { @@ -582,6 +610,9 @@ RED.workspaces = (function() { } workspace_tabs.activateTab(id); } + if(flash) { + flashTab(id.replace(".","-")) + } }, refresh: function() { RED.nodes.eachWorkspace(function(ws) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index 787669fd7..f3ffcc7d8 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss @@ -42,6 +42,10 @@ ul.red-ui-sidebar-node-config-list { border-color: transparent; box-shadow: 0 0 0 2px $node-selected-color; } + &.highlighted { + border-color: transparent; + outline: dashed $node-selected-color 4px; + } } .red-ui-palette-label { margin-left: 8px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss index b05a3575f..6603e8b21 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss @@ -85,6 +85,10 @@ &:not(.active) a:hover+a.red-ui-tab-close { background: $tab-background-hover; } + &.highlighted { + box-shadow: 0px 0px 4px 2px $node-selected-color; + border: dashed 1px $node-selected-color; + } &.active { background: $tab-background-active; font-weight: bold;