Merged feature-WG-228

WebGde/WebContent/config.js

@@ -49,12 +49,14 @@ var INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLoc
 //BPO CONFIG
 var IS_RETRIEVE_FROM_BPO = "Y"
 var BPO_URL = "http://35.169.23.0:8080/bpo/"
-var CURRENT_NODE = "Web_GDE_DEV"
+var CURRENT_NODE = "Web_GDE_DEV_2"
 var ENCODING_PASS = "PASS1"
 var NEXT_NODE = "Complete_DEV"
 var EXCEPTION_NODE = "Exception_DEV"
 
 var PDF_EXTENSION = ".pdf"
+var JPG_EXTENSION = ".jpg"
+var PNG_EXTENSION = ".png"
 
 var REASON_LIST = "Reason1,Reason2,Reason3,Reason4"
 

WebGde/WebContent/index.html

@@ -216,6 +216,7 @@
 <script src="./src/getFields/getFields.js"></script> <!--  display the input fields -->
 <script src="./src/accessFile/accessFile.js"></script>
 <script src="./src/pdfviewer/pdfv.js"></script>
+<script src="./src/imgviewer/imgviewer.js"></script>
 <script>
 
 const TiffViewer_refresh = document.getElementById("refresh");

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);
     }
@@ -93,6 +98,7 @@ function flipYHighlightCanvas(idVal){
 
 
 function initHighlight() {
+
     //tab traversal event listener
     $(document).on('keyup', '.select2.select2-container', function (e) {
         if (e.which == 9) {
@@ -185,27 +191,36 @@ function initHighlight() {
 
 
 
-    //waits until TIFF image is loaded, since its size is based on the displayed TIFF image
+    //waits until image is loaded, since its size is based on the displayed 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)){   		
-    		TIFFimg = canvas;
-    	}	
+    	var parentDivPDF;
+    	var canvasPDF;
+    	if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){  
+    		parentDivPDF = document.getElementById("pdf-container"); 
+    		canvasPDF = parentDivPDF.getElementsByTagName('canvas')[0];		
+    		TIFFimg = canvasPDF;
+    	}
+    	var parentDivIMG;
+    	var canvasIMG;
+    	if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION) ){   		
+    		var parentDivIMG = document.getElementById("img-container");
+    		var canvasIMG = parentDivIMG.getElementsByTagName('canvas')[0]; 		
+    		TIFFimg = canvasIMG;
+    	}
+    		
         if (TIFFimg != null) {
         //waits until width and height has been assigned
         var sizeObserver = new window.ResizeObserver(entries => {
 			if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
 				if(isCanvasNotCreated){
-                rect = canvas.getBoundingClientRect();
-               // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                rect = canvasPDF.getBoundingClientRect();
                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 isCanvasNotCreated = false;
-                ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
+                ctx.clearRect(0, 0, canvasPDF.width, canvasPDF.height);
 	            }
 	            else{               
-	                rect = canvas.getBoundingClientRect();
+	                rect = canvasPDF.getBoundingClientRect();
 	                if(isInitialPositioning){
 	                    resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
 	                }
@@ -215,7 +230,27 @@ function initHighlight() {
 	                }
 	            } 
             		
-            }else{
+            }
+            else if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)){
+				if(isCanvasNotCreated){
+                rect = canvasIMG.getBoundingClientRect(); 
+                createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
+                isCanvasNotCreated = false;
+                ctx.clearRect(0, 0, canvasIMG.width, canvasIMG.height);
+	            }
+	            else{               
+	                rect = canvasIMG.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

+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");
+    
+    var tiffbody = document.getElementById("TiffModalBody");
+    
+    var tiffFooter = document.getElementById("TiffModalFooter");
+    
+    var controllsContainer = document.createElement("div");
+    controllsContainer.setAttribute('id', 'controlsContainerImg');
+
+    //Info Section
+    var pageButtonInfoContainer = document.createElement("div");
+    pageButtonInfoContainer.classList.add("pageButtonInfoContainer");
+   
+    //Buttons Section
+    let centerContainer = document.createElement("div");
+    centerContainer.classList.add("footerCenterContainer");
+    
+    var fitContentButton = document.createElement("div");
+    fitContentButton.setAttribute('id', 'fit-content');
+    fitContentButton.classList.add("TiffViewer_ButtonClass");
+    const fitContentIcon = addIcon("Fit Content", "full_content_icon.png");
+    
+    var zoomInButton = document.createElement('div');
+    zoomInButton.setAttribute('id', 'zoom-in');
+    zoomInButton.classList.add("TiffViewer_ButtonClass");
+    const zoomInIcon = addIcon("Zoom In", "zoom_in_icon.png");
+    
+    var zoomOutButton = document.createElement('div');
+    zoomOutButton.setAttribute('id', 'zoom-out');
+    zoomOutButton.classList.add("TiffViewer_ButtonClass");
+    const zoomOutIcon = addIcon("Zoom Out", "zoom_out_icon.png");
+    
+    var zoomInfo = document.createElement('span');
+    zoomInfo.setAttribute('id', 'zoom-level');
+    
+    var rotateRightButton = document.createElement('div');
+    rotateRightButton.setAttribute('id', 'rotate-right');
+    rotateRightButton.classList.add("TiffViewer_ButtonClass");
+    const rotateRightIcon = addIcon("Rotate Right", "rotate_right_icon.png");
+
+    var rotateLeftButton = document.createElement('div');
+    rotateLeftButton.setAttribute('id', 'rotate-left');
+    rotateLeftButton.classList.add("TiffViewer_ButtonClass");
+    const rotateLeftIcon = addIcon("Rotate Left", "rotate_left_icon.png"); 
+    
+    var flipVerticalButton = document.createElement('div');
+    flipVerticalButton.setAttribute('id', 'flip-vertical');
+    flipVerticalButton.classList.add("TiffViewer_ButtonClass");
+    const flipVerticalIcon = addIcon("Flip Vertical", "flip_vertical_icon.png");
+
+    var flipHorizontalButton = document.createElement('div');
+    flipHorizontalButton.setAttribute('id', 'flip-horizontal');
+    flipHorizontalButton.classList.add("TiffViewer_ButtonClass");
+    const flipHorizontalIcon = addIcon("Flip Horizontal", "flip_horizontal_icon.png");
+    
+    //canva's
+    var canvas = document.createElement('canvas');
+    var img = new Image();
+        img.src = doc;
+       	img.width = 900;
+		img.height = 1200;	
+	var scale = 1;
+	// Set zoom level to 30%
+	var fitContent = false;
+	var zoom = 1;
+    var originalWidth = 0;
+    var originalHeight = 0;
+    // Set initial rotation angle to 0 degrees
+	var rotationAngle = 0;
+    // Set initial flip flags to false
+	var flipHorizontal = false;
+	var flipVertical = false;    
+        
+    var ctx = canvas.getContext('2d');
+    
+    img.onload = function() {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            originalWidth = img.width;
+            originalHeight = img.height;
+            ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
+            initHighlight();
+    };      
+    
+    //Body
+    container.appendChild(canvas);
+    tiffbody.appendChild(container);
+    
+    //Footer
+    controllsContainer.appendChild(centerContainer);
+    tiffFooter.appendChild(controllsContainer);
+    
+    //Header 
+ 	pageButtonInfoContainer.append(zoomInfo);
+    tiffHeader.append(pageButtonInfoContainer);
+    
+    //Icons
+    fitContentButton.append(fitContentIcon);   
+    zoomInButton.append(zoomInIcon);
+    zoomOutButton.append(zoomOutIcon);
+    rotateRightButton.append(rotateRightIcon);
+    rotateLeftButton.append(rotateLeftIcon);
+    flipVerticalButton.append(flipVerticalIcon);
+    flipHorizontalButton.append(flipHorizontalIcon);
+    
+    centerContainer.appendChild(fitContentButton);
+    centerContainer.appendChild(zoomInButton);
+    centerContainer.appendChild(zoomOutButton);
+    centerContainer.appendChild(rotateRightButton);
+    centerContainer.appendChild(rotateLeftButton);
+    centerContainer.appendChild(flipVerticalButton);
+    centerContainer.appendChild(flipHorizontalButton);
+        
+    //Events Function
+    fitContentButton.addEventListener('click', function() {
+			toggleFitContent();
+  	});
+  	
+  	document.addEventListener("keydown", function(e) {
+            if (e.shiftKey && e.key == 'F') {
+                toggleFitContent();
+            }
+   	});
+    
+        
+    function toggleFitContent() {
+        fitContent = !fitContent;
+          if (fitContent) {
+		    // Calculate zoom level to fit image to canvas
+		    var zoomX = canvas.width / img.width;
+		    var zoomY = canvas.height / img.height;
+		    zoom = Math.min(zoomX, zoomY);
+		
+		    // Center image on canvas
+		    var offsetX = (canvas.width - img.width * zoom) / 2;
+		    var offsetY = (canvas.height - img.height * zoom) / 2;
+		
+		    // Draw image on canvas with new zoom level and offset
+		    ctx.clearRect(0, 0, canvas.width, canvas.height);
+        	ctx.save();
+        	ctx.scale(scale, scale);
+		    ctx.drawImage(img, offsetX, offsetY, img.width * zoom, img.height * zoom);
+		    ctx.restore();
+		  } else {
+		    // Reset zoom level and redraw image on canvas
+		    zoom = 1;
+		    ctx.clearRect(0, 0, canvas.width, canvas.height);
+        	ctx.save();
+        	ctx.scale(scale, scale);
+		    ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
+		    ctx.restore();
+		  }
+		  // Update zoom info display
+  		 document.getElementById('zoom-level').innerHTML = `Zoom: ${(zoom * 100).toFixed(0)}%`;
+  		 initHighlight();
+    }
+    
+    
+    zoomInButton.addEventListener('click', function() {
+		zoomIn();
+  	});
+  	
+    document.addEventListener("keydown", (e) => {
+	    if (e.ctrlKey && e.key === "=") {
+	    	e.preventDefault();
+	        zoomIn();
+	    }
+    })
+    
+    zoomOutButton.addEventListener('click', function() {
+		zoomOut();
+  	});
+  	
+  	document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.key === "-") {
+        	e.preventDefault();	
+            zoomOut()
+        }
+    })
+    
+    function zoomIn() {
+        zoom += 0.1;
+        drawScaled(zoom);
+    }    
+    
+    function zoomOut() {
+        // Decrease zoom level by 0.1 (10%)
+  		zoom -= 0.1;
+  		// Draw image on canvas with new zoom level
+  		drawScaled(zoom);
+  		
+    }
+    
+    rotateLeftButton.addEventListener('click', function() {
+	  rotationAngle -= 90;	  
+	  rotationAngle = (rotationAngle + 360) % 360;
+	  drawImage();
+	});
+	
+	document.addEventListener("keydown", (e) => {
+	    if (e.shiftKey && e.code === 'ArrowDown') {
+	        e.preventDefault();
+	        rotationAngle -= 90;	  
+		    rotationAngle = (rotationAngle + 360) % 360;
+		    drawImage();
+	    }
+	})
+	
+	rotateRightButton.addEventListener('click', function() {
+	  rotationAngle += 90;
+	  rotationAngle = (rotationAngle + 360) % 360;
+	  drawImage();
+	});
+	
+    document.addEventListener("keydown", (e) => {
+	    if (e.shiftKey && e.code === 'ArrowUp') {
+	        e.preventDefault();
+	        rotationAngle += 90;
+		    rotationAngle = (rotationAngle + 360) % 360;
+		    drawImage();
+	    }
+    })
+    
+    flipHorizontalButton.addEventListener('click', function() {
+	  flipHorizontal = !flipHorizontal;
+	  drawImage();
+	});
+	
+	document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "H") {
+            e.preventDefault();
+            flipHorizontal = !flipHorizontal;
+  			drawImage();
+        }
+    })
+
+	flipVerticalButton.addEventListener('click', function() {
+	  flipVertical = !flipVertical;
+	  drawImage();
+	});
+	
+    document.addEventListener("keydown", (e) => {
+	    if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "V") {
+	        e.preventDefault();
+	        flipVertical = !flipVertical;
+	  		drawImage();
+	    }
+    })
+	
+	function drawImage() {
+	  ctx.clearRect(0, 0, canvas.width, canvas.height);	
+	  ctx.setTransform(
+	    flipHorizontal ? -zoom : zoom,
+	    0,
+	    0,
+	    flipVertical ? -zoom : zoom,
+	    canvas.width / 2,
+	    canvas.height / 2
+	  );
+	  ctx.rotate(rotationAngle * Math.PI / 180);
+	  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();
+	}
+
+    
+    
+    function drawScaled(zoomLvl) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.save();
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0, img.width * zoomLvl, img.height * zoomLvl);
+        ctx.restore();
+        document.getElementById('zoom-level').textContent = `Zoom: ${(zoomLvl * 100).toFixed(0)}%`;
+        initHighlight();
+    }
+    
+       
+
+}
\ No newline at end of file

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");
@@ -137,8 +138,10 @@ var displayPdf = function(doc) {
                 viewport: viewport
             };
             page.render(renderContext);
+            
+            initHighlight();
 
-        });
+        });        
 
 
         // Keep track of the current page, rotation, scale, and flip settings

WebGde/WebContent/src/submit/submit.js

@@ -7,6 +7,7 @@ const submitForm = (e) => {
         let error = false
         let doctype;
         let section;
+        
 
         // Validate all elements again
         for(let element of elements) {

WebGde/WebContent/style.css

@@ -468,6 +468,7 @@ div#nextDivContainer {
 }
 
 #nextDiv {
+	z-index: 1;
     background-color: #000000a1;
     width: 35px;
     display: flex;