frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Allow tabs to be hidden

This commit is contained in:
Nick O'Leary 2021-08-24 17:33:04 +01:00
parent 34cb93794c
commit 46e2ff1001
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 309 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -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,16 +741,22 @@ RED.clipboard = (function() {
$("#red-ui-clipboard-dialog-export").hide();
$("#red-ui-clipboard-dialog-import-conflict").hide();
var selection = RED.workspaces.selection();
if (selection.length > 0) {
$("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
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 {
selection = RED.view.selection();
if (selection.nodes) {
var selection = RED.workspaces.selection();
if (selection.length > 0) {
$("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
} else {
$("#red-ui-clipboard-dialog-export-rng-selected").addClass('disabled').removeClass('selected');
$("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
selection = RED.view.selection();
if (selection.nodes) {
$("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
} else {
$("#red-ui-clipboard-dialog-export-rng-selected").addClass('disabled').removeClass('selected');
$("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
}
}
}
if (format === "red-ui-clipboard-dialog-export-fmt-full") {

94
packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js vendored
View File

@ -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);
}
}
activateTab(tab.find("a"));
}
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;

2
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@ -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) {

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

@ -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();
// evt.stopPropagation();
// RED.view.reveal(n.id);
// })
if (n.type === "tab") {
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) {
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,

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -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

194
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -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-delete",RED.workspaces.count() == 1 || activeSubflow);
RED.menu.setDisabled("menu-item-workspace-edit", activeSubflow || event.workspace === 0);
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,24 +653,29 @@ RED.view = (function() {
function updateActiveNodes() {
var activeWorkspace = RED.workspaces.active();
if (activeWorkspace !== 0) {
activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
activeGroups = RED.nodes.groups(activeWorkspace)||[];
activeGroups.forEach(function(g) {
if (g.g) {
g._root = g.g;
g._depth = 1;
} else {
g._root = g.id;
g._depth = 0;
}
});
activeGroups = RED.nodes.groups(activeWorkspace)||[];
activeGroups.forEach(function(g) {
if (g.g) {
g._root = g.g;
g._depth = 1;
} else {
g._root = g.id;
g._depth = 0;
}
});
} else {
activeNodes = [];
activeLinks = [];
activeGroups = [];
}
var changed = false;
do {
changed = false;
@ -1939,93 +1944,94 @@ RED.view = (function() {
function updateSelection() {
var selection = {};
var activeWorkspace = RED.workspaces.active();
var workspaceSelection = RED.workspaces.selection();
if (workspaceSelection.length === 0) {
selection = getSelection();
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
var tabOrder = RED.nodes.getWorkspaceOrder();
var currentLinks = activeLinks;
var addedLinkLinks = {};
activeFlowLinks = [];
var activeLinkNodeIds = Object.keys(activeLinkNodes);
activeLinkNodeIds.forEach(function(n) {
activeLinkNodes[n].dirty = true;
})
activeLinkNodes = {};
for (var i=0;i<movingSet.length();i++) {
var msn = movingSet.get(i);
if ((msn.n.type === "link out" || msn.n.type === "link in") &&
(msn.n.z === activeWorkspace)) {
var linkNode = msn.n;
activeLinkNodes[linkNode.id] = linkNode;
var offFlowLinks = {};
linkNode.links.forEach(function(id) {
var target = RED.nodes.node(id);
if (target) {
if (linkNode.type === "link out") {
if (target.z === linkNode.z) {
if (!addedLinkLinks[linkNode.id+":"+target.id]) {
activeLinks.push({
source:linkNode,
sourcePort:0,
target: target,
link: true
});
addedLinkLinks[linkNode.id+":"+target.id] = true;
activeLinkNodes[target.id] = target;
target.dirty = true;
if (activeWorkspace !== 0) {
if (workspaceSelection.length === 0) {
selection = getSelection();
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
var tabOrder = RED.nodes.getWorkspaceOrder();
var currentLinks = activeLinks;
var addedLinkLinks = {};
activeFlowLinks = [];
var activeLinkNodeIds = Object.keys(activeLinkNodes);
activeLinkNodeIds.forEach(function(n) {
activeLinkNodes[n].dirty = true;
})
activeLinkNodes = {};
for (var i=0;i<movingSet.length();i++) {
var msn = movingSet.get(i);
if ((msn.n.type === "link out" || msn.n.type === "link in") &&
(msn.n.z === activeWorkspace)) {
var linkNode = msn.n;
activeLinkNodes[linkNode.id] = linkNode;
var offFlowLinks = {};
linkNode.links.forEach(function(id) {
var target = RED.nodes.node(id);
if (target) {
if (linkNode.type === "link out") {
if (target.z === linkNode.z) {
if (!addedLinkLinks[linkNode.id+":"+target.id]) {
activeLinks.push({
source:linkNode,
sourcePort:0,
target: target,
link: true
});
addedLinkLinks[linkNode.id+":"+target.id] = true;
activeLinkNodes[target.id] = target;
target.dirty = true;
}
} else {
offFlowLinks[target.z] = offFlowLinks[target.z]||[];
offFlowLinks[target.z].push(target);
}
} else {
offFlowLinks[target.z] = offFlowLinks[target.z]||[];
offFlowLinks[target.z].push(target);
}
} else {
if (target.z === linkNode.z) {
if (!addedLinkLinks[target.id+":"+linkNode.id]) {
activeLinks.push({
source:target,
sourcePort:0,
target: linkNode,
link: true
});
addedLinkLinks[target.id+":"+linkNode.id] = true;
activeLinkNodes[target.id] = target;
target.dirty = true;
if (target.z === linkNode.z) {
if (!addedLinkLinks[target.id+":"+linkNode.id]) {
activeLinks.push({
source:target,
sourcePort:0,
target: linkNode,
link: true
});
addedLinkLinks[target.id+":"+linkNode.id] = true;
activeLinkNodes[target.id] = target;
target.dirty = true;
}
} else {
offFlowLinks[target.z] = offFlowLinks[target.z]||[];
offFlowLinks[target.z].push(target);
}
} else {
offFlowLinks[target.z] = offFlowLinks[target.z]||[];
offFlowLinks[target.z].push(target);
}
}
}
});
var offFlows = Object.keys(offFlowLinks);
// offFlows.sort(function(A,B) {
// return tabOrder.indexOf(A) - tabOrder.indexOf(B);
// });
if (offFlows.length > 0) {
activeFlowLinks.push({
refresh: Math.floor(Math.random()*10000),
node: linkNode,
links: offFlowLinks//offFlows.map(function(i) { return {id:i,links:offFlowLinks[i]};})
});
var offFlows = Object.keys(offFlowLinks);
// offFlows.sort(function(A,B) {
// return tabOrder.indexOf(A) - tabOrder.indexOf(B);
// });
if (offFlows.length > 0) {
activeFlowLinks.push({
refresh: Math.floor(Math.random()*10000),
node: linkNode,
links: offFlowLinks//offFlows.map(function(i) { return {id:i,links:offFlowLinks[i]};})
});
}
}
}
if (activeFlowLinks.length === 0 && selected_link !== null && selected_link.link) {
activeLinks.push(selected_link);
activeLinkNodes[selected_link.source.id] = selected_link.source;
selected_link.source.dirty = true;
activeLinkNodes[selected_link.target.id] = selected_link.target;
selected_link.target.dirty = true;
}
} else {
selection.flows = workspaceSelection;
}
if (activeFlowLinks.length === 0 && selected_link !== null && selected_link.link) {
activeLinks.push(selected_link);
activeLinkNodes[selected_link.source.id] = selected_link.source;
selected_link.source.dirty = true;
activeLinkNodes[selected_link.target.id] = selected_link.target;
selected_link.target.dirty = true;
}
} else {
selection.flows = workspaceSelection;
}
var selectionJSON = activeWorkspace+":"+JSON.stringify(selection,function(key,value) {
if (key === 'nodes' || key === 'flows') {

65
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@ -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
}
activeWorkspace = tab.id;
if (tab) {
$("#red-ui-workspace-chart").show();
activeWorkspace = tab.id;
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);
window.location.hash = 'flow/'+tab.id;
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
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 (!skipStack && activeWorkspace !== id) {
addToViewStack(activeWorkspace)
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);
}
workspace_tabs.activateTab(id);
},
refresh: function() {
RED.nodes.eachWorkspace(function(ws) {

18
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -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;
}