Zoom settings and better page change handling

src/lib/components/Reader/Reader.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
 	import { currentVolume } from '$lib/catalog';
-	import { Panzoom, zoomFitToScreen, zoomFitToWidth, zoomOriginal } from '$lib/panzoom';
+	import {
+		Panzoom,
+		keepZoomStart,
+		zoomDefault,
+		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';
+	import {
+		ChervonDoubleLeftSolid,
+		ChervonDoubleRightSolid,
+		ChevronLeftSolid
+	} from 'flowbite-svelte-icons';
+	import { onMount } from 'svelte';
 
 	const volume = $currentVolume;
 	const pages = volume?.mokuroData.pages;
@@ -30,11 +42,13 @@
 		changePage(newPage);
 	}
 
-	function changePage(newPage: number) {
+	function changePage(newPage: number, ingoreTimeOut = false) {
 		const end = new Date();
-		const clickDuration = end.getTime() - start.getTime();
+		const clickDuration = ingoreTimeOut ? 0 : end.getTime() - start?.getTime();
+
 		if (pages && volume && clickDuration < 200) {
 			updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
+			zoomDefault();
 		}
 	}
 
@@ -46,15 +60,23 @@
 	}
 
 	function onManualPageChange() {
-		page = clamp(manualPage, 1, pages!.length);
+		changePage(manualPage, true);
 	}
+
+	onMount(() => {
+		zoomDefault();
+	});
 </script>
 
