From 972554d95153b835c232926c378f9481061697b9 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 10 Jan 2024 01:08:22 +0800 Subject: [PATCH 01/28] import plugin --- package.json | 1 + src/components/Layout/MDXContent.tsx | 3 +++ src/components/MDXComponents/Image.tsx | 26 ++++++++++++++++++++++++++ yarn.lock | 5 +++++ 4 files changed, 35 insertions(+) create mode 100644 src/components/MDXComponents/Image.tsx diff --git a/package.json b/package.json index 4a72fb05..acb2e7e6 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-i18next": "^11.15.3", "react-icons": "^4.3.1", "react-redux": "^7.2.6", + "react-zoom-pan-pinch": "^3.3.0", "redux": "^4.1.2", "rehype-katex": "5.0.0", "remark-math": "3.0.1", diff --git a/src/components/Layout/MDXContent.tsx b/src/components/Layout/MDXContent.tsx index 692ce12c..403e34ac 100644 --- a/src/components/Layout/MDXContent.tsx +++ b/src/components/Layout/MDXContent.tsx @@ -18,6 +18,8 @@ import { useTotalContributors } from "components/Avatar/Contributors"; import replaceInternalHref from "utils/anchor"; import { Pre } from "components/MDXComponents/Pre"; +import { Image } from "components/MDXComponents/Image"; + export default function MDXContent(props: { data: any; className?: string; @@ -79,6 +81,7 @@ export default function MDXContent(props: { ...MDXConponents, Link, pre: Pre, + img: Image, }} > {data} diff --git a/src/components/MDXComponents/Image.tsx b/src/components/MDXComponents/Image.tsx new file mode 100644 index 00000000..8fcbbaa3 --- /dev/null +++ b/src/components/MDXComponents/Image.tsx @@ -0,0 +1,26 @@ +import React, { Component } from "react"; +import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; + +export const Image = () => { + return ( + + {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( + +
+ + + +
+ + test +
Example text
+ + + )} + + ); +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d4fb3862..f7fbe440 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11742,6 +11742,11 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" +react-zoom-pan-pinch@^3.3.0: + version "3.3.0" + resolved "https://registry.npmmirror.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.3.0.tgz#873648438c5244d89fcc2127614046928429cbe0" + integrity sha512-vy1h8aenDzXye+HRqANZaSA8IPHoqOiuDPFBkswoyPUH8uMfsmbeH6gFI4r4BhEJa0xIlcA+FbvhidRWKGUrOg== + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" From d1c9f6750e1a90401617331bb5bd1390b536b360 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 10 Jan 2024 04:21:58 +0800 Subject: [PATCH 02/28] rename and test --- src/components/Layout/MDXContent.tsx | 4 ++-- .../{Image.tsx => ImageZoomable.tsx} | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) rename src/components/MDXComponents/{Image.tsx => ImageZoomable.tsx} (69%) diff --git a/src/components/Layout/MDXContent.tsx b/src/components/Layout/MDXContent.tsx index 403e34ac..7f2fb1f0 100644 --- a/src/components/Layout/MDXContent.tsx +++ b/src/components/Layout/MDXContent.tsx @@ -18,7 +18,7 @@ import { useTotalContributors } from "components/Avatar/Contributors"; import replaceInternalHref from "utils/anchor"; import { Pre } from "components/MDXComponents/Pre"; -import { Image } from "components/MDXComponents/Image"; +import { ImageZoomable } from "components/MDXComponents/ImageZoomable"; export default function MDXContent(props: { data: any; @@ -81,7 +81,7 @@ export default function MDXContent(props: { ...MDXConponents, Link, pre: Pre, - img: Image, + img: ImageZoomable, }} > {data} diff --git a/src/components/MDXComponents/Image.tsx b/src/components/MDXComponents/ImageZoomable.tsx similarity index 69% rename from src/components/MDXComponents/Image.tsx rename to src/components/MDXComponents/ImageZoomable.tsx index 8fcbbaa3..10ae2061 100644 --- a/src/components/MDXComponents/Image.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,7 +1,16 @@ -import React, { Component } from "react"; +import React, { + JSXElementConstructor, + PropsWithChildren, + ReactElement, + } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; -export const Image = () => { +type ImageZoomableWrapperProps = { + children?: React.ReactNode; +} + +export const ImageZoomable: React.FC = ({ children } : ImageZoomableWrapperProps) => { + return ( { test
Example text
+
{children}
 )} ); -}; \ No newline at end of file +}; + From 07c885a253a00a9ac61167f901a610e3da73d79f Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 10 Jan 2024 06:00:40 +0800 Subject: [PATCH 03/28] implemented basic function --- src/components/MDXComponents/ImageZoomable.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 10ae2061..8d63f431 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,15 +1,17 @@ import React, { JSXElementConstructor, + ReactNode, PropsWithChildren, ReactElement, } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; -type ImageZoomableWrapperProps = { - children?: React.ReactNode; -} +type ImageZoomableWrapperProps = PropsWithChildren<{ + src: string; + alt: string; +}> -export const ImageZoomable: React.FC = ({ children } : ImageZoomableWrapperProps) => { +export const ImageZoomable: React.FC = ({ src, alt }) => { return ( = ({ children } : ImageZ - test -
Example text
-
{children}
+ {alt} )} From f49edeac33dbbd8459091ec8f3b4a0884ecbec2e Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 10 Jan 2024 09:49:10 +0800 Subject: [PATCH 04/28] correct initial position --- src/components/MDXComponents/ImageZoomable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 8d63f431..a8cb135c 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -16,8 +16,8 @@ export const ImageZoomable: React.FC = ({ src, alt }) return ( {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( From 3caa42916c5aae5b15028d749a89220fbbdbc7d4 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 10 Jan 2024 10:13:03 +0800 Subject: [PATCH 05/28] styling the toolbar --- src/components/MDXComponents/ImageZoomable.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index a8cb135c..d45181b9 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,3 +1,4 @@ +import { Box, IconButton, Tooltip } from "@mui/material"; import React, { JSXElementConstructor, ReactNode, @@ -21,11 +22,16 @@ export const ImageZoomable: React.FC = ({ src, alt }) > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( -
+ -
+ {alt} From 6c49ab3daca3c7e755d782c8074740856a1cd185 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 02:04:30 +0800 Subject: [PATCH 06/28] add toggle state --- src/components/MDXComponents/ImageZoomable.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index d45181b9..3db2bd00 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -4,6 +4,8 @@ import React, { ReactNode, PropsWithChildren, ReactElement, + useRef, + useState, } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; @@ -14,11 +16,21 @@ type ImageZoomableWrapperProps = PropsWithChildren<{ export const ImageZoomable: React.FC = ({ src, alt }) => { + const [isFullscreen, toogleFullScreen] = useState(false); + const ImageZoomableRef = useRef(null); + + function fullscreen () { + toogleFullScreen(!isFullscreen) // invert state + + console.log("hit: " + isFullscreen); + } + return ( {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( @@ -31,6 +43,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) + {alt} @@ -40,4 +53,3 @@ export const ImageZoomable: React.FC = ({ src, alt }) ); }; - From 0613a70fdd88d9d9dc61ab7ced9951d6cafb4c08 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 09:15:59 +0800 Subject: [PATCH 07/28] implemented basic fullscreen feature --- .../MDXComponents/ImageZoomable.tsx | 65 +++++++++++-------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 3db2bd00..7e58b20a 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -6,6 +6,7 @@ import React, { ReactElement, useRef, useState, + useEffect, } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; @@ -16,40 +17,50 @@ type ImageZoomableWrapperProps = PropsWithChildren<{ export const ImageZoomable: React.FC = ({ src, alt }) => { - const [isFullscreen, toogleFullScreen] = useState(false); - const ImageZoomableRef = useRef(null); + const [isFullscreen, toggleFullScreen] = useState(false); + const ImageZoomableRef = useRef(null); - function fullscreen () { - toogleFullScreen(!isFullscreen) // invert state + const fullscreen = () => { + if (ImageZoomableRef.current) { + if (isFullscreen) { + document.exitFullscreen(); + } else { + ImageZoomableRef.current.requestFullscreen() + .catch((err) => { + console.error(`Error in enabling fullscreen mode: ${err.message}`); + }); + } + } - console.log("hit: " + isFullscreen); + toggleFullScreen(!isFullscreen) } return ( - + - {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( - - - - - - - - - {alt} - - - )} - + > + {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( + + + + + + + + + {alt}/ + + + )} + + ); }; From 9db8bc932886e758c2c1f0de82f0480e3951f886 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 19:23:37 +0800 Subject: [PATCH 08/28] styling the image zoom bar icons --- .../MDXComponents/ImageZoomable.tsx | 45 ++++++++++++++++--- 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 7e58b20a..cb29db73 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,4 +1,11 @@ import { Box, IconButton, Tooltip } from "@mui/material"; + +import ZoomInIcon from "@mui/icons-material/ZoomIn"; +import ZoomOutIcon from "@mui/icons-material/ZoomOut"; +import AutorenewIcon from "@mui/icons-material/Autorenew"; +import FullscreenIcon from "@mui/icons-material/Fullscreen"; +import FullscreenExitIcon from "@mui/icons-material/FullscreenExit"; + import React, { JSXElementConstructor, ReactNode, @@ -19,6 +26,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) const [isFullscreen, toggleFullScreen] = useState(false); const ImageZoomableRef = useRef(null); + const contextIconSize = isFullscreen ? ("large") : ("small"); const fullscreen = () => { if (ImageZoomableRef.current) { @@ -46,14 +54,39 @@ export const ImageZoomable: React.FC = ({ src, alt }) - - - - + zoomIn()} + > + + + zoomOut()} + > + + + resetTransform()} + > + + + fullscreen()} + > + { isFullscreen ? ( + ) : ( + + ) } + {alt}/ From 6bcfb765f4818345bccbe149a8dc8b811f41096b Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 19:41:05 +0800 Subject: [PATCH 09/28] add transit animation for image zoom bar --- .../MDXComponents/ImageZoomable.tsx | 84 ++++++++++--------- 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index cb29db73..4fccd95a 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,4 +1,4 @@ -import { Box, IconButton, Tooltip } from "@mui/material"; +import { Box, Fade, IconButton, Tooltip } from "@mui/material"; import ZoomInIcon from "@mui/icons-material/ZoomIn"; import ZoomOutIcon from "@mui/icons-material/ZoomOut"; @@ -25,6 +25,7 @@ type ImageZoomableWrapperProps = PropsWithChildren<{ export const ImageZoomable: React.FC = ({ src, alt }) => { const [isFullscreen, toggleFullScreen] = useState(false); + const [isHovered, setIsHovered] = useState(false); const ImageZoomableRef = useRef(null); const contextIconSize = isFullscreen ? ("large") : ("small"); @@ -44,7 +45,12 @@ export const ImageZoomable: React.FC = ({ src, alt }) } return ( - + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > = ({ src, alt }) > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( - - zoomIn()} - > - - - zoomOut()} - > - - - resetTransform()} - > - - - fullscreen()} - > - { isFullscreen ? ( - ) : ( - - ) } - - + + + zoomIn()} + > + + + zoomOut()} + > + + + resetTransform()} + > + + + fullscreen()} + > + { isFullscreen ? ( + ) : ( + + ) } + + + {alt}/ From f9026a86b31c21a420733c043bc273022e2d1def Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 20:27:46 +0800 Subject: [PATCH 10/28] add grab cursor style --- .../MDXComponents/ImageZoomable.tsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 4fccd95a..1c8fe066 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -26,8 +26,10 @@ export const ImageZoomable: React.FC = ({ src, alt }) const [isFullscreen, toggleFullScreen] = useState(false); const [isHovered, setIsHovered] = useState(false); + const [isDragging, setIsDragging] = useState(false); const ImageZoomableRef = useRef(null); const contextIconSize = isFullscreen ? ("large") : ("small"); + var contextCursor = isDragging ? ("grabbing") : ("grab"); const fullscreen = () => { if (ImageZoomableRef.current) { @@ -48,13 +50,22 @@ export const ImageZoomable: React.FC = ({ src, alt }) setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + onMouseEnter={() => { + contextCursor = "grab"; + }} + onMouseDown={() => { + setIsDragging(true); + contextCursor = "grabbing"; + }} + onMouseUp={() => { + setIsDragging(false); + contextCursor = "grab"; + }} > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( @@ -96,7 +107,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) - + {alt}/ From 30f3dbb8ef1eb5d5ef6460eab790b9d8f01fb934 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 11 Jan 2024 22:20:12 +0800 Subject: [PATCH 11/28] fix image zoom bar hover --- src/components/MDXComponents/ImageZoomable.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 1c8fe066..b03205f2 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -52,6 +52,10 @@ export const ImageZoomable: React.FC = ({ src, alt }) ref={ImageZoomableRef} onMouseEnter={() => { contextCursor = "grab"; + setIsHovered(true); + }} + onMouseLeave={() => { + setIsHovered(false); }} onMouseDown={() => { setIsDragging(true); From 1f8c29d930a3df74c7c1572befd90ead1c87c851 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 12 Jan 2024 01:12:41 +0800 Subject: [PATCH 12/28] fix bug when user exit fullscreen mode via Esc/F11 --- src/components/MDXComponents/ImageZoomable.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index b03205f2..b04b888c 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -42,10 +42,16 @@ export const ImageZoomable: React.FC = ({ src, alt }) }); } } - - toggleFullScreen(!isFullscreen) } + useEffect(() => { + window.onresize = () => { + toggleFullScreen((document.fullscreenElement != null) ? true: false) + //} + } + + }) + return ( Date: Fri, 12 Jan 2024 01:58:22 +0800 Subject: [PATCH 13/28] optimize fade transition for touch devices --- src/components/MDXComponents/ImageZoomable.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index b04b888c..e1f96743 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -16,6 +16,7 @@ import React, { useEffect, } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; +import { faL } from "@fortawesome/free-solid-svg-icons"; type ImageZoomableWrapperProps = PropsWithChildren<{ src: string; @@ -27,6 +28,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) const [isFullscreen, toggleFullScreen] = useState(false); const [isHovered, setIsHovered] = useState(false); const [isDragging, setIsDragging] = useState(false); + const [isTouchMoving, setTouchMoving] = useState(false); const ImageZoomableRef = useRef(null); const contextIconSize = isFullscreen ? ("large") : ("small"); var contextCursor = isDragging ? ("grabbing") : ("grab"); @@ -71,6 +73,15 @@ export const ImageZoomable: React.FC = ({ src, alt }) setIsDragging(false); contextCursor = "grab"; }} + onTouchMove={() => { + setTouchMoving(true); + }} + onTouchStart={()=>{ + setTouchMoving(true); + setTimeout(() => { + setTouchMoving(false); + }, 4000); + }} > = ({ src, alt }) > {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( - + Date: Fri, 12 Jan 2024 05:57:01 +0800 Subject: [PATCH 14/28] chores --- .../MDXComponents/ImageZoomable.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index e1f96743..32403729 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -7,16 +7,12 @@ import FullscreenIcon from "@mui/icons-material/Fullscreen"; import FullscreenExitIcon from "@mui/icons-material/FullscreenExit"; import React, { - JSXElementConstructor, - ReactNode, PropsWithChildren, - ReactElement, useRef, useState, useEffect, } from "react"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; -import { faL } from "@fortawesome/free-solid-svg-icons"; type ImageZoomableWrapperProps = PropsWithChildren<{ src: string; @@ -25,12 +21,12 @@ type ImageZoomableWrapperProps = PropsWithChildren<{ export const ImageZoomable: React.FC = ({ src, alt }) => { - const [isFullscreen, toggleFullScreen] = useState(false); + const [isFullscreen, setIsFullScreen] = useState(false); const [isHovered, setIsHovered] = useState(false); const [isDragging, setIsDragging] = useState(false); const [isTouchMoving, setTouchMoving] = useState(false); const ImageZoomableRef = useRef(null); - const contextIconSize = isFullscreen ? ("large") : ("small"); + const contextIconSize = isFullscreen ? ("medium") : ("small"); var contextCursor = isDragging ? ("grabbing") : ("grab"); const fullscreen = () => { @@ -48,10 +44,13 @@ export const ImageZoomable: React.FC = ({ src, alt }) useEffect(() => { window.onresize = () => { - toggleFullScreen((document.fullscreenElement != null) ? true: false) - //} + setIsFullScreen((document.fullscreenElement != null) ? true: false); } + // fix image position to vertical-centered under phone's fullscreen mode + // it's better to modify this style at rendering time + const ele = document.querySelector(".react-transform-wrapper") as HTMLElement; + ele.style.height = '100%'; }) return ( @@ -96,8 +95,10 @@ export const ImageZoomable: React.FC = ({ src, alt }) position: 'absolute', float: 'left', zIndex: 99, - backgroundColor: 'white', + backgroundColor: 'rgb(229,229,229)', borderRadius: 18, + marginTop: '.5rem', + marginLeft: '.5rem', }}> Date: Fri, 12 Jan 2024 07:34:40 +0800 Subject: [PATCH 15/28] set layout of fullscreen --- src/components/MDXComponents/ImageZoomable.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 32403729..9ae3960a 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -45,12 +45,15 @@ export const ImageZoomable: React.FC = ({ src, alt }) useEffect(() => { window.onresize = () => { setIsFullScreen((document.fullscreenElement != null) ? true: false); + if (document.fullscreenElement) { + console.log(document.fullscreenElement) + + const ele = document.fullscreenElement as HTMLElement + ele.style.display = 'flex'; + ele.style.alignItems = 'center'; + ele.style.justifyContent = 'center'; + } } - - // fix image position to vertical-centered under phone's fullscreen mode - // it's better to modify this style at rendering time - const ele = document.querySelector(".react-transform-wrapper") as HTMLElement; - ele.style.height = '100%'; }) return ( @@ -91,6 +94,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) Date: Fri, 12 Jan 2024 08:40:01 +0800 Subject: [PATCH 16/28] optimize the display of fullscreen-image --- .../MDXComponents/ImageZoomable.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 9ae3960a..052841ff 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -44,15 +44,30 @@ export const ImageZoomable: React.FC = ({ src, alt }) useEffect(() => { window.onresize = () => { - setIsFullScreen((document.fullscreenElement != null) ? true: false); - if (document.fullscreenElement) { - console.log(document.fullscreenElement) + setIsFullScreen((document.fullscreenElement != null) ? true: false); + if (document.fullscreenElement) { - const ele = document.fullscreenElement as HTMLElement - ele.style.display = 'flex'; - ele.style.alignItems = 'center'; - ele.style.justifyContent = 'center'; + // when entered fullscreen, set image position to flex-centered for better display + const ele = document.fullscreenElement as HTMLElement + ele.style.display = 'flex'; + ele.style.alignItems = 'center'; + ele.style.justifyContent = 'center'; + ele.style.flexFlow = 'column-reverse'; + + // when entered fullscreen, unset 'position:absolute' zoom button group for better display + const ele2 = ele.querySelector(".ZoomButtonGroup") as HTMLElement; + ele2.style.position = 'unset'; + + } else { + if (ImageZoomableRef.current) { + // exited fullscreen and back to normal position + ImageZoomableRef.current.style.display = 'block'; + + // exited fullscreen and restore 'position:absolute' of zoom button group + const ele2 = ImageZoomableRef.current.querySelector(".ZoomButtonGroup") as HTMLElement; + ele2.style.position = 'absolute'; } + } } }) From ef8e1e81448baa46475d97963acdc326ce538d67 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 12 Jan 2024 08:41:47 +0800 Subject: [PATCH 17/28] add blank line --- src/components/MDXComponents/ImageZoomable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 052841ff..68033cf0 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -60,6 +60,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) } else { if (ImageZoomableRef.current) { + // exited fullscreen and back to normal position ImageZoomableRef.current.style.display = 'block'; From ee6928043cb7056c7352758a0687835c504bd6ee Mon Sep 17 00:00:00 2001 From: curiousRay Date: Wed, 21 Feb 2024 21:56:19 +0800 Subject: [PATCH 18/28] add grey overlay when click into fullscreen --- src/components/MDXComponents/ImageZoomable.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 68033cf0..b3446c0e 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -12,6 +12,7 @@ import React, { useState, useEffect, } from "react"; +import ReactDOM from "react-dom"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; type ImageZoomableWrapperProps = PropsWithChildren<{ @@ -34,10 +35,18 @@ export const ImageZoomable: React.FC = ({ src, alt }) if (isFullscreen) { document.exitFullscreen(); } else { - ImageZoomableRef.current.requestFullscreen() + /*ImageZoomableRef.current.requestFullscreen() .catch((err) => { console.error(`Error in enabling fullscreen mode: ${err.message}`); - }); + });*/ + + //append overlay(grey background) + const overlay = ( + + + ); + ReactDOM.render(overlay, document.getElementsByClassName("zoom-overlay")[0]); + //append large image } } } @@ -101,6 +110,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) }, 4000); }} > + Date: Wed, 21 Feb 2024 22:07:10 +0800 Subject: [PATCH 19/28] use context element --- src/components/MDXComponents/ImageZoomable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index b3446c0e..976af54c 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -45,7 +45,8 @@ export const ImageZoomable: React.FC = ({ src, alt }) ); - ReactDOM.render(overlay, document.getElementsByClassName("zoom-overlay")[0]); + ReactDOM.render(overlay, ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); + console.log(ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); //append large image } } From a941358bdc213612603bb0637ab1eaacf11fee39 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Thu, 22 Feb 2024 22:15:46 +0800 Subject: [PATCH 20/28] add imagebox --- .../MDXComponents/ImageZoomable.tsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 976af54c..4361be1d 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -42,12 +42,36 @@ export const ImageZoomable: React.FC = ({ src, alt }) //append overlay(grey background) const overlay = ( - - + // + + // ); + + ReactDOM.render(overlay, ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); - console.log(ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); + + const imagebox = ImageZoomableRef.current.getElementsByClassName("react-transform-wrapper")[0] as HTMLElement; + + imagebox.style.position = "fixed"; + imagebox.style.zIndex = "99999"; + imagebox.style.top = "50px"; + imagebox.style.left = "50px"; + imagebox.style.bottom = "50px"; + imagebox.style.right = "50px"; + + + ImageZoomableRef.current.style.position = "fixed"; + ImageZoomableRef.current.style.zIndex = "10001";/* + ImageZoomableRef.current.style.top = "50px"; + ImageZoomableRef.current.style.left = "50px"; + ImageZoomableRef.current.style.bottom = "50px"; + ImageZoomableRef.current.style.right = "50px";*/ + + console.log(ImageZoomableRef.current); + console.log(imagebox) //append large image + + } } } @@ -111,7 +135,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) }, 4000); }} > - + = ({ src, alt }) )} + ); }; From 9ca4c13755ca96b836a4d8b713a3345fba72895e Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 23 Feb 2024 09:44:03 +0800 Subject: [PATCH 21/28] adjust position of imagebox --- src/components/MDXComponents/ImageZoomable.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 4361be1d..6eec99e5 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -54,11 +54,9 @@ export const ImageZoomable: React.FC = ({ src, alt }) imagebox.style.position = "fixed"; imagebox.style.zIndex = "99999"; - imagebox.style.top = "50px"; - imagebox.style.left = "50px"; - imagebox.style.bottom = "50px"; - imagebox.style.right = "50px"; - + imagebox.style.left = "50%"; + imagebox.style.top = "50%"; + imagebox.style.transform = "translate(-50%,-50%) scale(1.8)"; ImageZoomableRef.current.style.position = "fixed"; ImageZoomableRef.current.style.zIndex = "10001";/* From b6edb27c4e9e5ae73552ff4245c283e851ded692 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 23 Feb 2024 10:37:15 +0800 Subject: [PATCH 22/28] adjust style of buttongroupbox --- .../MDXComponents/ImageZoomable.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 6eec99e5..00794a3b 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -39,6 +39,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) .catch((err) => { console.error(`Error in enabling fullscreen mode: ${err.message}`); });*/ + setIsFullScreen(true); //append overlay(grey background) const overlay = ( @@ -51,12 +52,20 @@ export const ImageZoomable: React.FC = ({ src, alt }) ReactDOM.render(overlay, ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); const imagebox = ImageZoomableRef.current.getElementsByClassName("react-transform-wrapper")[0] as HTMLElement; - + const buttongroupbox = ImageZoomableRef.current.getElementsByClassName("ZoomButtonGroup")[0] as HTMLElement; + imagebox.style.position = "fixed"; imagebox.style.zIndex = "99999"; imagebox.style.left = "50%"; imagebox.style.top = "50%"; - imagebox.style.transform = "translate(-50%,-50%) scale(1.8)"; + imagebox.style.transform = "translate(-50%,-50%) scale(1.6)"; + + buttongroupbox.style.position = "fixed"; + buttongroupbox.style.zIndex = "99999"; + buttongroupbox.style.left = "50%"; + buttongroupbox.style.top = "95%"; + buttongroupbox.style.transform = "translate(-50%,-50%)"; + //buttongroupbox.style.visibility = "visible"; ImageZoomableRef.current.style.position = "fixed"; ImageZoomableRef.current.style.zIndex = "10001";/* @@ -65,15 +74,16 @@ export const ImageZoomable: React.FC = ({ src, alt }) ImageZoomableRef.current.style.bottom = "50px"; ImageZoomableRef.current.style.right = "50px";*/ + console.log(ImageZoomableRef.current); - console.log(imagebox) + console.log(buttongroupbox) //append large image } } } - + /* useEffect(() => { window.onresize = () => { setIsFullScreen((document.fullscreenElement != null) ? true: false); @@ -103,7 +113,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) } } }) - +*/ return ( = ({ src, alt }) setIsHovered(true); }} onMouseLeave={() => { - setIsHovered(false); + if (!isFullscreen) { + setIsHovered(false); + } }} onMouseDown={() => { setIsDragging(true); From f0f84c7efcfdae8bbc22e5fdc342f29b6ac2a55b Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 23 Feb 2024 11:44:43 +0800 Subject: [PATCH 23/28] refactor styling --- .../MDXComponents/ImageZoomable.tsx | 123 ++++++------------ 1 file changed, 38 insertions(+), 85 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 00794a3b..ae26f14c 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -1,4 +1,4 @@ -import { Box, Fade, IconButton, Tooltip } from "@mui/material"; +import { Box, Fade, IconButton} from "@mui/material"; import ZoomInIcon from "@mui/icons-material/ZoomIn"; import ZoomOutIcon from "@mui/icons-material/ZoomOut"; @@ -10,9 +10,7 @@ import React, { PropsWithChildren, useRef, useState, - useEffect, } from "react"; -import ReactDOM from "react-dom"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; type ImageZoomableWrapperProps = PropsWithChildren<{ @@ -33,7 +31,8 @@ export const ImageZoomable: React.FC = ({ src, alt }) const fullscreen = () => { if (ImageZoomableRef.current) { if (isFullscreen) { - document.exitFullscreen(); + console.log("gonna exit fullscreen mode") + setIsFullScreen(false); } else { /*ImageZoomableRef.current.requestFullscreen() .catch((err) => { @@ -41,83 +40,18 @@ export const ImageZoomable: React.FC = ({ src, alt }) });*/ setIsFullScreen(true); - //append overlay(grey background) - const overlay = ( - // - - // - ); - - - ReactDOM.render(overlay, ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0]); - - const imagebox = ImageZoomableRef.current.getElementsByClassName("react-transform-wrapper")[0] as HTMLElement; - const buttongroupbox = ImageZoomableRef.current.getElementsByClassName("ZoomButtonGroup")[0] as HTMLElement; - - imagebox.style.position = "fixed"; - imagebox.style.zIndex = "99999"; - imagebox.style.left = "50%"; - imagebox.style.top = "50%"; - imagebox.style.transform = "translate(-50%,-50%) scale(1.6)"; - - buttongroupbox.style.position = "fixed"; - buttongroupbox.style.zIndex = "99999"; - buttongroupbox.style.left = "50%"; - buttongroupbox.style.top = "95%"; - buttongroupbox.style.transform = "translate(-50%,-50%)"; - //buttongroupbox.style.visibility = "visible"; - - ImageZoomableRef.current.style.position = "fixed"; - ImageZoomableRef.current.style.zIndex = "10001";/* - ImageZoomableRef.current.style.top = "50px"; - ImageZoomableRef.current.style.left = "50px"; - ImageZoomableRef.current.style.bottom = "50px"; - ImageZoomableRef.current.style.right = "50px";*/ - - - console.log(ImageZoomableRef.current); - console.log(buttongroupbox) - //append large image - - } } } - /* - useEffect(() => { - window.onresize = () => { - setIsFullScreen((document.fullscreenElement != null) ? true: false); - if (document.fullscreenElement) { - // when entered fullscreen, set image position to flex-centered for better display - const ele = document.fullscreenElement as HTMLElement - ele.style.display = 'flex'; - ele.style.alignItems = 'center'; - ele.style.justifyContent = 'center'; - ele.style.flexFlow = 'column-reverse'; - - // when entered fullscreen, unset 'position:absolute' zoom button group for better display - const ele2 = ele.querySelector(".ZoomButtonGroup") as HTMLElement; - ele2.style.position = 'unset'; - - } else { - if (ImageZoomableRef.current) { - - // exited fullscreen and back to normal position - ImageZoomableRef.current.style.display = 'block'; - - // exited fullscreen and restore 'position:absolute' of zoom button group - const ele2 = ImageZoomableRef.current.querySelector(".ZoomButtonGroup") as HTMLElement; - ele2.style.position = 'absolute'; - } - } - } - }) -*/ return ( { contextCursor = "grab"; setIsHovered(true); @@ -157,34 +91,37 @@ export const ImageZoomable: React.FC = ({ src, alt }) zoomIn()} > zoomOut()} > resetTransform()} > fullscreen()} > { isFullscreen ? ( @@ -194,13 +131,29 @@ export const ImageZoomable: React.FC = ({ src, alt }) - + {alt}/ )} - + ); }; From 82ce9984aea6fa429685d4aeb53ffadfc5a932e1 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Fri, 23 Feb 2024 12:15:30 +0800 Subject: [PATCH 24/28] add animation --- src/components/MDXComponents/ImageZoomable.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index ae26f14c..17b8aa90 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -134,11 +134,12 @@ export const ImageZoomable: React.FC = ({ src, alt }) {alt}/ @@ -148,10 +149,12 @@ export const ImageZoomable: React.FC = ({ src, alt }) From f6935910e95f5b1a5b2745b571839a1ef0d3714c Mon Sep 17 00:00:00 2001 From: curiousRay Date: Sat, 24 Feb 2024 00:05:29 +0800 Subject: [PATCH 25/28] fix bug when opacity's fadeout animation doesn't fire --- .../MDXComponents/ImageZoomable.tsx | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 17b8aa90..6f4564db 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -33,12 +33,29 @@ export const ImageZoomable: React.FC = ({ src, alt }) if (isFullscreen) { console.log("gonna exit fullscreen mode") setIsFullScreen(false); + let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; + ele.style.backgroundColor = "rgba(0,0,0,0.7)"; + ele.style.opacity = "0"; + ele.style.position = "fixed"; + ele.style.zIndex = "99998"; + ele.style.inset = "0"; + ele.style.transition = "opacity 3s ease-in-out"; + ele.style.pointerEvents = "none"; + console.log("取消全屏") + + console.log(ele) } else { /*ImageZoomableRef.current.requestFullscreen() .catch((err) => { console.error(`Error in enabling fullscreen mode: ${err.message}`); });*/ setIsFullScreen(true); + let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; + console.log("设置全屏") + ele.style.opacity = "1"; + + console.log(ele) + } } @@ -139,7 +156,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) left: (isFullscreen ? "50%" : "inherit"), top: (isFullscreen ? "50%" : "inherit"), transform: (isFullscreen ? "translate(-50%,-50%) scale(1.6)" : "inherit"), - transition: "transform .3s cubic-bezier(.2,0,.2,1)" + //transition: "transform .3s cubic-bezier(.2,0,.2,1)" }}> {alt}/ @@ -150,11 +167,11 @@ export const ImageZoomable: React.FC = ({ src, alt }) className="zoom-overlay" sx={{ backgroundColor: "rgba(0,0,0,0.7)", - opacity: (isFullscreen ? 1 : 0), + opacity: (isFullscreen ? "1" : "0"), position: (isFullscreen ? "fixed" : "inherit"), - zIndex: (isFullscreen ? 99998 : "inherit"), - inset: (isFullscreen ? 0 : "inherit"), - transition: "opacity .3s", + zIndex: (isFullscreen ? "99998" : "inherit"), + inset: (isFullscreen ? "0" : "inherit"), + transition: "opacity 3s ease-in-out", }} /> From 57c32cd76f92815653c6e4fa3eb7556495940908 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Sat, 24 Feb 2024 01:03:41 +0800 Subject: [PATCH 26/28] modify style of overlay --- .../MDXComponents/ImageZoomable.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 6f4564db..80916e1a 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -34,26 +34,19 @@ export const ImageZoomable: React.FC = ({ src, alt }) console.log("gonna exit fullscreen mode") setIsFullScreen(false); let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; - ele.style.backgroundColor = "rgba(0,0,0,0.7)"; ele.style.opacity = "0"; - ele.style.position = "fixed"; - ele.style.zIndex = "99998"; - ele.style.inset = "0"; - ele.style.transition = "opacity 3s ease-in-out"; - ele.style.pointerEvents = "none"; + ele.style.transition = "opacity .15s ease-in-out"; + console.log("取消全屏") console.log(ele) } else { - /*ImageZoomableRef.current.requestFullscreen() - .catch((err) => { - console.error(`Error in enabling fullscreen mode: ${err.message}`); - });*/ + setIsFullScreen(true); let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; console.log("设置全屏") ele.style.opacity = "1"; - + ele.style.transition = "opacity .3s ease-in-out"; console.log(ele) @@ -156,7 +149,7 @@ export const ImageZoomable: React.FC = ({ src, alt }) left: (isFullscreen ? "50%" : "inherit"), top: (isFullscreen ? "50%" : "inherit"), transform: (isFullscreen ? "translate(-50%,-50%) scale(1.6)" : "inherit"), - //transition: "transform .3s cubic-bezier(.2,0,.2,1)" + transition: "transform .3s cubic-bezier(.2,0,.2,1)", }}> {alt}/ @@ -167,11 +160,11 @@ export const ImageZoomable: React.FC = ({ src, alt }) className="zoom-overlay" sx={{ backgroundColor: "rgba(0,0,0,0.7)", - opacity: (isFullscreen ? "1" : "0"), - position: (isFullscreen ? "fixed" : "inherit"), - zIndex: (isFullscreen ? "99998" : "inherit"), - inset: (isFullscreen ? "0" : "inherit"), - transition: "opacity 3s ease-in-out", + opacity: "0", + position: "fixed", + zIndex: "99998", + inset: "0", + pointerEvents: "none" }} /> From e84afa48dcc95b1aebb87559dd119e4c1cde5b8b Mon Sep 17 00:00:00 2001 From: curiousRay Date: Sat, 24 Feb 2024 01:21:44 +0800 Subject: [PATCH 27/28] add placeholder of doc context during image fullscreen --- src/components/MDXComponents/ImageZoomable.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 80916e1a..8295d7ec 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -37,6 +37,9 @@ export const ImageZoomable: React.FC = ({ src, alt }) ele.style.opacity = "0"; ele.style.transition = "opacity .15s ease-in-out"; + ImageZoomableRef.current.parentElement!.style.height = "unset" + ImageZoomableRef.current.parentElement!.style.border = "none"; + console.log("取消全屏") console.log(ele) @@ -49,6 +52,8 @@ export const ImageZoomable: React.FC = ({ src, alt }) ele.style.transition = "opacity .3s ease-in-out"; console.log(ele) + ImageZoomableRef.current.parentElement!.style.height = "50px"; + ImageZoomableRef.current.parentElement!.style.border = "1px grey dashed"; } } From a3b0f33b2d4d628cfdf111bb147d06045268a3d1 Mon Sep 17 00:00:00 2001 From: curiousRay Date: Sat, 24 Feb 2024 01:28:22 +0800 Subject: [PATCH 28/28] chores: remove commenting --- .../MDXComponents/ImageZoomable.tsx | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/MDXComponents/ImageZoomable.tsx b/src/components/MDXComponents/ImageZoomable.tsx index 8295d7ec..71360485 100644 --- a/src/components/MDXComponents/ImageZoomable.tsx +++ b/src/components/MDXComponents/ImageZoomable.tsx @@ -31,26 +31,20 @@ export const ImageZoomable: React.FC = ({ src, alt }) const fullscreen = () => { if (ImageZoomableRef.current) { if (isFullscreen) { - console.log("gonna exit fullscreen mode") setIsFullScreen(false); - let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; - ele.style.opacity = "0"; - ele.style.transition = "opacity .15s ease-in-out"; + let ele_overlay = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; + ele_overlay.style.opacity = "0"; + ele_overlay.style.transition = "opacity .15s ease-in-out"; - ImageZoomableRef.current.parentElement!.style.height = "unset" + ImageZoomableRef.current.parentElement!.style.height = "unset"; ImageZoomableRef.current.parentElement!.style.border = "none"; - console.log("取消全屏") - - console.log(ele) } else { setIsFullScreen(true); - let ele = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; - console.log("设置全屏") - ele.style.opacity = "1"; - ele.style.transition = "opacity .3s ease-in-out"; - console.log(ele) + let ele_overlay = ImageZoomableRef.current.getElementsByClassName("zoom-overlay")[0] as HTMLElement; + ele_overlay.style.opacity = "1"; + ele_overlay.style.transition = "opacity .3s ease-in-out"; ImageZoomableRef.current.parentElement!.style.height = "50px"; ImageZoomableRef.current.parentElement!.style.border = "1px grey dashed";