From e410272e6be6a0b660efe8d4eee6c6e9dd834cc5 Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Thu, 25 Mar 2021 19:36:53 +0000
Subject: [PATCH] feat: dynamic zoom limit on previewer

---
 .../src/components/files/ExtendedImage.vue    | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/files/ExtendedImage.vue b/frontend/src/components/files/ExtendedImage.vue
index 117db4ff..b0be0149 100644
--- 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;