Zoom settings and better page change handling

2023-09-22 08:39:47 +02:00
parent 5b7bcb5fba
commit dca15ab62a
4 changed files with 108 additions and 48 deletions
--- a/src/lib/components/Reader/Reader.svelte
+++ b/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
-				min={1}
-				max={pages.length}
-				size="sm"
-				bind:value={manualPage}
-				on:change={onManualPageChange}
-			/>
+			<Range min={1} max={pages.length} bind:value={manualPage} on:change={onManualPageChange} />
 		</div>
 	</Popover>
 	<button
@@ -84,29 +100,34 @@
 	>
 		{pageDisplay}
 	</button>
-	<Panzoom>
-		<div class="flex flex-row justify-center">
-			{#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 class="flex">
+		<Panzoom>
+			<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}
--- a/src/lib/components/Settings.svelte
+++ b/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) {
-		updateSetting('fontSize', (event.target as HTMLInputElement).value);
+	function onSelectChange(event: Event, setting: SettingsKey) {
+		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>
--- a/src/lib/panzoom/util.ts
+++ b/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;
-    case 'fit to width':
+      return;
+    case 'zoomFitToWidth':
      zoomFitToWidth();
-      break;
-    case 'original size':
+      return;
+    case 'zoomOriginal':
      zoomOriginal();
-      break;
+      return;
+    case 'keepZoomStart':
+      keepZoomStart();
+      return;
  }
 }
--- a/src/lib/settings/index.ts
+++ b/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 = {
-  zoomMode: 'keep' | 'something'
+export type ZoomModes = 'zoomFitToScreen' |
+  '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