From 9b1a254553ee4557b919121ed76a48a09292c839 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 21 May 2024 13:55:00 +0900
Subject: [PATCH] scale MUI on window resize

---
 public/scripts/RossAscends-mods.js |  1 +
 public/scripts/power-user.js       | 58 ++++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 8e06486b9..3166b4afa 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -566,6 +566,7 @@ export function dragElement(elmnt) {
 
                 containerAspectRatio = null;
                 imageAspectRatio = null;
+                $(window).off('mouseup');
             });
         }
 
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index fd4b8655a..0e647269c 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -2996,13 +2996,20 @@ $(document).ready(() => {
     });
 
     const reportZoomLevelDebounced = debounce(() => {
-        const zoomLevel = Number(window.devicePixelRatio).toFixed(2);
+        const zoomLevel = Number(window.devicePixelRatio).toFixed(2) || 1;
         const winWidth = window.innerWidth;
         const winHeight = window.innerHeight;
-        console.debug(`Zoom: ${zoomLevel}, X:${winWidth}, Y:${winHeight}`);
+        const originalWidth = winWidth * zoomLevel;
+        const originalHeight = winHeight * zoomLevel;
+        console.debug(`Zoom: ${zoomLevel}, X:${winWidth}, Y:${winHeight}, original: ${originalWidth}x${originalHeight} `);
+        return zoomLevel;
     });
 
+    var coreTruthWinWidth = window.innerWidth;
+    var coreTruthWinHeight = window.innerHeight;
+
     $(window).on('resize', async () => {
+        console.log(`Window resize: ${coreTruthWinWidth}x${coreTruthWinHeight} -> ${window.innerWidth}x${window.innerHeight}`)
         adjustAutocompleteDebounced();
         setHotswapsDebounced();
 
@@ -3012,9 +3019,54 @@ $(document).ready(() => {
 
         reportZoomLevelDebounced();
 
+        //attempt to scale movingUI elements naturally across window resizing/zooms
+        //this will still break if the zoom level causes mobile styles to come into play.
+        const scaleY = Number(window.innerHeight / coreTruthWinHeight).toFixed(4);
+        const scaleX = Number(window.innerWidth / coreTruthWinWidth).toFixed(4);
+
         if (Object.keys(power_user.movingUIState).length > 0) {
-            resetMovablePanels('resize');
+            for (var elmntName of Object.keys(power_user.movingUIState)) {
+                var elmntState = power_user.movingUIState[elmntName];
+                var oldHeight = elmntState.height;
+                var oldWidth = elmntState.width;
+                var oldLeft = elmntState.left;
+                var oldTop = elmntState.top;
+                var oldBottom = elmntState.bottom;
+                var oldRight = elmntState.right;
+                var newHeight, newWidth, newTop, newBottom, newLeft, newRight;
+
+                newHeight = Number(oldHeight * scaleY).toFixed(0);
+                newWidth = Number(oldWidth * scaleX).toFixed(0);
+                newLeft = Number(oldLeft * scaleX).toFixed(0);
+                newTop = Number(oldTop * scaleY).toFixed(0);
+                newBottom = Number(oldBottom * scaleY).toFixed(0);
+                newRight = Number(oldRight * scaleX).toFixed(0);
+                try {
+                    var elmnt = $('#' + $.escapeSelector(elmntName));
+                    if (elmnt.length) {
+                        console.log(`scaling ${elmntName} by ${scaleX}x${scaleY} to ${newWidth}x${newHeight}`);
+                        elmnt.css('height', newHeight);
+                        elmnt.css('width', newWidth);
+                        elmnt.css('inset', `${newTop}px ${newRight}px ${newBottom}px ${newLeft}px`);
+                        power_user.movingUIState[elmntName].height = newHeight;
+                        power_user.movingUIState[elmntName].width = newWidth;
+                        power_user.movingUIState[elmntName].top = newTop;
+                        power_user.movingUIState[elmntName].bottom = newBottom;
+                        power_user.movingUIState[elmntName].left = newLeft;
+                        power_user.movingUIState[elmntName].right = newRight;
+                    } else {
+                        console.log(`skipping ${elmntName} because it doesn't exist in the DOM`);
+                    }
+                } catch (err) {
+                    console.log(`error occurred while processing ${elmntName}: ${err}`);
+                }
+            }
+        } else {
+            console.log('aborting MUI reset', Object.keys(power_user.movingUIState).length)
         }
+        saveSettingsDebounced();
+        coreTruthWinWidth = window.innerWidth;
+        coreTruthWinHeight = window.innerHeight;
     });
 
     // Settings that go to settings.json