From fcdf266d8ef03105ff4052f306a77ebcfafeba53 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 11 Jan 2012 16:57:57 -0500 Subject: [PATCH 1/6] Lazy textLayer rendering - pauses after scroll ev --- web/viewer.js | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index ac3fbff0c..359b9d3da 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -960,9 +960,14 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { var self = this; var textDivs = this.textDivs; var textLayerDiv = this.textLayerDiv; - this.textLayerTimer = setInterval(function renderTextLayer() { + var renderTimer = null; + var renderingDone = false; + + // Render the text layer, one div at a time + var renderTextLayer = function textLayerRender() { if (textDivs.length === 0) { - clearInterval(self.textLayerTimer); + clearInterval(renderTimer); + renderingDone = true; return; } var textDiv = textDivs.shift(); @@ -974,7 +979,32 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) / (textDiv.dataset.textLength - 1)) + 'px'; } - }, 0); + } + renderTimer = setInterval(renderTextLayer, 0); + + var scrollTimer = null; + if (window.onscroll) + var oldScrollHandler = window.onscroll; + + // Stop rendering when user scrolls. Resume after XXX milliseconds + // of no scroll events + window.onscroll = function textLayerOnScroll() { + if (oldScrollHandler) + oldScrollHandler.apply(window, arguments); + + // This avoids handler wrapper bloat + if (renderingDone) + window.onscroll = oldScrollHandler; + + // Immediately pause rendering + clearInterval(renderTimer); + + clearTimeout(scrollTimer); + scrollTimer = setTimeout(function() { + // Resume rendering + renderTimer = setInterval(renderTextLayer, 0); + }, 500); + } }; this.appendText = function textLayerBuilderAppendText(text, From 504d9f12c189049a103cb204e4e0f43f92f28831 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 12 Jan 2012 09:16:03 -0500 Subject: [PATCH 2/6] Using addEventListener/removeEventListener --- web/viewer.js | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index 359b9d3da..bde05418b 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -962,9 +962,11 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { var textLayerDiv = this.textLayerDiv; var renderTimer = null; var renderingDone = false; + var renderInterval = 0; + var resumeInterval = 500; // in ms // Render the text layer, one div at a time - var renderTextLayer = function textLayerRender() { + function renderTextLayer() { if (textDivs.length === 0) { clearInterval(renderTimer); renderingDone = true; @@ -980,21 +982,16 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { (textDiv.dataset.textLength - 1)) + 'px'; } } - renderTimer = setInterval(renderTextLayer, 0); - - var scrollTimer = null; - if (window.onscroll) - var oldScrollHandler = window.onscroll; + renderTimer = setInterval(renderTextLayer, renderInterval); // Stop rendering when user scrolls. Resume after XXX milliseconds // of no scroll events - window.onscroll = function textLayerOnScroll() { - if (oldScrollHandler) - oldScrollHandler.apply(window, arguments); - - // This avoids handler wrapper bloat - if (renderingDone) - window.onscroll = oldScrollHandler; + var scrollTimer = null; + function textLayerOnScroll() { + if (renderingDone) { + window.removeEventListener('scroll', textLayerOnScroll, false); + return; + } // Immediately pause rendering clearInterval(renderTimer); @@ -1002,10 +999,12 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { clearTimeout(scrollTimer); scrollTimer = setTimeout(function() { // Resume rendering - renderTimer = setInterval(renderTextLayer, 0); - }, 500); - } - }; + renderTimer = setInterval(renderTextLayer, renderInterval); + }, resumeInterval); + }; // textLayerOnScroll + + window.addEventListener('scroll', textLayerOnScroll, false); + }; // endLayout this.appendText = function textLayerBuilderAppendText(text, fontName, fontSize) { From 499a9b0146bf2b0dbf06963e16a970c4fa8f1586 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 12 Jan 2012 10:15:45 -0500 Subject: [PATCH 3/6] Fix for "Error parsing value of 'letter-spacing'" --- web/viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/viewer.js b/web/viewer.js index bde05418b..72c154bc1 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -973,7 +973,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { return; } var textDiv = textDivs.shift(); - if (textDiv.dataset.textLength >= 1) { // avoid div by zero + 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 From 5f4d462144747c19c9dd41facb7ed18d98202d40 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 18 Jan 2012 11:41:13 -0500 Subject: [PATCH 4/6] Ensure single chars are added to the layer --- web/viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/viewer.js b/web/viewer.js index 72c154bc1..319946ce6 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -974,13 +974,13 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { } 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'; } + textLayerDiv.appendChild(textDiv); } renderTimer = setInterval(renderTextLayer, renderInterval); From 1c7f1b98819ad9d3b8f8e91622974e634a12e041 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 18 Jan 2012 12:07:25 -0500 Subject: [PATCH 5/6] Fix previous commit --- web/viewer.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index 319946ce6..bfa5467a4 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -973,14 +973,18 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { return; } var textDiv = textDivs.shift(); - if (textDiv.dataset.textLength > 1) { // avoid div by zero - // 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'; - } - textLayerDiv.appendChild(textDiv); + if (textDiv.dataset.textLength > 0) { + textLayerDiv.appendChild(textDiv); + + if (textDiv.dataset.textLength > 1) { // avoid div by zero + // Adjust div width (via letterSpacing) to match canvas text + // Due to the .offsetWidth calls, this is slow + // **This needs to come after appending to the DOM** + textDiv.style.letterSpacing = + ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) / + (textDiv.dataset.textLength - 1)) + 'px'; + } + } // textLength > 0 } renderTimer = setInterval(renderTextLayer, renderInterval); From ba4f0e66aa85b9c7ad733535088318dd1265222d Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 19 Jan 2012 09:11:48 -0500 Subject: [PATCH 6/6] reviewer comments --- web/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index bfa5467a4..b6b62af83 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -979,7 +979,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { if (textDiv.dataset.textLength > 1) { // avoid div by zero // Adjust div width (via letterSpacing) to match canvas text // Due to the .offsetWidth calls, this is slow - // **This needs to come after appending to the DOM** + // This needs to come after appending to the DOM textDiv.style.letterSpacing = ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) / (textDiv.dataset.textLength - 1)) + 'px'; @@ -1001,7 +1001,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) { clearInterval(renderTimer); clearTimeout(scrollTimer); - scrollTimer = setTimeout(function() { + scrollTimer = setTimeout(function textLayerScrollTimer() { // Resume rendering renderTimer = setInterval(renderTextLayer, renderInterval); }, resumeInterval);