Merge branch 'release/0.2.0' into 'master'

Release 0.2.0

See merge request Apps/bin-eLehrmittel/pdf-wrap!5

Author: Nicolas Schäfli

CHANGELOG.md

@@ -4,6 +4,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 0.2.0 - 2019-01-18
+
+### Added
+* Close method to pdf document which resolves after the cleanup finished.
+* Use pdf link service for internal document links.
+* Add scaleTo method which allows scaling to predefined values.
+* Add isEnabled getter to highlight interface.
+* Experimental touch support for drawing tools.
+* Engines version constraint (node 10.9 - 10.x, yarn 1.12 - 1.14)
+* Max picture size constraint to 4096^2.
+
+### Fixed
+* Filter highlights which are to small to be visible.
+* Recalculate height of highlights to really fit the element instead of the selection (webkit & blink).
+* Page number detection while drawing with freehand tool.
+* Eraser tool now stops removing lines after mouse up.
+* Freehand tool now scales lines according to document scale.
+
+### Changed
+* Disable background highlight layer because its not visible with colored
+document backgrounds.
+* pdf document service loadWith now resolves after the viewer is ready instead of instantly after
+creation.
+* Upgrade to typescript version ^3.1.0
+* Enable text selection enhancement.
+* Enable WebGL.
+* Upgrade pdfjs to 2.0.943.
+* Update example (dev-viewer).
+* The freehand touchscreen support is now mentioned in the documentation. 
+
+### Removed
+* Documentation about first highlight layer which is no longer implemented.
+
 ## 0.1.3 - 2018-08-23
 
 ### Fixed

docs/development-guide.md

@@ -3,6 +3,7 @@
 **Authors**
 
 Nicolas Märchy
+Nicolas Schäfli
 
 **Version 1.0.0**
 
@@ -42,11 +43,7 @@ rendered PDF page, so it won't cover the text.
 Is the actual PDF page rendered as svg by PDF.js.
 
 **HIGHLIGHT LAYER TRANSPARENCY**<br>
-Is the same as the *HIGHLIGHT Layer* but with less opacity (about 40%). This layer
-is required to highlight text which is not on a white background. With only
-the *HIGHLIGHT LAYER*, the highlight would not be visible at all, because of the
-non-transparent background of the *PDF LAYER*. The transparency is required
-to not cover the *PDF LAYER* completely.
+This layer contains any highlighting with an opacity of (about 40%).
 
 **DRAW LAYER**<br>
 The layer contains all drawings made by a user.
@@ -314,6 +311,27 @@ yarn gulp publishDoc
 This will generate the documentation, updates the `gh-pages` branch
 and pushes it to Github.
 
