From 979635138aa539c4c8d024e901310360f3cf3f1b Mon Sep 17 00:00:00 2001 From: Fabian Lange Date: Tue, 19 Aug 2014 22:05:59 +0200 Subject: [PATCH] Improves rendering performance of annotation layers. This change does the following: * Address TODO to remove getEmptyContainer helper. * Not set container bg-color. The old code is incorrect, causing it to not have any effect. It sets color to an array (item.color) rather css string. Also in most cases it would set it to black background which is incorrect. * only add border instructions when there is actually a border * reduce memory consumption by not creating new 3 element arrays for annotation colors. In fact according to spec, this would be incorrect, as the default should be "transparent" for an empty array. Adobe Reader interprets a missing color array as black however. Note that only Link annotations were actually setting a border style and color. While Text annotations might have calculated a border they did not color it. This behaviour is now controlled by the boolean flag. --- src/core/annotation.js | 26 ++++++++++++---- src/display/annotation_helper.js | 52 +++++++++++++++++--------------- 2 files changed, 47 insertions(+), 31 deletions(-) diff --git a/src/core/annotation.js b/src/core/annotation.js index 881671bd7..927717896 100644 --- a/src/core/annotation.js +++ b/src/core/annotation.js @@ -79,12 +79,26 @@ var Annotation = (function AnnotationClosure() { data.annotationFlags = dict.get('F'); var color = dict.get('C'); - if (isArray(color) && color.length === 3) { - // TODO(mack): currently only supporting rgb; need support different - // colorspaces - data.color = color; - } else { + if (!color) { + // The PDF spec does not mention how a missing color array is interpreted. + // Adobe Reader seems to default to black in this case. data.color = [0, 0, 0]; + } else if (isArray(color)) { + switch (color.length) { + case 0: + // Empty array denotes transparent border. + data.color = null; + break; + case 1: + // TODO: implement DeviceGray + break; + case 3: + data.color = color; + break; + case 4: + // TODO: implement DeviceCMYK + break; + } } // Some types of annotations have border style dict which has more @@ -101,7 +115,7 @@ var Annotation = (function AnnotationClosure() { if (data.borderWidth > 0 && dashArray) { if (!isArray(dashArray)) { // Ignore the border if dashArray is not actually an array, - // this is consistent with the behaviour in Adobe Reader. + // this is consistent with the behaviour in Adobe Reader. data.borderWidth = 0; } else { var dashArrayLength = dashArray.length; diff --git a/src/display/annotation_helper.js b/src/display/annotation_helper.js index 0c01aa3b9..d5ce2dfae 100644 --- a/src/display/annotation_helper.js +++ b/src/display/annotation_helper.js @@ -45,26 +45,27 @@ var AnnotationUtils = (function AnnotationUtilsClosure() { style.fontFamily = fontFamily + fallbackName; } - // TODO(mack): Remove this, it's not really that helpful. - function getEmptyContainer(tagName, rect, borderWidth) { - var bWidth = borderWidth || 0; - var element = document.createElement(tagName); - element.style.borderWidth = bWidth + 'px'; - var width = rect[2] - rect[0] - 2 * bWidth; - var height = rect[3] - rect[1] - 2 * bWidth; - element.style.width = width + 'px'; - element.style.height = height + 'px'; - return element; - } + function initContainer(item, drawBorder) { + var container = document.createElement('section'); + var cstyle = container.style; + var width = item.rect[2] - item.rect[0]; + var height = item.rect[3] - item.rect[1]; - function initContainer(item) { - var container = getEmptyContainer('section', item.rect, item.borderWidth); - container.style.backgroundColor = item.color; - - var color = item.color; - item.colorCssRgb = Util.makeCssRgb(Math.round(color[0] * 255), - Math.round(color[1] * 255), - Math.round(color[2] * 255)); + var bWidth = item.borderWidth || 0; + if (bWidth) { + width = width - 2 * bWidth; + height = height - 2 * bWidth; + cstyle.borderWidth = bWidth + 'px'; + var color = item.color; + if (drawBorder && color) { + cstyle.borderStyle = 'solid'; + cstyle.borderColor = Util.makeCssRgb(Math.round(color[0] * 255), + Math.round(color[1] * 255), + Math.round(color[2] * 255)); + } + } + cstyle.width = width + 'px'; + cstyle.height = height + 'px'; var highlight = document.createElement('div'); highlight.className = 'annotationHighlight'; @@ -79,7 +80,11 @@ var AnnotationUtils = (function AnnotationUtilsClosure() { } function getHtmlElementForTextWidgetAnnotation(item, commonObjs) { - var element = getEmptyContainer('div', item.rect, 0); + var element = document.createElement('div'); + var width = item.rect[2] - item.rect[0]; + var height = item.rect[3] - item.rect[1]; + element.style.width = width + 'px'; + element.style.height = height + 'px'; element.style.display = 'table'; var content = document.createElement('div'); @@ -109,7 +114,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() { rect[2] = rect[0] + (rect[3] - rect[1]); // make it square } - var container = initContainer(item); + var container = initContainer(item, false); container.className = 'annotText'; var image = document.createElement('img'); @@ -218,12 +223,9 @@ var AnnotationUtils = (function AnnotationUtilsClosure() { } function getHtmlElementForLinkAnnotation(item) { - var container = initContainer(item); + var container = initContainer(item, true); container.className = 'annotLink'; - container.style.borderColor = item.colorCssRgb; - container.style.borderStyle = 'solid'; - var link = document.createElement('a'); link.href = link.title = item.url || '';