From 91274d6d2d7081176348c4e4c0579c65782f211d Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Wed, 2 Dec 2015 23:22:42 +0100 Subject: [PATCH 1/6] Rename annotation_helper.js to annotation_layer.js --- examples/acroforms/index.html | 2 +- examples/helloworld/index.html | 2 +- make.js | 2 +- src/display/{annotation_helper.js => annotation_layer.js} | 5 +++-- test/font/font_test.html | 2 +- test/test_slave.html | 2 +- test/unit/unit_test.html | 2 +- web/annotations_layer_builder.js | 2 +- web/viewer.html | 2 +- 9 files changed, 11 insertions(+), 10 deletions(-) rename src/display/{annotation_helper.js => annotation_layer.js} (98%) diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html index d6c644f44..a54ba7045 100644 --- a/examples/acroforms/index.html +++ b/examples/acroforms/index.html @@ -12,7 +12,7 @@ - + - + - + diff --git a/test/test_slave.html b/test/test_slave.html index 7236914d5..ad33b5905 100644 --- a/test/test_slave.html +++ b/test/test_slave.html @@ -26,7 +26,7 @@ limitations under the License. - + diff --git a/test/unit/unit_test.html b/test/unit/unit_test.html index fcce65d19..2fbfa8d8a 100644 --- a/test/unit/unit_test.html +++ b/test/unit/unit_test.html @@ -37,7 +37,7 @@ - + diff --git a/web/annotations_layer_builder.js b/web/annotations_layer_builder.js index 11ae32d54..99d05c603 100644 --- a/web/annotations_layer_builder.js +++ b/web/annotations_layer_builder.js @@ -105,7 +105,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { continue; } - element = PDFJS.AnnotationUtils.getHtmlElement(data, + element = PDFJS.AnnotationLayer.getHtmlElement(data, pdfPage.commonObjs); element.setAttribute('data-annotation-id', data.id); if (typeof mozL10n !== 'undefined') { diff --git a/web/viewer.html b/web/viewer.html index dbbaece08..8cc4ea963 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -61,7 +61,7 @@ See https://github.com/adobe-type-tools/cmap-resources - + From 38567ac3a3109d9bae5f340ddf9f43a23220cb4f Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Wed, 2 Dec 2015 23:35:21 +0100 Subject: [PATCH 2/6] Rename `initContainer(item)` to `getContainer(data)` Naming it this way makes more sense when compared to the core annoatation code. That code also uses `data` for the annotation properties. --- src/display/annotation_layer.js | 35 ++++++++++++++++----------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index ad4e4c699..827613f57 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -22,7 +22,6 @@ var ANNOT_MIN_SIZE = 10; // px var AnnotationLayer = (function AnnotationLayerClosure() { // TODO(mack): This dupes some of the logic in CanvasGraphics.setFont() function setTextStyles(element, item, fontObj) { - var style = element.style; style.fontSize = item.fontSize + 'px'; style.direction = item.fontDirection < 0 ? 'rtl': 'ltr'; @@ -43,34 +42,34 @@ var AnnotationLayer = (function AnnotationLayerClosure() { style.fontFamily = fontFamily + fallbackName; } - function initContainer(item) { + function getContainer(data) { 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]; + var width = data.rect[2] - data.rect[0]; + var height = data.rect[3] - data.rect[1]; // Border - if (item.borderStyle.width > 0) { + if (data.borderStyle.width > 0) { // Border width - container.style.borderWidth = item.borderStyle.width + 'px'; - if (item.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) { + container.style.borderWidth = data.borderStyle.width + 'px'; + if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) { // Underline styles only have a bottom border, so we do not need // to adjust for all borders. This yields a similar result as // Adobe Acrobat/Reader. - width = width - 2 * item.borderStyle.width; - height = height - 2 * item.borderStyle.width; + width = width - 2 * data.borderStyle.width; + height = height - 2 * data.borderStyle.width; } // Horizontal and vertical border radius - var horizontalRadius = item.borderStyle.horizontalCornerRadius; - var verticalRadius = item.borderStyle.verticalCornerRadius; + var horizontalRadius = data.borderStyle.horizontalCornerRadius; + var verticalRadius = data.borderStyle.verticalCornerRadius; if (horizontalRadius > 0 || verticalRadius > 0) { var radius = horizontalRadius + 'px / ' + verticalRadius + 'px'; CustomStyle.setProp('borderRadius', container, radius); } // Border style - switch (item.borderStyle.style) { + switch (data.borderStyle.style) { case AnnotationBorderStyleType.SOLID: container.style.borderStyle = 'solid'; break; @@ -96,11 +95,11 @@ var AnnotationLayer = (function AnnotationLayerClosure() { } // Border color - if (item.color) { + if (data.color) { container.style.borderColor = - Util.makeCssRgb(item.color[0] | 0, - item.color[1] | 0, - item.color[2] | 0); + Util.makeCssRgb(data.color[0] | 0, + data.color[1] | 0, + data.color[2] | 0); } else { // Transparent (invisible) border, so do not draw it at all. container.style.borderWidth = 0; @@ -147,7 +146,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() { rect[2] = rect[0] + (rect[3] - rect[1]); // make it square } - var container = initContainer(item); + var container = getContainer(item); container.className = 'annotText'; var image = document.createElement('img'); @@ -254,7 +253,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() { } function getHtmlElementForLinkAnnotation(item) { - var container = initContainer(item); + var container = getContainer(item); container.className = 'annotLink'; var link = document.createElement('a'); From 2dc3ee38c0cc7c4a31aa6ac586f0bcbcb153f0c7 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Thu, 3 Dec 2015 00:20:18 +0100 Subject: [PATCH 3/6] Move most rendering logic to src/display/annotation_layer.js --- src/display/annotation_layer.js | 50 ++++++++++++++++++++++--------- web/annotations_layer_builder.css | 4 +++ web/annotations_layer_builder.js | 30 +++++-------------- 3 files changed, 47 insertions(+), 37 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 827613f57..2602f419b 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -42,12 +42,28 @@ var AnnotationLayer = (function AnnotationLayerClosure() { style.fontFamily = fontFamily + fallbackName; } - function getContainer(data) { + function getContainer(data, page, viewport) { var container = document.createElement('section'); - var cstyle = container.style; var width = data.rect[2] - data.rect[0]; var height = data.rect[3] - data.rect[1]; + // ID + container.setAttribute('data-annotation-id', data.id); + + // Normalize rectangle + data.rect = Util.normalizeRect([ + data.rect[0], + page.view[3] - data.rect[1] + page.view[1], + data.rect[2], + page.view[3] - data.rect[3] + page.view[1] + ]); + + // Transform + CustomStyle.setProp('transform', container, + 'matrix(' + viewport.transform.join(',') + ')'); + CustomStyle.setProp('transformOrigin', container, + -data.rect[0] + 'px ' + -data.rect[1] + 'px'); + // Border if (data.borderStyle.width > 0) { // Border width @@ -106,12 +122,18 @@ var AnnotationLayer = (function AnnotationLayerClosure() { } } - cstyle.width = width + 'px'; - cstyle.height = height + 'px'; + // Position + container.style.left = data.rect[0] + 'px'; + container.style.top = data.rect[1] + 'px'; + + // Size + container.style.width = width + 'px'; + container.style.height = height + 'px'; + return container; } - function getHtmlElementForTextWidgetAnnotation(item, commonObjs) { + function getHtmlElementForTextWidgetAnnotation(item, page) { var element = document.createElement('div'); var width = item.rect[2] - item.rect[0]; var height = item.rect[3] - item.rect[1]; @@ -127,7 +149,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() { content.style.display = 'table-cell'; var fontObj = item.fontRefName ? - commonObjs.getData(item.fontRefName) : null; + page.commonObjs.getData(item.fontRefName) : null; setTextStyles(content, item, fontObj); element.appendChild(content); @@ -135,7 +157,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() { return element; } - function getHtmlElementForTextAnnotation(item) { + function getHtmlElementForTextAnnotation(item, page, viewport) { var rect = item.rect; // sanity check because of OOo-generated PDFs @@ -146,7 +168,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() { rect[2] = rect[0] + (rect[3] - rect[1]); // make it square } - var container = getContainer(item); + var container = getContainer(item, page, viewport); container.className = 'annotText'; var image = document.createElement('img'); @@ -252,8 +274,8 @@ var AnnotationLayer = (function AnnotationLayerClosure() { return container; } - function getHtmlElementForLinkAnnotation(item) { - var container = getContainer(item); + function getHtmlElementForLinkAnnotation(item, page, viewport) { + var container = getContainer(item, page, viewport); container.className = 'annotLink'; var link = document.createElement('a'); @@ -268,14 +290,14 @@ var AnnotationLayer = (function AnnotationLayerClosure() { return container; } - function getHtmlElement(data, objs) { + function getHtmlElement(data, page, viewport) { switch (data.annotationType) { case AnnotationType.WIDGET: - return getHtmlElementForTextWidgetAnnotation(data, objs); + return getHtmlElementForTextWidgetAnnotation(data, page); case AnnotationType.TEXT: - return getHtmlElementForTextAnnotation(data); + return getHtmlElementForTextAnnotation(data, page, viewport); case AnnotationType.LINK: - return getHtmlElementForLinkAnnotation(data); + return getHtmlElementForLinkAnnotation(data, page, viewport); default: throw new Error('Unsupported annotationType: ' + data.annotationType); } diff --git a/web/annotations_layer_builder.css b/web/annotations_layer_builder.css index 19974ac02..dc5a161c9 100644 --- a/web/annotations_layer_builder.css +++ b/web/annotations_layer_builder.css @@ -13,6 +13,10 @@ * limitations under the License. */ +.annotationLayer section { + position: absolute; +} + .annotationLayer .annotLink > a:hover { opacity: 0.2; background: #ff0; diff --git a/web/annotations_layer_builder.js b/web/annotations_layer_builder.js index 99d05c603..5a72873c0 100644 --- a/web/annotations_layer_builder.js +++ b/web/annotations_layer_builder.js @@ -40,6 +40,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { this.div = null; } + AnnotationsLayerBuilder.prototype = /** @lends AnnotationsLayerBuilder.prototype */ { @@ -81,8 +82,6 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { pdfPage.getAnnotations(getAnnotationsParams).then( function (annotationsData) { viewport = viewport.clone({ dontFlip: true }); - var transform = viewport.transform; - var transformStr = 'matrix(' + transform.join(',') + ')'; var data, element, i, ii; if (self.div) { @@ -91,9 +90,10 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { for (i = 0, ii = annotationsData.length; i < ii; i++) { data = annotationsData[i]; element = self.div.querySelector( - '[data-annotation-id="' + data.id + '"]'); + '[data-annotation-id="' + data.id + '"]'); if (element) { - CustomStyle.setProp('transform', element, transformStr); + CustomStyle.setProp('transform', element, + 'matrix(' + viewport.transform.join(',') + ')'); } } // See PDFPageView.reset() @@ -105,29 +105,12 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { continue; } - element = PDFJS.AnnotationLayer.getHtmlElement(data, - pdfPage.commonObjs); - element.setAttribute('data-annotation-id', data.id); + element = PDFJS.AnnotationLayer.getHtmlElement(data, pdfPage, + viewport); if (typeof mozL10n !== 'undefined') { mozL10n.translate(element); } - var rect = data.rect; - var view = pdfPage.view; - rect = PDFJS.Util.normalizeRect([ - rect[0], - view[3] - rect[1] + view[1], - rect[2], - view[3] - rect[3] + view[1] - ]); - element.style.left = rect[0] + 'px'; - element.style.top = rect[1] + 'px'; - element.style.position = 'absolute'; - - CustomStyle.setProp('transform', element, transformStr); - var transformOriginStr = -rect[0] + 'px ' + -rect[1] + 'px'; - CustomStyle.setProp('transformOrigin', element, transformOriginStr); - if (data.subtype === 'Link' && !data.url) { var link = element.getElementsByTagName('a')[0]; if (link) { @@ -159,6 +142,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { this.div.setAttribute('hidden', 'true'); } }; + return AnnotationsLayerBuilder; })(); From bce3214105dfb78235a2f2277ee32b339c2b1216 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Tue, 8 Dec 2015 23:38:32 +0100 Subject: [PATCH 4/6] Move link creation logic to src/display/annotation_layer.js Additionally simplify the div creation logic (it needs to happen only once, so it should not be in the for-loop) and remove/rename variables for shorter code. --- src/display/annotation_layer.js | 37 +++++++++++++-- web/annotations_layer_builder.js | 77 +++++++++----------------------- web/pdf_page_view.js | 4 +- 3 files changed, 56 insertions(+), 62 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 2602f419b..eea2878c3 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -274,7 +274,29 @@ var AnnotationLayer = (function AnnotationLayerClosure() { return container; } - function getHtmlElementForLinkAnnotation(item, page, viewport) { + function getHtmlElementForLinkAnnotation(item, page, viewport, linkService) { + function bindLink(link, dest) { + link.href = linkService.getDestinationHash(dest); + link.onclick = function annotationsLayerBuilderLinksOnclick() { + if (dest) { + linkService.navigateTo(dest); + } + return false; + }; + if (dest) { + link.className = 'internalLink'; + } + } + + function bindNamedAction(link, action) { + link.href = linkService.getAnchorUrl(''); + link.onclick = function annotationsLayerBuilderNamedActionOnClick() { + linkService.executeNamedAction(action); + return false; + }; + link.className = 'internalLink'; + } + var container = getContainer(item, page, viewport); container.className = 'annotLink'; @@ -285,19 +307,28 @@ var AnnotationLayer = (function AnnotationLayerClosure() { link.target = LinkTargetStringMap[PDFJS.externalLinkTarget]; } + if (!item.url) { + if (item.action) { + bindNamedAction(link, item.action); + } else { + bindLink(link, ('dest' in item) ? item.dest : null); + } + } + container.appendChild(link); return container; } - function getHtmlElement(data, page, viewport) { + function getHtmlElement(data, page, viewport, linkService) { switch (data.annotationType) { case AnnotationType.WIDGET: return getHtmlElementForTextWidgetAnnotation(data, page); case AnnotationType.TEXT: return getHtmlElementForTextAnnotation(data, page, viewport); case AnnotationType.LINK: - return getHtmlElementForLinkAnnotation(data, page, viewport); + return getHtmlElementForLinkAnnotation(data, page, viewport, + linkService); default: throw new Error('Unsupported annotationType: ' + data.annotationType); } diff --git a/web/annotations_layer_builder.js b/web/annotations_layer_builder.js index 5a72873c0..37e23d853 100644 --- a/web/annotations_layer_builder.js +++ b/web/annotations_layer_builder.js @@ -48,47 +48,21 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { * @param {PageViewport} viewport * @param {string} intent (default value is 'display') */ - setupAnnotations: - function AnnotationsLayerBuilder_setupAnnotations(viewport, intent) { - function bindLink(link, dest) { - link.href = linkService.getDestinationHash(dest); - link.onclick = function annotationsLayerBuilderLinksOnclick() { - if (dest) { - linkService.navigateTo(dest); - } - return false; - }; - if (dest) { - link.className = 'internalLink'; - } - } - - function bindNamedAction(link, action) { - link.href = linkService.getAnchorUrl(''); - link.onclick = function annotationsLayerBuilderNamedActionOnClick() { - linkService.executeNamedAction(action); - return false; - }; - link.className = 'internalLink'; - } - - var linkService = this.linkService; - var pdfPage = this.pdfPage; + render: function AnnotationsLayerBuilder_render(viewport, intent) { var self = this; - var getAnnotationsParams = { + var parameters = { intent: (intent === undefined ? 'display' : intent), }; - pdfPage.getAnnotations(getAnnotationsParams).then( - function (annotationsData) { + this.pdfPage.getAnnotations(parameters).then(function (annotations) { viewport = viewport.clone({ dontFlip: true }); var data, element, i, ii; if (self.div) { // If an annotationLayer already exists, refresh its children's - // transformation matrices - for (i = 0, ii = annotationsData.length; i < ii; i++) { - data = annotationsData[i]; + // transformation matrices. + for (i = 0, ii = annotations.length; i < ii; i++) { + data = annotations[i]; element = self.div.querySelector( '[data-annotation-id="' + data.id + '"]'); if (element) { @@ -96,46 +70,35 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { 'matrix(' + viewport.transform.join(',') + ')'); } } - // See PDFPageView.reset() self.div.removeAttribute('hidden'); } else { - for (i = 0, ii = annotationsData.length; i < ii; i++) { - data = annotationsData[i]; + if (annotations.length === 0) { + return; + } + + self.div = document.createElement('div'); + self.div.className = 'annotationLayer'; + self.pageDiv.appendChild(self.div); + + for (i = 0, ii = annotations.length; i < ii; i++) { + data = annotations[i]; if (!data || !data.hasHtml) { continue; } - element = PDFJS.AnnotationLayer.getHtmlElement(data, pdfPage, - viewport); + element = PDFJS.AnnotationLayer.getHtmlElement(data, self.pdfPage, + viewport, + self.linkService); if (typeof mozL10n !== 'undefined') { mozL10n.translate(element); } - - if (data.subtype === 'Link' && !data.url) { - var link = element.getElementsByTagName('a')[0]; - if (link) { - if (data.action) { - bindNamedAction(link, data.action); - } else { - bindLink(link, ('dest' in data) ? data.dest : null); - } - } - } - - if (!self.div) { - var annotationLayerDiv = document.createElement('div'); - annotationLayerDiv.className = 'annotationLayer'; - self.pageDiv.appendChild(annotationLayerDiv); - self.div = annotationLayerDiv; - } - self.div.appendChild(element); } } }); }, - hide: function () { + hide: function AnnotationsLayerBuilder_hide() { if (!this.div) { return; } diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js index 440b31fb4..1e1e68507 100644 --- a/web/pdf_page_view.js +++ b/web/pdf_page_view.js @@ -275,7 +275,7 @@ var PDFPageView = (function PDFPageViewClosure() { } if (redrawAnnotations && this.annotationLayer) { - this.annotationLayer.setupAnnotations(this.viewport, 'display'); + this.annotationLayer.render(this.viewport, 'display'); } }, @@ -507,7 +507,7 @@ var PDFPageView = (function PDFPageViewClosure() { this.annotationLayer = this.annotationsLayerFactory. createAnnotationsLayerBuilder(div, this.pdfPage); } - this.annotationLayer.setupAnnotations(this.viewport, 'display'); + this.annotationLayer.render(this.viewport, 'display'); } div.setAttribute('data-loaded', true); From b1937e7670acfa4a68f07cf2a8b5c7bbeccfbc51 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Tue, 15 Dec 2015 16:27:35 +0100 Subject: [PATCH 5/6] Remove superfluous comments in the annotation layer code --- src/display/annotation_layer.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index eea2878c3..50b54b785 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -47,10 +47,8 @@ var AnnotationLayer = (function AnnotationLayerClosure() { var width = data.rect[2] - data.rect[0]; var height = data.rect[3] - data.rect[1]; - // ID container.setAttribute('data-annotation-id', data.id); - // Normalize rectangle data.rect = Util.normalizeRect([ data.rect[0], page.view[3] - data.rect[1] + page.view[1], @@ -58,15 +56,12 @@ var AnnotationLayer = (function AnnotationLayerClosure() { page.view[3] - data.rect[3] + page.view[1] ]); - // Transform CustomStyle.setProp('transform', container, 'matrix(' + viewport.transform.join(',') + ')'); CustomStyle.setProp('transformOrigin', container, -data.rect[0] + 'px ' + -data.rect[1] + 'px'); - // Border if (data.borderStyle.width > 0) { - // Border width container.style.borderWidth = data.borderStyle.width + 'px'; if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) { // Underline styles only have a bottom border, so we do not need @@ -76,7 +71,6 @@ var AnnotationLayer = (function AnnotationLayerClosure() { height = height - 2 * data.borderStyle.width; } - // Horizontal and vertical border radius var horizontalRadius = data.borderStyle.horizontalCornerRadius; var verticalRadius = data.borderStyle.verticalCornerRadius; if (horizontalRadius > 0 || verticalRadius > 0) { @@ -84,7 +78,6 @@ var AnnotationLayer = (function AnnotationLayerClosure() { CustomStyle.setProp('borderRadius', container, radius); } - // Border style switch (data.borderStyle.style) { case AnnotationBorderStyleType.SOLID: container.style.borderStyle = 'solid'; @@ -110,7 +103,6 @@ var AnnotationLayer = (function AnnotationLayerClosure() { break; } - // Border color if (data.color) { container.style.borderColor = Util.makeCssRgb(data.color[0] | 0, @@ -122,11 +114,9 @@ var AnnotationLayer = (function AnnotationLayerClosure() { } } - // Position container.style.left = data.rect[0] + 'px'; container.style.top = data.rect[1] + 'px'; - // Size container.style.width = width + 'px'; container.style.height = height + 'px'; From edce8daeac6f619b7be3adf68069ba4af808768f Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Tue, 15 Dec 2015 16:48:55 +0100 Subject: [PATCH 6/6] Implement annotation layer rendering and updating in src/display/annotation_layer.js --- src/display/annotation_layer.js | 28 ++++++++++++++++++++++++++- web/annotations_layer_builder.js | 33 +++++++------------------------- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 50b54b785..f24db674a 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -324,8 +324,34 @@ var AnnotationLayer = (function AnnotationLayerClosure() { } } + function render(viewport, div, annotations, page, linkService) { + for (var i = 0, ii = annotations.length; i < ii; i++) { + var data = annotations[i]; + if (!data || !data.hasHtml) { + continue; + } + + var element = getHtmlElement(data, page, viewport, linkService); + div.appendChild(element); + } + } + + function update(viewport, div, annotations) { + for (var i = 0, ii = annotations.length; i < ii; i++) { + var data = annotations[i]; + var element = div.querySelector( + '[data-annotation-id="' + data.id + '"]'); + if (element) { + CustomStyle.setProp('transform', element, + 'matrix(' + viewport.transform.join(',') + ')'); + } + } + div.removeAttribute('hidden'); + } + return { - getHtmlElement: getHtmlElement + render: render, + update: update }; })(); diff --git a/web/annotations_layer_builder.js b/web/annotations_layer_builder.js index 37e23d853..e9b0fbde3 100644 --- a/web/annotations_layer_builder.js +++ b/web/annotations_layer_builder.js @@ -27,8 +27,6 @@ * @class */ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { - var CustomStyle = PDFJS.CustomStyle; - /** * @param {AnnotationsLayerBuilderOptions} options * @constructs AnnotationsLayerBuilder @@ -56,22 +54,14 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { this.pdfPage.getAnnotations(parameters).then(function (annotations) { viewport = viewport.clone({ dontFlip: true }); - var data, element, i, ii; if (self.div) { // If an annotationLayer already exists, refresh its children's // transformation matrices. - for (i = 0, ii = annotations.length; i < ii; i++) { - data = annotations[i]; - element = self.div.querySelector( - '[data-annotation-id="' + data.id + '"]'); - if (element) { - CustomStyle.setProp('transform', element, - 'matrix(' + viewport.transform.join(',') + ')'); - } - } - self.div.removeAttribute('hidden'); + PDFJS.AnnotationLayer.update(viewport, self.div, annotations); } else { + // Create an annotation layer div and render the annotations + // if there is at least one annotation. if (annotations.length === 0) { return; } @@ -80,19 +70,10 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { self.div.className = 'annotationLayer'; self.pageDiv.appendChild(self.div); - for (i = 0, ii = annotations.length; i < ii; i++) { - data = annotations[i]; - if (!data || !data.hasHtml) { - continue; - } - - element = PDFJS.AnnotationLayer.getHtmlElement(data, self.pdfPage, - viewport, - self.linkService); - if (typeof mozL10n !== 'undefined') { - mozL10n.translate(element); - } - self.div.appendChild(element); + PDFJS.AnnotationLayer.render(viewport, self.div, annotations, + self.pdfPage, self.linkService); + if (typeof mozL10n !== 'undefined') { + mozL10n.translate(self.div); } } });