Add some panzoom utils

src/lib/components/Catalog.svelte

@@ -32,78 +32,6 @@
 			currentPage: 9,
 			totalPages: 59
 		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
-		{
-			title: 'sdhfjksdh',
-			cover: image5,
-			currentPage: 19,
-			totalPages: 200
-		},
 		{
 			title: 'sdhfjksdh',
 			cover: image5,

src/lib/panzoom/Panzoom.svelte

@@ -3,7 +3,14 @@
 </script>
 
 <div>
-	<div use:initPanzoom>
+	<div class="container" use:initPanzoom>
 		<slot />
 	</div>
 </div>
+
+<style>
+	.container {
+		display: flex;
+		justify-content: center;
+	}
+</style>

src/lib/panzoom/util.ts

@@ -2,22 +2,76 @@ import panzoom from 'panzoom';
 import type { PanZoom } from 'panzoom';
 import { writable } from 'svelte/store';
 
-export const pz = writable<PanZoom | undefined>(undefined);
+let pz: PanZoom | undefined;
+let container: HTMLElement | undefined;
+
+export const panzoomStore = writable<PanZoom | undefined>(undefined);
 
 export function initPanzoom(node: HTMLElement) {
-  pz.set(
+  container = node;
-    panzoom(node, {
+  pz = panzoom(node, {
-      bounds: false,
+    bounds: false,
-      maxZoom: 10,
+    maxZoom: 10,
-      minZoom: 0.1,
+    minZoom: 0.1,
-      zoomDoubleClickSpeed: 1,
+    zoomDoubleClickSpeed: 1,
-      enableTextSelection: true,
+    enableTextSelection: true,
-      beforeMouseDown: (e) => {
+    beforeMouseDown: (e) => {
-        const nodeName = (e.target as HTMLElement).nodeName;
+      const nodeName = (e.target as HTMLElement).nodeName;
-        return nodeName === 'P';
+      return nodeName === 'P';
-      },
+    },
-      beforeWheel: (e) => e.altKey,
+    beforeWheel: (e) => e.altKey,
-      onTouch: (e) => e.touches.length > 1
+    onTouch: (e) => e.touches.length > 1
-    })
+  });
-  );
+
+  panzoomStore.set(pz)
+}
+
+type PanX = 'left' | 'center' | 'right'
+type PanY = 'top' | 'center' | 'bottom'
+
+export function panAlign(alignX: PanX, alignY: PanY) {
+  if (!pz || !container) {
+    return
+  }
+
+  const { scale } = pz.getTransform();
+  const { innerWidth, innerHeight } = window
+  const { offsetWidth, offsetHeight } = container
+
+  let x = 0;
+  let y = 0;
+
+  switch (alignX) {
+    case 'left':
+      x = 0;
+      break;
+    case 'center':
+      x = (innerWidth - offsetWidth * scale) / 2;
+      break;
+    case 'right':
+      x = (innerWidth - offsetWidth * scale);
+      break;
+  }
+
+  switch (alignY) {
+    case 'top':
+      y = 0;
+      break;
+    case 'center':
+      y = (innerHeight - offsetHeight * scale) / 2;
+      break;
+    case 'bottom':
+      y = (innerHeight - offsetHeight * scale);
+      break;
+  }
+
+  console.log(x, y);
+
+  pz?.moveTo(x, y)
+}
+
+export function zoomOriginal() {
+  pz?.moveTo(0, 0);
+  pz?.zoomTo(0, 0, 1 / pz.getTransform().scale);
+  panAlign('center', 'center');
 }

src/routes/[manga]/+page.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
-	import Panzoom from '$lib/panzoom/Panzoom.svelte';
 	import { currentManga } from '$lib/catalog';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { panAlign, Panzoom, zoomOriginal } from '$lib/panzoom';
 
 	const manga = $currentManga;
 </script>
 
 {#if manga}
+	<div>
+		<Button on:click={zoomOriginal}>Reset Zoom</Button>
+	</div>
 	<Panzoom>
 		<img draggable="false" src={manga.cover} alt={manga.title} />
 	</Panzoom>
 {/if}
 
 <style>
-	h2 {
+	div {
-		z-index: 1;
+		position: absolute;
-		position: fixed;
+		bottom: 10px;
 		left: 10px;
+		z-index: 1;
 	}
 </style>