diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index 92e0f526c..9b10afd82 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -7,7 +7,7 @@ RED.view.zoomConstants = { MAX_ZOOM: 2.0, // Zoom step for keyboard/button controls - ZOOM_STEP: 0.1, + ZOOM_STEP: 0.2, // Animation settings DEFAULT_ZOOM_DURATION: 125, // ms, faster animation 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 6589522a0..89ed5a35c 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 @@ -763,11 +763,11 @@ RED.view = (function() { '') }) - $("#red-ui-view-zoom-out").on("click", zoomOut); + $("#red-ui-view-zoom-out").on("click", function() { zoomOut(); }); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); $("#red-ui-view-zoom-zero").on("click", zoomZero); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#red-ui-view-zoom-in").on("click", zoomIn); + $("#red-ui-view-zoom-in").on("click", function() { zoomIn(); }); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); $("#red-ui-view-zoom-fit").on("click", zoomToFitAll); RED.popover.tooltip($("#red-ui-view-zoom-fit"),RED._('actions.zoom-fit'),'core:zoom-fit'); @@ -2847,16 +2847,16 @@ RED.view = (function() { function zoomIn(focalPoint) { if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { - zoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); + animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } function zoomOut(focalPoint) { var minZoom = calculateMinZoom(); if (scaleFactor > minZoom) { - zoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); + animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); } } - function zoomZero() { zoomView(1); } + function zoomZero() { animatedZoomView(1); } function zoomToFitAll() { // Get all nodes in active workspace @@ -2931,12 +2931,14 @@ RED.view = (function() { function zoomView(factor, focalPoint) { + console.log('=== ZOOM VIEW CALLED ===', 'factor:', factor, 'focalPoint:', focalPoint); // Early return if scale factor isn't actually changing // This prevents focal point shifts when at zoom limits if (Math.abs(scaleFactor - factor) < 0.001) { + console.log('Zoom view SKIPPED - already at target zoom'); return; } - + var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; var oldScaleFactor = scaleFactor; @@ -2960,8 +2962,10 @@ RED.view = (function() { chart.scrollTop(center[1] * scaleFactor - focalPoint[1]); } else { // Keep viewport center on the same workspace coordinates - chart.scrollLeft(center[0] * scaleFactor - screenSize[0]/2); - chart.scrollTop(center[1] * scaleFactor - screenSize[1]/2); + var newScrollLeft = center[0] * scaleFactor - screenSize[0]/2; + var newScrollTop = center[1] * scaleFactor - screenSize[1]/2; + chart.scrollLeft(newScrollLeft); + chart.scrollTop(newScrollTop); } RED.view.navigator.resize(); @@ -3041,13 +3045,18 @@ RED.view = (function() { chart.scrollLeft(newScrollPos[0]); chart.scrollTop(newScrollPos[1]); + // During animation, only update the scale transform, not the full redraw + // This is much more performant with many nodes + eventLayer.attr("transform", "scale(" + scaleFactor + ")"); + outer.attr("width", space_width * scaleFactor).attr("height", space_height * scaleFactor); RED.view.navigator.resize(); - redraw(); }, onEnd: function() { cancelInProgressAnimation = null; // Ensure scaleFactor is exactly the target to prevent precision issues scaleFactor = targetFactor; + // Full redraw at the end to ensure everything is correct + redraw(); if (RED.settings.get("editor.view.view-store-zoom")) { RED.settings.setLocal('zoom-level', targetFactor.toFixed(1)); }