ImageZoom: Add square lens option

This commit is contained in:
V 2023-06-30 15:50:56 +02:00
parent 0936ca2985
commit b607eebcb7
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
3 changed files with 28 additions and 7 deletions

View file

@ -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",

View file

@ -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

View file

@ -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 */
}