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

Merge pull request #5563 from node-red/5545-reveal-node-styling-2 

Scale highlight based on workspace zoom
pull/5147/merge
Nick O'Leary 2026-03-12 11:58:21 +00:00 committed by GitHub
parent 341bc2200a 2d09928718
commit aadc4b1cfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1303,10 +1303,11 @@ RED.view = (function() {
show: function(n) { return !n.valid }
})
setScaleFactor(1)
if (RED.settings.get("editor.view.view-store-zoom")) {
var userZoomLevel = parseFloat(RED.settings.getLocal('zoom-level'))
if (!isNaN(userZoomLevel)) {
scaleFactor = userZoomLevel
setScaleFactor(userZoomLevel)
}
}
@ -3109,7 +3110,7 @@ RED.view = (function() {
center = [(scrollPos[0] + screenSize[0]/2)/oldScaleFactor, (scrollPos[1] + screenSize[1]/2)/oldScaleFactor];
}
scaleFactor = factor;
setScaleFactor(factor)
// Calculate new scroll position to keep the center point at the same screen position
if (focalPoint) {
@ -3195,7 +3196,7 @@ RED.view = (function() {
interpolateValue: true, // Use exponential interpolation for zoom
onStep: function(values) {
var currentFactor = values.zoom;
scaleFactor = currentFactor;
setScaleFactor(currentFactor);
// Calculate new scroll position to maintain focal point
var currentScreenSize = [chart.width(), chart.height()];
@ -3233,7 +3234,7 @@ RED.view = (function() {
onEnd: function() {
cancelInProgressAnimation = null;
// Ensure scaleFactor is exactly the target to prevent precision issues
scaleFactor = targetFactor;
setScaleFactor(targetFactor);
// Full redraw at the end to ensure everything is correct
_redraw();
if (RED.settings.get("editor.view.view-store-zoom")) {
@ -3244,7 +3245,7 @@ RED.view = (function() {
onCancel: function() {
cancelInProgressAnimation = null;
// Ensure scaleFactor is set to current target on cancel
scaleFactor = targetFactor;
setScaleFactor(targetFactor)
_redraw();
RED.events.emit("view:navigate");
}
@ -5182,17 +5183,17 @@ RED.view = (function() {
img.src = iconUrl;
img.onload = function() {
if (!iconUrl.match(/\.svg$/)) {
var largestEdge = Math.max(img.width,img.height);
var scaleFactor = 1;
const largestEdge = Math.max(img.width,img.height);
let imgScaleFactor = 1;
if (largestEdge > 30) {
scaleFactor = 30/largestEdge;
imgScaleFactor = 30/largestEdge;
}
var width = img.width * scaleFactor;
var width = img.width * imgScaleFactor;
if (width > 20) {
scaleFactor *= 20/width;
imgScaleFactor *= 20/width;
width = 20;
}
var height = img.height * scaleFactor;
var height = img.height * imgScaleFactor;
icon.attr("width",width);
icon.attr("height",height);
icon.attr("x",15-width/2);
@ -7666,6 +7667,20 @@ RED.view = (function() {
}
}
function setScaleFactor(sf) {
scaleFactor = sf;
if (sf <= 0.5) {
chart.removeClass('red-ui-workspace-zoom-level-1')
chart.addClass('red-ui-workspace-zoom-level-2')
} else if (sf <= 0.75) {
chart.addClass('red-ui-workspace-zoom-level-1')
chart.removeClass('red-ui-workspace-zoom-level-2')
} else {
chart.removeClass('red-ui-workspace-zoom-level-1')
chart.removeClass('red-ui-workspace-zoom-level-2')
}
}
return {
init: init,
state:function(state) {

16
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -151,6 +151,14 @@
animation-name: node-reveal-highlight;
animation-timing-function: ease-out;
animation-iteration-count: 1;
.red-ui-workspace-zoom-level-1 & {
stroke-width: 8;
stroke-dasharray: 16, 8;
}
.red-ui-workspace-zoom-level-2 & {
stroke-width: 16;
stroke-dasharray: 16, 8;
}
}
}
@ -302,6 +310,14 @@ g.red-ui-flow-node-selected {
stroke-dasharray: 8, 4;
fill: none;
pointer-events: none;
.red-ui-workspace-zoom-level-1 & {
stroke-width: 8;
stroke-dasharray: 16, 8;
}
.red-ui-workspace-zoom-level-2 & {
stroke-width: 16;
stroke-dasharray: 16, 8;
}
.red-ui-flow-node-highlighted & {
animation-duration: 8s;
animation-name: node-reveal-highlight;