Added new features and made several fixes

package.json

@@ -5,11 +5,12 @@
   "main": "index.js",
   "types": "types",
   "scripts": {
+    "run": "webpack serve --config ./webpack.web.js --static web/",
     "test": "karma start --single-run",
     "start": "./scripts/web",
     "lint": "./node_modules/.bin/eslint .",
     "startindocker": "./scripts/web-docker",
-    "build": "webpack && MINIFY=1 webpack",
+    "build": "webpack build --config ./webpack.web-build.js",
     "codecov": "codecov",
     "types": "tsc"
   },
@@ -38,6 +39,8 @@
   "homepage": "https://github.com/Submitty/pdf-annotate.js#readme",
   "devDependencies": {
     "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.4.5",
     "babel-loader": "^8.0.6",
     "babel-plugin-add-module-exports": "^1.0.2",
@@ -55,7 +58,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "mocha": "^10.4.0",
-    "pdfjs-dist": "4.3.136",
+    "pdfjs-dist": "^4.9.155",
     "sinon": "^18.0.0",
     "sinon-chai": "^3.3.0",
     "terser-webpack-plugin": "^4.2.3",
@@ -76,4 +79,4 @@
     "README.md",
     "webpack.config.js"
   ]
-}
+}

scripts/web

@@ -4,4 +4,4 @@
 rm -rf web/shared/
 cp -rf shared web/
 
-./node_modules/.bin/webpack serve --inline --config ./webpack.web.js --content-base web/
+npx webpack serve --config ./webpack.web.js --static web/

src/PDFJSAnnotate.js

@@ -1,15 +1,15 @@
-import StoreAdapter from './adapter/StoreAdapter';
 import LocalStoreAdapter from './adapter/LocalStoreAdapter';
 import LocalUserStoreAdapter from './adapter/LocalUserStoreAdapter';
+import StoreAdapter from './adapter/StoreAdapter';
+import config from './config';
 import render from './render';
 import UI from './UI';
-import config from './config';
-import uuid from './utils/uuid';
 import {
+  convertToScreenPoint,
   findAnnotationAtPoint,
-  findSVGContainer,
-  convertToScreenPoint
+  findSVGContainer
 } from './UI/utils';
