feat: dynamic zoom limit on previewer

filebrowser · Mar 25, 2021 · e410272 · e410272
1 parent 87f1881
commit e410272
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/frontend/src/components/files/ExtendedImage.vue b/frontend/src/components/files/ExtendedImage.vue
@@ -29,14 +29,6 @@ export default {
       type: Number,
       default: () => 200,
     },
-    maxScale: {
-      type: Number,
-      default: () => 4,
-    },
-    minScale: {
-      type: Number,
-      default: () => 0.25,
-    },
     classList: {
       type: Array,
       default: () => [],
@@ -45,10 +37,6 @@ export default {
       type: Number,
       default: () => 0.25,
     },
-    autofill: {
-      type: Boolean,
-      default: () => false,
-    },
   },
   data() {
     return {
@@ -64,6 +52,8 @@ export default {
         center: { x: 0, y: 0 },
         relative: { x: 0, y: 0 },
       },
+      maxScale: 4,
+      minScale: 0.25,
     };
   },
   mounted() {
@@ -126,6 +116,21 @@ export default {
       img.classList.add("image-ex-img-ready");
 
       document.addEventListener("mouseup", this.onMouseUp);
+
+      let realSize = img.naturalWidth;
+      let displaySize = img.offsetWidth;
+
+      // Image is in portrait orientation
+      if (img.naturalHeight > img.naturalWidth) {
+        realSize = img.naturalHeight;
+        displaySize = img.offsetHeight;
+      }
+
+      // Scale needed to display the image on full size
+      const fullScale = realSize / displaySize;
+
+      // Full size plus additional zoom
+      this.maxScale = fullScale + 4;
     },
     onMouseUp() {
       this.inDrag = false;