monoid/ionian
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Wiki Activity

style: no-select

Browse source
This commit is contained in:
monoid 2025-06-08 16:48:15 +09:00
parent 68b761fbd5
commit 5499e1535e
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/client/src/page/reader/comicPage.tsx
View file

@ -27,24 +27,24 @@ function ComicViewer({
onChangePage: (page: number) => void; onChangePage: (page: number) => void;
}) { }) {
const [fade, setFade] = useState(false); const [fade, setFade] = useState(false);
const PageDown = useCallback((step: number) => setCurPage(Math.max(curPage - step, 0)), [curPage, setCurPage]); const pageDown = useCallback((step: number) => setCurPage(Math.max(curPage - step, 0)), [curPage, setCurPage]);
const PageUp = useCallback((step: number) => setCurPage(Math.min(curPage + step, totalPage - 1)), [curPage, setCurPage, totalPage]); const pageUp = useCallback((step: number) => setCurPage(Math.min(curPage + step, totalPage - 1)), [curPage, setCurPage, totalPage]);
const currentImageRef = useRef<HTMLImageElement>(null); const currentImageRef = useRef<HTMLImageElement>(null);
useEffect(() => { useEffect(() => {
const onKeyUp = (e: KeyboardEvent) => { const onKeyUp = (e: KeyboardEvent) => {
const step = e.shiftKey ? 10 : 1; const step = e.shiftKey ? 10 : 1;
if (e.code === "ArrowLeft") { if (e.code === "ArrowLeft") {
PageDown(step); pageDown(step);
} else if (e.code === "ArrowRight") { } else if (e.code === "ArrowRight") {
PageUp(step); pageUp(step);
} }
}; };
window.addEventListener("keyup", onKeyUp); window.addEventListener("keyup", onKeyUp);
return () => { return () => {
window.removeEventListener("keyup", onKeyUp); window.removeEventListener("keyup", onKeyUp);
}; };
}, [PageDown, PageUp]); }, [pageDown, pageUp]);
useEffect(() => { useEffect(() => {
if(currentImageRef.current){ if(currentImageRef.current){
@ -77,14 +77,14 @@ function ComicViewer({
return ( return (
<div className="overflow-hidden w-full h-dvh relative"> <div className="overflow-hidden w-full h-dvh relative">
<div className="absolute left-0 w-1/2 h-full z-10" onMouseDown={() => PageDown(1)} /> <div className="absolute left-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageDown(1)} />
<img <img
ref={currentImageRef} ref={currentImageRef}
className={cn("max-w-full max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute", className={cn("max-w-full max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute",
fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100" fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100"
)} )}
alt="main content"/> alt="main content"/>
<div className="absolute right-0 w-1/2 h-full z-10" onMouseDown={() => PageUp(1)} /> <div className="absolute right-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageUp(1)} />
</div> </div>
); );
} }