Skip to content

Commit

Permalink
Zoom, FitToPage, Skakani po strankach RavishaHesh#3
Browse files Browse the repository at this point in the history
  • Loading branch information
@DimaLeshchinskiy
DimaLeshchinskiy committed May 29, 2021
1 parent cb4131d commit 8c2f0e9
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 81 deletions.
143 changes: 81 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,75 +2,94 @@
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./pdfannotate.css">
</head>
<body>
<div class="toolbar">
<div class="tool">
<span>PDFJS + FabricJS + jsPDF</span>
</div>
<div class="tool">
<label for="">Brush size</label>
<input type="number" class="form-control text-right" value="1" id="brush-size" max="50">
</div>
<div class="tool">
<label for="">Font size</label>
<select id="font-size" class="form-control">
<option value="10">10</option>
<option value="12">12</option>
<option value="16" selected>16</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="64">64</option>
<option value="72">72</option>
<option value="108">108</option>
</select>
</div>
<div class="tool">
<button class="color-tool active" style="background-color: #212121;"></button>
<button class="color-tool" style="background-color: red;"></button>
<button class="color-tool" style="background-color: blue;"></button>
<button class="color-tool" style="background-color: green;"></button>
<button class="color-tool" style="background-color: yellow;"></button>
</div>
<div class="tool">
<button class="tool-button active"><i class="fa fa-hand-paper-o" title="Free Hand" onclick="enableSelector(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-pencil" title="Pencil" onclick="enablePencil(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-font" title="Add Text" onclick="enableAddText(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-long-arrow-right" title="Add Arrow" onclick="enableAddArrow(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-square-o" title="Add rectangle" onclick="enableRectangle(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-picture-o" title="Add an Image" onclick="addImage(event)"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="deleteSelectedObject(event)"><i class="fa fa-trash"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="clearPage()">Clear Page</button>
</div>
<div class="tool">
<button class="btn btn-info btn-sm" onclick="showPdfData()">{}</button>
</div>
<div class="tool">
<button class="btn btn-light btn-sm" onclick="savePDF()"><i class="fa fa-save"></i> Save</button>

<div id="my-pdf-viewer">
<div id="toolbar" class="toolbar">
<div class="tool">
<label for="">Brush size</label>
<input type="number" class="form-control text-right" value="1" id="brush-size" max="50">
</div>
<div class="tool">
<label for="">Font size</label>
<select id="font-size" class="form-control">
<option value="10">10</option>
<option value="12">12</option>
<option value="16" selected>16</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="64">64</option>
<option value="72">72</option>
<option value="108">108</option>
</select>
</div>
<div class="tool">
<button class="color-tool active" style="background-color: #212121;"></button>
<button class="color-tool" style="background-color: red;"></button>
<button class="color-tool" style="background-color: blue;"></button>
<button class="color-tool" style="background-color: green;"></button>
<button class="color-tool" style="background-color: yellow;"></button>
</div>
<div class="tool">
<button class="tool-button active"><i class="fa fa-hand-paper-o" title="Free Hand" onclick="enableSelector(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-pencil" title="Pencil" onclick="enablePencil(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-font" title="Add Text" onclick="enableAddText(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-long-arrow-right" title="Add Arrow" onclick="enableAddArrow(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-square-o" title="Add rectangle" onclick="enableRectangle(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-picture-o" title="Add an Image" onclick="addImage(event)"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="deleteSelectedObject(event)"><i class="fa fa-trash"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="clearPage()">Clear Page</button>
</div>
<div class="tool">
<button class="btn btn-info btn-sm" onclick="showPdfData()">{}</button>
</div>


<div class="tool">
<button class="tool-button"><i class="fa fa-plus-circle" title="plus" onclick="zoomIn(event)"></i></button>
</div>

<div class="tool">
<button class="tool-button"><i class="fa fa-minus-circle" title="minus" onclick="zoomOut(event)"></i></button>
</div>

<div class="tool">
<button class="tool-button"><i class="fa fa-arrow-up" title="prev" onclick="previousPage(event)"></i></button>
</div>

<div class="tool">
<button class="tool-button"><i class="fa fa-arrow-down" title="next" onclick="nextPage(event)"></i></button>
</div>

<div class="tool">
<button class="btn btn-light btn-sm" onclick="savePDF()"><i class="fa fa-save"></i> Save</button>
</div>
</div>
<div id="pdf-container"></div>

</div>
</div>
<div id="pdf-container"></div>

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
Expand Down
130 changes: 118 additions & 12 deletions pdfannotate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Author: Ravisha Heshan
*/

