From ce57bac447cbe7cf9e264d8aaa3608a5e61c24be Mon Sep 17 00:00:00 2001
From: Adil Allawi <adil@diwan.com>
Date: Wed, 14 Dec 2011 22:28:34 +0000
Subject: [PATCH] Build Text Layer one div at a a time as an Interval instead
 of a all in a TimeOut to keep the browser responsive

---
 src/canvas.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/canvas.js b/src/canvas.js
index 4aaf75508..1efddbefa 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -259,7 +259,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.textLayerQueue = [];
       // Prevent textLayerQueue from being rendered while rendering a new page
       if (this.textLayerTimer)
-        clearTimeout(this.textLayerTimer);
+        clearInterval(this.textLayerTimer);
     },
 
     executeIRQueue: function canvasGraphicsExecuteIRQueue(codeIR,
@@ -329,17 +329,21 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       var self = this;
       var renderTextLayer = function canvasRenderTextLayer() {
+        var finished = true;
         var textDivs = self.textDivs;
-        for (var i = 0, length = textDivs.length; i < length; ++i) {
-          if (textDivs[i].dataset.textLength > 1) { // avoid div by zero
-            textLayer.appendChild(textDivs[i]);
+        if (textDivs.length > 0) {
+          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
-            textDivs[i].style.letterSpacing =
-              ((textDivs[i].dataset.canvasWidth - textDivs[i].offsetWidth) /
-               (textDivs[i].dataset.textLength - 1)) + 'px';
+            textDiv.style.letterSpacing =
+              ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) /
+               (textDiv.dataset.textLength - 1)) + 'px';
           }
+          finished = false;
         }
+        return finished;
       }
       var textLayerQueue = this.textLayerQueue;
       textLayerQueue.push(renderTextLayer);
@@ -347,12 +351,16 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       // Lazy textLayer rendering (to prevent UI hangs)
       // Only render queue if activity has stopped, where "no activity" ==
       // "no beginDrawing() calls in the last N ms"
-      this.textLayerTimer = setTimeout(function renderTextLayerQueue() {
+      this.textLayerTimer = setInterval(function renderTextLayerQueue() {
         // Render most recent (==most relevant) layers first
         for (var i = textLayerQueue.length - 1; i >= 0; i--) {
-          textLayerQueue.pop().call();
+          var finished = textLayerQueue[i].call();
+          if (finished)
+            textLayerQueue.splice(i,1);
         }
-      }, 500);
+        if (textLayerQueue.length == 0)
+          clearInterval(this.textLayerTimer);
+      }, 1);
     },
 
     // Graphics state