Page num utils, testing zoom functions

src/lib/components/NavBar.svelte

@@ -11,6 +11,10 @@
 	let uploadModalOpen = false;
 	let isReader = false;
 
+	function openSettings() {
+		settingsHidden = false;
+	}
+
 	afterNavigate(() => {
 		isReader = $page.route.id === '/[manga]/[volume]';
 
@@ -28,13 +32,13 @@
 			<span class="text-xl font-semibold dark:text-white">Mokuro</span>
 		</NavBrand>
 		<div class="flex md:order-2 gap-5">
-			<UserSettingsSolid class="hover:text-primary-700" on:click={() => (settingsHidden = false)} />
+			<UserSettingsSolid class="hover:text-primary-700" on:click={openSettings} />
 			<UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
 		</div>
 	</Navbar>
 	{#if isReader}
 		<button
-			on:click={() => (settingsHidden = false)}
+			on:click={openSettings}
 			class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
 		>
 			<div style:background-color={$settings.backgroundColor} class="absolute">

src/lib/components/Reader/Reader.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { currentVolume } from '$lib/catalog';
-	import { Panzoom } from '$lib/panzoom';
+	import { Panzoom, zoomFitToScreen, zoomFitToWidth, zoomOriginal } from '$lib/panzoom';
 	import { progress, settings, updateProgress } from '$lib/settings';
 	import { clamp } from '$lib/util';
+	import { Button, Input, Popover, Range } from 'flowbite-svelte';
 	import MangaPage from './MangaPage.svelte';
+	import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
 
 	const volume = $currentVolume;
 	const pages = volume?.mokuroData.pages;
@@ -35,15 +37,53 @@
 			updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
 		}
 	}
+
+	$: manualPage = page;
+	$: pageDisplay = `${page}/${pages?.length}`;
+
+	function onInputClick(this: any) {
+		this.select();
+	}
+
+	function onManualPageChange() {
+		page = clamp(manualPage, 1, pages!.length);
+	}
 </script>
 
 {#if volume && pages}
-	<div
+	<Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
+		<div class="flex flex-col gap-3">
+			<div class="flex flex-row items-center gap-5 z-10">
+				<ChervonDoubleLeftSolid on:click={() => (page = 1)} class="hover:text-primary-600" />
+				<Input
+					type="number"
+					size="sm"
+					defaultClass="select-all"
+					bind:value={manualPage}
+					on:click={onInputClick}
+					on:change={onManualPageChange}
+				/>
+				<ChervonDoubleRightSolid
+					on:click={() => (page = pages.length)}
+					class="hover:text-primary-600"
+				/>
+			</div>
+			<Range
+				min={1}
+				max={pages.length}
+				size="sm"
+				bind:value={manualPage}
+				on:change={onManualPageChange}
+			/>
+		</div>
+	</Popover>
+	<button
 		class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
 		class:hidden={!$settings.pageNum}
+		id="page-num"
 	>
-		{page}/{pages.length}
-	</div>
+		{pageDisplay}
+	</button>
 	<Panzoom>
 		<div class="flex flex-row justify-center">
 			{#if !$settings.singlePageView && index + 1 < pages.length}
@@ -64,4 +104,9 @@
 		on:mouseup={right}
 		class="right-0 top-0 absolute h-full"
 	/>
+	<div class="absolute left-5 bottom-5">
+		<Button on:click={zoomOriginal}>zoomOriginal</Button>
+		<Button on:click={zoomFitToWidth}>zoomFitToWidth</Button>
+		<Button on:click={zoomFitToScreen}>zoomFitToScreen</Button>
+	</div>
 {/if}

src/lib/panzoom/util.ts

@@ -20,7 +20,20 @@ export function initPanzoom(node: HTMLElement) {
       return nodeName === 'P';
     },
     beforeWheel: (e) => e.altKey,
-    onTouch: (e) => e.touches.length > 1
+    onTouch: (e) => e.touches.length > 1,
+    // Panzoom typing is wrong here
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    filterKey: (e: any) => {
+      if (
+        e.key === 'ArrowLeft' ||
+        e.key === 'ArrowRight' ||
+        e.key === 'ArrowUp' ||
+        e.key === 'ArrowDown'
+      ) {
+        return true;
+      }
+    }
   });
 
   panzoomStore.set(pz)
@@ -73,3 +86,44 @@ export function zoomOriginal() {
   pz?.zoomTo(0, 0, 1 / pz.getTransform().scale);
   panAlign('center', 'center');
 }
+
+export function zoomFitToWidth() {
+  if (!pz || !container) {
+    return
+  }
+  const { innerWidth } = window
+
+  const scale =
+    (1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
+  pz.moveTo(0, 0);
+  pz.zoomTo(0, 0, scale);
+  panAlign('center', 'top');
+}
+
+export function zoomFitToScreen() {
+  if (!pz || !container) {
+    return
+  }
+  const { innerWidth, innerHeight } = window
+  const scaleX = innerWidth / container.offsetWidth;
+  const scaleY = innerHeight / container.offsetHeight;
+  const scale =
+    (1 / pz.getTransform().scale) * Math.min(scaleX, scaleY);
+  pz.moveTo(0, 0);
+  pz.zoomTo(0, 0, scale);
+  panAlign('center', 'center');
+}
+
+export function zoomDefault(zoomDefault: any) {
+  switch (zoomDefault) {
+    case 'fit to screen':
+      zoomFitToScreen();
+      break;
+    case 'fit to width':
+      zoomFitToWidth();
+      break;
+    case 'original size':
+      zoomOriginal();
+      break;
+  }
+}