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;
}) {
const [fade, setFade] = useState(false);
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 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 currentImageRef = useRef<HTMLImageElement>(null);
useEffect(() => {
const onKeyUp = (e: KeyboardEvent) => {
const step = e.shiftKey ? 10 : 1;
if (e.code === "ArrowLeft") {
PageDown(step);
pageDown(step);
} else if (e.code === "ArrowRight") {
PageUp(step);
pageUp(step);
}
};
window.addEventListener("keyup", onKeyUp);
return () => {
window.removeEventListener("keyup", onKeyUp);
};
}, [PageDown, PageUp]);
}, [pageDown, pageUp]);
useEffect(() => {
if(currentImageRef.current){
@ -77,14 +77,14 @@ function ComicViewer({
return (
<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
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",
fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100"
)}
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>
);
}