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 }) => {
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>

View file

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

View file

@ -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();

View file

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