+<svelte:window on:resize={zoomDefault} />
 {#if volume && pages}
 	<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" />
+				<ChervonDoubleLeftSolid
+					on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
+					class="hover:text-primary-600"
+				/>
 				<Input
 					type="number"
 					size="sm"
@@ -64,17 +86,11 @@
 					on:change={onManualPageChange}
 				/>
 				<ChervonDoubleRightSolid
-					on:click={() => (page = pages.length)}
+					on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
 					class="hover:text-primary-600"
 				/>
 			</div>
-			<Range
+			<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
-				min={1}
-				max={pages.length}
-				size="sm"
-				bind:value={manualPage}
-				on:change={onManualPageChange}
-			/>
 		</div>
 	</Popover>
 	<button
@@ -84,29 +100,34 @@
 	>
 		{pageDisplay}
 	</button>
+	<div class="flex">
 		<Panzoom>
-		<div class="flex flex-row justify-center">
+			<button
+				class="h-full fixed -left-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01] justify-items-center"
+				on:mousedown={mouseDown}
+				on:mouseup={left}
+			/>
+			<button
+				class="h-full fixed -right-1/2 z-10 w-1/2 hover:bg-slate-400 opacity-[0.01]"
+				on:mousedown={mouseDown}
+				on:mouseup={right}
+			/>
+			<div class="flex flex-row">
 				{#if !$settings.singlePageView && index + 1 < pages.length}
 					<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
 				{/if}
 				<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
 			</div>
 		</Panzoom>
+	</div>
 	<button
-		style:width={'10%'}
 		on:mousedown={mouseDown}
 		on:mouseup={left}
-		class="left-0 top-0 absolute h-full"
+		class="left-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
 	/>
 	<button
-		style:width={'10%'}
 		on:mousedown={mouseDown}
 		on:mouseup={right}
-		class="right-0 top-0 absolute h-full"
+		class="right-0 top-0 absolute h-full w-[50px] hover:bg-slate-400 opacity-[0.01]"
 	/>
-	<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/components/Settings.svelte

@@ -5,6 +5,7 @@
 	import { resetSettings, settings, updateSetting } from '$lib/settings';
 	import type { SettingsKey } from '$lib/settings';
 	import { promptConfirmation } from '$lib/util';
+	import { zoomDefault } from '$lib/panzoom';
 
 	let transitionParams = {
 		x: 320,
@@ -14,7 +15,16 @@
 
 	export let hidden = true;
 
-	let selected = 'auto';
+	$: zoomModeValue = $settings.zoomDefault;
+	$: fontSizeValue = $settings.fontSize;
+
+	let zoomModes = [
+		{ value: 'zoomFitToScreen', name: 'Fit to screen' },
+		{ value: 'zoomFitToWidth', name: 'Fit to width' },
+		{ value: 'zoomOriginal', name: 'Original size' },
+		{ value: 'keepZoom', name: 'Keep zoom' },
+		{ value: 'keepZoomStart', name: 'Keep zoom, pan to top' }
+	];
 
 	let fontSizes = [
 		{ value: 'auto', name: 'auto' },
@@ -48,8 +58,8 @@
 		updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
 	}
 
-	function onFontSize(event: Event) {
+	function onSelectChange(event: Event, setting: SettingsKey) {
-		updateSetting('fontSize', (event.target as HTMLInputElement).value);
+		updateSetting(setting, (event.target as HTMLInputElement).value);
 	}
 
 	function onReset() {
@@ -73,6 +83,14 @@
 		<CloseButton on:click={() => (hidden = true)} class="mb-4 dark:text-white" />
 	</div>
 	<div class="flex flex-col gap-5">
+		<div>
+			<Label>On page zoom:</Label>
+			<Select
+				items={zoomModes}
+				bind:value={zoomModeValue}
+				on:change={(e) => onSelectChange(e, 'zoomDefault')}
+			/>
+		</div>
 		{#each toggles as { key, text, value }}
 			<Toggle size="small" checked={value} on:change={() => updateSetting(key, !value)}
 				>{text}</Toggle
@@ -80,7 +98,11 @@
 		{/each}
 		<div>
 			<Label>Fontsize:</Label>
-			<Select items={fontSizes} bind:value={selected} on:change={onFontSize} />
+			<Select
+				items={fontSizes}
+				bind:value={fontSizeValue}
+				on:change={(e) => onSelectChange(e, 'fontSize')}
+			/>
 		</div>
 		<div>
 			<Label>Background color:</Label>

src/lib/panzoom/util.ts

@@ -1,6 +1,7 @@
+import { settings, type ZoomModes } from '$lib/settings';
 import panzoom from 'panzoom';
 import type { PanZoom } from 'panzoom';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 let pz: PanZoom | undefined;
 let container: HTMLElement | undefined;
@@ -95,6 +96,7 @@ export function zoomFitToWidth() {
 
   const scale =
     (1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
+
   pz.moveTo(0, 0);
   pz.zoomTo(0, 0, scale);
   panAlign('center', 'top');
@@ -114,16 +116,24 @@ export function zoomFitToScreen() {
   panAlign('center', 'center');
 }
 
-export function zoomDefault(zoomDefault: any) {
+export function keepZoomStart() {
+  panAlign('center', 'top');
+}
+
+export function zoomDefault() {
+  const zoomDefault = get(settings).zoomDefault
   switch (zoomDefault) {
-    case 'fit to screen':
+    case 'zoomFitToScreen':
       zoomFitToScreen();
-      break;
+      return;
-    case 'fit to width':
+    case 'zoomFitToWidth':
       zoomFitToWidth();
-      break;
+      return;
-    case 'original size':
+    case 'zoomOriginal':
       zoomOriginal();
-      break;
+      return;
+    case 'keepZoomStart':
+      keepZoomStart();
+      return;
   }
 }

src/lib/settings/index.ts

@@ -1,7 +1,8 @@
 import { browser } from "$app/environment";
+import { zoomDefault } from "$lib/panzoom";
 import { writable } from "svelte/store";
 
-type FontSize = 'auto' |
+export type FontSize = 'auto' |
   '9' |
   '10' |
   '11' |
@@ -16,8 +17,13 @@ type FontSize = 'auto' |
   '48' |
   '60'
 
-type Settings = {
+export type ZoomModes = 'zoomFitToScreen' |
-  zoomMode: 'keep' | 'something'
+  'zoomFitToWidth' |
+  'zoomOriginal' |
+  'keepZoom' |
+  'keepZoomStart'
+
+export type Settings = {
   rightToLeft: boolean;
   singlePageView: boolean;
   textEditable: boolean;
@@ -28,12 +34,12 @@ type Settings = {
   hasCover: boolean;
   backgroundColor: string;
   fontSize: FontSize;
+  zoomDefault: ZoomModes;
 };
 
 export type SettingsKey = keyof Settings
 
 const defaultSettings: Settings = {
-  zoomMode: 'keep',
   rightToLeft: true,
   singlePageView: true,
   hasCover: false,
@@ -43,7 +49,8 @@ const defaultSettings: Settings = {
   boldFont: false,
   pageNum: true,
   backgroundColor: '#0d0d0f',
-  fontSize: 'auto'
+  fontSize: 'auto',
+  zoomDefault: 'zoomFitToScreen'
 }
 
 const stored = browser ? window.localStorage.getItem('settings') : undefined