frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3361 from node-red/zoom-level

Browse Source 
Remember Zoom level and Sidebar tab selection between sessions
This commit is contained in:
Nick O'Leary 2022-01-24 23:21:31 +00:00 committed by GitHub
commit f67aafa8d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -75,6 +75,8 @@
"view": {
"view": "View",
"grid": "Grid",
"storeZoom": "Restore zoom level on load",
"storePosition": "Restore scroll position on load",
"showGrid": "Show grid",
"snapGrid": "Snap to grid",
"gridSize": "Grid size",

3
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@ -556,8 +556,7 @@ var RED = (function() {
$(".red-ui-header-toolbar").show();
RED.sidebar.show(":first");
RED.sidebar.show(":first", true);
setTimeout(function() {
loader.end();

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

@ -19,6 +19,15 @@ RED.sidebar = (function() {
var sidebar_tabs;
var knownTabs = {};
// We store the current sidebar tab id in localStorage as 'last-sidebar-tab'
// This is restored when the editor is reloaded.
// We use sidebar_tabs.onchange to update localStorage. However that will
// also get triggered when the first tab gets added to the tabs - typically
// the 'info' tab. So we use the following variable to store the retrieved
// value from localStorage before we start adding the actual tabs
var lastSessionSelectedTab = null;
function addTab(title,content,closeable,visible) {
var options;
if (typeof title === "string") {
@ -194,16 +203,16 @@ RED.sidebar = (function() {
RED.events.emit("sidebar:resize");
}
function showSidebar(id) {
function showSidebar(id, skipShowSidebar) {
if (id === ":first") {
id = RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
}
if (id) {
if (!containsTab(id) && knownTabs[id]) {
sidebar_tabs.addTab(knownTabs[id]);
}
sidebar_tabs.activateTab(id);
if (!RED.menu.isSelected("menu-item-sidebar")) {
if (!skipShowSidebar && !RED.menu.isSelected("menu-item-sidebar")) {
RED.menu.setSelected("menu-item-sidebar",true);
}
}
@ -227,6 +236,7 @@ RED.sidebar = (function() {
if (tab.toolbar) {
$(tab.toolbar).show();
}
RED.settings.setLocal("last-sidebar-tab", tab.id)
},
onremove: function(tab) {
$(tab.wrapper).hide();
@ -255,7 +265,9 @@ RED.sidebar = (function() {
}
});
RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
showSidebar();
lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab")
RED.sidebar.info.init();
RED.sidebar.help.init();
RED.sidebar.config.init();

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

@ -121,6 +121,13 @@ RED.userSettings = (function() {
// {setting:"theme", label:"Theme",options:function(done){ done([{val:'',text:'default'}].concat(RED.settings.theme("themes"))) }},
// ]
// },
{
title: "menu.label.view.view",
options: [
{setting:"view-store-zoom",label:"menu.label.view.storeZoom", default: false, toggle:true, onchange: function(val) { if (!val) { RED.settings.removeLocal("zoom-level")}}},
{setting:"view-store-position",label:"menu.label.view.storePosition", default: false, toggle:true, onchange: function(val) { if (!val) { RED.settings.removeLocal("scroll-positions")}}},
]
},
{
title: "menu.label.view.grid",
options: [

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

@ -678,6 +678,39 @@ RED.view = (function() {
show: function(n) { return !n.valid }
})
if (RED.settings.get("editor.view.view-store-zoom")) {
var userZoomLevel = parseFloat(RED.settings.getLocal('zoom-level'))
if (!isNaN(userZoomLevel)) {
scaleFactor = userZoomLevel
}
}
var onScrollTimer = null;
function storeScrollPosition() {
workspaceScrollPositions[RED.workspaces.active()] = {
left:chart.scrollLeft(),
top:chart.scrollTop()
};
RED.settings.setLocal('scroll-positions', JSON.stringify(workspaceScrollPositions) )
}
chart.on("scroll", function() {
if (RED.settings.get("editor.view.view-store-position")) {
if (onScrollTimer) {
clearTimeout(onScrollTimer)
}
onScrollTimer = setTimeout(storeScrollPosition, 200);
}
})
if (RED.settings.get("editor.view.view-store-position")) {
var scrollPositions = RED.settings.getLocal('scroll-positions')
if (scrollPositions) {
try {
workspaceScrollPositions = JSON.parse(scrollPositions)
} catch(err) {
}
}
}
}
@ -1965,6 +1998,7 @@ RED.view = (function() {
}
function zoomZero() { zoomView(1); }
function zoomView(factor) {
var screenSize = [chart.width(),chart.height()];
var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
@ -1977,6 +2011,9 @@ RED.view = (function() {
RED.view.navigator.resize();
redraw();
if (RED.settings.get("editor.view.view-store-zoom")) {
RED.settings.setLocal('zoom-level', factor.toFixed(1))
}
}
function selectNone() {