Ive waitet way too long
This commit is contained in:
Marcel Gansfusz
348
app.js
Normal file
348
app.js
Normal file
@@ -0,0 +1,348 @@
|
||||
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) {
|
||||
this.pdf = new PDFView(filename);
|
||||
this.fname = filename;
|
||||
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 = 0; k < this.rects.length; k++) {
|
||||
prects[k] = [];
|
||||
//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].push([this.rects[k][i].makeTuple()]);
|
||||
//console.log(prects[k][i]);
|
||||
}
|
||||
}
|
||||
return prects;
|
||||
}
|
||||
}
|
||||
var mouseIsDown = false;
|
||||
//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));
|
||||
formdata.append("fname", doc.fname);
|
||||
console.log(formdata);
|
||||
submitForm(formdata);
|
||||
}
|
||||
async function submitForm(formData) {
|
||||
try {
|
||||
const response = await fetch("http://127.0.0.1:8000/submit", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
//let responseJSON=await response.json();
|
||||
if (response.ok) {
|
||||
console.log("Submit OK");
|
||||
console.log(response);
|
||||
} else {
|
||||
console.log("Submit failed");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error" + error);
|
||||
}
|
||||
}
|
||||
function uploadPdf(eve) {
|
||||
eve.preventDefault();
|
||||
const fileupload = document.querySelector("#filepicker");
|
||||
const file = fileupload.files[0];
|
||||
if (!file) {
|
||||
alert("Please Choose a file");
|
||||
return;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
uploadFile(formData);
|
||||
}
|
||||
async function uploadFile(formData) {
|
||||
try {
|
||||
const response = await fetch("http://127.0.0.1:8000/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;
|
||||
doc = new PDFDocument(responseJSON.path);
|
||||
} else {
|
||||
console.log("upload failed");
|
||||
}
|
||||
} 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();
|
||||
});
|
||||
}
|
||||
const startPdf = () => {
|
||||
doc = new PDFDocument("./VO_Mathematik_3.pdf");
|
||||
//pdf = new PDFView("./VO_Mathematik_3.pdf");
|
||||
initDraw();
|
||||
initUpload();
|
||||
initListeners();
|
||||
};
|
||||
|
||||
window.addEventListener("load", startPdf);
|
||||
Reference in New Issue
Block a user