Creation of circle annotations at center of rectangle.

No longer offsetting cx, cy +15 each.
Arrows now always draw from center of circle.

Author: lopezjo

src/UI/arrow.js

@@ -4,25 +4,58 @@ import {
   disableUserSelect,
   enableUserSelect,
   findSVGAtPoint,
+  findSVGContainer,
   getMetadata,
-  convertToSvgPoint
+  convertToSvgPoint,
+  convertToScreenPoint,
+  findAnnotationAtPoint
 } from './utils';
 
 let _enabled = false;
 let _penSize;
 let _penColor;
 let path;
 let lines;
+let originY;
+let originX;
 
 /**
  * Handle document.mousedown event
  */
-function handleDocumentMousedown() {
-  path = null;
-  lines = [];
+function handleDocumentMousedown(e) {
+  let target = findAnnotationAtPoint(e.clientX, e.clientY);
+  if (target === null)
+    return;
+
+  let type = target.getAttribute('data-pdf-annotate-type');
+  if (type !== 'circle' && type !== 'fillcircle' && type !== 'emptycircle') {
+    return;
+  }
+
+  let svg = findSVGContainer(target);
+  let { documentId } = getMetadata(svg);
+  let annotationId = target.getAttribute('data-pdf-annotate-id');
+
+  let event = e;
+  PDFJSAnnotate.getStoreAdapter().getAnnotation(documentId, annotationId).then((annotation) => {
+    if (annotation) {
+      path = null;
+      lines = [];
 
-  document.addEventListener('mousemove', handleDocumentMousemove);
-  document.addEventListener('mouseup', handleDocumentMouseup);
+      let point = convertToScreenPoint([
+        annotation.cx,
+        annotation.cy
+      ], svg);
+
+      let rect = svg.getBoundingClientRect();
+
+      originX = point[0] + rect.left;
+      originY = point[1] + rect.top;    
+
+      document.addEventListener('mousemove', handleDocumentMousemove);
+      document.addEventListener('mouseup', handleDocumentMouseup);
+    }
+  });
 }
 
 /**
@@ -60,7 +93,10 @@ function handleDocumentMouseup(e) {
  * @param {Event} e The DOM event to be handled
  */
 function handleDocumentMousemove(e) {
-  savePoint(e.clientX, e.clientY);
+  let x = lines.length === 0 ? originX : e.clientX;
+  let y = lines.length === 0 ? originY : e.clientY;
+
+  savePoint(x, y);
 }
 
 /**

src/UI/rect.js

@@ -199,10 +199,10 @@ function saveRect(type, rects, color) {
    if (type === 'circle'||type === 'emptycircle'||type === 'fillcircle') {
     let rect = annotation.rectangles[0];
     delete annotation.rectangles;
-    annotation.cx = rect.x;
-    annotation.cy = rect.y;
-    annotation.r = rect.width;
-    annotation.r = rect.height;
+    annotation.cx = rect.x + rect.width / 2;
+    annotation.cy = rect.y + rect.height / 2;
+    annotation.r = rect.width;    // ignored right now
+    annotation.r = rect.height;   // ignored right now
   }
 
   let { documentId, pageNumber } = getMetadata(svg);

src/UI/utils.js

@@ -250,6 +250,14 @@ export function scaleUp(svg, rect) {
   return result;
 }
 
+// Transform point by matrix
+//
+function applyTransform(p, m) {
+  var xt = p[0] * m[0] + p[1] * m[2] + m[4];
+  var yt = p[0] * m[1] + p[1] * m[3] + m[5];
+  return [xt, yt];
+};
+
 // Transform point by matrix inverse
 //
 function applyInverseTransform(p, m) {
@@ -381,6 +389,19 @@ export function convertToSvgPoint(pt, svg) {
   return applyInverseTransform(pt, xform);
 }
 
+export function convertToScreenPoint(pt, svg) {
+  let result = {};
+  let { viewport } = getMetadata(svg);
+
+  let xform = [ 1, 0, 0, 1, 0, 0 ];
+  xform = scale(xform, viewport.scale, viewport.scale);
+  xform = rotate(xform, viewport.rotation);
+
+  let offset = getTranslation(viewport);
+  xform = translate(xform, offset.x, offset.y);
+
+  return applyTransform(pt, xform);
+}
 
 /**
  * Adjust scale from rendered scale to a normalized scale (100%).

src/render/renderCircle.js

@@ -37,8 +37,8 @@ export default function renderCircle(a) {
 function createCircle(r) {
   let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
   setAttributes(circle, {
-    cx: r.cx+15,
-    cy: r.cy+15,
+    cx: r.cx,
+    cy: r.cy,
     r:30
   });