apply highlight on png and jpg

WebGde/WebContent/src/highlight/highlight.js

@@ -21,7 +21,12 @@ function createHighlight(width, height){
     if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
     	imgContainer = document.getElementById('TiffModalBody');
     	imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
-    }else{
+    }
+    else if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)){
+    	imgContainer = document.getElementById('TiffModalBody');
+    	imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
+    }
+    else{
     	imgContainer = document.getElementById('TiffViewer_ImageContainer');
     	imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
     }
@@ -188,11 +193,17 @@ function initHighlight() {
     //waits until TIFF image is loaded, since its size is based on the displayed TIFF image
     const observer = new MutationObserver(function (mutations, mutationInstance) {
     	var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
-    	var parentDiv = document.getElementById("pdf-container");
-    	var canvas = parentDiv.querySelector("canvas");
-    	if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){   		
+    	if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){  
+    		var parentDiv = document.getElementById("pdf-container");
+    		var canvas = parentDiv.querySelector("canvas"); 		
     		TIFFimg = canvas;
-    	}	
+    	}
+    	if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION) ){   		
+    		var parentDiv = document.getElementById("img-container");
+    		var canvas = parentDiv.querySelector("canvas"); 		
+    		TIFFimg = canvas;
+    	}
+    		
         if (TIFFimg != null) {
         //waits until width and height has been assigned
         var sizeObserver = new window.ResizeObserver(entries => {
@@ -215,7 +226,28 @@ function initHighlight() {
 	                }
 	            } 
             		
-            }else{
+            }
+            else if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)){
+				if(isCanvasNotCreated){
+                rect = canvas.getBoundingClientRect();
+               // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                isCanvasNotCreated = false;
+                ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
+	            }
+	            else{               
+	                rect = canvas.getBoundingClientRect();
+	                if(isInitialPositioning){
+	                    resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
+	                }
+	                else{
+	                    resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
+	                    isInitialPositioning = true;
+	                }
+	            } 
+            		
+            }
+            else{
             	if(isCanvasNotCreated){
                 rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
                // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);

WebGde/WebContent/src/imgviewer/imgviewer.js

@@ -2,6 +2,7 @@ var displayImg = function(doc){ //test display image
 	//Create all Elements          		
     const container = document.createElement('div');
     container.setAttribute('id', 'img-container');
+    container.style.textAlign = 'center';
     
     let tiffHeader = document.getElementById("TiffModalHeader");
     
@@ -84,6 +85,7 @@ var displayImg = function(doc){ //test display image
             originalWidth = img.width;
             originalHeight = img.height;
             ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
+            initHighlight();
     };      
     
     //Body
@@ -156,6 +158,7 @@ var displayImg = function(doc){ //test display image
 		  }
 		  // Update zoom info display
   		 document.getElementById('zoom-level').innerHTML = `Zoom: ${(zoom * 100).toFixed(0)}%`;
+  		 initHighlight();
     }
     
     
@@ -264,6 +267,7 @@ var displayImg = function(doc){ //test display image
 	  ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
 	  ctx.setTransform(1, 0, 0, 1, 0, 0);
 	  document.getElementById('zoom-level').innerHTML = `Zoom: ${(zoom * 100).toFixed(0)}%`;
+	  initHighlight();
 	}
 
     
@@ -275,6 +279,7 @@ var displayImg = function(doc){ //test display image
         ctx.drawImage(img, 0, 0, img.width * zoomLvl, img.height * zoomLvl);
         ctx.restore();
         document.getElementById('zoom-level').textContent = `Zoom: ${(zoomLvl * 100).toFixed(0)}%`;
+        initHighlight();
     }
     
        

WebGde/WebContent/src/pdfviewer/pdfv.js

@@ -4,6 +4,7 @@ var displayPdf = function(doc) {
     //Create all Elements          		
     const container = document.createElement('div');
     container.setAttribute('id', 'pdf-container');
+    container.style.textAlign = 'center';
     // Get the next and previous buttons
     
     let pdfHeader = document.getElementById("TiffModalHeader");