highlight changes for imgviewer and parent child input update

WebGde/WebContent/src/getFields/getFields.js

 /**
- * AUTHOR:          btsfelizardo
- * DATE:            20 July 2022
- * DESCRIPTION:     User: Encode specific document based on fixed schema. The main function 
- *                  will loop through all the keys in schema then create a div containing a label 
- *                  and an input field, which will depend on the type of collection specified in 
- *                  the validation. Text input field for alphanumeric, alphabet, and numeric. Date 
- *                  input field for date and datepicker type. Additional validation are also included
- *                  if found in the schema like maximum length of input and required fields.
- */
-
-
-/**
  * 
  * @param {*} parentID 
  *      ID of the element that will contain the input fields
@@ -36,9 +24,6 @@ const displayFields = async (parentID) => {
             logOutDiv.append(logoutIcon);
         }
 
-
-
-
         let div = document.getElementById(parentID)
         if (!div) return {
             valid: false,
@@ -485,7 +470,6 @@ const inputDate = (key, validation) => {
 const inputDropdown = (key, validation) => {
     try {
         const {
-            mandatory,
             options
         } = validation
         const input = document.createElement('select')
@@ -665,8 +649,35 @@ const deconstruct = (section, div, classAttribute) => {
             input.setAttribute('class', classAttribute)
             input.classList.add('inputField')
             inputContainer.appendChild(input)
-
+                    			
         }
+        //key parent relationship on dropdown
+         for (const keyMain in section) {
+            for(const keySecondary in section){
+                var childOfValue = section[keySecondary]["childof"];
+                var parentValue = section[keySecondary]["parentvalue"];
+                if(keyMain === childOfValue){
+                    var childInput = document.getElementById(keySecondary);
+                    var parentInput = childInput.parentNode;
+                    var grandParentInput = parentInput.parentNode;
+                    grandParentInput.style.display = 'none';
+                    if (typeof chilOfValue !== 'undefined' && typeof parentValue !== 'undefined') {
+                        $(document.body).on("change", keyMain, function() {
+                            var dropdownId = document.getElementById(keyMain);
+                            for (let i = 0; i < parentValue.length; i++) {
+                              if (dropdownId.value === parentValue[i]) {
+                                grandParentInput.style.display = 'flex';
+                              } else if (dropdownId.value === 'hide') {
+                                grandParentInput.style.display = 'none';
+                              }
+                            }
+                       });                 
+                    }
+                }    
+            }
+        }
+        
+        
         return div
     } catch (err) {
         throw err

WebGde/WebContent/src/highlight/highlight.js

@@ -217,7 +217,7 @@ function initHighlight() {
                 rect = canvasPDF.getBoundingClientRect();
                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 isCanvasNotCreated = false;
-                ctx.clearRect(0, 0, canvasPDF.width, canvasPDF.height);
+                ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
 	            }
 	            else{               
 	                rect = canvasPDF.getBoundingClientRect();
@@ -236,7 +236,7 @@ function initHighlight() {
                 rect = canvasIMG.getBoundingClientRect(); 
                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 isCanvasNotCreated = false;
-                ctx.clearRect(0, 0, canvasIMG.width, canvasIMG.height);
+                ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
 	            }
 	            else{               
 	                rect = canvasIMG.getBoundingClientRect();

WebGde/WebContent/src/imgviewer/imgviewer.js

@@ -92,6 +92,7 @@ var displayImg = function(doc){ //test display image
 			} else {
 		     current_IMG = current_IMG + 1;
 			}
+			initHighlight();
 		    document.getElementById("totalPageValue").innerHTML = current_IMG + ' of ' + ofTotal;		        
     };
     
@@ -285,6 +286,5 @@ var displayImg = function(doc){ //test display image
         document.getElementById('zoom-level').textContent = `Zoom: ${(zoomLvl * 100).toFixed(0)}%`;
         initHighlight();
     }
-    initHighlight();
 
 }
\ No newline at end of file

WebGde/WebContent/src/sample_schema/HR Speed Test schema.json

@@ -48,9 +48,67 @@
 					"collection": "datepicker",
 					"mandatory": false
 				}
+			},
+		"Civil_Status":
+			{
+				"fieldLabel": "Civil Status",
+				"aka": "field28",
+				"source":"s",
+				"validation":
+				{
+					"fieldLength": 15,
+	                "collection": "dropdown",
+	                "options": ["Single", "Married", "Widowed"],
+	                "mandatory": true
+				}
+			},
+		"Spouse_Name":
+			{
+				"fieldLabel": "Spouse Name",
+				"aka": "field29",
+				"source":"s",				
+				"validation":
+				{
+					"fieldLength": 100,
+					"collection": "alphanumeric",
+					"invalidchar": "`~!@#&$%^*={}[]:;/\"|\\<>",
+					"mandatory": true
+				},
+				"childof": "Civil_Status",
+				"parentvalue": ["Married","Widowed"]
+			},			
+		"Date_of_Marriage":
+			{
+				"fieldLabel": "Date of Marriage",
+				"aka": "field30",
+				"source":"s",				
+				"validation":
+				{
+					"fieldLength": 30,
+					"collection": "alphanumeric",
+					"invalidchar": "`~!@#&$%^*={}[]:;/\"|\\<>",
+					"mandatory": true
+				},
+				"childof": "Civil_Status",
+				"parentvalue": ["Married","Widowed"]				
+			},				
+		"Mother's_Name":
+			{
+				"fieldLabel": "Mother's Name",
+				"aka": "field31",
+				"source":"s",				
+				"validation":
+				{
+					"fieldLength": 100,
+					"collection": "alphanumeric",
+					"invalidchar": "`~!@#&$%^*={}[]:;/\"|\\<>",
+					"mandatory": true
+				},
+				"childof": "Civil_Status",
+				"parentvalue": ["Single"]	
 			}
-
 		}
+			
 	},
 "BANK APPLICATION FORMS":
 	{