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

Remember context sidebar tree state when refreshing

Browse Source 
Closes #5008
This commit is contained in:
Nick O'Leary 2025-01-21 13:56:44 +00:00
parent 479b7e756d
commit 13cac1b5ef
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 79 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,8 +18,6 @@ RED.sidebar.context = (function() {
var content; var content;
var sections; var sections;
var localCache = {};
var flowAutoRefresh; var flowAutoRefresh;
var nodeAutoRefresh; var nodeAutoRefresh;
var nodeSection; var nodeSection;
@ -27,6 +25,8 @@ RED.sidebar.context = (function() {
var flowSection; var flowSection;
var globalSection; var globalSection;
const expandedPaths = {}
var currentNode; var currentNode;
var currentFlow; var currentFlow;
@ -212,14 +212,41 @@ RED.sidebar.context = (function() {
var l = keys.length; var l = keys.length;
for (var i = 0; i < l; i++) { for (var i = 0; i < l; i++) {
sortedData[keys[i]].forEach(function(v) { sortedData[keys[i]].forEach(function(v) {
var k = keys[i]; const k = keys[i];
var l2 = sortedData[k].length; let payload = v.msg;
var propRow = $('<tr class="red-ui-help-info-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container); let format = v.format;
var obj = $(propRow.children()[0]); const tools = $('<span class="button-group"></span>');
expandedPaths[id + "." + k] = expandedPaths[id + "." + k] || new Set()
const objectElementOptions = {
typeHint: format,
sourceId: id + "." + k,
tools,
path: k,
rootPath: k,
exposeApi: true,
ontoggle: function(path,state) {
path = path.substring(k.length+1)
if (state) {
expandedPaths[id+"."+k].add(path)
} else {
// if 'a' has been collapsed, we want to remove 'a.b' and 'a[0]...' from the set
// of collapsed paths
for (let expandedPath of expandedPaths[id+"."+k]) {
if (expandedPath.startsWith(path+".") || expandedPath.startsWith(path+"[")) {
expandedPaths[id+"."+k].delete(expandedPath)
}
}
expandedPaths[id+"."+k].delete(path)
}
},
expandPaths: [ ...expandedPaths[id+"."+k] ].sort(),
expandLeafNodes: true
}
const propRow = $('<tr class="red-ui-help-info-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
const obj = $(propRow.children()[0]);
obj.text(k); obj.text(k);
var tools = $('<span class="button-group"></span>');
const urlSafeK = encodeURIComponent(k) const urlSafeK = encodeURIComponent(k)
var refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) { const refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
$.getJSON(baseUrl+"/"+urlSafeK+"?store="+v.store, function(data) { $.getJSON(baseUrl+"/"+urlSafeK+"?store="+v.store, function(data) {
@ -229,16 +256,14 @@ RED.sidebar.context = (function() {
tools.detach(); tools.detach();
$(propRow.children()[1]).empty(); $(propRow.children()[1]).empty();
RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), { RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
...objectElementOptions,
typeHint: data.format, typeHint: data.format,
sourceId: id+"."+k,
tools: tools,
path: k
}).appendTo(propRow.children()[1]); }).appendTo(propRow.children()[1]);
} }
}) })
}); });
RED.popover.tooltip(refreshItem,RED._("sidebar.context.refrsh")); RED.popover.tooltip(refreshItem,RED._("sidebar.context.refrsh"));
var deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) { const deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var popover = RED.popover.create({ var popover = RED.popover.create({
@ -246,7 +271,7 @@ RED.sidebar.context = (function() {
target: propRow, target: propRow,
direction: "left", direction: "left",
content: function() { content: function() {
var content = $('<div>'); const content = $('<div>');
$('<p data-i18n="sidebar.context.deleteConfirm"></p>').appendTo(content); $('<p data-i18n="sidebar.context.deleteConfirm"></p>').appendTo(content);
var row = $('<p>').appendTo(content); var row = $('<p>').appendTo(content);
var bg = $('<span class="button-group"></span>').appendTo(row); var bg = $('<span class="button-group"></span>').appendTo(row);
@ -269,16 +294,15 @@ RED.sidebar.context = (function() {
if (container.children().length === 0) { if (container.children().length === 0) {
$('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n(); $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
} }
delete expandedPaths[id + "." + k]
} else { } else {
payload = data.msg; payload = data.msg;
format = data.format; format = data.format;
tools.detach(); tools.detach();
$(propRow.children()[1]).empty(); $(propRow.children()[1]).empty();
RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), { RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
typeHint: data.format, ...objectElementOptions,
sourceId: id+"."+k, typeHint: data.format
tools: tools,
path: k
}).appendTo(propRow.children()[1]); }).appendTo(propRow.children()[1]);
} }
}); });
@ -293,14 +317,7 @@ RED.sidebar.context = (function() {
}); });
RED.popover.tooltip(deleteItem,RED._("sidebar.context.delete")); RED.popover.tooltip(deleteItem,RED._("sidebar.context.delete"));
var payload = v.msg; RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), objectElementOptions).appendTo(propRow.children()[1]);
var format = v.format;
RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
typeHint: v.format,
sourceId: id+"."+k,
tools: tools,
path: k
}).appendTo(propRow.children()[1]);
if (contextStores.length > 1) { if (contextStores.length > 1) {
$("<span>",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0])) $("<span>",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
} }

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

