ImageZoom Fixes

src/plugins/imageZoom/components/Magnifier.tsx

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

src/plugins/imageZoom/constants.ts

@@ -16,4 +16,4 @@
  * 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";

src/plugins/imageZoom/index.tsx

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

src/plugins/imageZoom/styles.css

@@ -1,4 +1,4 @@
-.lens {
+.vc-imgzoom-lens {
     position: absolute;
     inset: 0;
     z-index: 9999;
@@ -11,26 +11,19 @@
     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 */
-[class^="focusLock"] > [class^="carouselModal"] {
+[class|="carouselModal"] {
     height: fit-content;
     box-shadow: none;
 }
 
-[class^="focusLock"] > [class^="carouselModal"] > div {
+[class*="modalCarouselWrapper"] {
     height: fit-content;
     top: 50%;
     transform: translateY(-50%);
 }
 
-#magnify-modal {
+[class|="wrapper"]:has(> #vc-imgzoom-magnify-modal) {
     position: absolute;
     left: 50%;
     top: 50%;