Handling of rotated and scaled text relative to document.

Author: Angelina1984

src/UI/edit.js

@@ -13,7 +13,6 @@ import {
   findSVGAtPoint,
   getOffsetAnnotationRect,
   getMetadata,
-  scaleDown,
   scaleUp,
   convertToSvgPoint
 } from './utils';

src/UI/rect.js

@@ -7,7 +7,7 @@ import {
   enableUserSelect,
   findSVGAtPoint,
   getMetadata,
-  screenToPdf
+  convertToSvgRect
 } from './utils';
 
 let _enabled = false;
@@ -171,12 +171,12 @@ function saveRect(type, rects, color) {
         offset = r.height / 2;
       }
 
-      return screenToPdf(svg, {
+      return convertToSvgRect({
         y: (r.top + offset) - boundingRect.top,
         x: r.left - boundingRect.left,
         width: r.width,
         height: r.height
-      });
+      }, svg);
     }).filter((r) => r.width > 0 && r.height > 0 && r.x > -1 && r.y > -1)
   };
 

src/UI/text.js

@@ -4,8 +4,7 @@ import {
   BORDER_COLOR,
   findSVGAtPoint,
   getMetadata,
-  scaleDown,
-  screenToPdf
+  convertToSvgPoint
 } from './utils';
 
 let _enabled = false;
@@ -71,21 +70,22 @@ function saveText() {
     if (!svg) {
       return;
     }
+    let height = _textSize;
 
-    let { documentId, pageNumber } = getMetadata(svg);
+    let { documentId, pageNumber, viewport } = getMetadata(svg);
     let rect = svg.getBoundingClientRect();
-    let annotation = Object.assign({
+    let pt = convertToSvgPoint([
+      clientX - rect.left, 
+      clientY -  rect.top + height], svg, viewport);
+    let annotation = {
         type: 'textbox',
         size: _textSize,
         color: _textColor,
-        content: input.value.trim()
-      }, scaleDown(svg, {
-        x: clientX - rect.left,
-        y: clientY -  rect.top,
-        width: input.offsetWidth,
-        height: input.offsetHeight
-      })
-    );
+        content: input.value.trim(),
+        x: pt[0],
+        y: pt[1],
+        rotation: -viewport.rotation
+    }
 
     PDFJSAnnotate.getStoreAdapter().addAnnotation(documentId, pageNumber, annotation)
       .then((annotation) => {

src/UI/utils.js

@@ -134,53 +134,24 @@ export function scaleUp(svg, rect) {
   return result;
 }
 
-export function screenToPdf(svg, rect) {
-  let result = {};
-  let { viewport } = getMetadata(svg);
-
-  let xform = [ 1, 0, 0, 1, 0, 0 ];
-  let trans = getTranslation(viewport);
-  xform = scale(xform, viewport.scale, viewport.scale);
-  xform = rotate(xform, viewport.rotation);
-  xform = translate(xform, trans.x, trans.y);
-
+export function convertToSvgRect(rect, svg, viewport) {
   var pt1 = [rect.x, rect.y];
   var pt2 = [rect.x + rect.width, rect.y + rect.height];
 
-  pt1 = applyInverseTransform(pt1, xform);
-  pt2 = applyInverseTransform(pt2, xform);
-
-  var width = Math.abs(pt2[0] - pt1[0]);
-  var height = Math.abs(pt2[1] - pt1[1]);
+  pt1 = convertToSvgPoint(pt1, svg, viewport);
+  pt2 = convertToSvgPoint(pt2, svg, viewport);
 
-  switch (viewport.rotation % 360) {
-    case 0:
-      result.x = pt1[0];
-      result.y = pt1[1];
-      break;
-    case 90:
-      result.x = pt1[0];
-      result.y = pt1[1] - height;
-      break;
-    case 180:
-      result.x = pt1[0] - width;
-      result.y = pt1[1] - height;
-      break;
-    case 270:
-      result.x = pt1[0] - width;
-      result.y = pt1[1];
-      break;
-  }
-  
-  result.width = width;
-  result.height = height;
-
-  return result;
+  return {
+    x: Math.min(pt1[0], pt2[0]),
+    y: Math.min(pt1[1], pt2[1]),
+    width: Math.abs(pt2[0] - pt1[0]),
+    height: Math.abs(pt2[1] - pt1[1])
+  };
 }
 
-export function convertToSvgPoint(pt, svg) {
+export function convertToSvgPoint(pt, svg, viewport) {
   let result = {};
-  let { viewport } = getMetadata(svg);
+  viewport = viewport || getMetadata(svg).viewport;
 
   let xform = [ 1, 0, 0, 1, 0, 0 ];
   xform = scale(xform, viewport.scale, viewport.scale);

src/render/renderText.js

@@ -9,15 +9,24 @@ import normalizeColor from '../utils/normalizeColor';
  * @return {SVGTextElement} A text to be rendered
  */
 export default function renderText(a) {
-  var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
+  // Text should be rendered at 0 degrees relative to
+  // document rotation
+  let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  let x = a.x;
+  let y = a.y;
 
   setAttributes(text, {
-    x: a.x,
-    y: a.y + parseInt(a.size, 10),
+    x: x,
+    y: y,
     fill: normalizeColor(a.color || '#000'),
-    fontSize: a.size
+    fontSize: a.size,
+    transform: `rotate(${a.rotation}, ${x}, ${y})`
   });
   text.innerHTML = a.content;
 
-  return text;
+  var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  g.appendChild(text);
+
+  return g;
 }