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 89 additions and 601 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/accessFile/accessFile.js
......@@ -61,231 +61,71 @@ async function accessFile() {
if (img == null && count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1) { //if only one file left
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//remove IMG and Tiff buttons
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlTiff || ctrlImg) {
ctrlTiff.outerHTML="";
ctrlImg.outerHTML="";
}
displayPdf(url);
}
else if(idQuery.result.name.endsWith(JPG_EXTENSION) || idQuery.result.name.endsWith(PNG_EXTENSION)){
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//Remove tiff and pdf
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlPdf = document.getElementById("controlsContainer");
if (ctrlTiff || ctrlPdf) {
ctrlTiff.outerHTML="";
ctrlPdf.outerHTML="";
}
displayImg(idQuery.result.path);
}
else {
var ctrlPdf = document.getElementById("controlsContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlPdf || ctrlImg) {
ctrlPdf.outerHTML="";
ctrlImg.outerHTML="";
}
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
// displayPdf(idQuery.result.path);
displayPdf(url);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
};
} else if (count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1) {
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//remove IMG and Tiff buttons
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlTiff || ctrlImg) {
ctrlTiff.outerHTML="";
ctrlImg.outerHTML="";
}
displayPdf(url);
}
else if(idQuery.result.name.endsWith(JPG_EXTENSION) || idQuery.result.name.endsWith(PNG_EXTENSION)){
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//Remove tiff and pdf
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlPdf = document.getElementById("controlsContainer");
if (ctrlTiff || ctrlPdf) {
ctrlTiff.outerHTML="";
ctrlPdf.outerHTML="";
}
displayImg(idQuery.result.path);
}else {
var ctrlPdf = document.getElementById("controlsContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlPdf || ctrlImg) {
ctrlPdf.outerHTML="";
ctrlImg.outerHTML="";
};
} else if (count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1) {
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
// displayPdf(idQuery.result.path);
displayPdf(url);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
};
}
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
}
}
transaction.oncomplete = function () {
db.close();
};
}
}
};
status('downloading ...');
var image_info=[];
let response;
status('downloading ...');
var image_info = [];
let response;
if (IS_RETRIEVE_FROM_BPO == "Y") {
if (img != null ? img.startsWith("http") : false) {
response = await fetch(img);
gfsFileName = getGfsFileName(response.headers.get("content-disposition"));
} else {
let formData = new FormData();
formData.append("data", JSON.stringify({
"dir": img
}));
response = await fetch('./src/accessFile/getImage.php', {
method: "POST",
body: formData,
});
}
} else {
response = await fetch(img);
}
const contentLength = response.headers.get('content-length');
var total = (parseInt(contentLength, 10));
let loaded = 0;
const res = new Response(new ReadableStream({
async start(controller) {
const reader = response.body.getReader();
for (;;) {
const {
done,
value
} = await reader.read();
if (done) break;
loaded += (value.byteLength);
// console.log(loaded);
progress({
loaded,
total
});
controller.enqueue(value);
}
controller.close();
},
}));
var blob = await res.blob();
status('download completed');
[...document.getElementsByClassName("bar")].forEach(el => {
el.style.display = "none";
});
const request2 = indexedDB.open("ImageDatabase", 1);
request2.onsuccess = async function() {
// console.log("Database opened successfully " + val );
const db = request2.result;
const transaction = db.transaction("image", "readwrite");
const store = transaction.objectStore("image");
var filename;
if (img != null) {
filename = gfsFileName != null ? gfsFileName : get_file_name(img);
}
var count = store.count();
let totalImages = JSON.parse(sessionStorage.getItem("dir_files")).length;
count.onsuccess = async function() {
if (count.result == 0 && (localStorage.length) == 0) {
store.put({
id: count.result + 1,
address: blob,
name: filename,
path: img
});
url = URL.createObjectURL(blob);
if (filename.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", filename);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + filename;
TiffViewer_filedetail.title = "Filename: " + filename;
TiffViewer_Header.append(TiffViewer_filedetail);
//remove IMG and Tiff buttons
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlTiff || ctrlImg) {
ctrlTiff.outerHTML="";
ctrlImg.outerHTML="";
}
displayPdf(url);
}
else if(filename.endsWith(JPG_EXTENSION) || filename.endsWith(PNG_EXTENSION)){
sessionStorage.setItem("file_Name", filename);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + filename;
TiffViewer_filedetail.title = "Filename: " + filename;
TiffViewer_Header.append(TiffViewer_filedetail);
//Remove tiff and pdf
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlPdf = document.getElementById("controlsContainer");
if (ctrlTiff || ctrlPdf) {
ctrlTiff.outerHTML="";
ctrlPdf.outerHTML="";
}
displayImg(img);
}
else {
var ctrlPdf = document.getElementById("controlsContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlPdf || ctrlImg) {
ctrlPdf.outerHTML="";
ctrlImg.outerHTML="";
}
window.addEventListener("load", loadDoc(url, TIFFViewer, filename), false);
if (IS_RETRIEVE_FROM_BPO == "Y") {
if (img != null ? img.startsWith("http") : false) {
response = await fetch(img);
gfsFileName = getGfsFileName(response.headers.get("content-disposition"));
} else {
let formData = new FormData();
formData.append("data", JSON.stringify({ "dir": img }));
response = await fetch('./src/accessFile/getImage.php', {
method: "POST",
body: formData,
});
}
} else {
response = await fetch(img);
}
const contentLength = response.headers.get('content-length');
......@@ -702,57 +542,29 @@ function refreshImage() {
} else {
const idQuery = count.result == 2 ? store.get(parseInt(localStorage.getItem("display_counter")) - 1) : store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//remove IMG and Tiff buttons
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlTiff || ctrlImg) {
ctrlTiff.outerHTML="";
ctrlImg.outerHTML="";
}
displayPdf(url);
}
else if(idQuery.result.name.endsWith(JPG_EXTENSION) || idQuery.result.name.endsWith(PNG_EXTENSION)){
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
//Remove tiff and pdf
var ctrlTiff = document.getElementById("TiffViewer_ButtonContainer");
var ctrlPdf = document.getElementById("controlsContainer");
if (ctrlTiff || ctrlPdf) {
ctrlTiff.outerHTML="";
ctrlPdf.outerHTML="";
}
displayImg(idQuery.result.path);
}
else {
//remove pdf and img
var ctrlPdf = document.getElementById("controlsContainer");
var ctrlImg = document.getElementById("controlsContainerImg");
if (ctrlPdf || ctrlImg) {
ctrlPdf.outerHTML="";
ctrlImg.outerHTML="";
}
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
File_Name = idQuery.result.name;
File_Path = idQuery.result.path;
};
idQuery.onsuccess = function () {
url = URL.createObjectURL(idQuery.result.address);
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
// displayPdf(idQuery.result.path);
displayPdf(url);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer,idQuery.result.name), false);
}
File_Name = idQuery.result.name;
File_Path = idQuery.result.path;
};
}
}
transaction.oncomplete = function () {
db.close();
......
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");
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