408 lines
11 KiB
JavaScript
408 lines
11 KiB
JavaScript
class PDFView {
|
|
constructor(nameRoute) {
|
|
this.loadingTask = pdfjsLib.getDocument(nameRoute);
|
|
this.pdfDoc = null;
|
|
this.canvas = document.querySelector("#cnv");
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.scale = 1.5;
|
|
this.numPage = 1;
|
|
this.maxheight =
|
|
window.innerHeight -
|
|
document.getElementById("buttonsdiv").getBoundingClientRect().height;
|
|
this.maxwidth = document
|
|
.getElementById("cnvdiv")
|
|
.getBoundingClientRect().width;
|
|
this.rendering = false;
|
|
this.loadingTask.promise.then((pdfDoc_) => {
|
|
this.pdfDoc = pdfDoc_;
|
|
document.querySelector("#npages").innerHTML = this.pdfDoc.numPages;
|
|
this.GeneratePDF();
|
|
});
|
|
}
|
|
GeneratePDF() {
|
|
this.rendering = true;
|
|
this.pdfDoc.getPage(this.numPage).then((page) => {
|
|
let unscaled = page.getViewport({ scale: 1.0 });
|
|
this.scale = Math.min(
|
|
this.maxheight / unscaled.height,
|
|
this.maxwidth / unscaled.width,
|
|
);
|
|
});
|
|
this.pdfDoc.getPage(this.numPage).then((page) => {
|
|
let viewport = page.getViewport({ scale: this.scale });
|
|
this.canvas.height = viewport.height;
|
|
this.canvas.width = viewport.width;
|
|
|
|
let renderContext = {
|
|
canvasContext: this.ctx,
|
|
viewport: viewport,
|
|
};
|
|
doc.cnv.width = this.canvas.width;
|
|
doc.cnv.height = this.canvas.height;
|
|
document.getElementById("rightdiv").style.width =
|
|
((doc.cnv.width / screen.width) * 100).toString() + "vw";
|
|
document.getElementById("controldiv").style.width =
|
|
((1 - doc.cnv.width / screen.width) * 100).toString() + "vw";
|
|
doc.pagescales[this.numPage] = {
|
|
scale: this.scale,
|
|
width: doc.cnv.width,
|
|
height: doc.cnv.height,
|
|
};
|
|
|
|
var renderTask = page.render(renderContext);
|
|
renderTask.promise.then(() => {
|
|
doc.drawRects();
|
|
this.rendering = false;
|
|
});
|
|
});
|
|
document.querySelector("#npage").innerHTML = this.numPage;
|
|
}
|
|
|
|
WaitToRender() {
|
|
if (this.rendering) {
|
|
window.setTimeout(this.WaitToRender.bind(this), 100);
|
|
} else {
|
|
this.GeneratePDF();
|
|
}
|
|
}
|
|
|
|
PrevPage() {
|
|
if (this.numPage === 1) {
|
|
return;
|
|
}
|
|
this.numPage--;
|
|
this.WaitToRender();
|
|
}
|
|
|
|
NextPage() {
|
|
if (this.numPage >= this.pdfDoc.numPages) {
|
|
return;
|
|
}
|
|
this.numPage++;
|
|
this.WaitToRender();
|
|
}
|
|
RenderPage() {
|
|
this.WaitToRender();
|
|
}
|
|
}
|
|
class Rectangle {
|
|
constructor(canvas, sx, sy, ex, ey, color, alpha = 1) {
|
|
this.x = sx < ex ? sx : ex;
|
|
this.y = sy < ey ? sy : ey;
|
|
this.width = Math.abs(ex - sx);
|
|
this.height = Math.abs(ey - sy);
|
|
this.color = color;
|
|
this.context = canvas.getContext("2d");
|
|
this.alpha = alpha;
|
|
}
|
|
draw() {
|
|
this.context.globalAlpha = this.alpha;
|
|
this.context.beginPath();
|
|
this.context.rect(this.x, this.y, this.width, this.height);
|
|
this.context.fillStyle = this.color;
|
|
this.context.strokeStyle = "black";
|
|
this.context.lineWidth = 1;
|
|
|
|
this.context.fill();
|
|
this.context.stroke();
|
|
}
|
|
makeTuple() {
|
|
return [this.x, this.y, this.width, this.height];
|
|
}
|
|
}
|
|
class PDFDocument {
|
|
constructor(filename, fileID, filetype) {
|
|
if (filetype === "pdf") {
|
|
this.pdf = new PDFView(filename);
|
|
} else {
|
|
this.pdf = new PDFView("/files/unsupported");
|
|
}
|
|
this.filetype = filetype;
|
|
this.fname = filename;
|
|
this.fID = fileID;
|
|
this.rects = [];
|
|
this.cnv = document.querySelector("#drw_cnv");
|
|
this.ctx = this.cnv.getContext("2d");
|
|
this.temprect = new Rectangle(this.cnv, 0, 0, 0, 0, "white", 0);
|
|
this.pagescales = [];
|
|
this.startX = 0;
|
|
this.startY = 0;
|
|
}
|
|
drawAll() {
|
|
//context = cnv.getContext("2d");
|
|
this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height);
|
|
//pdf.RenderPage();
|
|
this.drawRects();
|
|
}
|
|
drawRects() {
|
|
if (!(this.pdf.numPage in this.rects)) {
|
|
this.rects[this.pdf.numPage] = [];
|
|
}
|
|
this.temprect.draw();
|
|
for (var i = 0; i < this.rects[this.pdf.numPage].length; i++) {
|
|
var shape = this.rects[this.pdf.numPage][i];
|
|
shape.draw();
|
|
}
|
|
}
|
|
addRect(endpos) {
|
|
var re = new Rectangle(
|
|
this.cnv,
|
|
this.startX,
|
|
this.startY,
|
|
endpos.x,
|
|
endpos.y,
|
|
"black",
|
|
);
|
|
this.rects[this.pdf.numPage].push(re);
|
|
this.drawAll();
|
|
}
|
|
clearCnv() {
|
|
this.rects[this.pdf.numPage] = [];
|
|
//context = cnv.getContext("2d");
|
|
this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height);
|
|
//pdf.RenderPage();
|
|
this.temprect = new Rectangle(this.cnv, 0, 0, 0, 0, "black", 0);
|
|
}
|
|
clearAll() {
|
|
this.rects = [];
|
|
this.clearCnv();
|
|
}
|
|
get paramRects() {
|
|
let prects = [];
|
|
for (var k = 1; k < this.rects.length; k++) {
|
|
prects[k - 1] = [];
|
|
//console.log(this.rects[k]);
|
|
if (this.rects[k] === undefined) {
|
|
continue;
|
|
}
|
|
//console.log(this.rects[k].length);
|
|
//console.log(0 < this.rects[k].length);
|
|
let len = this.rects[k].length;
|
|
for (var i = 0; i < len; i++) {
|
|
//console.log(this.rects[k][i]);
|
|
prects[k - 1].push(this.rects[k][i].makeTuple());
|
|
//console.log(prects[k][i]);
|
|
}
|
|
}
|
|
return prects;
|
|
}
|
|
}
|
|
var mouseIsDown = false;
|
|
var modal;
|
|
var close_loading;
|
|
var upload_status;
|
|
//var startX = 0;
|
|
//var startY = 0;
|
|
//var pdf;
|
|
//var cnv = document.querySelector("#drw_cnv");
|
|
//var ctx = cnv.getContext("2d");
|
|
//var rects = {};
|
|
//var temprect = new Rectangle(cnv, 0, 0, 0, 0, "white", 0);
|
|
//var pagescales = {};
|
|
|
|
function getMousePos(cnv, eve) {
|
|
var rect = cnv.getBoundingClientRect();
|
|
return {
|
|
x: eve.clientX - rect.left,
|
|
y: eve.clientY - rect.top,
|
|
};
|
|
}
|
|
function mouseDown(eve) {
|
|
//console.log(eve);
|
|
if (eve.buttons != 1) {
|
|
return;
|
|
}
|
|
if (mouseIsDown) {
|
|
return;
|
|
}
|
|
mouseIsDown = true;
|
|
var pos = getMousePos(cnv, eve);
|
|
doc.startX = pos.x;
|
|
doc.startY = pos.y;
|
|
}
|
|
function mouseUp(eve) {
|
|
//console.log(eve);
|
|
if (eve.buttons != 0) {
|
|
return;
|
|
}
|
|
if (!mouseIsDown) {
|
|
return;
|
|
}
|
|
mouseIsDown = false;
|
|
doc.addRect(getMousePos(cnv, eve));
|
|
doc.temprect = new Rectangle(doc.cnv, 0, 0, 0, 0, "black", 0);
|
|
}
|
|
|
|
//var mousexy = 0;
|
|
function mouSexy(eve) {
|
|
if (mouseIsDown) {
|
|
var pos = getMousePos(doc.cnv, eve);
|
|
doc.temprect = new Rectangle(
|
|
doc.cnv,
|
|
doc.startX,
|
|
doc.startY,
|
|
pos.x,
|
|
pos.y,
|
|
"black",
|
|
0.5,
|
|
);
|
|
doc.drawAll();
|
|
}
|
|
}
|
|
function scrollPage(eve) {
|
|
console.log(eve);
|
|
if (eve.ctrlKey) {
|
|
return;
|
|
}
|
|
if (eve.deltaY > 0) {
|
|
doc.pdf.NextPage();
|
|
} else {
|
|
doc.pdf.PrevPage();
|
|
}
|
|
}
|
|
const initDraw = () => {
|
|
var cnv = document.querySelector("#drw_cnv");
|
|
cnv.addEventListener("mousedown", mouseDown, false);
|
|
cnv.addEventListener("mouseup", mouseUp, false);
|
|
cnv.addEventListener("mousemove", mouSexy, false);
|
|
cnv.addEventListener("wheel", scrollPage, false);
|
|
};
|
|
function submitPdf(eve) {
|
|
eve.preventDefault();
|
|
var formdata = new FormData(eve.target);
|
|
console.log(doc.paramRects);
|
|
formdata.append("rects", JSON.stringify(doc.paramRects));
|
|
formdata.append("pagescales", JSON.stringify(doc.pagescales.slice(1)));
|
|
formdata.append("fileId", doc.fID);
|
|
//formdata.append("filename", doc.filename);
|
|
formdata.append("ftype", doc.filetype);
|
|
if (!formdata.has("ocr")) {
|
|
formdata.append("ocr", "False");
|
|
}
|
|
console.log(formdata);
|
|
submitForm(formdata);
|
|
}
|
|
async function submitForm(formData) {
|
|
try {
|
|
const updateEventSource = new EventSource(
|
|
window.location + "get_censor_status/" + doc.fID,
|
|
);
|
|
modal.style.display = "flex";
|
|
// console.log("http://127.0.0.1:8000/get_censor_status/" + doc.fID);
|
|
updateEventSource.addEventListener("censorUpdate", function(eve) {
|
|
console.log(eve.data);
|
|
var data = JSON.parse(eve.data);
|
|
upload_status.innerText =
|
|
"Censoring Page " + data.page + "/" + data.pages;
|
|
});
|
|
const response = await fetch("/submit/", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
updateEventSource.close();
|
|
modal.style.display = "none";
|
|
//let responseJSON=await response.json();
|
|
if (response.ok) {
|
|
console.log("Submit OK");
|
|
doc = new PDFDocument("./files/greeting", "greeting", "pdf");
|
|
// console.log(response);
|
|
// window.open(response);
|
|
// console.log(URL.createObjectURL(response.body));
|
|
// window.open(response);
|
|
// window.open(response, (target = "_blank"));
|
|
// var newWindow = window.open();
|
|
// newWindow.document.write(response);
|
|
// var blob = response.blob();
|
|
const blobURL = URL.createObjectURL(await response.blob());
|
|
window.open(blobURL, "_blank");
|
|
} else {
|
|
console.log("Submit failed");
|
|
window.alert("Error: " + (await response.json())["detail"]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error" + error);
|
|
}
|
|
}
|
|
function uploadPdf(eve) {
|
|
eve.preventDefault();
|
|
const fileupload = document.querySelector("#filepicker");
|
|
const file = fileupload.files;
|
|
if (!file) {
|
|
alert("Please Choose a file");
|
|
return;
|
|
}
|
|
const form = document.querySelector("#uploadform");
|
|
const formData = new FormData(form);
|
|
//formData.append("files", file);
|
|
uploadFile(formData);
|
|
}
|
|
async function uploadFile(formData) {
|
|
try {
|
|
const response = await fetch("/uploadfile/", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
let responseJSON = await response.json();
|
|
|
|
if (response.ok) {
|
|
console.log("upload OK " + responseJSON["filename"]);
|
|
console.log(response);
|
|
delete doc.pdf;
|
|
//delete doc;
|
|
document.getElementById("name").value = responseJSON.filename;
|
|
doc = new PDFDocument(
|
|
responseJSON.path,
|
|
responseJSON.fid,
|
|
responseJSON.filetype,
|
|
);
|
|
} else {
|
|
console.log("upload failed");
|
|
window.alert("Error: " + (await response.json())["detail"]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error: " + error);
|
|
}
|
|
}
|
|
|
|
function initUpload() {
|
|
document.querySelector("#uploadform").addEventListener("submit", uploadPdf);
|
|
document.querySelector("#submitform").addEventListener("submit", submitPdf);
|
|
}
|
|
function initListeners() {
|
|
document.querySelector("#prev").addEventListener("click", function() {
|
|
doc.pdf.PrevPage();
|
|
});
|
|
document.querySelector("#next").addEventListener("click", function() {
|
|
doc.pdf.NextPage();
|
|
});
|
|
document.querySelector("#clr").addEventListener("click", function() {
|
|
doc.clearCnv();
|
|
});
|
|
document.querySelector("#ca").addEventListener("click", function() {
|
|
doc.clearAll();
|
|
});
|
|
}
|
|
function initLoading() {
|
|
modal = document.querySelector("#loading");
|
|
// close_loading = document.querySelector(".close");
|
|
upload_status = document.querySelector("#upload_status");
|
|
// close_loading.addEventListener("click", function() {
|
|
// modal.style.display = "none";
|
|
// });
|
|
}
|
|
const startPdf = () => {
|
|
// doc = new PDFDocument(
|
|
// "./files/b78c869f-e0bb-11ef-9b58-84144d05d665",
|
|
// "b78c869f-e0bb-11ef-9b58-84144d05d665",
|
|
// "pdf",
|
|
// );
|
|
//pdf = new PDFView("./VO_Mathematik_3.pdf");
|
|
doc = new PDFDocument("./files/greeting", "greeting", "pdf");
|
|
initLoading();
|
|
initDraw();
|
|
initUpload();
|
|
initListeners();
|
|
};
|
|
|
|
window.addEventListener("load", startPdf);
|