Allow tabs to be hidden

packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js

@@ -498,6 +498,13 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-import-text").on("keyup", validateImport);
         $("#red-ui-clipboard-dialog-import-text").on('paste',function() { setTimeout(validateImport,10)});
 
+        if (RED.workspaces.active() === 0) {
+            $("#red-ui-clipboard-dialog-import-opt-current").addClass('disabled').removeClass("selected");
+            $("#red-ui-clipboard-dialog-import-opt-new").addClass("selected");
+        } else {
+            $("#red-ui-clipboard-dialog-import-opt-current").removeClass('disabled').addClass("selected");
+            $("#red-ui-clipboard-dialog-import-opt-new").removeClass("selected");
+        }
         $("#red-ui-clipboard-dialog-import-opt > a").on("click", function(evt) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
@@ -611,9 +618,6 @@ RED.clipboard = (function() {
             activeLibraries[tabId] = browser;
         })
 
-
-
-
         $("#red-ui-clipboard-dialog-tab-library-name").on("keyup", validateExportFilename);
         $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)});
         $("#red-ui-clipboard-dialog-export").button("enable");
@@ -636,7 +640,6 @@ RED.clipboard = (function() {
             label: RED._("editor.types.json")
         });
 
-
         var previewList = $("#red-ui-clipboard-dialog-export-tab-clipboard-preview-list").css({position:"absolute",top:0,right:0,bottom:0,left:0}).treeList({
             data: []
         })
@@ -738,6 +741,11 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-export").hide();
         $("#red-ui-clipboard-dialog-import-conflict").hide();
 
