fit content changes, zoom level limit

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css

@@ -125,6 +125,10 @@ div.fit-content{
     object-fit: cover;
     margin: auto;
 }
+div.fit-content img{
+    height: 100%;
+    width: 100%;
+}
 canvas.fit-content{
     max-height: 100%;
     max-width: 100%;

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js

@@ -38,6 +38,7 @@ export class ImageViewer {
 
     constructor(imageContainerID) {
         this.imageContainerID = imageContainerID;
+        this.scale = 1.0;
     }
 
     async init() {
@@ -188,6 +189,8 @@ export class ImageViewer {
             }
         }
 
+        this.resetImage();
+
     }
 
     displayCurrentImageFileName(imageName) {
@@ -299,11 +302,20 @@ export class ImageViewer {
         fitContentBtn.setAttribute("id", "fitContentBtn");
         fitContentBtn.setAttribute("title", "Fit-Content");
         fitContentBtn.addEventListener("click", function () {
+            // get current image element
+            let currentImage = document.getElementById(_this.currentImageID);
+
             let fitContentClasslist = document.getElementById(_this.currentImageID).classList;
             if (!fitContentClasslist.contains("fit-content")) {
+                sessionStorage.setItem('currentZoom',currentImage.style.zoom);
+                currentImage.style.zoom = "";
                 fitContentClasslist.add("fit-content");
+
+                document.getElementById("zoomDetails").textContent = "Fit Content"
                 _this.imageMainContainerElement.classList.add("fit-container");
             } else {
+                currentImage.style.zoom = sessionStorage.getItem('currentZoom');
+                document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(sessionStorage.getItem('currentZoom')*100) +"%";
                 fitContentClasslist.remove("fit-content");
                 _this.imageMainContainerElement.classList.remove("fit-container");
             }
@@ -398,18 +410,19 @@ export class ImageViewer {
             }
         }
 
-        let scale = 1.0;
-
         let zoomInBtn = document.createElement("button");
         zoomInBtn.setAttribute("class", "button image-btn-control")
         zoomInBtn.setAttribute("id", "zoomInBtn");
         zoomInBtn.setAttribute("title", "Zoom In")
         zoomInBtn.addEventListener('click', function () {
-            if (scale < 2) {
-                scale += 0.10;
-                console.log(scale);
+            if (_this.scale < 2) {
+                _this.scale += 0.10;
+                console.log(_this.scale);
             }
             const container = document.getElementById(_this.currentImageID);
+            if (container.classList.contains('fit-content')){
+                container.classList.remove('fit-content')
+            }
             if (container.getAttribute("file-type") !== "pdf") {
                 container.childNodes.forEach(element => {
                     element.classList.remove("image");
@@ -421,14 +434,14 @@ export class ImageViewer {
                     }
                 });
             }
-            container.style.zoom = scale;
-            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(scale*100) +"%";
+            container.style.zoom = _this.scale;
+            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(_this.scale*100) +"%";
             //container.style.transform = "scale(" + scale + ")";
             //container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
 
             let highlight = document.getElementById(_this.highLightCanvasID);
             if (highlight) {
-                highlight.style.zoom = scale;
+                highlight.style.zoom = _this.scale;
                 //highlight.style.transform = "scale(" + scale + ")";
                 // highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
 
@@ -441,19 +454,22 @@ export class ImageViewer {
         zoomOutBtn.setAttribute("id", "zoomOutBtn");
         zoomOutBtn.setAttribute("title", "Zoom Out")
         zoomOutBtn.addEventListener('click', function () {
-            if (scale > 0) {
-                scale -= 0.10;
-                console.log(scale);
+            if (_this.scale > 0.2) {
+                _this.scale -= 0.10;
+                console.log(_this.scale);
             }
             const container = document.getElementById(_this.currentImageID);
-            container.style.zoom = scale;
-            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(scale*100) +"%";
+            if (container.classList.contains('fit-content')){
+                container.classList.remove('fit-content')
+            }
+            container.style.zoom = _this.scale;
+            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(_this.scale*100) +"%";
             //container.style.transform = "scale(" + scale + ")";
             //container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
 
             let highlight = document.getElementById(_this.highLightCanvasID);
             if (highlight) {
-                highlight.style.zoom = scale;
+                highlight.style.zoom = _this.scale;
                 //highlight.style.transform = "scale(" + scale + ")";
                 //highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
             }
@@ -589,4 +605,36 @@ export class ImageViewer {
 
     }
 
+    resetImage(){
+        this.scale = 1;
+        const container = document.getElementById(this.currentImageID);
+        if (container.getAttribute("file-type") !== "pdf") {
+            container.childNodes.forEach(element => {
+                element.classList.remove("image");
+            });
+        } else {
+            container.childNodes.forEach(element => {
+                if (!element.classList.includes("image")) {
+                    element.classList.add("image");
+                }
+            });
+        }
+        if (container.classList.contains('fit-content')){
+            container.classList.remove('fit-content')
+        }
+        container.style.zoom = this.scale;
+        document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(this.scale*100) +"%";
+        //container.style.transform = "scale(" + scale + ")";
+        //container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
+
+        let highlight = document.getElementById(this.highLightCanvasID);
+        if (highlight) {
+            highlight.style.zoom = this.scale;
+            //highlight.style.transform = "scale(" + scale + ")";
+            // highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
+
+        }
+            
+    }
+
 }
\ No newline at end of file