frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework palette state management

Browse Source
This commit is contained in:
Nick O'Leary 2024-03-28 14:23:39 +00:00
parent bffd1d61b2
commit f5fd6e3a36
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 71 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@ RED.palette = (function() {
var categoryContainers = {}; var categoryContainers = {};
var sidebarControls; var sidebarControls;
let lastState = { filter: "", collapsed: [] }; let paletteState = { filter: "", collapsed: [] };
function createCategory(originalCategory,rootCategory,category,ns) { function createCategory(originalCategory,rootCategory,category,ns) {
if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) { if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) {
@ -62,29 +62,61 @@ RED.palette = (function() {
catDiv.data('label',label); catDiv.data('label',label);
categoryContainers[category] = { categoryContainers[category] = {
container: catDiv, container: catDiv,
close: function() { hide: function (instant) {
if (instant) {
catDiv.hide()
} else {
catDiv.slideUp()
}
},
show: function () {
catDiv.show()
},
isOpen: function () {
return !!catDiv.hasClass("red-ui-palette-open")
},
getNodeCount: function (visibleOnly) {
const nodes = catDiv.find(".red-ui-palette-node")
if (visibleOnly) {
return nodes.filter(function() { return $(this).css('display') !== 'none'}).length
} else {
return nodes.length
}
},
close: function(instant, skipSaveState) {
catDiv.removeClass("red-ui-palette-open"); catDiv.removeClass("red-ui-palette-open");
catDiv.addClass("red-ui-palette-closed"); catDiv.addClass("red-ui-palette-closed");
$("#red-ui-palette-base-category-"+category).slideUp(); if (instant) {
$("#red-ui-palette-base-category-"+category).hide();
} else {
$("#red-ui-palette-base-category-"+category).slideUp();
}
$("#red-ui-palette-header-"+category+" i").removeClass("expanded"); $("#red-ui-palette-header-"+category+" i").removeClass("expanded");
if (!skipSaveState) {
if (!paletteState.collapsed.includes(category)) {
paletteState.collapsed.push(category);
savePaletteState();
}
}
}, },
open: function() { open: function(skipSaveState) {
catDiv.addClass("red-ui-palette-open"); catDiv.addClass("red-ui-palette-open");
catDiv.removeClass("red-ui-palette-closed"); catDiv.removeClass("red-ui-palette-closed");
$("#red-ui-palette-base-category-"+category).slideDown(); $("#red-ui-palette-base-category-"+category).slideDown();
$("#red-ui-palette-header-"+category+" i").addClass("expanded"); $("#red-ui-palette-header-"+category+" i").addClass("expanded");
if (!skipSaveState) {
if (paletteState.collapsed.includes(category)) {
paletteState.collapsed.splice(paletteState.collapsed.indexOf(category), 1);
savePaletteState();
}
}
}, },
toggle: function() { toggle: function() {
if (catDiv.hasClass("red-ui-palette-open")) { if (categoryContainers[category].isOpen()) {
categoryContainers[category].close(); categoryContainers[category].close();
if (!lastState.collapsed.includes(category)) {
lastState.collapsed.push(category);
}
} else { } else {
categoryContainers[category].open(); categoryContainers[category].open();
lastState.collapsed.splice(lastState.collapsed.indexOf(category), 1);
} }
savePaletteState();
} }
}; };
@ -422,7 +454,11 @@ RED.palette = (function() {
var categoryNode = $("#red-ui-palette-container-"+rootCategory); var categoryNode = $("#red-ui-palette-container-"+rootCategory);
if (categoryNode.find(".red-ui-palette-node").length === 1) { if (categoryNode.find(".red-ui-palette-node").length === 1) {
categoryContainers[rootCategory].open(); if (!paletteState?.collapsed?.includes(rootCategory)) {
categoryContainers[rootCategory].open();
} else {
categoryContainers[rootCategory].close(true);
}
} }
} }
@ -535,16 +571,26 @@ RED.palette = (function() {
} }
}); });
for (var category in categoryContainers) { for (let category in categoryContainers) {
if (categoryContainers.hasOwnProperty(category)) { if (categoryContainers.hasOwnProperty(category)) {
if (categoryContainers[category].container const categorySection = categoryContainers[category]
.find(".red-ui-palette-node") if (categorySection.getNodeCount(true) === 0) {
.filter(function() { return $(this).css('display') !== 'none'}).length === 0) { categorySection.hide()
categoryContainers[category].close();
categoryContainers[category].container.slideUp();
} else { } else {
categoryContainers[category].open(); categorySection.show()
categoryContainers[category].container.show(); if (val) {
// There is a filter being applied and it has matched
// something in this category - show the contents
categorySection.open(true)
} else {
// No filter. Only show the category if it isn't in lastState
if (!paletteState.collapsed.includes(category)) {
categorySection.open(true)
} else if (categorySection.isOpen()) {
// This section should be collapsed but isn't - so make it so
categorySection.close(true, true)
}
}
} }
} }
} }
@ -607,7 +653,7 @@ RED.palette = (function() {
delay: 100, delay: 100,
change: function() { change: function() {
filterChange($(this).val()); filterChange($(this).val());
lastState.filter = $(this).val(); paletteState.filter = $(this).val();
savePaletteState(); savePaletteState();
} }
}); });
@ -678,27 +724,11 @@ RED.palette = (function() {
}); });
try { try {
const stateFromStorage = JSON.parse(localStorage.getItem("palette-state") || "{}"); paletteState = JSON.parse(RED.settings.getLocal("palette-state") || '{"filter":"", "collapsed": []}');
if (paletteState.filter) {
for (const prop in stateFromStorage) {
if (Object.prototype.hasOwnProperty.call(lastState, prop)) {
lastState[prop] = stateFromStorage[prop];
}
}
// Remove old/unknown category from localStorage
lastState.collapsed = lastState.collapsed.filter((c, i, a) => a.indexOf(c) === i && categoryContainers[c]);
const callback = function () {
// Hide categories previously hidded
lastState.collapsed.forEach((category) => categoryContainers[category].close());
// Apply the category filter // Apply the category filter
$("#red-ui-palette-search input").searchBox("value", lastState.filter); $("#red-ui-palette-search input").searchBox("value", paletteState.filter);
RED.events.off("runtime-state", callback); }
};
savePaletteState();
RED.events.on("runtime-state", callback);
} catch (error) { } catch (error) {
console.error("Unexpected error loading palette state from localStorage: ", error); console.error("Unexpected error loading palette state from localStorage: ", error);
} }
@ -726,7 +756,7 @@ RED.palette = (function() {
function savePaletteState() { function savePaletteState() {
try { try {
localStorage.setItem("palette-state", JSON.stringify(lastState)); RED.settings.setLocal("palette-state", JSON.stringify(paletteState));
} catch (error) { } catch (error) {
console.error("Unexpected error saving palette state to localStorage: ", error); console.error("Unexpected error saving palette state to localStorage: ", error);
} }