From c1104d1cd6b65b0f44b23cbc546383742cea1911 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sat, 25 May 2019 22:11:05 +0100
Subject: [PATCH] Revealing node position needs to account for zoom level Fixes
 #2172

---
 .../@node-red/editor-client/src/js/ui/view.js | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 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 636c12b40..16883d28a 100755
--- 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
@@ -1331,24 +1331,31 @@ RED.view = (function() {
 
     function zoomIn() {
         if (scaleFactor < 2) {
-            scaleFactor += 0.1;
-            RED.view.navigator.resize();
-            redraw();
+            zoomView(scaleFactor+0.1);
         }
     }
     function zoomOut() {
         if (scaleFactor > 0.3) {
-            scaleFactor -= 0.1;
-            RED.view.navigator.resize();
-            redraw();
+            zoomView(scaleFactor-0.1);
         }
     }
-    function zoomZero() {
-        scaleFactor = 1;
+    function zoomZero() { zoomView(1); }
+
+    function zoomView(factor) {
+        var screenSize = [chart.width(),chart.height()];
+        var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
+        var center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor];
+        scaleFactor = factor;
+        var newCenter = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor];
+        var delta = [(newCenter[0]-center[0])*scaleFactor,(newCenter[1]-center[1])*scaleFactor]
+        chart.scrollLeft(scrollPos[0]-delta[0]);
+        chart.scrollTop(scrollPos[1]-delta[1]);
+
         RED.view.navigator.resize();
         redraw();
     }
 
+
     function selectAll() {
         RED.nodes.eachNode(function(n) {
             if (n.z == RED.workspaces.active()) {
@@ -3530,13 +3537,13 @@ RED.view = (function() {
                     node.dirty = true;
                     RED.workspaces.show(node.z);
 
-                    var screenSize = [$("#chart").width(),$("#chart").height()];
-                    var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
+                    var screenSize = [chart.width()/scaleFactor,chart.height()/scaleFactor];
+                    var scrollPos = [chart.scrollLeft()/scaleFactor,chart.scrollTop()/scaleFactor];
 
                     if (node.x < scrollPos[0] || node.y < scrollPos[1] || node.x > screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) {
-                        var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2);
-                        var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2);
-                        $("#chart").animate({
+                        var deltaX = '-='+(((scrollPos[0] - node.x) + screenSize[0]/2)*scaleFactor);
+                        var deltaY = '-='+(((scrollPos[1] - node.y) + screenSize[1]/2)*scaleFactor);
+                        chart.animate({
                             scrollLeft: deltaX,
                             scrollTop: deltaY
                         },200);