From afe54b383fb1dc16654ec472bb8364c139803b49 Mon Sep 17 00:00:00 2001
From: Daniel Garcia Briseno <94071409+dgarciabriseno@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:41:13 -0500
Subject: [PATCH] Fix unstable sun (#533)

* Fix scroll performance issues

* Fix how mc is positioned
---
 resources/js/Viewport/Helper/SandboxHelper.js | 38 +++++++++----------
 resources/js/Viewport/Helper/ScrollZoom.js    | 25 +++++++++---
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/resources/js/Viewport/Helper/SandboxHelper.js b/resources/js/Viewport/Helper/SandboxHelper.js
index a4f71bed6..2e9f616e2 100644
--- a/resources/js/Viewport/Helper/SandboxHelper.js
+++ b/resources/js/Viewport/Helper/SandboxHelper.js
@@ -45,14 +45,12 @@ var SandboxHelper = Class.extend(
      * and updates the css accordingly. Also repositions the movingContainer.
      */
     updateSandbox: function (viewportCenter, desiredSandboxSize) {
-        var change, oldCenter, newCenter, newHCLeft, newHCTop, containerPos;
-
-        oldCenter = this.getCenter();
-
         //Get ViewPort size offset
-        var heightOffset = $(window).height();
-        var widthOffset = $(window).width();
+        let heightOffset = $(window).height();
+        let widthOffset = $(window).width();
 
+        // Get moving container position on screen
+        let mc_pos = this.movingContainer[0].getBoundingClientRect();
 
         // Update sandbox dimensions
         this.domNode.css({
@@ -61,24 +59,24 @@ var SandboxHelper = Class.extend(
             left   : (viewportCenter.x - ( widthOffset * 0.5 ) ) - (0.5 * desiredSandboxSize.width) + 'px',
             top    : (viewportCenter.y - ( heightOffset * 0.5 ) ) - (0.5 * desiredSandboxSize.height) + 'px'
         });
-        newCenter = this.getCenter();
 
-        // Difference
-        change = {
-            x: newCenter.x - oldCenter.x,
-            y: newCenter.y - oldCenter.y
-        };
+        // Get new container position after changing the sandbox size
+        let mc_shift = this.movingContainer[0].getBoundingClientRect();
 
-        if (Math.abs(change.x) < 0.01 && Math.abs(change.y) < 0.01) {
-            return;
-        }
-        containerPos = this.movingContainer.position();
+        // Get the delta needed to put the moving container back where it was.
+        let dt = {
+            left: mc_pos.x - mc_shift.x,
+            top: mc_pos.y - mc_shift.y
+        };
 
-        // Update moving container position
-        newHCLeft = Math.max(0, Math.min(desiredSandboxSize.width,  containerPos.left + change.x));
-        newHCTop  = Math.max(0, Math.min(desiredSandboxSize.height, containerPos.top  + change.y));
+        // Add the delta to the current coordinates. This should put it back
+        // to where it appeared to be on screen.
+        let new_pos = {
+            left: parseFloat(this.movingContainer.css("left")) + dt.left,
+            top: parseFloat(this.movingContainer.css("top")) + dt.top
+        };
 
-        this.moveContainerTo(newHCLeft, newHCTop);
+        this.moveContainerTo(new_pos.left, new_pos.top);
     },
 
     moveContainerTo: function (x, y) {
diff --git a/resources/js/Viewport/Helper/ScrollZoom.js b/resources/js/Viewport/Helper/ScrollZoom.js
index cc1fb3c7c..218e04892 100644
--- a/resources/js/Viewport/Helper/ScrollZoom.js
+++ b/resources/js/Viewport/Helper/ScrollZoom.js
@@ -1,8 +1,9 @@
 class ScrollZoom {
     constructor() {
-        this._MIN_SPEED = 3;
+        this._MIN_SPEED = 2;
         this._MAX_DURATION_MS = 25;
         this._scrolling = false;
+        this._no_change_count = 0;
         document.getElementById('sandbox').addEventListener("wheel", this._wheeling.bind(this));
     }
 
@@ -30,6 +31,7 @@ class ScrollZoom {
         this._currentZoom = 0;
         this._target = 0;
         this._delta = 0;
+        this._UpdateScrolling(event);
         this._interval = setInterval(this._rectifyScroll.bind(this), 1);
     }
 
@@ -39,12 +41,24 @@ class ScrollZoom {
      */
     _rectifyScroll() {
         this._currentZoom += this._delta;
+        // This smooths out fine-grained zooming if you're moving very slowly
+        // on a high resolution touchpad like the mac's.
+        if (Math.abs(this._delta) > Math.abs(this._target)) {
+            this._delta = Math.abs(this._delta) - Math.abs(this._target);
+        }
+        if (this._delta == 0) {
+            this._no_change_count += 1;
+        }
+        if (this._onupdate) {
+            this._onupdate(this._currentZoom);
+        }
         // Finish scrolling when the zoom crosses the target.
-        if (((this._delta > 0) && (this._currentZoom > this._target))
-           || ((this._delta < 0) && (this._currentZoom < this._target))) {
+        if (((this._delta > 0) && (this._currentZoom >= this._target))
+           || ((this._delta < 0) && (this._currentZoom <= this._target))
+            // Scrolling hasn't changed in 30 ticks, break out of infinite loop
+            // This can happen if the mouse sends a 0 delta scroll and nothing else.
+           || (this._no_change_count >= 30)) {
             this._FinishScrolling();
-        } else if (this._onupdate) {
-            this._onupdate(this._currentZoom);
         }
     }
 
@@ -72,6 +86,7 @@ class ScrollZoom {
     _FinishScrolling() {
         this._scrolling = false;
         this._delta = 0;
+        this._no_change_count = 0;
         clearInterval(this._interval);
     }