Improve eraser in deleting annotations along its path

Author: MasterOdin

src/UI/eraser.js

@@ -5,13 +5,15 @@ import {
 } from './utils';
 
 let _canerase = false;
+let previousPoint = null;
 
 /**
  *
  * @param {PointerEvent} e
  */
 function handleDocumentDown(e) {
   _canerase = true;
+  previousPoint = [e.clientX, e.clientY];
 }
 
 /**
@@ -20,14 +22,41 @@ function handleDocumentDown(e) {
  */
 function handleDocumentUp(e) {
   _canerase = false;
+  erase(findAnnotationAtPoint(e.clientX, e.clientY));
 }
 
 /**
  *
  * @param {PointerEvent} e
  */
 function handleDocumentMouseMove(e) {
-  erase(findAnnotationAtPoint(e.clientX, e.clientY));
+  if (!_canerase) {
+    return;
+  }
+  let check = [];
+  let diffX = Math.abs(previousPoint[0] - e.clientX);
+  let diffY = Math.abs(previousPoint[1] - e.clientY);
+  if (diffX >= 1 || diffY >= 1) {
+    let maxSteps = Math.round(Math.max(diffX, diffY));
+    let subStepSize = Math.min(diffX, diffY) / maxSteps;
+    let smallerTest = diffX < diffY;
+    let startPoint = [
+      Math.min(previousPoint[0], e.clientX),
+      Math.min(previousPoint[1], e.clientY)
+    ];
+    for (let i = 0; i < maxSteps; i++) {
+      if (smallerTest) {
+        check.push([Math.round(startPoint[0] + (subStepSize * i)), Math.round(startPoint[1] + i)]);
+      }
+      else {
+        check.push([Math.round(startPoint[0] + i), Math.round(startPoint[1] + (subStepSize * i))]);
+      }
+    }
+  }
+  for (let point of check) {
+    erase(findAnnotationAtPoint(point[0], point[1]));
+  }
+  previousPoint = [e.clientX, e.clientY];
 }
 
 function erase(target) {

test/UI/eraser.spec.js

@@ -1,8 +1,8 @@
 import { equal } from 'assert';
 import PDFJSAnnotate from '../../src/PDFJSAnnotate';
 import { firePointerEvent } from '../fireEvent';
-import mockDeleteAnnotation from "../mockDeleteAnnotation";
-import mockGetAnnotations from "../mockGetAnnotations";
+import mockDeleteAnnotation from '../mockDeleteAnnotation';
+import mockGetAnnotations from '../mockGetAnnotations';
 import mockSVGContainer from '../mockSVGContainer';
 import mockTextAnnotation from '../mockTextAnnotation';
 import { enableEraser, disableEraser } from '../../src/UI/eraser';
@@ -17,30 +17,30 @@ function simulateEraserMovement() {
   firePointerEvent(svg, 'pointerdown', {
     clientX: 10,
     clientY: 10,
-    pointerType: "mouse"
+    pointerType: 'mouse'
   });
 
   firePointerEvent(svg, 'pointermove', {
     clientX: 25,
     clientY: 15,
-    pointerType: "mouse"
+    pointerType: 'mouse'
   });
 
   firePointerEvent(svg, 'pointermove', {
     clientX: 30,
     clientY: 30,
-    pointerType: "mouse"
+    pointerType: 'mouse'
   });
 
   firePointerEvent(svg, 'pointerup', {
     clientX: 30,
     clientY: 30,
-    pointerType: "mouse"
+    pointerType: 'mouse'
   });
 }
 
-describe('UI::eraser', function () {
-  beforeEach(function () {
+describe('UI::eraser', function() {
+  beforeEach(function() {
     svg = mockSVGContainer();
     svg.style.width = '100px';
     svg.style.height = '100px';
@@ -53,34 +53,64 @@ describe('UI::eraser', function () {
     PDFJSAnnotate.__storeAdapter.getAnnotations = mockGetAnnotations();
   });
 
-  afterEach(function () {
+  afterEach(function() {
     if (svg.parentNode) {
       svg.parentNode.removeChild(svg);
     }
 
     disableEraser();
   });
 
-  after(function () {
+  after(function() {
     PDFJSAnnotate.__storeAdapter.deleteAnnotation = __deleteAnnotation;
     PDFJSAnnotate.__storeAdapter.getAnnotations = __getAnnotations;
   });
 
-  it('should do nothing when disabled', function (done) {
+  it('should do nothing when disabled', function(done) {
     enableEraser();
     disableEraser();
     simulateEraserMovement();
-    setTimeout(function () {
+    setTimeout(function() {
       equal(deleteAnnotationSpy.called, false);
       done();
     }, 0);
   });
 
-  it('should create an annotation when enabled', function (done) {
+  it('should delete an annotation when enabled', function(done) {
     disableEraser();
     enableEraser();
     simulateEraserMovement();
-    setTimeout(function () {
+    setTimeout(function() {
+      equal(deleteAnnotationSpy.called, true);
+      let args = deleteAnnotationSpy.getCall(0).args;
+      equal(args[0], 'test-document-id');
+      equal(args[1], text.getAttribute('data-pdf-annotate-id'));
+      done();
+    }, 0);
+  });
+
+  it('should delete annotation between pointermove points', function(done) {
+    disableEraser();
+    enableEraser();
+    firePointerEvent(svg, 'pointerdown', {
+      clientX: 0,
+      clientY: 0,
+      pointerType: 'mouse'
+    });
+
+    firePointerEvent(svg, 'pointermove', {
+      clientX: 25,
+      clientY: 20,
+      pointerType: 'mouse'
+    });
+
+    firePointerEvent(svg, 'pointerup', {
+      clientX: 25,
+      clientY: 20,
+      pointerType: 'mouse'
+    });
+
+    setTimeout(function() {
       equal(deleteAnnotationSpy.called, true);
       let args = deleteAnnotationSpy.getCall(0).args;
       equal(args[0], 'test-document-id');