Add some panzoom utils

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(
-    panzoom(node, {
-      bounds: false,
-      maxZoom: 10,
-      minZoom: 0.1,
-      zoomDoubleClickSpeed: 1,
-      enableTextSelection: true,
-      beforeMouseDown: (e) => {
-        const nodeName = (e.target as HTMLElement).nodeName;
-        return nodeName === 'P';
-      },
-      beforeWheel: (e) => e.altKey,
-      onTouch: (e) => e.touches.length > 1
-    })
-  );
+  container = node;
+  pz = panzoom(node, {
+    bounds: false,
+    maxZoom: 10,
+    minZoom: 0.1,
+    zoomDoubleClickSpeed: 1,
+    enableTextSelection: true,
+    beforeMouseDown: (e) => {
+      const nodeName = (e.target as HTMLElement).nodeName;
+      return nodeName === 'P';
+    },
+    beforeWheel: (e) => e.altKey,
+    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');
 }