Merge branch 'master' of https://github.com/DynamicEnvironmentSystems/pdf-annotate.js into ina/add-circle-api

Author: Angelina1984

test/UI/event.spec.js

@@ -14,7 +14,7 @@ describe('UI::event', function () {
   beforeEach(function () {
     svg = mockSVGContainer();
     text = mockTextAnnotation();
-    
+
     document.body.appendChild(svg);
     svg.appendChild(text);
     svg.style.width = '100px';
@@ -45,22 +45,24 @@ describe('UI::event', function () {
   });
 
   it('should emit an event when an annotation is clicked', function (done) {
+
     simulant.fire(svg, 'click', {
-      clientX: rect.left + 15,
-      clientY: rect.top + 15
+      clientX: text.getBoundingClientRect().left + 1,
+      clientY: text.getBoundingClientRect().top + 1
     });
 
     setTimeout(function () {
       equal(annotationClickSpy.calledOnce, true);
+      console.log(annotationClickSpy.getCall(0).args[0], text)
       equal(annotationClickSpy.getCall(0).args[0], text);
       done();
     }, 0);
   });
 
   it('should emit an event when an annotation is blurred', function (done) {
     simulant.fire(svg, 'click', {
-      clientX: rect.left + 15,
-      clientY: rect.top + 15
+      clientX: text.getBoundingClientRect().left + 1,
+      clientY: text.getBoundingClientRect().top + 1
     });
 
     setTimeout(function () {

test/UI/utils.spec.js

@@ -11,7 +11,7 @@ import {
   findSVGAtPoint,
   findAnnotationAtPoint,
   pointIntersectsRect,
-  getAnnotationRect,
+  getOffsetAnnotationRect,
   scaleUp,
   scaleDown,
   getScroll,
@@ -41,12 +41,14 @@ function createPath() {
 let div;
 let svg;
 let text;
+let textSvgGroup;
 
 describe('UI::utils', function () {
   beforeEach(function () {
     div = document.createElement('div');
     svg = mockSVGContainer();
-    text = mockTextAnnotation();
+    textSvgGroup = mockTextAnnotation();
+    text = textSvgGroup.firstChild;
   });
 
   afterEach(function () {
@@ -66,17 +68,16 @@ describe('UI::utils', function () {
   });
 
   it('should find svg container', function () {
-    svg.appendChild(text);
+    svg.appendChild(textSvgGroup);
 
-    equal(findSVGContainer(text), svg);
+    equal(findSVGContainer(textSvgGroup), svg);
   });
 
   it('should find svg at point', function () {
     svg.style.width = '10px';
     svg.style.height = '10px';
     document.body.appendChild(svg);
     let rect = svg.getBoundingClientRect();
-
     equal(findSVGAtPoint(rect.left, rect.top), svg);
     equal(findSVGAtPoint(rect.left + rect.width, rect.top + rect.height), svg);
     equal(findSVGAtPoint(rect.left - 1, rect.top - 1), null);
@@ -85,20 +86,18 @@ describe('UI::utils', function () {
 
   it('should find annotation at point', function () {
     text.setAttribute('data-pdf-annotate-type', 'text');
-    svg.appendChild(text);
+    svg.appendChild(textSvgGroup);
     document.body.appendChild(svg);
 
     let rect = svg.getBoundingClientRect();
     let textRect = text.getBoundingClientRect();
     let textW = textRect.width;
     let textH = textRect.height;
     let textX = parseInt(text.getAttribute('x'), 10);
-    let textY = parseInt(text.getAttribute('y'), 10) - textH; // NOTE this needs to be done to account for how text is rendered
+    let textY = parseInt(text.getAttribute('y'), 10);
 
-    equal(findAnnotationAtPoint(rect.left + textX, rect.top + textY), text);
-    equal(findAnnotationAtPoint(rect.left + textX + textW, rect.top + textY + textH), text);
-    equal(findAnnotationAtPoint(rect.left + textX - 1, rect.top + textY - 1), null);
-    equal(findAnnotationAtPoint(rect.left + textX + textW + 1, rect.top + textY + textH + 1), null);
+    equal(findAnnotationAtPoint(textRect.left + 1, textRect.top + 1), text);
+    equal(findAnnotationAtPoint(textRect.right + 1, textRect.bottom + 1), null);
   });
 
   it('should detect if a rect collides with points', function () {
@@ -163,18 +162,19 @@ describe('UI::utils', function () {
     });
 
     it('should get the size of text', function () {
-      svg.appendChild(text);
+      svg.appendChild(textSvgGroup);
       document.body.appendChild(svg);
 
-      let rect = text.getBoundingClientRect();
+      let rect = textSvgGroup.getBoundingClientRect();
+      let svgRect = svg.getBoundingClientRect()
 
-      deepEqual(getAnnotationRect(text), {
+      deepEqual(getOffsetAnnotationRect(text), {
         width: rect.width,
         height: rect.height,
-        left: parseInt(text.getAttribute('x'), 10),
-        top: parseInt(text.getAttribute('y'), 10) - rect.height,
-        right: parseInt(text.getAttribute('x'), 10) + rect.width,
-        bottom: parseInt(text.getAttribute('y'), 10)
+        left: rect.left - svgRect.left,
+        top: rect.top - svgRect.top,
+        right: rect.right - svgRect.left,
+        bottom: rect.bottom - svgRect.top
       });
     });
 
@@ -195,7 +195,7 @@ describe('UI::utils', function () {
 
       svg.appendChild(rect);
 
-      deepEqual(getAnnotationRect(rect.children[0]), {
+      deepEqual(getOffsetAnnotationRect(rect.children[0]), {
         width: parseInt(rect.children[0].getAttribute('width'), 10),
         height: parseInt(rect.children[0].getAttribute('height'), 10),
         left: parseInt(rect.children[0].getAttribute('x'), 10),
@@ -205,7 +205,7 @@ describe('UI::utils', function () {
       });
     });
   });
-  
+
   it('should get the size of a rectangle', function () {
     document.body.appendChild(svg);
     let rect = renderRect({
@@ -236,7 +236,7 @@ describe('UI::utils', function () {
     rect.setAttribute('data-pdf-annotate-id', 'ann-foo');
     svg.appendChild(rect);
 
-    let size = getAnnotationRect(rect);
+    let size = getOffsetAnnotationRect(rect);
 
     equal(size.left, 53);
     equal(size.top, 103);
@@ -270,7 +270,7 @@ describe('UI::utils', function () {
     equal(rect.width, 300);
     equal(rect.height, 300);
   });
-  
+
   it('should scale down', function () {
     svg.setAttribute('data-pdf-annotate-viewport', JSON.stringify(mockViewport(undefined, undefined, 1.5)));
     let rect = scaleDown(svg, {top: 150, left: 150, width: 300, height: 300});
@@ -309,7 +309,7 @@ describe('UI::utils', function () {
 
     equal(document.head.querySelector('style[data-pdf-annotate-user-select]'), null);
   });
-  
+
   it('should get metadata', function () {
     let {
       documentId,

test/render/appendChild.spec.js

@@ -13,9 +13,9 @@ function testScale(scale = 0.5, passViewportArg = true) {
     x: 200,
     y: 100
   };
-  
+
   let nested = appendChild(svg, annotation, passViewportArg ? viewport : undefined);
-  
+
   if (isFirefox) {
     equal(nested.getAttribute('x'), annotation.x);
     equal(nested.getAttribute('y'), annotation.y);
@@ -90,13 +90,13 @@ describe('render::appendChild', function () {
       width: 25,
       height: 25
     }, viewport);
-    
+
     equal(point.getAttribute('data-pdf-annotate-id'), '1234');
     equal(point.getAttribute('data-pdf-annotate-type'), 'point');
     equal(area.getAttribute('data-pdf-annotate-id'), '5678');
     equal(area.getAttribute('data-pdf-annotate-type'), 'area');
   });
-  
+
   it('should render area', function () {
     let area = appendChild(svg, {
       type: 'area',
@@ -146,7 +146,8 @@ describe('render::appendChild', function () {
   });
 
   it('should render textbox', function () {
-    let textbox = appendChild(svg, {
+
+    let textboxGroup = appendChild(svg, {
       type: 'textbox',
       x: 125,
       y: 400,
@@ -156,6 +157,7 @@ describe('render::appendChild', function () {
       color: '000000',
       content: 'Lorem Ipsum'
     }, viewport);
+    let textbox = textboxGroup.firstChild;
 
     equal(textbox.nodeName.toLowerCase(), 'text');
   });

test/render/index.spec.js

@@ -1,6 +1,7 @@
 import render from '../../src/render';
 import mockViewport from '../mockViewport';
 import { equal } from 'assert';
+import uuid from "../../src/utils/uuid"
 
 function _render(annotations) {
   let data = Array.isArray(annotations) ? { annotations } : annotations;
@@ -16,29 +17,40 @@ describe('render::index', function () {
     viewport = mockViewport();
   });
 
-  it('should reset SVG on each render', function () {
+  it('should not render the same annotation multiple times', function () {
     let viewport = mockViewport(undefined, undefined, .5);
+    let id1 = uuid();
+    let id2 = uuid();
 
     _render([
       {
-        type: 'point',
+        type: 'area',
         x: 0,
-        y: 0
+        y: 0,
+        width: 10,
+        height: 10,
+        uuid: id1
       }
     ]);
 
     equal(svg.children.length, 1);
 
     _render([
       {
-        type: 'point',
+        type: 'area',
         x: 0,
-        y: 0
+        y: 0,
+        width: 10,
+        height: 10,
+        uuid: id1
       },
       {
-        type: 'point',
+        type: 'area',
         x: 25,
-        y: 25
+        y: 25,
+        width: 10,
+        height: 10,
+        uuid: id2
       }
     ]);
 

test/render/renderText.spec.js

@@ -7,16 +7,17 @@ describe('render::renderText', function () {
     const y = 100;
     const size = 20;
     const color = '000';
-    let text = renderText({
+    let gNode = renderText({
       x,
       y,
       size,
       color
     });
+    let text = gNode.firstChild
 
     equal(text.nodeName, 'text');
     equal(text.getAttribute('x'), x);
-    equal(text.getAttribute('y'), y + size);
+    equal(text.getAttribute('y'), y );
     equal(text.getAttribute('fill'), `#${color}`);
     equal(text.getAttribute('font-size'), size);
   });

web/index.js

@@ -17,10 +17,20 @@ PDFJS.workerSrc = './shared/pdf.worker.js';
 
 // Render stuff
 let NUM_PAGES = 0;
+let renderedPages = [];
+let okToRender = false;
 document.getElementById('content-wrapper').addEventListener('scroll', function (e) {
   let visiblePageNum = Math.round(e.target.scrollTop / PAGE_HEIGHT) + 1;
   let visiblePage = document.querySelector(`.page[data-page-number="${visiblePageNum}"][data-loaded="false"]`);
-  if (visiblePage) {
+
+  if (renderedPages.indexOf(visiblePageNum) == -1){
+    okToRender = true;
+    renderedPages.push(visiblePageNum);
+  } else {
+    okToRender = false;
+  }
+
+  if (visiblePage && okToRender) {
     setTimeout(function () {
       UI.renderPage(visiblePageNum, RENDER_OPTIONS);
     });