ImageZoom: Add square lens option
This commit is contained in:
parent
0936ca2985
commit
b607eebcb7
3 changed files with 28 additions and 7 deletions
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 */
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue