UPDATE: started to add touch support

FileFormatInfo · Aug 8, 2024 · 52d3409 · 52d3409
1 parent bab66c8
commit 52d3409
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 23 deletions.
diff --git a/app/routes/view[.]html/KeyHandler.tsx b/app/routes/view[.]html/KeyHandler.tsx
@@ -1,5 +1,6 @@
 import { backgrounds } from './BackgroundButtons';
 import { borders } from './BorderButtons'
+import { calcZoomIn, calcZoomOut } from './calcZoom';
 
 function nextBorder(current: string): string {
     const currentIndex = borders.findIndex((border) => border.value === current);
@@ -32,13 +33,13 @@ function KeyHandler(searchParams: URLSearchParams, background: string, border: s
             searchParams.set('debug', searchParams.get('debug') === '1' ? '0' : '1');
             return searchParams;
         case '+':
-            searchParams.set('zoom', (currentZoom + 1).toString());
+            searchParams.set('zoom', calcZoomIn(currentZoom).toString());
             return searchParams;
         case ' ':
             searchParams.set('bg', nextBackground(background));
             return searchParams;
         case '-':
-            searchParams.set('zoom', (currentZoom > 1 ? currentZoom - 1 : currentZoom * 0.5).toString());
+            searchParams.set('zoom', calcZoomOut(currentZoom).toString());
             return searchParams;
     }
     return null;

diff --git a/app/routes/view[.]html/ZoomButtons.tsx b/app/routes/view[.]html/ZoomButtons.tsx
@@ -11,6 +11,7 @@ import { ButtonGroup } from "@chakra-ui/react";
 
 import { ToolbarButton } from "~/components/ToolbarButton";
 import { IconTool } from "~/components/IconTool";
+import { calcZoomIn, calcZoomOut } from "./calcZoom";
 
 interface IProps {
   currentZoom: number;
@@ -21,17 +22,14 @@ interface IProps {
 
 export const ZoomButtons = ({ currentZoom, size, boxSize }: IProps) => {
   const [searchParams] = useSearchParams();
-  let zoomOut = currentZoom > 1 ? currentZoom - 1 : currentZoom * 0.5;
-  if (zoomOut < 0.01) {
-    zoomOut = 0.01;
-  }
+
   return (
     <ButtonGroup isAttached>
       <ToolbarButton
         ariaLabel="Zoom out"
         boxSize={boxSize}
         param="zoom"
-        value={String(zoomOut)}
+        value={String(calcZoomOut(currentZoom))}
         isActive={false}
         size={size}
         icon={PiMagnifyingGlassMinusBold}
@@ -49,7 +47,7 @@ export const ZoomButtons = ({ currentZoom, size, boxSize }: IProps) => {
         ariaLabel="Zoom In"
         boxSize={boxSize}
         param="zoom"
-        value={String(currentZoom + 1)}
+        value={String(calcZoomIn(currentZoom ))}
         size={size}
         icon={PiMagnifyingGlassPlusBold}
         isActive={false}

diff --git a/app/routes/view[.]html/calcMaxZoom.tsx → app/routes/view[.]html/calcZoom.tsx b/app/routes/view[.]html/calcMaxZoom.tsx → app/routes/view[.]html/calcZoom.tsx
@@ -21,6 +21,16 @@ function calcMaxZoom(
 	return 1;
 }
 
+function calcZoomIn(currentZoom: number):number {
+	return currentZoom + 1;
+}
+
+function calcZoomOut(currentZoom: number):number {
+	return (currentZoom > 1 ? currentZoom - 1 : currentZoom * 0.5);
+}
+
 export {
 	calcMaxZoom,
+	calcZoomIn,
+	calcZoomOut,
 }
diff --git a/app/routes/view[.]html/route.tsx b/app/routes/view[.]html/route.tsx
@@ -9,6 +9,7 @@ import {
     useBreakpointValue,
     useColorModeValue,
     Link,
+    calc,
 } from "@chakra-ui/react";
 import { useNavigate, useSearchParams } from "@remix-run/react";
 
@@ -17,7 +18,7 @@ import { safeParseFloat } from "~/utils/safeParseFloat";
 
 import { DesktopToolbar } from "./DesktopToolbar";
 import { MobileToolbar } from "./MobileToolbar";
-import { calcMaxZoom } from "./calcMaxZoom";
+import { calcMaxZoom, calcZoomIn, calcZoomOut } from "./calcZoom";
 import { IconList } from "./IconList";
 import { KeyHandler } from "./KeyHandler";
 
@@ -150,11 +151,31 @@ export default function ViewPage() {
             }
         }
 
+        function handleWheel(e: WheelEvent) {
+            console.log(e);
+            const newZoom = (e.deltaY < 0 ? calcZoomIn(currentZoom) : calcZoomOut(currentZoom));
+            searchParams.set("zoom", newZoom.toString());
+            navigate(`?${searchParams.toString()}`);
+        }
+
+        function handleTouch(e: TouchEvent) {
+            console.log(e);
+            /*if (e.scale != 0) {
+                const newZoom = e.scale > 1 ? calcZoomIn(currentZoom) : calcZoomOut(currentZoom);
+                searchParams.set("zoom", newZoom.toString());
+                navigate(`?${searchParams.toString()}`);
+            }*/
+        }
+
         document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('wheel', handleWheel);
+        document.addEventListener('touchend', handleTouch);
 
         // Don't forget to clean up
         return function cleanup() {
             document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('wheel', handleWheel);
+            document.removeEventListener('touchend', handleTouch);
         }
     }, [bg, border, currentZoom, navigate, searchParams]);
 
@@ -174,6 +195,19 @@ export default function ViewPage() {
                     ...background,
                 }}
             >
+                <img
+                    alt={`${url} (preload/debug)`}
+                    onError={() => { onImageError(); console.log(`via onError`); }}
+                    onLoad={() => { onImageLoad(); console.log(`via onLoad`); }}
+                    ref={imageRef}
+                    src={url}
+                    style={{
+                        opacity: isDebug ? 1 : 0,
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                    }}
+                />
                 {loadErr != null ? (
                     <VStack>
                         <img
@@ -182,7 +216,7 @@ export default function ViewPage() {
                             style={{ width: "5rem", height: "5rem" }}
                         />
                         <Text>{t("Error loading image")}</Text>
-                        <Link href={url}>{url}</Link>
+                        <a href={url}>{url}</a>
                     </VStack>
                 ) : (
                     <></>
@@ -202,19 +236,7 @@ export default function ViewPage() {
                         title={url}
                     />)
                 )}
-                <img
-                    alt={`${url} (preload/debug)`}
-                    onError={() => { onImageError(); console.log(`via onError`); }}
-                    onLoad={() => { onImageLoad(); console.log(`via onLoad`); }}
-                    ref={imageRef}
-                    src={url}
-                    style={{
-                        opacity: isDebug ? 1 : 0,
-                        position: "absolute",
-                        top: 0,
-                        right: 0,
-                    }}
-                /><noscript style={{ "height": noscriptHeight, "display": "flex" }}>
+                <noscript style={{ "height": noscriptHeight, "display": "flex" }}>
                     {(urlZoom === "icons" ? <IconList display="flex" imageCss={noscriptImageCss} url={url} /> :
                         <img
                             alt={url}