var PDFAnnotate = function(container_id, url, options = {}) {
var PDFAnnotate = function(url, options = {}) {
this.number_of_pages = 0;
this.pages_rendered = 0;
this.active_tool = 1; // 1 - Free hand, 2 - Text, 3 - Arrow, 4 - Rectangle
Expand All @@ -14,23 +14,131 @@ var PDFAnnotate = function(container_id, url, options = {}) {
this.borderSize = 1;
this.font_size = 16;
this.active_canvas = 0;
this.container_id = container_id;
this.url = url;
this.pageImageCompression = options.pageImageCompression
? options.pageImageCompression.toUpperCase()
: "NONE";
this.pageImageCompression = options.pageImageCompression;
var inst = this;

//dom id
this.container_id = "";
this.component_id = "";
this.toolbar_id = "";

//scale; <int || fit>
this.scale = 1;
this.scaleMIN = 0.1;
this.scaleMAX = 1.3;

//step
this.step = 0.05;

//calback functions
this.onAnnotationCreate = function() {};
this.onAnnotationUpdate = function() {};
this.onAnnotationDelete = function() {};

var loadingTask = pdfjsLib.getDocument(this.url);
loadingTask.promise.then(function (pdf) {
var scale = options.scale ? options.scale : 1.3;
inst.pdf = pdf;
inst.render(options);
}, function (reason) {
console.error(reason);
});

this.setOptions = function(options){
Object.assign(this, options);
}

this.getFirstPage = function(){
return new Promise( function (resolve){
inst.pdf.getPage(1).then(resolve);
});
}

this.zoomIn = function(){
this.render({
scale: this.scale + this.step
});
}

this.zoomOut = function(){
this.render({
scale: this.scale - this.step
});
}

this.fit = function(){
this.render({
scale: "fit"
});
}

this.getCurrentPage = function(){
const component = document.getElementById(this.component_id);
const toolbar = document.getElementById(this.toolbar_id);
const scrollTop = component.scrollTop + toolbar.offsetHeight;

const page = document.getElementsByClassName("canvas-container")[0];
const pageContainerMargin = 25;
const pageHeight = page.offsetHeight + pageContainerMargin;

return Math.floor(scrollTop / pageHeight);
}

this.nextPage = function(){
const currentPage = this.getCurrentPage();
if(currentPage + 1 < this.number_of_pages){
const component = document.getElementById(this.component_id);
const toolbar = document.getElementById(this.toolbar_id);
const page = document.getElementsByClassName("canvas-container")[0];
const pageContainerMargin = 25;
const pageHeight = page.offsetHeight + pageContainerMargin;
component.scrollTop = (currentPage + 1) * pageHeight + toolbar.offsetHeight;
}
}

this.previousPage = function(){
const currentPage = this.getCurrentPage();
if(currentPage - 1 >= 0){
const component = document.getElementById(this.component_id);
const toolbar = document.getElementById(this.toolbar_id);
const page = document.getElementsByClassName("canvas-container")[0];
const pageContainerMargin = 25;
const pageHeight = page.offsetHeight + pageContainerMargin;
component.scrollTop = (currentPage - 1) * pageHeight + toolbar.offsetHeight;
}
}

this.render = async function (options){
let scalePrev = this.scale;
this.setOptions(options);
let pdf = this.pdf;
this.pages_rendered = 0;

let container = document.getElementById(inst.container_id);
let component = document.getElementById(inst.component_id);
let toolbar = document.getElementById(this.toolbar_id);
container.innerHTML = "";
let componentHeight = component.clientHeight - toolbar.offsetHeight;

if(this.scale == "fit"){
let page = await this.getFirstPage();
this.scale = (componentHeight / page._pageInfo.view[3]) * scalePrev;
}
else if(this.scale > this.scaleMAX)
this.scale = this.scaleMAX
else if(this.scale < this.scaleMIN)
this.scale = this.scaleMIN


console.log(this.scale);
inst.number_of_pages = pdf.numPages;

for (var i = 1; i <= pdf.numPages; i++) {
pdf.getPage(i).then(function (page) {
var viewport = page.getViewport({scale: scale});
pdf.getPage(i).then(function (page) {

var viewport = page.getViewport({scale: inst.scale});
var canvas = document.createElement('canvas');
document.getElementById(inst.container_id).appendChild(canvas);
container.appendChild(canvas);
canvas.className = 'pdf-canvas';
canvas.height = viewport.height;
canvas.width = viewport.width;
Expand All @@ -50,9 +158,7 @@ var PDFAnnotate = function(container_id, url, options = {}) {
});
});
}
}, function (reason) {
console.error(reason);
});
}

this.initFabric = function () {
var inst = this;
Expand Down
39 changes: 37 additions & 2 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
var pdf = new PDFAnnotate("pdf.pdf", {
onPageUpdated(page, oldData, newData) {
console.log(page, oldData, newData);
},
ready() {
console.log("Plugin initialized successfully");
},
scale: 1.5,
scale: "fit",
pageImageCompression: "MEDIUM", // FAST, MEDIUM, SLOW(Helps to control the new PDF file size)
container_id: "pdf-container",
component_id: "my-pdf-viewer",
toolbar_id: "toolbar",

onAnnotationCreate: function (){
console.log("create");
},
onAnnotationUpdate: function (){
console.log("udpate");
},
onAnnotationDelete: function (){
console.log("delete");
}
});

function changeActiveTool(event) {
Expand Down Expand Up @@ -93,3 +106,25 @@ $(function () {
pdf.setFontSize(font_size);
});
});

// ** my own script

function zoomIn(event){
pdf.zoomIn();
}

function zoomOut(event){
pdf.zoomOut();
}

function fitPage(event){
pdf.fit();
}

function nextPage(event){
pdf.nextPage();
}

function previousPage(event){
pdf.previousPage();
}

0 comments on commit 8c2f0e9

Please sign in to comment.