ImageZoom: Fix zoom level not saving (#3054)
This commit is contained in:
parent
1150a50355
commit
02f50b161b
2 changed files with 13 additions and 8 deletions
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue