add zoom display

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

@@ -407,6 +407,7 @@ export class ImageViewer {
                 });
             }
             container.style.zoom = scale;
+            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(scale*100) +"%";
             //container.style.transform = "scale(" + scale + ")";
             //container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
 
@@ -425,12 +426,13 @@ export class ImageViewer {
         zoomOutBtn.setAttribute("id", "zoomOutBtn");
         zoomOutBtn.setAttribute("title", "Zoom Out")
         zoomOutBtn.addEventListener('click', function () {
-            if (scale > 1) {
+            if (scale > 0) {
                 scale -= 0.10;
                 console.log(scale);
             }
             const container = document.getElementById(_this.currentImageID);
             container.style.zoom = scale;
+            document.getElementById("zoomDetails").textContent = "Zoom: "+ Math.trunc(scale*100) +"%";
             //container.style.transform = "scale(" + scale + ")";
             //container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
 
@@ -488,9 +490,14 @@ export class ImageViewer {
         this.previousPageButton.setAttribute("id", "previousPageBtn");
         this.previousPageButton.setAttribute("class", "button image-btn-control");
 
+        let zoomDetails = document.createElement("label");
+        zoomDetails.setAttribute("class", "label")
+        zoomDetails.setAttribute("id", "zoomDetails");
+
         pagesDiv.appendChild(this.previousPageButton);
         pagesDiv.appendChild(pageDetails);
         pagesDiv.appendChild(this.nextPageButton);
+        pagesDiv.appendChild(zoomDetails);
 
         let refreshDiv = document.createElement("div");
         refreshDiv.setAttribute("class", "row");

WebGde/WebContent/script.js

@@ -176,6 +176,7 @@ async function initializeImageDisplay() {
         document.getElementById("previousRecordImage").style.visibility = "hidden";
     }
     DISPLAY_FIELD_OBJECT.updateHeaderText(2, "Record 1 of " + urls.length);
+    document.getElementById("zoomDetails").textContent = "Zoom: 100%";
 }
 
 async function createWebGdeInterface(GDEContainer) {
@@ -347,7 +348,7 @@ async function createImageViewer() {
                 await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
             }
         }
-        
+        document.getElementById("zoomDetails").textContent = "Zoom: 100%";
     });
 };
 
@@ -363,6 +364,7 @@ async function displayPreviousRecord(e) {
         HIGHLIGHT_OBJECT.createHighlight();
 
         DISPLAY_FIELD_OBJECT.updateHeaderText(2, "Record "+ (current +1) +" of " + urls.length);
+        document.getElementById("zoomDetails").textContent = "Zoom: 100%";
 
         DISPLAY_FIELD_OBJECT.clearForm();
         await populateFields(urls[current]);
@@ -400,6 +402,7 @@ export async function displayNextRecord(e) {
         HIGHLIGHT_OBJECT.createHighlight();
 
         DISPLAY_FIELD_OBJECT.updateHeaderText(2, "Record "+ (current +1) +" of " + urls.length);
+        document.getElementById("zoomDetails").textContent = "Zoom: 100%";
 
         DISPLAY_FIELD_OBJECT.clearForm();
         await populateFields(urls[current]);
@@ -643,7 +646,7 @@ function init() {
             } 
         }
 
-        if (e.shiftKey == true && e.keyCode == 72) {
+        if (e.ctrlKey == true && e.shiftKey == true && e.keyCode == 72) {
             e.preventDefault();
             let button = IMAGE_VIEWER_OBJECT.imageControls.flipHorizontalButton;
             if(button && button.style.visibility !== "hidden"){
@@ -652,7 +655,7 @@ function init() {
             } 
         }
 
-        if (e.shiftKey == true && e.keyCode == 86) {
+        if (e.ctrlKey == true && e.shiftKey == true && e.keyCode == 86) {
             e.preventDefault();
             let button = IMAGE_VIEWER_OBJECT.imageControls.flipVerticalButton;
             if(button && button.style.visibility !== "hidden"){
@@ -808,10 +811,10 @@ function showListOfShortcutKeys() {
 }
 
 export const SHORTCUT_KEYS = [
-    // {
-    //     "function": "Pause",
-    //     "keys": ["ESC"]
-    // },
+    {
+        "function": "Pause",
+        "keys": ["ESC"]
+    },
     {
         "function": "Submit",
         "keys": ["Shift", "Enter"]
@@ -830,11 +833,11 @@ export const SHORTCUT_KEYS = [
     },
     {
         "function": "Flip Horizontally",
-        "keys": ["Shift", "H"]
+        "keys": ["Ctrl","Shift", "H"]
     },
     {
         "function": "Flip Vertically",
-        "keys": ["Shift", "V"]
+        "keys": ["Ctrl","Shift", "V"]
     },
     {
         "function": "Rotate to Right",