Mobile bounds test

src/lib/components/Settings/ReaderToggles.svelte

@@ -10,7 +10,8 @@
     { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
     { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
     { key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
-    { key: 'pageNum', text: 'Show page number', value: $settings.pageNum }
+    { key: 'pageNum', text: 'Show page number', value: $settings.pageNum },
+    { key: 'mobile', text: 'Mobile', value: $settings.mobile }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 

src/lib/panzoom/util.ts

@@ -38,6 +38,10 @@ export function initPanzoom(node: HTMLElement) {
   });
 
   panzoomStore.set(pz);
+
+
+  pz.on('pan', () => keepInBounds())
+  pz.on('zoom', () => keepInBounds())
 }
 
 type PanX = 'left' | 'center' | 'right';
@@ -135,3 +139,56 @@ export function zoomDefault() {
       return;
   }
 }
+
+export function keepInBounds() {
+  if (!pz || !container) {
+    return
+  }
+
+  const { mobile } = get(settings)
+
+  if (!mobile) {
+    return
+  }
+
+  const transform = pz.getTransform();
+
+  const { x, y, scale } = transform;
+  const { innerWidth, innerHeight } = window
+
+  const width = container.offsetWidth * scale;
+  const height = container.offsetHeight * scale;
+
+  const marginX = innerWidth * 0.01;
+  const marginY = innerHeight * 0.01;
+
+  let minX = innerWidth - width - marginX;
+  let maxX = marginX;
+  let minY = innerHeight - height - marginY;
+  let maxY = marginY;
+
+  if (width + 2 * marginX <= innerWidth) {
+    minX = marginX;
+    maxX = innerWidth - width - marginX;
+  }
+
+  if (height + 2 * marginY <= innerHeight) {
+    minY = marginY;
+    maxY = innerHeight - height - marginY;
+  }
+
+  if (x < minX) {
+    transform.x = minX;
+
+  }
+  if (x > maxX) {
+    transform.x = maxX;
+  }
+
+  if (y < minY) {
+    transform.y = minY;
+  }
+  if (y > maxY) {
+    transform.y = maxY;
+  }
+}

src/lib/settings/index.ts

@@ -34,6 +34,7 @@ export type Settings = {
   boldFont: boolean;
   pageNum: boolean;
   hasCover: boolean;
+  mobile: boolean;
   backgroundColor: string;
   fontSize: FontSize;
   zoomDefault: ZoomModes;
@@ -63,6 +64,7 @@ const defaultSettings: Settings = {
   textBoxBorders: false,
   boldFont: false,
   pageNum: true,
+  mobile: false,
   backgroundColor: '#0d0d0f',
   fontSize: 'auto',
   zoomDefault: 'zoomFitToScreen',