@ -230,7 +230,7 @@ RED.utils = (function() {
var pinnedPaths = {}; var pinnedPaths = {};
var formattedPaths = {}; var formattedPaths = {};
function addMessageControls(obj,sourceId,key,msg,rootPath,strippedKey,extraTools) { function addMessageControls(obj,sourceId,key,msg,rootPath,strippedKey,extraTools,enablePinning) {
if (!pinnedPaths.hasOwnProperty(sourceId)) { if (!pinnedPaths.hasOwnProperty(sourceId)) {
pinnedPaths[sourceId] = {} pinnedPaths[sourceId] = {}
} }
@ -250,7 +250,7 @@ RED.utils = (function() {
RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue"); RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
}) })
RED.popover.tooltip(copyPayload,RED._("node-red:debug.sidebar.copyPayload")); RED.popover.tooltip(copyPayload,RED._("node-red:debug.sidebar.copyPayload"));
if (strippedKey !== undefined && strippedKey !== '') { if (enablePinning && strippedKey !== undefined && strippedKey !== '') {
var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey); var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey);
var pinPath = $('<button class="red-ui-button red-ui-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) { var pinPath = $('<button class="red-ui-button red-ui-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) {
@ -281,13 +281,16 @@ RED.utils = (function() {
} }
} }
} }
function checkExpanded(strippedKey,expandPaths,minRange,maxRange) { function checkExpanded(strippedKey, expandPaths, { minRange, maxRange, expandLeafNodes }) {
if (expandPaths && expandPaths.length > 0) { if (expandPaths && expandPaths.length > 0) {
if (strippedKey === '' && minRange === undefined) { if (strippedKey === '' && minRange === undefined) {
return true; return true;
} }
for (var i=0;i<expandPaths.length;i++) { for (var i=0;i<expandPaths.length;i++) {
var p = expandPaths[i]; var p = expandPaths[i];
if (expandLeafNodes && p === strippedKey) {
return true
}
if (p.indexOf(strippedKey) === 0 && (p[strippedKey.length] === "." || p[strippedKey.length] === "[") ) { if (p.indexOf(strippedKey) === 0 && (p[strippedKey.length] === "." || p[strippedKey.length] === "[") ) {
if (minRange !== undefined && p[strippedKey.length] === "[") { if (minRange !== undefined && p[strippedKey.length] === "[") {
@ -394,6 +397,8 @@ RED.utils = (function() {
var sourceId = options.sourceId; var sourceId = options.sourceId;
var rootPath = options.rootPath; var rootPath = options.rootPath;
var expandPaths = options.expandPaths; var expandPaths = options.expandPaths;
const enablePinning = options.enablePinning
const expandLeafNodes = options.expandLeafNodes;
var ontoggle = options.ontoggle; var ontoggle = options.ontoggle;
var exposeApi = options.exposeApi; var exposeApi = options.exposeApi;
var tools = options.tools; var tools = options.tools;
@ -416,11 +421,11 @@ RED.utils = (function() {
} }
header = $('<span class="red-ui-debug-msg-row"></span>').appendTo(element); header = $('<span class="red-ui-debug-msg-row"></span>').appendTo(element);
if (sourceId) { if (sourceId) {
addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools); addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools, enablePinning);
} }
if (!key) { if (!key) {
element.addClass("red-ui-debug-msg-top-level"); element.addClass("red-ui-debug-msg-top-level");
if (sourceId) { if (sourceId && !expandPaths) {
var pinned = pinnedPaths[sourceId]; var pinned = pinnedPaths[sourceId];
expandPaths = []; expandPaths = [];
if (pinned) { if (pinned) {
@ -476,7 +481,7 @@ RED.utils = (function() {
$('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text(typeHint||'string').appendTo(header); $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text(typeHint||'string').appendTo(header);
var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(element); var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(element);
$('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row); $('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row);
},function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths)); },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
} }
e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj); e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
if (/^#[0-9a-f]{6}$/i.test(obj)) { if (/^#[0-9a-f]{6}$/i.test(obj)) {
@ -592,14 +597,16 @@ RED.utils = (function() {
typeHint: type==='buffer'?'hex':false, typeHint: type==='buffer'?'hex':false,
hideKey: false, hideKey: false,
path: path+"["+i+"]", path: path+"["+i+"]",
sourceId: sourceId, sourceId,
rootPath: rootPath, rootPath,
expandPaths: expandPaths, expandPaths,
ontoggle: ontoggle, expandLeafNodes,
exposeApi: exposeApi, ontoggle,
exposeApi,
// tools: tools // Do not pass tools down as we // tools: tools // Do not pass tools down as we
// keep them attached to the top-level header // keep them attached to the top-level header
nodeSelector: options.nodeSelector, nodeSelector: options.nodeSelector,
enablePinning
} }
).appendTo(row); ).appendTo(row);
} }
@ -623,21 +630,23 @@ RED.utils = (function() {
typeHint: type==='buffer'?'hex':false, typeHint: type==='buffer'?'hex':false,
hideKey: false, hideKey: false,
path: path+"["+i+"]", path: path+"["+i+"]",
sourceId: sourceId, sourceId,
rootPath: rootPath, rootPath,
expandPaths: expandPaths, expandPaths,
ontoggle: ontoggle, expandLeafNodes,
exposeApi: exposeApi, ontoggle,
exposeApi,
// tools: tools // Do not pass tools down as we // tools: tools // Do not pass tools down as we
// keep them attached to the top-level header // keep them attached to the top-level header
nodeSelector: options.nodeSelector, nodeSelector: options.nodeSelector,
enablePinning
} }
).appendTo(row); ).appendTo(row);
} }
} }
})(), })(),
(function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(), (function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(),
checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9)))); checkExpanded(strippedKey,expandPaths,{ minRange, maxRange: Math.min(fullLength-1,(minRange+9)), expandLeafNodes}));
$('<span class="red-ui-debug-msg-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header); $('<span class="red-ui-debug-msg-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
} }
if (fullLength < originalLength) { if (fullLength < originalLength) {
@ -646,7 +655,7 @@ RED.utils = (function() {
} }
}, },
function(state) {if (ontoggle) { ontoggle(path,state);}}, function(state) {if (ontoggle) { ontoggle(path,state);}},
checkExpanded(strippedKey,expandPaths)); checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
} }
} else if (typeof obj === 'object') { } else if (typeof obj === 'object') {
element.addClass('collapsed'); element.addClass('collapsed');
@ -680,14 +689,16 @@ RED.utils = (function() {
typeHint: false, typeHint: false,
hideKey: false, hideKey: false,
path: newPath, path: newPath,
sourceId: sourceId, sourceId,
rootPath: rootPath, rootPath,
expandPaths: expandPaths, expandPaths,
ontoggle: ontoggle, expandLeafNodes,
exposeApi: exposeApi, ontoggle,
exposeApi,
// tools: tools // Do not pass tools down as we // tools: tools // Do not pass tools down as we
// keep them attached to the top-level header // keep them attached to the top-level header
nodeSelector: options.nodeSelector, nodeSelector: options.nodeSelector,
enablePinning
} }
).appendTo(row); ).appendTo(row);
} }
@ -696,7 +707,7 @@ RED.utils = (function() {
} }
}, },
function(state) {if (ontoggle) { ontoggle(path,state);}}, function(state) {if (ontoggle) { ontoggle(path,state);}},
checkExpanded(strippedKey,expandPaths)); checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
} }
if (key) { if (key) {
$('<span class="red-ui-debug-msg-type-meta"></span>').text(type).appendTo(entryObj); $('<span class="red-ui-debug-msg-type-meta"></span>').text(type).appendTo(entryObj);

3
packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js vendored
View File

@ -511,9 +511,10 @@ RED.debug = (function() {
typeHint: format, typeHint: format,
hideKey: false, hideKey: false,
path: path, path: path,
sourceId: sourceNode&&sourceNode.id, sourceId: sourceNode && sourceNode.id,
rootPath: path, rootPath: path,
nodeSelector: config.messageSourceClick, nodeSelector: config.messageSourceClick,
enablePinning: true
}); });
// Do this in a separate step so the element functions aren't stripped // Do this in a separate step so the element functions aren't stripped
debugMessage.appendTo(el); debugMessage.appendTo(el);