+        if (RED.workspaces.active() === 0) {
+            $("#red-ui-clipboard-dialog-export-rng-selected").addClass('disabled').removeClass('selected');
+            $("#red-ui-clipboard-dialog-export-rng-flow").addClass('disabled').removeClass('selected');
+            $("#red-ui-clipboard-dialog-export-rng-full").trigger("click");
+        } else {
             var selection = RED.workspaces.selection();
             if (selection.length > 0) {
                 $("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
@@ -750,6 +758,7 @@ RED.clipboard = (function() {
                     $("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
                 }
             }
+        }
         if (format === "red-ui-clipboard-dialog-export-fmt-full") {
             $("#red-ui-clipboard-dialog-export-fmt-full").trigger("click");
         } else {

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -337,6 +337,11 @@ RED.tabs = (function() {
             if (link.length === 0) {
                 return;
             }
+            var wasUnhidden = false;
+            if (link.parent().hasClass("hide")) {
+                wasUnhidden = true;
+                link.parent().removeClass("hide");
+            }
             if (!link.parent().hasClass("active")) {
                 ul.children().removeClass("active");
                 ul.children().css({"transition": "width 100ms"});
@@ -353,7 +358,7 @@ RED.tabs = (function() {
                     }
                 }
                 if (options.onchange) {
-                    options.onchange(tabs[link.attr('href').slice(1)]);
+                    options.onchange(tabs[link.attr('href').slice(1)],wasUnhidden);
                 }
                 updateTabWidths();
                 setTimeout(function() {
@@ -362,13 +367,13 @@ RED.tabs = (function() {
             }
         }
         function activatePreviousTab() {
-            var previous = ul.find("li.active").prev();
+            var previous = findPreviousVisibleTab();
             if (previous.length > 0) {
                 activateTab(previous.find("a"));
             }
         }
         function activateNextTab() {
-            var next = ul.find("li.active").next();
+            var next = findNextVisibleTab();
             if (next.length > 0) {
                 activateTab(next.find("a"));
             }
@@ -378,7 +383,10 @@ RED.tabs = (function() {
             if (options.vertical) {
                 return;
             }
-            var tabs = ul.find("li.red-ui-tab");
+            var allTabs = ul.find("li.red-ui-tab");
+            var tabs = allTabs.filter(":not(.hide)");
+            var hiddenTabs = allTabs.filter(".hide");
+
             var width = wrapper.width();
             var tabCount = tabs.length;
             var tabWidth;
@@ -446,6 +454,7 @@ RED.tabs = (function() {
                 // }
 
                 tabs.css({width:currentTabWidth});
+                hiddenTabs.css({width:"0px"});
                 if (tabWidth < 50) {
                     // ul.find(".red-ui-tab-close").hide();
                     ul.find(".red-ui-tab-icon").hide();
@@ -486,11 +495,17 @@ RED.tabs = (function() {
             }
             var li = ul.find("a[href='#"+id+"']").parent();
             if (li.hasClass("active")) {
-                var tab = li.prev();
+                var tab = findPreviousVisibleTab(li);
                 if (tab.length === 0) {
-                    tab = li.next();
+                    tab = findNextVisibleTab(li);
                 }
+                if (tab.length > 0) {
                     activateTab(tab.find("a"));
+                } else {
+                    if (options.onchange) {
+                        options.onchange(null);
+                    }
+                }
             }
             li.remove();
             if (tabs[id].pinned) {
@@ -507,6 +522,27 @@ RED.tabs = (function() {
             }
         }
 
+        function findPreviousVisibleTab(li) {
+            if (!li) {
+                li = ul.find("li.active").parent();
+            }
+            var previous = li.prev();
+            while(previous.length > 0 && previous.hasClass("hide")) {
+                previous = previous.prev();
+            }
+            return previous;
+        }
+        function findNextVisibleTab(li) {
+            if (!li) {
+                li = ul.find("li.active").parent();
+            }
+            var next = ul.find("li.active").next();
+            while(next.length > 0 && next.hasClass("hide")) {
+                next = next.next();
+            }
+            return next;
+        }
+
         var tabAPI =  {
             addTab: function(tab,targetIndex) {
                 if (options.onselect) {
@@ -787,7 +823,7 @@ RED.tabs = (function() {
             previousTab: activatePreviousTab,
             resize: updateTabWidths,
             count: function() {
-                return ul.find("li.red-ui-tab").length;
+                return ul.find("li.red-ui-tab:not(.hide)").length;
             },
             activeIndex: function() {
                 return ul.find("li.active").index()
@@ -795,6 +831,45 @@ RED.tabs = (function() {
             contains: function(id) {
                 return ul.find("a[href='#"+id+"']").length > 0;
             },
+            showTab: function(id) {
+                if (tabs[id]) {
+                    var li = ul.find("a[href='#"+id+"']").parent();
+                    if (li.hasClass("hide")) {
+                        li.removeClass("hide");
+                        if (ul.find("li.red-ui-tab:not(.hide)").length === 1) {
+                            activateTab(li.find("a"))
+                        }
+                        updateTabWidths();
+                        return true;
+                    }
+                }
+                return false;
+            },
+            hideTab: function(id) {
+                if (tabs[id]) {
+                    var li = ul.find("a[href='#"+id+"']").parent();
+                    if (!li.hasClass("hide")) {
+                        if (li.hasClass("active")) {
+                            var tab = findPreviousVisibleTab(li);
+                            if (tab.length === 0) {
+                                tab = findNextVisibleTab(li);
+                            }
+                            if (tab.length > 0) {
+                                activateTab(tab.find("a"));
+                            } else {
+                                if (options.onchange) {
+                                    options.onchange(null);
+                                }
+                            }
+                        }
+                        li.removeClass("active");
+                        li.addClass("hide");
+                        updateTabWidths();
+                        return true;
+                    }
+                }
+                return false;
+            },
             renameTab: function(id,label) {
                 tabs[id].label = label;
                 var tab = ul.find("a[href='#"+id+"']");
@@ -802,6 +877,9 @@ RED.tabs = (function() {
                 tab.find("span.red-ui-text-bidi-aware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
                 updateTabWidths();
             },
+            listTabs: function() {
+                return $.makeArray(ul.children().map(function() { return $(this).data('tabId');}));
+            },
             selection: getSelection,
             order: function(order) {
                 preferredOrder = order;

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -229,7 +229,7 @@ RED.sidebar.config = (function() {
         var globalConfigNodes = [];
         var configList = {};
         RED.nodes.eachConfig(function(cn) {
-            if (cn.z) {//} == RED.workspaces.active()) {
+            if (cn.z) {
                 configList[cn.z.replace(/\./g,"-")] = configList[cn.z.replace(/\./g,"-")]||[];
                 configList[cn.z.replace(/\./g,"-")].push(cn);
             } else if (!cn.z) {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -122,11 +122,20 @@ RED.sidebar.info.outliner = (function() {
             })
             RED.popover.tooltip(triggerButton,RED._("sidebar.info.triggerAction"));
         }
-        // $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-eye"></i></button>').appendTo(controls).on("click",function(evt) {
+
-        //     evt.preventDefault();
+        if (n.type === "tab") {
-        //     evt.stopPropagation();
+            var toggleVisibleButton = $('<button type="button" class="red-ui-info-outline-item-control-hide red-ui-button red-ui-button-small"><i class="fa fa-eye"></i><i class="fa fa-eye-slash"></i></button>').appendTo(controls).on("click",function(evt) {
-        //     RED.view.reveal(n.id);
+                evt.preventDefault();
-        // })
+                evt.stopPropagation();
+                var isHidden = !div.hasClass("red-ui-info-outline-item-hidden");
+                div.toggleClass("red-ui-info-outline-item-hidden",isHidden);
+                if (isHidden) {
+                    RED.workspaces.hide(n.id);
+                } else {
+                    RED.workspaces.show(n.id, null, true);
+                }
+            });
+        }
         if (n.type !== 'subflow') {
             var toggleButton = $('<button type="button" class="red-ui-info-outline-item-control-disable red-ui-button red-ui-button-small"><i class="fa fa-circle-thin"></i><i class="fa fa-ban"></i></button>').appendTo(controls).on("click",function(evt) {
                 evt.preventDefault();
@@ -316,13 +325,27 @@ RED.sidebar.info.outliner = (function() {
         RED.events.on("groups:remove",onObjectRemove);
         RED.events.on("groups:change",onNodeChange);
 
-        RED.events.on("workspace:clear", onWorkspaceClear)
+        RED.events.on("workspace:show", onWorkspaceShow);
+        RED.events.on("workspace:hide", onWorkspaceHide);
+        RED.events.on("workspace:clear", onWorkspaceClear);
 
         return container;
     }
     function onWorkspaceClear() {
         treeList.treeList('data',getFlowData());
     }
+    function onWorkspaceShow(event) {
+        var existingObject = objects[event.workspace];
+        if (existingObject) {
+            existingObject.element.removeClass("red-ui-info-outline-item-hidden")
+        }
+    }
+    function onWorkspaceHide(event) {
+        var existingObject = objects[event.workspace];
+        if (existingObject) {
+            existingObject.element.addClass("red-ui-info-outline-item-hidden")
+        }
+    }
     function onFlowAdd(ws) {
         objects[ws.id] = {
             id: ws.id,

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -180,6 +180,10 @@ RED.sidebar.info = (function() {
 
         if (node === null) {
             RED.sidebar.info.outliner.select(null);
+            propertiesPanelHeaderIcon.empty();
+            propertiesPanelHeaderLabel.text("");
+            propertiesPanelHeaderReveal.hide();
+            propertiesPanelHeaderHelp.hide();
             return;
         } else if (Array.isArray(node)) {
             // Multiple things selected

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -345,8 +345,8 @@ RED.view = (function() {
 
             activeSubflow = RED.nodes.subflow(event.workspace);
 
-            RED.menu.setDisabled("menu-item-workspace-edit", activeSubflow);
+            RED.menu.setDisabled("menu-item-workspace-edit", activeSubflow || event.workspace === 0);
-            RED.menu.setDisabled("menu-item-workspace-delete",RED.workspaces.count() == 1 || activeSubflow);
+            RED.menu.setDisabled("menu-item-workspace-delete",event.workspace === 0 || RED.workspaces.count() == 1 || activeSubflow);
 
             if (workspaceScrollPositions[event.workspace]) {
                 chart.scrollLeft(workspaceScrollPositions[event.workspace].left);
@@ -653,7 +653,7 @@ RED.view = (function() {
 
     function updateActiveNodes() {
         var activeWorkspace = RED.workspaces.active();
-
+        if (activeWorkspace !== 0) {
             activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
 
             activeLinks = RED.nodes.filterLinks({
@@ -671,6 +671,11 @@ RED.view = (function() {
                     g._depth = 0;
                 }
             });
+        } else {
+            activeNodes = [];
+            activeLinks = [];
+            activeGroups = [];
+        }
         var changed = false;
         do {
             changed = false;
@@ -1939,8 +1944,8 @@ RED.view = (function() {
     function updateSelection() {
         var selection = {};
         var activeWorkspace = RED.workspaces.active();
-
         var workspaceSelection = RED.workspaces.selection();
+        if (activeWorkspace !== 0) {
             if (workspaceSelection.length === 0) {
                 selection = getSelection();
                 activeLinks = RED.nodes.filterLinks({
@@ -2027,6 +2032,7 @@ RED.view = (function() {
             } else {
                 selection.flows = workspaceSelection;
             }
+        }
         var selectionJSON = activeWorkspace+":"+JSON.stringify(selection,function(key,value) {
             if (key === 'nodes' || key === 'flows') {
                 return value.map(function(n) { return n.id })

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -245,15 +245,25 @@ RED.workspaces = (function() {
     function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
             id: "red-ui-workspace-tabs",
-            onchange: function(tab) {
+            onchange: function(tab, wasUnhidden) {
                 var event = {
                     old: activeWorkspace
                 }
+                if (tab) {
+                    $("#red-ui-workspace-chart").show();
                     activeWorkspace = tab.id;
-                event.workspace = activeWorkspace;
-                RED.events.emit("workspace:change",event);
                     window.location.hash = 'flow/'+tab.id;
                     $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
+                    } else {
+                    $("#red-ui-workspace-chart").hide();
+                    activeWorkspace = 0;
+                    window.location.hash = '';
+                }
+                event.workspace = activeWorkspace;
+                if (wasUnhidden) {
+                    RED.events.emit("workspace:show",event);
+                }
+                RED.events.emit("workspace:change",event);
                 RED.sidebar.config.refresh();
                 RED.view.focus();
             },
@@ -278,7 +288,7 @@ RED.workspaces = (function() {
                 if (tab.disabled) {
                     $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-disabled');
                 }
-                RED.menu.setDisabled("menu-item-workspace-delete",workspaceTabCount <= 1);
+                RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {
                     showWorkspace();
                 }
@@ -287,7 +297,7 @@ RED.workspaces = (function() {
                 if (tab.type === "tab") {
                     workspaceTabCount--;
                 }
-                RED.menu.setDisabled("menu-item-workspace-delete",workspaceTabCount <= 1);
+                RED.menu.setDisabled("menu-item-workspace-delete",activeWorkspace === 0 || workspaceTabCount <= 1);
                 if (workspaceTabCount === 0) {
                     hideWorkspace();
                 }
@@ -373,6 +383,22 @@ RED.workspaces = (function() {
         RED.actions.add("core:enable-flow",enableWorkspace);
         RED.actions.add("core:disable-flow",disableWorkspace);
 
+        RED.actions.add("core:hide-tab", function() { RED.workspaces.hide(); })
+        RED.actions.add("core:hide-all-tabs", function() {
+            var currentTabs = workspace_tabs.listTabs();
+            currentTabs.forEach(function(id) {
+                RED.workspaces.hide(id)
+            })
+        })
+        RED.actions.add("core:show-all-tabs", function() {
+            var currentTabs = workspace_tabs.listTabs();
+            currentTabs.forEach(function(id) {
+                RED.workspaces.show(id, null, true)
+            })
+        })
+
+        RED.actions.add("core:hide-tab", function() { RED.workspaces.hide(); })
+
         RED.actions.add("core:list-flows",function() {
             RED.actions.invoke("core:search","type:tab ");
         })
@@ -392,8 +418,6 @@ RED.workspaces = (function() {
                 RED.workspaces.show(viewStack[++viewStackPos],true);
             }
         })
-
-
         hideWorkspace();
     }
 
@@ -445,7 +469,6 @@ RED.workspaces = (function() {
         }
     }
 
-
     function removeWorkspace(ws) {
         if (!ws) {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
@@ -489,7 +512,17 @@ RED.workspaces = (function() {
         selection: function() {
             return workspace_tabs.selection();
         },
-        show: function(id,skipStack) {
+        hide: function(id) {
+            if (!id) {
+                id = activeWorkspace;
+            }
+            if (workspace_tabs.contains(id)) {
+                if (workspace_tabs.hideTab(id)) {
+                    RED.events.emit("workspace:hide",{workspace: id})
+                }
+            }
+        },
+        show: function(id,skipStack,unhideOnly) {
             if (!workspace_tabs.contains(id)) {
                 var sf = RED.nodes.subflow(id);
                 if (sf) {
@@ -502,10 +535,16 @@ RED.workspaces = (function() {
                     return;
                 }
             }
+            if (unhideOnly) {
+                if (workspace_tabs.showTab(id)) {
+                    RED.events.emit("workspace:show",{workspace: id})
+                }
+            } else {
                 if (!skipStack && activeWorkspace !== id) {
                     addToViewStack(activeWorkspace)
                 }
                 workspace_tabs.activateTab(id);
+            }
         },
         refresh: function() {
             RED.nodes.eachWorkspace(function(ws) {

packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss

@@ -435,6 +435,12 @@ div.red-ui-info-table {
             border: none;
             background: none;
         }
+        .fa-circle-thin {
+            display: none;
+        }
+        .fa-eye {
+            display: none;
+        }
     }
     .red-ui-info-outline-item-control-reveal,
     .red-ui-info-outline-item-control-action {
@@ -446,7 +452,17 @@ div.red-ui-info-table {
             display: inline-block;
         }
     }
-
+    .fa-eye-slash {
+        display: none;
+    }
+    .red-ui-info-outline-item.red-ui-info-outline-item-hidden & {
+        .fa-eye-slash {
+            display: inline-block;
+        }
+        .fa-eye {
+            display: none;
+        }
+    }
     .fa-ban {
         display: none;
     }