Move text layer UI to viewer.js; fixes adding div with single char; replaces innerHTML to textContent

src/canvas.js

@@ -255,8 +255,9 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
       // Scale so that canvas units are the same as PDF user space units
       this.ctx.scale(cw / mediaBox.width, ch / mediaBox.height);
-      this.textDivs = [];
-      this.textLayerQueue = [];
+
+      if (this.textLayer)
+        this.textLayer.beginLayout();
     },
 
     executeIRQueue: function canvasGraphicsExecuteIRQueue(codeIR,
@@ -320,27 +321,8 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
     endDrawing: function canvasGraphicsEndDrawing() {
       this.ctx.restore();
 
-      var textLayer = this.textLayer;
-      if (!textLayer)
-        return;
-
-      var self = this;
-      var textDivs = this.textDivs;
-      this.textLayerTimer = setInterval(function renderTextLayer() {
-        if (textDivs.length === 0) {
-          clearInterval(self.textLayerTimer);
-          return;
-        }
-        var textDiv = textDivs.shift();
-        if (textDiv.dataset.textLength > 1) { // avoid div by zero
-          textLayer.appendChild(textDiv);
-          // Adjust div width (via letterSpacing) to match canvas text
-          // Due to the .offsetWidth calls, this is slow
-          textDiv.style.letterSpacing =
-            ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) /
-              (textDiv.dataset.textLength - 1)) + 'px';
-        }
-      }, 0);
+      if (this.textLayer)
+        this.textLayer.endLayout();
     },
 
     // Graphics state
@@ -630,24 +612,6 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       return geometry;
     },
 
-    pushTextDivs: function canvasGraphicsPushTextDivs(text) {
-      var div = document.createElement('div');
-      var fontSize = this.current.fontSize;
-
-      // vScale and hScale already contain the scaling to pixel units
-      // as mozCurrentTransform reflects ctx.scale() changes
-      // (see beginDrawing())
-      var fontHeight = fontSize * text.geom.vScale;
-      div.dataset.canvasWidth = text.canvasWidth * text.geom.hScale;
-
-      div.style.fontSize = fontHeight + 'px';
-      div.style.fontFamily = this.current.font.loadedName || 'sans-serif';
-      div.style.left = text.geom.x + 'px';
-      div.style.top = (text.geom.y - fontHeight) + 'px';
-      div.innerHTML = text.str;
-      div.dataset.textLength = text.length;
-      this.textDivs.push(div);
-    },
     showText: function canvasGraphicsShowText(str, skipTextSelection) {
       var ctx = this.ctx;
       var current = this.current;
@@ -753,7 +717,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       if (textSelection)
-        this.pushTextDivs(text);
+        this.textLayer.appendText(text, font.loadedName, fontSize);
 
       return text;
     },
@@ -819,7 +783,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       }
 
       if (textSelection)
-        this.pushTextDivs(text);
+        this.textLayer.appendText(text, font.loadedName, fontSize);
     },
     nextLineShowText: function canvasGraphicsNextLineShowText(text) {
       this.nextLine();

web/viewer.js

@@ -595,7 +595,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
         this.updateStats();
         if (this.onAfterDraw)
           this.onAfterDraw();
-      }).bind(this), textLayer
+      }).bind(this), new TextLayerBuilder(textLayer)
     );
 
     setupLinks(this.content, this.scale);
@@ -726,6 +726,53 @@ var DocumentOutlineView = function documentOutlineView(outline) {
   }
 };
 
+var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
+  this.textLayerDiv = textLayerDiv;
+
+  this.beginLayout = function textLayerBuilderBeginLayout() {
+    this.textDivs = [];
+    this.textLayerQueue = [];
+  };
+
+  this.endLayout = function textLayerBuilderEndLayout() {
+    var self = this;
+    var textDivs = this.textDivs;
+    var textLayerDiv = this.textLayerDiv;
+    this.textLayerTimer = setInterval(function renderTextLayer() {
+      if (textDivs.length === 0) {
+        clearInterval(self.textLayerTimer);
+        return;
+      }
+      var textDiv = textDivs.shift();
+      if (textDiv.dataset.textLength >= 1) { // avoid div by zero
+        textLayerDiv.appendChild(textDiv);
+        // Adjust div width (via letterSpacing) to match canvas text
+        // Due to the .offsetWidth calls, this is slow
+        textDiv.style.letterSpacing =
+          ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) /
+            (textDiv.dataset.textLength - 1)) + 'px';
+      }
+    }, 0);
+  };
+
+  this.appendText = function textLayerBuilderAppendText(text,
+                                                        fontName, fontSize) {
+    var textDiv = document.createElement('div');
+
+    // vScale and hScale already contain the scaling to pixel units
+    var fontHeight = fontSize * text.geom.vScale;
+    textDiv.dataset.canvasWidth = text.canvasWidth * text.geom.hScale;
+
+    textDiv.style.fontSize = fontHeight + 'px';
+    textDiv.style.fontFamily = fontName || 'sans-serif';
+    textDiv.style.left = text.geom.x + 'px';
+    textDiv.style.top = (text.geom.y - fontHeight) + 'px';
+    textDiv.textContent = text.str;
+    textDiv.dataset.textLength = text.length;
+    this.textDivs.push(textDiv);
+  };
+};
+
 window.addEventListener('load', function webViewerLoad(evt) {
   var params = document.location.search.substring(1).split('&');
   for (var i = 0; i < params.length; i++) {