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] 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; })();