highlight on fields mouseover

WebGde/WebContent/config.js

@@ -56,4 +56,3 @@ var EXCEPTION_NODE = "Exception"
 
 //KEYCLOAK CONFIG
 const REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';
-

WebGde/WebContent/index.html

@@ -206,8 +206,8 @@
           </div>
           <div id="TiffModalBody">
           	<div id='nextDiv'>
-				<button id="prev">&lt;</button>
-				<button id="next">&gt;</button>
+				<button id="prev">prev</button>
+				<button id="next">next</button>
 	  		</div>
 	  		<div id='TiffButtonRight'>
 	  			<button id='refresh'>Ref</button>
@@ -220,12 +220,12 @@
         </div>
       </div>
 
-      <img src="" id="tableBanner" />
+<!--       <img src="" id="tableBanner" />
       <img id="myImage" crossorigin="anonymous" src="">
       <img id="ImgPrev" crossorigin="anonymous" src="">
       <img id="my-img" />
 
-      <img id="img" />
+      <img id="img" /> -->
     </main>
   </div>
 

WebGde/WebContent/src/accessFile/accessFile.js

@@ -248,7 +248,7 @@ async function accessFile() {
                 if(IS_RETRIEVE_FROM_GFS == "Y"){
                     const modal = document.getElementById("TiffViewerModal");
                     modal.style.display = 'none';//hide local modal\
-                    getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element5');                  
+                    getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element6');                  
                 }else{
                     if((localStorage.length)==0){
                         if(updated_input_files.length==0){

WebGde/WebContent/src/highlight/highlight.js

@@ -150,6 +150,11 @@ function initHighlight() {
                 highlight(e.target.id);
                 currIdVal = e.target.id;
             })
+            field.addEventListener('mouseover', (e) =>{
+                // flippedH = false;
+                highlight(e.target.id);
+                currIdVal = e.target.id;
+            })
         });
 
 
@@ -177,13 +182,14 @@ 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) {
-        const TIFFimg = document.getElementById('IMG1');
+    	console.log(sessionStorage.getItem("TiffViewer_current"));
+        const TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
         if (TIFFimg) {
         //waits until width and height has been assigned
         var sizeObserver = new window.ResizeObserver(entries => {
 
             if(isCanvasNotCreated){
-                rect = document.getElementById("IMG1").getBoundingClientRect();
+                rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
                // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 isCanvasNotCreated = false;
@@ -191,7 +197,7 @@ function initHighlight() {
             }
             else{
                 
-                rect = document.getElementById("IMG1").getBoundingClientRect();
+                rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
                 if(isInitialPositioning){
                     resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
                 }

WebGde/WebContent/src/tiffViewer/tiffViewer.js

@@ -98,6 +98,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
   let changed = false;
   let TiffViewer_pages = 0; //page count
   let TiffViewer_current = 1; // TiffViewer_current page number
+  sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
   Current_page = Current_page + 1;
 
   //declaration of HTML Contents
@@ -419,6 +420,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
     Edited();
   };
 
+		
   //Previous Page
   const prevB = document.getElementById("TiffViewer_PrevButton");
   prevB.addEventListener("click", previousPage);
@@ -426,7 +428,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
     if (e.key === "F11") {
       e.preventDefault();
       previousPage();
-
+	  	
     }
   })
   function previousPage() {
@@ -435,8 +437,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
         document.getElementById(`IMG${TiffViewer_current}`).style.display = "none";
         TiffViewer_current--;
+  		sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
         document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
         Edited();
+        initHighlight();
       }
     }
   };
@@ -456,8 +460,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
         document.getElementById(`IMG${TiffViewer_current}`).style = "display: none";
         TiffViewer_current++;
+        sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
         document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
         Edited();
+        initHighlight();
       }else{
         alert("No more image to be fetched");
       }
@@ -667,7 +673,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
         e.preventDefault();
         div.scrollTop += 20;
       }
-    });
-    // initHighlight();
+    });   
+    initHighlight();
   }
-
+	
+  

WebGde/WebContent/style.css

@@ -239,7 +239,7 @@ textarea{
     width: 763px;
     height: 22px;
     position: absolute;
-    z-index: 999;
+    z-index: 20;
     left: calc(49%);
     transform: translate(-50%, 0);
     top: 328px;
@@ -250,8 +250,8 @@ textarea{
 	float:left;
 	display: block;
     border: 1px solid #446397;
-    width: 35px;
-    height: 35px;
+    width: 50px;
+    height: 50px;
     border-radius: 100%;
 }
 
@@ -260,8 +260,8 @@ textarea{
 	float:right;
 	display: block;
     border: 1px solid #446397;
-    width: 35px;
-    height: 35px;
+    width: 50px;
+    height: 50px;
     border-radius: 100%;
 
 }
@@ -633,6 +633,7 @@ select {
     transform: translate(-50%, 0);
     padding: 10px;
     background-color: white;
+    z-index:999;
 }
 
 #endOkCnclCont>button{