feat: add basic zoom functionality to comic reader

client/components/readers/ComicReader.vue

@@ -26,8 +26,12 @@
     <div v-if="numPages" class="absolute top-0 right-16 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
+    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
+      <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
+      <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
+    </div>
 
-    <div class="overflow-hidden w-full h-full relative">
+    <div class="w-full h-full relative">
       <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
         <div class="flex items-center justify-center h-full w-1/2">
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
@@ -38,10 +42,11 @@
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
         </div>
       </div>
-      <div class="h-full flex justify-center">
+      <div class="w-full h-full relative overflow-auto">
-        <img v-if="mainImg" :src="mainImg" class="object-contain h-full m-auto" />
+        <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
+          <img v-if="mainImg" :style="{ minWidth: scale + '%', width: scale + '%' }" :src="mainImg" class="object-contain m-auto" />
+        </div>
       </div>
-
       <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
         <ui-loading-indicator />
       </div>
@@ -54,6 +59,10 @@ import Path from 'path'
 import { Archive } from 'libarchive.js/main.js'
 import { CompressedFile } from 'libarchive.js/src/compressed-file'
 
+// This is % with respect to the screen width
+const MAX_SCALE = 400
+const MIN_SCALE = 10
+
 Archive.init({
   workerUrl: '/libarchive/worker-bundle.js'
 })
@@ -81,7 +90,8 @@ export default {
       showInfoMenu: false,
       loadTimeout: null,
       loadedFirstPage: false,
-      comicMetadata: null
+      comicMetadata: null,
+      scale: 80,
     }
   },
   watch: {
@@ -136,6 +146,12 @@ export default {
           return p
         }) || []
       )
+    },
+    canScaleUp() {
+      return this.scale < MAX_SCALE
+    },
+    canScaleDown() {
+      return this.scale > MIN_SCALE
     }
   },
   methods: {
@@ -331,7 +347,13 @@ export default {
       orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))
 
       this.pages = orderedImages
-    }
+    },
+    zoomIn() {
+      this.scale += 10
+    },
+    zoomOut() {
+      this.scale -= 10
+    },
   },
   mounted() {},
   beforeDestroy() {}