Added script to run inside a docker container: npm run-script startindocker

Changed arrows to draw as a single line that is blue and width of 10 for now instead of an svg path.
Exposed setArrow() to assign line thickness and color.

Author: Angelina1984

dist/pdf-annotate.js

@@ -6,6 +6,7 @@
   "scripts": {
     "test": "karma start --single-run",
     "start": "./scripts/web",
+    "startindocker": "./scripts/web-docker",
     "build": "webpack && MINIFY=1 webpack",
     "coveralls": "cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
   },

dist/pdf-annotate.js.map

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+./scripts/shared
+cp -rf shared/ web/shared/
+
+server=./node_modules/.bin/webpack-dev-server
+$server --host=0.0.0.0 --inline --config ./webpack.web.js --content-base web/

dist/pdf-annotate.min.js

@@ -132,10 +132,11 @@ function savePoint(x, y) {
     y - rect.top
   ], svg);
 
-  lines.push(point);
-
-  if (lines.length <= 1) {
+  if (lines.length < 2) {
+    lines.push(point);
     return;
+  } else {
+    lines[1] = point; // update end point
   }
 
   if (path) {
@@ -156,7 +157,7 @@ function savePoint(x, y) {
  * @param {Number} penSize The size of the lines drawn by the pen
  * @param {String} penColor The color of the lines drawn by the pen
  */
-export function setArrow(penSize = 1, penColor = '000000') {
+export function setArrow(penSize = 10, penColor = '0000FF') {
   _penSize = parseInt(penSize, 10);
   _penColor = penColor;
 }

dist/pdf-annotate.min.js.map

@@ -22,9 +22,10 @@ function handleDocumentMouseup(e) {
   }
   let rect = svg.getBoundingClientRect();
   saveCircle(svg, _type, {
-    x: e.clientX - rect.left,
-    y: e.clientY - rect.top
-  }, "0000FF");
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    }, 15, "0000FF"
+  );
 }
 
 /**
@@ -34,15 +35,15 @@ function handleDocumentMouseup(e) {
  * @param {Object} pt The point to use for annotation
  * @param {String} color The color of the rects
  */
-function saveCircle(svg, type, pt, color) {
+function saveCircle(svg, type, pt, radius, color) {
   // Initialize the annotation
   let svg_pt = convertToSvgPoint([ pt.x, pt.y ], svg)
   let annotation = {
     type,
     color,
     cx: svg_pt[0],
     cy: svg_pt[1],
-    r: 10
+    r: radius
   };
 
   let { documentId, pageNumber } = getMetadata(svg);

package.json

@@ -15,7 +15,7 @@ export default {
   disablePoint, enablePoint,
   disableRect, enableRect,
   disableCircle, enableCircle,
-  disableArrow, enableArrow,
+  disableArrow, enableArrow, setArrow,
   disableText, enableText, setText,
   createPage, renderPage
 };

scripts/web-docker

@@ -10,68 +10,22 @@ import normalizeColor from '../utils/normalizeColor';
  */
 export default function renderArrow(a) {
   let d = [];
-  let arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  
-  /*
-  for (let i=0, l=a.lines.length; i<l; i++) {
-    var p1 = a.lines[i];
-    var p2 = a.lines[i+1];
-    if (p2) {
-      d.push(`M${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`);
-    }
-  }*/
+  let arrow = document.createElementNS('http://www.w3.org/2000/svg', 'line');
 
-  
-   if(a.lines.length>2) {
+  if (a.lines.length == 2) {
     var p1 = a.lines[0];
-    var p2 = a.lines[a.lines.length-1];
-
-    var p3 = []; //arrow 
-    var p4 = [];
-    var p0 = []; //arrow intersection
-
-
- 
-    if (p2) {
-      var k = -(p2[0]-p1[0])/(p2[1]-p1[1]);
-
-      var deltaX = 3;
-      p0[0] = p1[0]+0.8*(p2[0]-p1[0]);
-      p0[1] = p1[1]+0.8*(p2[1]-p1[1]);
-
-      p3[0] = p0[0] + deltaX;
-      p3[1] = p0[1] + k*deltaX;
-
-      p4[0] = p0[0] - deltaX;
-      p4[1] = p0[1] - k*deltaX;
-
-
-      //avoid the fat arrow
-      var dist = Math.sqrt((p4[0]-p3[0])*(p4[0]-p3[0])+(p4[1]-p3[1])*(p4[1]-p3[1]))
-
-      if(Math.abs(p2[1]-p1[1]) < 20 || dist>8 ) {
-
-        p3[0] = p0[0] ;
-        p3[1] = p0[1] + deltaX*1;
-
-        p4[0] = p0[0] ;
-        p4[1] = p0[1] - deltaX*1;
-
-      }
-      d.push(`M${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`);
-       //d.push(`M${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`);
-      d.push(`M${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`);
-      d.push(`M${p3[0]} ${p3[1]} ${p4[0]} ${p4[1]}`);
-      d.push(`M${p4[0]} ${p4[1]} ${p2[0]} ${p2[1]}`);
-     }
-    }
-  
-  setAttributes(arrow, {
-    d: `${d.join(' ')}Z`,
-    stroke: normalizeColor(a.color || '#000'),
-    strokeWidth: a.width || 1,
-    fill: '#000'
-  });
+    var p2 = a.lines[a.lines.length - 1];
+
+    setAttributes(arrow, {
+      x1: p1[0],
+      y1: p1[1],
+      x2: p2[0],
+      y2: p2[1],
+      stroke: normalizeColor(a.color || '#000'),
+      strokeWidth: a.width || 1,
+      fill: '#000'
+    });
+  }
 
   return arrow;
 }