From f831df70cefb02a78d489d2a8f87848818f75ead Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:43:54 +0200 Subject: [PATCH] Fix zoom-to-fit to properly center nodes in viewport --- .../@node-red/editor-client/src/js/ui/view.js | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 0957ae749..09ca0a98d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2989,25 +2989,18 @@ RED.view = (function() { var minZoom = calculateMinZoom(); 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 centerY = (minY + maxY) / 2; - // Convert to screen coordinates for focal point - // We want to center the bounding box in the viewport + // Reset button zoom focal point for zoom-to-fit + 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]; - - // 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); + animatedZoomView(targetZoom, focalPoint, [centerX, centerY]); } function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); }