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

Fix zoom-to-fit to properly center nodes in viewport

pan-zoom
dimitrieh 2025-09-30 14:43:54 +02:00 committed by Nick O'Leary
parent 34d356230b
commit f831df70ce
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2989,25 +2989,18 @@ RED.view = (function() {
var minZoom = calculateMinZoom(); var minZoom = calculateMinZoom();
targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom)); targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom));
// Calculate center point of bounding box as focal point // Calculate center point of bounding box in workspace coordinates
var centerX = (minX + maxX) / 2; var centerX = (minX + maxX) / 2;
var centerY = (minY + maxY) / 2; var centerY = (minY + maxY) / 2;
// Convert to screen coordinates for focal point // Reset button zoom focal point for zoom-to-fit
// We want to center the bounding box in the viewport clearTimeout(buttonZoomTimeout);
buttonZoomWorkspaceCenter = null;
// Pass the bounding box center as workspace center
// This ensures the nodes are centered in viewport after zoom
var focalPoint = [viewportWidth / 2, viewportHeight / 2]; var focalPoint = [viewportWidth / 2, viewportHeight / 2];
animatedZoomView(targetZoom, focalPoint, [centerX, centerY]);
// First zoom to target level
animatedZoomView(targetZoom, focalPoint);
// Then scroll to center the bounding box
// Wait for zoom animation to complete before scrolling
setTimeout(function() {
var scrollLeft = centerX * targetZoom - viewportWidth / 2;
var scrollTop = centerY * targetZoom - viewportHeight / 2;
chart.scrollLeft(scrollLeft);
chart.scrollTop(scrollTop);
}, RED.view.zoomConstants.DEFAULT_ZOOM_DURATION + 50);
} }
function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); }