Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6714 from timvandermeij/annotation-web-to-src

Browse Source 
[api-minor] Move annotation DOM manipulation logic to src/display/annotation_layer.js
This commit is contained in:
Tim van der Meij 2015-12-15 19:06:48 +01:00
commit 1b5940edd2
11 changed files with 139 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/acroforms/index.html
View File

@ -12,7 +12,7 @@
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/annotation_layer.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script>

2
examples/helloworld/index.html
View File

@ -12,7 +12,7 @@
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/annotation_layer.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script>

2
make.js
View File

@ -531,7 +531,7 @@ target.bundle = function(args) {
'display/pattern_helper.js',
'display/font_loader.js',
'display/dom_utils.js',
'display/annotation_helper.js',
'display/annotation_layer.js',
'display/text_layer.js',
'display/svg.js'
]);

143
src/display/annotation_helper.js → src/display/annotation_layer.js
View File

@ -19,10 +19,9 @@
var ANNOT_MIN_SIZE = 10; // px
var AnnotationUtils = (function AnnotationUtilsClosure() {
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,43 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
style.fontFamily = fontFamily + fallbackName;
}
function initContainer(item) {
function getContainer(data, page, viewport) {
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) {
// Border width
container.style.borderWidth = item.borderStyle.width + 'px';
if (item.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
container.setAttribute('data-annotation-id', data.id);
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]
]);
CustomStyle.setProp('transform', container,
'matrix(' + viewport.transform.join(',') + ')');
CustomStyle.setProp('transformOrigin', container,
-data.rect[0] + 'px ' + -data.rect[1] + 'px');
if (data.borderStyle.width > 0) {
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;
@ -95,24 +103,27 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
break;
}
// 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;
}
}
cstyle.width = width + 'px';
cstyle.height = height + 'px';
container.style.left = data.rect[0] + 'px';
container.style.top = data.rect[1] + 'px';
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];
@ -128,7 +139,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
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);
@ -136,7 +147,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
return element;
}
function getHtmlElementForTextAnnotation(item) {
function getHtmlElementForTextAnnotation(item, page, viewport) {
var rect = item.rect;
// sanity check because of OOo-generated PDFs
@ -147,7 +158,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
}
var container = initContainer(item);
var container = getContainer(item, page, viewport);
container.className = 'annotText';
var image = document.createElement('img');
@ -253,8 +264,30 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
return container;
}
function getHtmlElementForLinkAnnotation(item) {
var container = initContainer(item);
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';
var link = document.createElement('a');
@ -264,26 +297,62 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
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, objs) {
function getHtmlElement(data, page, viewport, linkService) {
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,
linkService);
default:
throw new Error('Unsupported annotationType: ' + data.annotationType);
}
}
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
};
})();
PDFJS.AnnotationUtils = AnnotationUtils;
PDFJS.AnnotationLayer = AnnotationLayer;

2
test/font/font_test.html
View File

@ -36,7 +36,7 @@
<script src="../../src/core/parser.js"></script>
<script src="../../src/core/ps_parser.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/annotation_layer.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script src="../../src/core/stream.js"></script>
<script src="../../src/core/worker.js"></script>

2
test/test_slave.html
View File

@ -26,7 +26,7 @@ limitations under the License.
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/dom_utils.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script src="../src/display/annotation_layer.js"></script>
<script src="../src/display/text_layer.js"></script>
<script src="driver.js"></script>
</head>

2
test/unit/unit_test.html
View File

@ -37,7 +37,7 @@
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/annotation_layer.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script src="../../src/core/stream.js"></script>
<script src="../../src/core/worker.js"></script>

4
web/annotations_layer_builder.css
View File

@ -13,6 +13,10 @@
* limitations under the License.
*/
.annotationLayer section {
position: absolute;
}
.annotationLayer .annotLink > a:hover {
opacity: 0.2;
background: #ff0;

112
web/annotations_layer_builder.js
View File

@ -27,8 +27,6 @@
* @class
*/
var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
var CustomStyle = PDFJS.CustomStyle;
/**
* @param {AnnotationsLayerBuilderOptions} options
* @constructs AnnotationsLayerBuilder
@ -40,6 +38,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
this.div = null;
}
AnnotationsLayerBuilder.prototype =
/** @lends AnnotationsLayerBuilder.prototype */ {
@ -47,118 +46,47 @@ 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 transform = viewport.transform;
var transformStr = 'matrix(' + transform.join(',') + ')';
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];
element = self.div.querySelector(
'[data-annotation-id="' + data.id + '"]');
if (element) {
CustomStyle.setProp('transform', element, transformStr);
}
}
// See PDFPageView.reset()
self.div.removeAttribute('hidden');
// transformation matrices.
PDFJS.AnnotationLayer.update(viewport, self.div, annotations);
} else {
for (i = 0, ii = annotationsData.length; i < ii; i++) {
data = annotationsData[i];
if (!data || !data.hasHtml) {
continue;
}
// Create an annotation layer div and render the annotations
// if there is at least one annotation.
if (annotations.length === 0) {
return;
}
element = PDFJS.AnnotationUtils.getHtmlElement(data,
pdfPage.commonObjs);
element.setAttribute('data-annotation-id', data.id);
if (typeof mozL10n !== 'undefined') {
mozL10n.translate(element);
}
self.div = document.createElement('div');
self.div.className = 'annotationLayer';
self.pageDiv.appendChild(self.div);
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) {
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);
PDFJS.AnnotationLayer.render(viewport, self.div, annotations,
self.pdfPage, self.linkService);
if (typeof mozL10n !== 'undefined') {
mozL10n.translate(self.div);
}
}
});
},
hide: function () {
hide: function AnnotationsLayerBuilder_hide() {
if (!this.div) {
return;
}
this.div.setAttribute('hidden', 'true');
}
};
return AnnotationsLayerBuilder;
})();

4
web/pdf_page_view.js
View File

@ -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);

2
web/viewer.html
View File

@ -61,7 +61,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/dom_utils.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script src="../src/display/annotation_layer.js"></script>
<script src="../src/display/text_layer.js"></script>
<script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->