+import uuid from './utils/uuid';
 
 export default {
   findAnnotationAtPoint,
@@ -41,7 +41,7 @@ export default {
   /**
    * Getter for the underlying StoreAdapter property
    *
-   * @return {StoreAdapter}
+   * @return {StoreAdapter} The current StoreAdapter
    */
   getStoreAdapter() {
     return this.__storeAdapter;
@@ -83,7 +83,7 @@ export default {
    * @alias StoreAdapter.getAnnotations
    * @param {String} documentId The ID of the document
    * @param {String} pageNumber The page number
-   * @return {Promise}
+   * @return {Promise} Promise that returns with list of annotations for document and page
    */
   getAnnotations(documentId, pageNumber) {
     return this.getStoreAdapter().getAnnotations(...arguments);

src/UI/arrow.js

@@ -1,14 +1,14 @@
 import PDFJSAnnotate from '../PDFJSAnnotate';
 import { appendChild } from '../render/appendChild';
 import {
+  convertToScreenPoint,
+  convertToSvgPoint,
   disableUserSelect,
   enableUserSelect,
+  findAnnotationAtPoint,
   findSVGAtPoint,
   findSVGContainer,
-  getMetadata,
-  convertToSvgPoint,
-  convertToScreenPoint,
-  findAnnotationAtPoint
+  getMetadata
 } from './utils';
 
 let _enabled = false;
@@ -21,6 +21,8 @@ let originX;
 
 /**
  * Handle document.mousedown event
+ *
+ * @param {Event} e The DOM event to be handled
  */
 function handleDocumentMousedown(e) {
   let target = findAnnotationAtPoint(e.clientX, e.clientY);
@@ -37,25 +39,24 @@ function handleDocumentMousedown(e) {
   let { documentId } = getMetadata(svg);
   let annotationId = target.getAttribute('data-pdf-annotate-id');
 
-  PDFJSAnnotate.getStoreAdapter().getAnnotation(documentId, annotationId).then((annotation) => {
-    if (annotation) {
-      path = null;
-      lines = [];
+  PDFJSAnnotate.getStoreAdapter()
+    .getAnnotation(documentId, annotationId)
+    .then((annotation) => {
+      if (annotation) {
+        path = null;
+        lines = [];
 
-      let point = convertToScreenPoint([
-        annotation.cx,
-        annotation.cy
-      ], svg);
+        let point = convertToScreenPoint([annotation.cx, annotation.cy], svg);
 
-      let rect = svg.getBoundingClientRect();
+        let rect = svg.getBoundingClientRect();
 
-      originX = point[0] + rect.left;
-      originY = point[1] + rect.top;
+        originX = point[0] + rect.left;
+        originY = point[1] + rect.top;
 
-      document.addEventListener('mousemove', handleDocumentMousemove);
-      document.addEventListener('mouseup', handleDocumentMouseup);
-    }
-  });
+        document.addEventListener('mousemove', handleDocumentMousemove);
+        document.addEventListener('mouseup', handleDocumentMouseup);
+      }
+    });
 }
 
 /**
@@ -68,18 +69,20 @@ function handleDocumentMouseup(e) {
   if (lines.length > 1 && (svg = findSVGAtPoint(e.clientX, e.clientY))) {
     let { documentId, pageNumber } = getMetadata(svg);
 
-    PDFJSAnnotate.getStoreAdapter().addAnnotation(documentId, pageNumber, {
-      type: 'arrow',
-      width: _penSize,
-      color: _penColor,
-      lines
-    }).then((annotation) => {
-      if (path) {
-        svg.removeChild(path);
-      }
-
-      appendChild(svg, annotation);
-    });
+    PDFJSAnnotate.getStoreAdapter()
+      .addAnnotation(documentId, pageNumber, {
+        type: 'arrow',
+        width: _penSize,
+        color: _penColor,
+        lines
+      })
+      .then((annotation) => {
+        if (path) {
+          svg.removeChild(path);
+        }
+
+        appendChild(svg, annotation);
+      });
   }
 
   document.removeEventListener('mousemove', handleDocumentMousemove);
@@ -126,10 +129,7 @@ function savePoint(x, y) {
   }
 
   let rect = svg.getBoundingClientRect();
-  let point = convertToSvgPoint([
-    x - rect.left,
-    y - rect.top
-  ], svg);
+  let point = convertToSvgPoint([x - rect.left, y - rect.top], svg);
 
   if (lines.length < 2) {
     lines.push(point);
@@ -166,7 +166,9 @@ export function setArrow(penSize = 10, penColor = '0000FF') {
  * Enable the pen behavior
  */
 export function enableArrow() {
-  if (_enabled) { return; }
+  if (_enabled) {
+    return;
+  }
 
   _enabled = true;
   document.addEventListener('mousedown', handleDocumentMousedown);
@@ -178,11 +180,12 @@ export function enableArrow() {
  * Disable the pen behavior
  */
 export function disableArrow() {
-  if (!_enabled) { return; }
+  if (!_enabled) {
+    return;
+  }
 
   _enabled = false;
   document.removeEventListener('mousedown', handleDocumentMousedown);
   document.removeEventListener('keyup', handleDocumentKeyup);
   enableUserSelect();
 }
-

src/UI/circle.js

@@ -1,10 +1,6 @@
 import PDFJSAnnotate from '../PDFJSAnnotate';
 import { appendChild } from '../render/appendChild';
-import {
-  findSVGAtPoint,
-  getMetadata,
-  convertToSvgPoint
-} from './utils';
+import { convertToSvgPoint, findSVGAtPoint, getMetadata } from './utils';
 
 let _enabled = false;
 let _type;
@@ -33,24 +29,30 @@ function handleDocumentMouseup(e) {
     return;
   }
   let rect = svg.getBoundingClientRect();
-  saveCircle(svg, _type, {
-    x: e.clientX - rect.left,
-    y: e.clientY - rect.top
-  }, _circleRadius, _circleColor);
+  saveCircle(
+    svg,
+    _type,
+    {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    },
+    _circleRadius,
+    _circleColor
+  );
 }
 
 /**
  * Save a circle annotation
  *
- * @param {SVGElement} svg
+ * @param {SVGElement} svg The annotation layer
  * @param {String} type The type of circle (circle, emptycircle, fillcircle)
  * @param {Object} pt The point to use for annotation
- * @param {float} radius
+ * @param {float} radius The radius of circle
  * @param {String} color The color of the rects
  */
 function saveCircle(svg, type, pt, radius, color) {
   // Initialize the annotation
-  let svg_pt = convertToSvgPoint([ pt.x, pt.y ], svg);
+  let svg_pt = convertToSvgPoint([pt.x, pt.y], svg);
   let annotation = {
     type,
     color,
@@ -62,19 +64,24 @@ function saveCircle(svg, type, pt, radius, color) {
   let { documentId, pageNumber } = getMetadata(svg);
 
   // Add the annotation
-  PDFJSAnnotate.getStoreAdapter().addAnnotation(documentId, pageNumber, annotation)
+  PDFJSAnnotate.getStoreAdapter()
+    .addAnnotation(documentId, pageNumber, annotation)
     .then((annotation) => {
       appendChild(svg, annotation);
     });
 }
 
 /**
  * Enable circle behavior
+ *
+ * @param {String} type The selected tool type
  */
 export function enableCircle(type) {
   _type = type;
 
-  if (_enabled) { return; }
+  if (_enabled) {
+    return;
+  }
 
   _enabled = true;
   document.addEventListener('mouseup', handleDocumentMouseup);
@@ -84,7 +91,9 @@ export function enableCircle(type) {
  * Disable circle behavior
  */
 export function disableCircle() {
-  if (!_enabled) { return; }
+  if (!_enabled) {
+    return;
+  }
 
   _enabled = false;
   document.removeEventListener('mouseup', handleDocumentMouseup);