+# NPM
+
+PDF Wrap is published to [npm.js](https://www.npmjs.com/package/@srag/pdf-wrap).
+
+## How to publish PDF Wrap
+
+In order to publish this project to npm you have to log in with your npm account
+
+```
+yarn login
+```
+
+Then simply run
+
+```
+yarn gulp publish
+```
+
+> It is important to use this command and **NOT `yarn publish`** directly, because the gulp command will
+prepare PDF Wrap before publishing it.
+
 # Unit Testing
 
 PDF Wrap uses [Mocha](https://mochajs.org/) to run its tests. In addition, [chaijs](http://www.chaijs.com/) is used

docs/index.md

@@ -26,4 +26,4 @@ the reference documentation.
 ## Examples
 Looking for finished examples? Here you'll find access to examples made with PDF Wrap.
 
-[Check out examples >](link-to-github)
+[Check out examples >](https://github.com/studer-raimann/pdf-wrap/tree/master/examples)

docs/reference-documentation.md

@@ -3,8 +3,9 @@
 **Authors**
 
 Nicolas Märchy
+Nicolas Schäfli
 
-**Version 0.0.1**
+**Version 1.0.0**
 
 Copyright &copy; 2018 studer + raimann ag, <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
 
@@ -49,12 +50,6 @@ yarn add pdf-wrap
 npm i pdf-wrap
 ```
 
-### Manual Installation
-
-You can download the PDF Wrap distribution from the npm repository.
-
-* [pdf-wrap.tar.zip](https://www.npmjs.com/)
-
 # Using PDF Wrap
 
 This section goes into more detail about how you should use PDF Wrap.
@@ -287,7 +282,7 @@ pdf.toolbox.freehand.stateChange
 **Limitations:**
 
 * The Freehand tool can **not** draw over multiple PDF pages at once
-* The Freehand tool does **not** work with touchscreen
+* The Freehand tool touchscreen support is **experimental**.
 
 The Freehand tool as additional setters:
 

docs/resources/img/pdf_wrap_pages_structure.jpeg

@@ -7,7 +7,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "copyCSS": "cp -r src/css build/www",
-    "copyPDFjs": "mkdir -p build/www/assets/libs/pdf-wrap && cp -r node_modules/pdf-wrap/assets/* build/www/assets/libs/pdf-wrap",
+    "copyPDFjs": "mkdir -p build/www/assets/libs/pdf-wrap && cp -r node_modules/@srag/pdf-wrap/assets/* build/www/assets/libs/pdf-wrap",
     "copyResources": "cp src/index.html build/www && cp -r src/assets/* build/www/assets",
     "build": "yarn webpack && yarn run copyResources && yarn run copyPDFjs && yarn run copyCSS",
     "clean": "rm -r build",
@@ -18,7 +18,5 @@
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.3"
   },
-  "dependencies": {
-    "log4js": "^2.9.0"
-  }
+  "dependencies": {}
 }

examples/dev-viewer/package.json

@@ -102,6 +102,9 @@ <h1 class="middle aligned">Dev PDF viewer</h1>
                 <button id="previous-page"><-</button>
                 <button id="next-page">-></button>
 
+                <button id="load-page">Load</button>
+                <button id="close-page">Close</button>
+
             </div>
 
         </div>
@@ -133,4 +136,4 @@ <h4>Thumbnails</h4>
     <script src="main.js"></script>
 
 </body>
-</html>
+</html>

examples/dev-viewer/src/index.html

@@ -1,17 +1,20 @@
-import {setAssetsSrc} from "../../../../src/pdfjs/pdfjs.document.service";
+import {LoggerFactory} from "@srag/pdf-wrap/log-config";
+import {PageOverlay} from "@srag/pdf-wrap/api/storage/adapter";
+
+import {setAssetsSrc} from "@srag/pdf-wrap/pdfjs/pdfjs.document.service";
+import {colorFromHex} from "@srag/pdf-wrap/api/draw/color";
+import {PDFjsDocumentService} from "@srag/pdf-wrap/pdfjs/pdfjs.document.service";
+import {URI} from "@srag/pdf-wrap/api/document.service";
+import {StorageRegistry} from "@srag/pdf-wrap/api/storage/adapter.registry";
+import {LogLevel} from "@srag/pdf-wrap/log-config";
+
 
-const {colorFromHex} = require("pdf-wrap/api/draw/color");
-const {PDFjsDocumentService, setWorkerSrc, setCMapUrl} = require("pdf-wrap/pdfjs/pdfjs.document.service");
-const {URI} = require("pdf-wrap/api/document.service");
-const {StorageRegistry} = require("pdf-wrap/api/storage/adapter.registry");
-const {PageOverlay} = require("pdf-wrap/api/storage/adapter");
-const {LoggerFactory} = require("pdf-wrap/log-config");
 
 LoggerFactory.configure({
     logGroups: [
         {
             logger: "ch/studerraimann/pdfwrap",
-            logLevel: 0
+            logLevel: LogLevel.TRACE
         }
     ]
 });
@@ -33,15 +36,15 @@ export class InMemStorageAdapter {
 
         events.afterPolyLineRendered().subscribe(it => {
             store.set(it.element.id, it);
-        });
+        }, (it) => console.error(it), () => console.log("afterPolyLineRendered complete"));
 
         events.afterRectangleRendered().subscribe(it => {
             store.set(it.element.id, it);
-        });
+        }, (it) => console.error(it), () => console.log("afterRectangleRendered complete"));
 
         events.afterElementRemoved().subscribe(it => {
             store.delete(it.element.id);
-        })
+        }, (it) => console.error(it), () => console.log("afterElementRemoved complete"))
     }
 
     loadPage(uri, pageNumber) {
@@ -219,6 +222,7 @@ export class SidebarManager {
 
         this._outline.then(outline => {
 
+            this.clearOutline();
             outline.flatList.forEach(it => {
 
                 const li = document.createElement("li");
@@ -235,6 +239,7 @@ export class SidebarManager {
 
     renderThumbnails() {
 
+        this.clearThumbnails();
         this._thumbails.subscribe(it => {
 
             const li = document.createElement("li");
@@ -249,34 +254,38 @@ export class SidebarManager {
             this._thumbnailsUlElement.appendChild(li);
         });
     }
-}
 
-const documentService = new PDFjsDocumentService();
+    clearThumbnails() {
+        while (this._thumbnailsUlElement.lastChild) {
+            this._thumbnailsUlElement.removeChild(this._thumbnailsUlElement.lastChild);
+        }
+    }
 
+    clearOutline() {
+        while (this._tableOfContents.lastChild) {
+            this._tableOfContents.removeChild(this._tableOfContents.lastChild);
+        }
+    }
+}
 
-new Promise(resolve => {
+let documentService = null;
+let pdfDoc = null;
 
-    const request = new XMLHttpRequest();
-    request.open('GET', "assets/resources/chicken.pdf", true);
-    request.responseType = 'blob';
-    request.onload = function() {
-        resolve(request.response);
-    };
-    request.send();
-}).then(pdf => {
-    return documentService.loadWith({
+export async function loadPDF() {
+    documentService = new PDFjsDocumentService();
+    const pdf = await (await fetch("assets/resources/chicken.pdf")).blob();
+    const pdfDocument = await documentService.loadWith({
         container: document.getElementById("viewerContainer"),
         pdf: pdf,
         layerStorage: URI.from("mem://chicken.pdf")
-    })
-}).then(it => {
+    });
 
     const highlightService = new HighlightService();
 
     const highlightButton = new HighlightButton(highlightService);
     const clearButton = new ClearButton(highlightService);
-    const penButton = new PenButton(it.toolbox.freehand);
-    const eraserButton = new EraserButton(it.toolbox.eraser);
+    const penButton = new PenButton(pdfDocument.toolbox.freehand);
+    const eraserButton = new EraserButton(pdfDocument.toolbox.eraser);
 
     // search
     const searchButton = document.getElementById("search-button");
@@ -286,72 +295,89 @@ new Promise(resolve => {
     const searchField = document.getElementById("search-term");
 
     searchButton.addEventListener("click", () => {
-        it.searchController.search(searchField.value, {fuzzy: true, searchPhrase: true, highlightAll: true});
+        pdfDocument.searchController.search(searchField.value, {fuzzy: true, searchPhrase: true, highlightAll: true});
     });
 
     previousSearch.addEventListener("click", () => {
-        it.searchController.previous();
+        pdfDocument.searchController.previous();
     });
 
     nextSearch.addEventListener("click", () => {
-        it.searchController.next();
+        pdfDocument.searchController.next();
     });
 
     // zoom
     const zoomIn = document.getElementById("zoom-in-button");
     const zoomOut = document.getElementById("zoom-out-button");
 
     zoomIn.addEventListener("click", () => {
-        it.scale = it.scale * 1.5;
+        pdfDocument.scale = pdfDocument.scale * 1.5;
     });
 
     zoomOut.addEventListener("click", () => {
-        it.scale = it.scale / 1.5;
+        pdfDocument.scale = pdfDocument.scale / 1.5;
     });
 
     // page navigation
     const pageNumberInput = document.getElementById("page-number");
-    pageNumberInput.innerHTML = it.currentPageNumber;
+    pageNumberInput.innerHTML = pdfDocument.currentPageNumber.toString();
 
-    it.pageChange.subscribe(it => {
-        pageNumberInput.innerHTML = it.pageNumber;
+    pdfDocument.pageChange.subscribe(it => {
+        pageNumberInput.innerHTML = it.pageNumber.toString();
     });
 
     const pageCountLabel = document.getElementById("page-count-label");
-    pageCountLabel.innerHTML = "/ " + it.pageCount;
+    pageCountLabel.innerHTML = "/ " + pdfDocument.pageCount;
 
     const previousPage = document.getElementById("previous-page");
     const nextPage = document.getElementById("next-page");
 
     previousPage.addEventListener("click", () => {
-        it.currentPageNumber = it.currentPageNumber - 1;
+        pdfDocument.currentPageNumber = pdfDocument.currentPageNumber - 1;
     });
 
     nextPage.addEventListener("click", () => {
-        it.currentPageNumber = it.currentPageNumber + 1;
+        pdfDocument.currentPageNumber = pdfDocument.currentPageNumber + 1;
     });
 
     // sidebar left
-    const sidebarManager = new SidebarManager(it);
+    const sidebarManager = new SidebarManager(pdfDocument);
     sidebarManager.renderOutline();
     sidebarManager.renderThumbnails();
 
-    it.highlighting.enable();
+    pdfDocument.highlighting.enable();
 
     // highlighting
-    it.highlighting.onTextSelection
+    pdfDocument.highlighting.onTextSelection
         .subscribe(it => {
             highlightService.textSelection = it;
             highlightButton.enable();
             clearButton.enable();
         });
 
-    it.highlighting.onTextUnselection
+    pdfDocument.highlighting.onTextUnselection
         .subscribe(() => {
             highlightButton.disable();
             clearButton.disable();
         });
-});
+    pdfDoc = pdfDocument;
+
+}
+
+export function close() {
+    console.log("close");
+    const thumbnails = document.getElementById("thumbnails");
+    while (thumbnails.lastChild) {
+        thumbnails.removeChild(thumbnails.lastChild);
+    }
+    pdfDoc.close();
+    pdfDoc = null;
+    documentService = null;
+}
+
+loadPDF();
 
+document.getElementById("close-page").addEventListener("click", close);
+document.getElementById("load-page").addEventListener("click", loadPDF);