ImageZoom Fixes

This commit is contained in:
Vendicated 2023-04-11 02:00:42 +02:00
parent c997cb4958
commit 358eb6ad8e
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
4 changed files with 12 additions and 17 deletions

View file

@ -36,7 +36,6 @@ export interface MagnifierProps {
export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => { export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => {
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [lensPosition, setLensPosition] = useState<Vec2>({ x: 0, y: 0 }); const [lensPosition, setLensPosition] = useState<Vec2>({ x: 0, y: 0 });
const [imagePosition, setImagePosition] = useState<Vec2>({ x: 0, y: 0 }); const [imagePosition, setImagePosition] = useState<Vec2>({ x: 0, y: 0 });
const [opacity, setOpacity] = useState(0); const [opacity, setOpacity] = useState(0);
@ -157,7 +156,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
return ( return (
<div <div
className="lens" className="vc-imgzoom-lens"
style={{ style={{
opacity, opacity,
width: size.current + "px", width: size.current + "px",
@ -190,7 +189,8 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
}} }}
width={`${box.width * zoom.current}px`} width={`${box.width * zoom.current}px`}
height={`${box.height * zoom.current}px`} height={`${box.height * zoom.current}px`}
src={instance.props.src} alt="" src={instance.props.src}
alt=""
/> />
)} )}
</div> </div>

View file

@ -16,4 +16,4 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
export const ELEMENT_ID = "magnify-modal"; export const ELEMENT_ID = "vc-imgzoom-magnify-modal";

View file

@ -16,10 +16,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import "./styles.css";
import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu"; import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
import { definePluginSettings } from "@api/settings"; import { definePluginSettings } from "@api/settings";
import { disableStyle, enableStyle } from "@api/Styles";
import { makeRange } from "@components/PluginSettings/components"; import { makeRange } from "@components/PluginSettings/components";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import { debounce } from "@utils/debounce"; import { debounce } from "@utils/debounce";
@ -29,6 +28,7 @@ import type { Root } from "react-dom/client";
import { Magnifier, MagnifierProps } from "./components/Magnifier"; import { Magnifier, MagnifierProps } from "./components/Magnifier";
import { ELEMENT_ID } from "./constants"; import { ELEMENT_ID } from "./constants";
import styles from "./styles.css?managed";
export const settings = definePluginSettings({ export const settings = definePluginSettings({
saveZoomValues: { saveZoomValues: {
@ -219,6 +219,7 @@ export default definePlugin({
}, },
start() { start() {
enableStyle(styles);
addContextMenuPatch("image-context", imageContextMenuPatch); addContextMenuPatch("image-context", imageContextMenuPatch);
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.classList.add("MagnifierContainer"); this.element.classList.add("MagnifierContainer");
@ -226,6 +227,7 @@ export default definePlugin({
}, },
stop() { stop() {
disableStyle(styles);
// so componenetWillUnMount gets called if Magnifier component is still alive // so componenetWillUnMount gets called if Magnifier component is still alive
this.root && this.root.unmount(); this.root && this.root.unmount();
this.element?.remove(); this.element?.remove();

View file

@ -1,4 +1,4 @@
.lens { .vc-imgzoom-lens {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 9999; z-index: 9999;
@ -11,26 +11,19 @@
pointer-events: none; pointer-events: none;
} }
.zoom img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* make the carousel take up less space so we can click the backdrop and exit out of it */ /* make the carousel take up less space so we can click the backdrop and exit out of it */
[class^="focusLock"] > [class^="carouselModal"] { [class|="carouselModal"] {
height: fit-content; height: fit-content;
box-shadow: none; box-shadow: none;
} }
[class^="focusLock"] > [class^="carouselModal"] > div { [class*="modalCarouselWrapper"] {
height: fit-content; height: fit-content;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
#magnify-modal { [class|="wrapper"]:has(> #vc-imgzoom-magnify-modal) {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;