From 02f50b161b0fda1686bbba71e4ef53bfee9dd124 Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Fri, 29 Nov 2024 17:26:10 -0500
Subject: [PATCH] ImageZoom: Fix zoom level not saving (#3054)

---
 src/plugins/imageZoom/components/Magnifier.tsx | 18 +++++++++++-------
 src/webpack/common/react.ts                    |  3 ++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/plugins/imageZoom/components/Magnifier.tsx b/src/plugins/imageZoom/components/Magnifier.tsx
index 585026d6..31fa7a11 100644
--- a/src/plugins/imageZoom/components/Magnifier.tsx
+++ b/src/plugins/imageZoom/components/Magnifier.tsx
@@ -18,7 +18,7 @@
 
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { FluxDispatcher, React, useRef, useState } from "@webpack/common";
+import { FluxDispatcher, useLayoutEffect, useRef, useState } from "@webpack/common";
 
 import { ELEMENT_ID } from "../constants";
 import { settings } from "../index";
@@ -55,7 +55,7 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
     const imageRef = useRef<HTMLImageElement | null>(null);
 
     // since we accessing document im gonna use useLayoutEffect
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const onKeyDown = (e: KeyboardEvent) => {
             if (e.key === "Shift") {
                 isShiftDown.current = true;
@@ -135,12 +135,14 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
 
             setReady(true);
         });
+
         document.addEventListener("keydown", onKeyDown);
         document.addEventListener("keyup", onKeyUp);
         document.addEventListener("mousemove", updateMousePosition);
         document.addEventListener("mousedown", onMouseDown);
         document.addEventListener("mouseup", onMouseUp);
         document.addEventListener("wheel", onWheel);
+
         return () => {
             document.removeEventListener("keydown", onKeyDown);
             document.removeEventListener("keyup", onKeyUp);
@@ -148,14 +150,16 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
             document.removeEventListener("mousedown", onMouseDown);
             document.removeEventListener("mouseup", onMouseUp);
             document.removeEventListener("wheel", onWheel);
-
-            if (settings.store.saveZoomValues) {
-                settings.store.zoom = zoom.current;
-                settings.store.size = size.current;
-            }
         };
     }, []);
 
+    useLayoutEffect(() => () => {
+        if (settings.store.saveZoomValues) {
+            settings.store.zoom = zoom.current;
+            settings.store.size = size.current;
+        }
+    });
+
     if (!ready) return null;
 
     const box = element.current?.getBoundingClientRect();
diff --git a/src/webpack/common/react.ts b/src/webpack/common/react.ts
index 17196132..99f3f9dd 100644
--- a/src/webpack/common/react.ts
+++ b/src/webpack/common/react.ts
@@ -22,6 +22,7 @@ import { findByPropsLazy, waitFor } from "../webpack";
 export let React: typeof import("react");
 export let useState: typeof React.useState;
 export let useEffect: typeof React.useEffect;
+export let useLayoutEffect: typeof React.useLayoutEffect;
 export let useMemo: typeof React.useMemo;
 export let useRef: typeof React.useRef;
 export let useReducer: typeof React.useReducer;
@@ -31,5 +32,5 @@ export const ReactDOM: typeof import("react-dom") & typeof import("react-dom/cli
 
 waitFor("useState", m => {
     React = m;
-    ({ useEffect, useState, useMemo, useRef, useReducer, useCallback } = React);
+    ({ useEffect, useState, useLayoutEffect, useMemo, useRef, useReducer, useCallback } = React);
 });