ImageZoom: Add square lens option

src/plugins/imageZoom/components/Magnifier.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { classNameFactory } from "@api/Styles";
 import { FluxDispatcher, React, useRef, useState } from "@webpack/common";
 
 import { ELEMENT_ID } from "../constants";
@@ -33,6 +34,8 @@ export interface MagnifierProps {
     instance: any;
 }
 
+const cl = classNameFactory("vc-imgzoom-");
+
 export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => {
     const [ready, setReady] = useState(false);
 
@@ -156,7 +159,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
 
     return (
         <div
-            className={`vc-imgzoom-lens ${settings.store.nearestNeighbour ? "nearest-neighbor" : ""}`}
+            className={cl("lens", { "nearest-neighbor": settings.store.nearestNeighbour, square: settings.store.square })}
             style={{
                 opacity,
                 width: size.current + "px",

src/plugins/imageZoom/index.tsx

@@ -23,7 +23,7 @@ import { makeRange } from "@components/PluginSettings/components";
 import { Devs } from "@utils/constants";
 import { debounce } from "@utils/debounce";
 import definePlugin, { OptionType } from "@utils/types";
-import { Menu, React, ReactDOM } from "@webpack/common";
+import { ContextMenu, Menu, React, ReactDOM } from "@webpack/common";
 import type { Root } from "react-dom/client";
 
 import { Magnifier, MagnifierProps } from "./components/Magnifier";
@@ -56,6 +56,12 @@ export const settings = definePluginSettings({
         default: false,
     },
 
+    square: {
+        type: OptionType.BOOLEAN,
+        description: "Make the lens square",
+        default: false,
+    },
+
     zoom: {
         description: "Zoom of the lens",
         type: OptionType.SLIDER,
@@ -84,9 +90,17 @@ export const settings = definePluginSettings({
 const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
     children.push(
         <Menu.MenuGroup id="image-zoom">
-            {/* thanks SpotifyControls */}
+            <Menu.MenuCheckboxItem
+                id="vc-square"
+                label="Square Lens"
+                checked={settings.store.square}
+                action={() => {
+                    settings.store.square = !settings.store.square;
+                    ContextMenu.close();
+                }}
+            />
             <Menu.MenuControlItem
-                id="zoom"
+                id="vc-zoom"
                 label="Zoom"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl
@@ -100,7 +114,7 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
                 )}
             />
             <Menu.MenuControlItem
-                id="size"
+                id="vc-size"
                 label="Lens Size"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl
@@ -114,7 +128,7 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
                 )}
             />
             <Menu.MenuControlItem
-                id="zoom-speed"
+                id="vc-zoom-speed"
                 label="Zoom Speed"
                 control={(props, ref) => (
                     <Menu.MenuSliderControl

src/plugins/imageZoom/styles.css

@@ -11,7 +11,11 @@
     pointer-events: none;
 }
 
-.vc-imgzoom-lens.nearest-neighbor > img {
+.vc-imgzoom-square {
+    border-radius: 0;
+}
+
+.vc-imgzoom-nearest-neighbor > img {
     image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
 }