Skip to content

W
web-ui
Commit d2428fd1 by Daniel Bawag
Options

Merge branch 'revert-de937c09' into 'feature-latest-sqa-ticket'

Revert "Merge remote-tracking branch 'origin/feature-WG-228' into feature-latest-sqa-ticket" See merge request !49
parents 487ef1be 05410c06
Showing with 4 additions and 328 deletions
WebGde/WebContent/config.js
......@@ -49,14 +49,12 @@ 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_2"
var CURRENT_NODE = "Web_GDE_DEV"
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,7 +216,6 @@
<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,12 +21,7 @@ function createHighlight(width, height){
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
imgContainer = document.getElementById('TiffModalBody');
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
}
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{
}else{
imgContainer = document.getElementById('TiffViewer_ImageContainer');
imgContainer.insertBefore(highlightCanvas, imgContainer.firstChild);
}
......@@ -193,17 +188,11 @@ 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"));
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
var parentDiv = document.getElementById("pdf-container");
var canvas = parentDiv.querySelector("canvas");
if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
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 => {
......@@ -226,28 +215,7 @@ function initHighlight() {
}
}
}
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{
}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 deleted 100644 → 0
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,7 +4,6 @@ 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");
......
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