Skip to content

W
web-ui
Commit 5779ec31 by Lynette Lizardo
Options

zoom, fitcontent, highlighting bug fixes

parent 61515464
Showing with 232 additions and 11 deletions
WebGde/WebContent/WebGde I Backup/src/highlight/highlight.js
......@@ -38,6 +38,7 @@ function createHighlight(width, height){
// highlightCanvas.style.height = height;
highlightCanvas.setAttribute("width", width);
highlightCanvas.setAttribute("height", height);
highlightCanvas.style.height = '100% !important';
highlightCanvas.style.zIndex = "20";
}
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css
......@@ -27,6 +27,7 @@ body {
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
position: relative;
}
.image{
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js
......@@ -261,6 +261,12 @@ export class ImageViewer {
_this.imageMainContainerElement.classList.remove("fit-container");
}
document.getElementById(_this.currentImageID).childNodes.forEach(element => {
if(!element.classList.includes("image")){
element.classList.add("image");
}
});
let highlight = document.getElementById(_this.highLightCanvasID);
if (highlight) {
if (!highlight.classList.contains("fit-content")) {
......@@ -356,11 +362,28 @@ export class ImageViewer {
scale += 0.10;
console.log(scale);
}
document.getElementById(_this.currentImageID).style.zoom = scale;
const container = document.getElementById(_this.currentImageID);
if(container.getAttribute("file-type") !== "pdf"){
container.childNodes.forEach(element => {
element.classList.remove("image");
});
}else{
container.childNodes.forEach(element => {
if(!element.classList.includes("image")){
element.classList.add("image");
}
});
}
container.style.zoom = scale;
//container.style.transform = "scale(" + scale + ")";
//container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
let highlight = document.getElementById(_this.highLightCanvasID);
if (highlight) {
highlight.style.zoom = scale;
//highlight.style.transform = "scale(" + scale + ")";
// highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
}
});
......@@ -374,10 +397,16 @@ export class ImageViewer {
scale -= 0.10;
console.log(scale);
}
document.getElementById(_this.currentImageID).style.zoom = scale;
const container = document.getElementById(_this.currentImageID);
container.style.zoom = scale;
//container.style.transform = "scale(" + scale + ")";
//container.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
let highlight = document.getElementById(_this.highLightCanvasID);
if (highlight) {
highlight.style.zoom = scale;
//highlight.style.transform = "scale(" + scale + ")";
//highlight.style.transformOrigin = (scale * 100) + "% " + (scale * 100) + "%";
}
});
......
WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js
......@@ -80,6 +80,8 @@ async function createOutputXml(fields, metrics, doctype, section) {
});
await completeToNextNode(elementId);
sessionStorage.setItem("isElementComplete", true);
}else{
sessionStorage.removeItem("isElementComplete");
}
}
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -38,9 +38,9 @@ export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
export const ROOT_FOLDER = "/WebGde-Widgets";
//this determines if the images will be retrieved from the gfs
export const DOMAIN = "http://34.205.19.111:8080"
export const DOMAIN = "http://54.146.187.173:8080"
export const CONTEXTROOT = "gfs-explorer-ws"
export const GFS_URL = "http://34.205.19.111:8080" + "/WebGde/svc/gfs-rest"
export const GFS_URL = "http://54.146.187.173:8080" + "/WebGde/svc/gfs-rest"
export const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
export const DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-download-link"
export const IS_RETRIEVE_FROM_GFS = "N"
......@@ -51,7 +51,7 @@ export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen
export const IS_RETRIEVE_FROM_BPO = "Y"
// export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
// export const CURRENT_NODE = "Web GDE"
export const BPO_URL = "http://34.205.19.111:8080/bpo/"
export const BPO_URL = "http://54.146.187.173:8080/bpo/"
export const CURRENT_NODE = "Web_GDE_DEV"
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
......@@ -63,5 +63,7 @@ export const PNG_EXTENSION = ".png"
export const REASON_LIST = "Reason1,Reason2,Reason3,Reason4"
//KEYCLOAK CONFIG
window.REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';
WebGde/WebContent/script.js
......@@ -9,7 +9,7 @@ import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/
import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "./WebGde-Widgets/globalVariable.js";
import { searchStringInArray, startMetricCapture, keyArray } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
import { searchStringInArray, startMetricCapture, keyArray, stopMetricCapture, saveMetrics, interval } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
import { submitForm } from "./WebGde-Widgets/Submit/submit.js";
import { populateFields, populateForm } from "./WebGde-Widgets/DataInputWidget/generateFields.js";
import { returnElementBPO } from "./WebGde-Widgets/BPO/returnElement.js";
......@@ -98,7 +98,7 @@ async function checkBPODetails() {
if(dir_files && fileLocation){
return true;
}
await BPO_OBJECT.returnElement(elementId);
function exitTool() {
......@@ -107,7 +107,6 @@ async function checkBPODetails() {
removeLoadingScreen();
createModal(exitTool, "Please log-out and try again.");
sessionStorage.clear();
}
}else{
await BPO_OBJECT.returnElement(elementId);
......@@ -203,6 +202,9 @@ function createMenuBar(){
//<span id="info-icon" class="icon">&#9432;</span>
scIcon.setAttribute("id", "info-icon");
scIcon.setAttribute("class", "icon");
scIcon.addEventListener("click", ()=>{
showListOfShortcutKeys();
});
scIcon.innerHTML = '&#9432;';
shortcutDiv.appendChild(scIcon);
......@@ -239,9 +241,21 @@ async function createImageViewer() {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
displayPreviousRecord(e);
if(sessionStorage.getItem("isElementComplete")){
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayPreviousRecord(e);
}
} else {
alert("Current record encountered error.");
alert("Current record was not successfully submitted");
}
} else {
displayPreviousRecord(e);
......@@ -253,7 +267,21 @@ async function createImageViewer() {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
displayNextRecord(e);
if(sessionStorage.getItem("isElementComplete")){
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayPreviousRecord(e);
}
} else {
alert("Current record was not successfully submitted");
}
} else {
displayNextRecord(e);
......@@ -513,5 +541,135 @@ function init() {
}
}
}
window.onkeydown = (key) => {
}
}
function showListOfShortcutKeys(){
let mainDiv = document.getElementById("shortcut-popUp");
if(mainDiv){
mainDiv.remove();
return;
}
mainDiv = document.createElement("div");
mainDiv.setAttribute("id", "shortcut-popUp");
// let titleDiv = document.createElement("div");
// titleDiv.setAttribute("class", "row");
let title = document.createElement("h3");
title.textContent = "Shortcut Keys";
// titleDiv.appendChild(title);
let tableDiv = document.createElement("div");
tableDiv.setAttribute("class", "row");
let table = document.createElement("table");
for (let index = 0; index < SHORTCUT_KEYS.length; index++) {
const element = SHORTCUT_KEYS[index];
let row = document.createElement("tr");
let functions = document.createElement("td");
functions.innerHTML = "<span>" + element.function + "</span>";
let keys = document.createElement("td");
element.keys.forEach(key =>{
let button = document.createElement("button");
button.innerHTML = key;
keys.appendChild(button);
});
row.appendChild(functions);
row.appendChild(keys);
table.appendChild(row);
}
tableDiv.appendChild(table);
mainDiv.appendChild(title);
mainDiv.appendChild(tableDiv);
let dataInputContainer = document.getElementById('input-field-container');
dataInputContainer.appendChild(mainDiv);
}
export const SHORTCUT_KEYS =[
{
"function": "Pause",
"keys": ["ESC"]
},
{
"function": "Submit",
"keys": ["Shift", "Enter"]
},
{
"function": "Next Page",
"keys": ["Ctrl", "&gt;"]
},
{
"function": "Previous Page",
"keys": ["Ctrl", "&lt;"]
},
{
"function": "Fit Content",
"keys": ["Shift", "F"]
},
{
"function": "Flip Horizontally",
"keys": ["Shift", "H"]
},
{
"function": "Flip Vertically",
"keys": ["Shift", "V"]
},
{
"function": "Rotate to Right",
"keys": ["Shift", "Page-Up"]
},
{
"function": "Rotate to Left",
"keys": ["Shift", "Page-Down"]
},
{
"function": "Zoom In",
"keys":["Ctrl", "+"]
},
{
"function": "Zoom out",
"keys": ["Ctrl", "_"]
},
{
"function": "Previous Image",
"keys": ["F11"]
},
{
"function": "Next Image",
"keys":["F12"]
},
{
"function": "Scroll Image to the Left",
"keys": ["Ctrl", "&larr;"]
},
{
"function": "Scroll Image to the Left",
"keys": ["Ctrl", "&rarr;"]
},
{
"function":"Scroll up Image",
"keys":["Ctrl", "&uarr;"]
},
{
"function": "Scroll down Image",
"keys": ["Ctrl", "&darr;"]
}
// {
// "function":
// "keys":
// },
// {
// "function":
// "keys":
// },
];
WebGde/WebContent/style.css
......@@ -86,6 +86,34 @@ h3{
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#shortcut-popUp{
position: absolute;
top:5vh;
left: 71%;
max-width: 50vh;
background-color: #000;
z-index: 2;
padding: 3px;
}
#shortcut-popUp div h3{
color: #fff;
font: 14px;
margin: 5px !important;
}
#shortcut-popUp div table{
border: 1px solid #fff;
margin: 2px;
}
#shortcut-popUp div table tr td{
border-bottom: 1px solid #fff !important;
margin-bottom: 2px !important;
}
#input-field-container::-webkit-scrollbar {
width: 10px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment