Skip to content

Commit 1b5940e

Browse files
committed
Merge pull request mozilla#6714 from timvandermeij/annotation-web-to-src
[api-minor] Move annotation DOM manipulation logic to src/display/annotation_layer.js
2 parents 7f34d40 + edce8da commit 1b5940e

File tree

11 files changed

+140
-139
lines changed

11 files changed

+140
-139
lines changed

examples/acroforms/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script src="../../src/display/pattern_helper.js"></script>
1313
<script src="../../src/display/font_loader.js"></script>
1414
<script src="../../src/display/dom_utils.js"></script>
15-
<script src="../../src/display/annotation_helper.js"></script>
15+
<script src="../../src/display/annotation_layer.js"></script>
1616
<script src="../../src/display/text_layer.js"></script>
1717

1818
<script>

examples/helloworld/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script src="../../src/display/pattern_helper.js"></script>
1313
<script src="../../src/display/font_loader.js"></script>
1414
<script src="../../src/display/dom_utils.js"></script>
15-
<script src="../../src/display/annotation_helper.js"></script>
15+
<script src="../../src/display/annotation_layer.js"></script>
1616
<script src="../../src/display/text_layer.js"></script>
1717

1818
<script>

make.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ target.bundle = function(args) {
531531
'display/pattern_helper.js',
532532
'display/font_loader.js',
533533
'display/dom_utils.js',
534-
'display/annotation_helper.js',
534+
'display/annotation_layer.js',
535535
'display/text_layer.js',
536536
'display/svg.js'
537537
]);

src/display/annotation_helper.js renamed to src/display/annotation_layer.js

Lines changed: 107 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@
1919

2020
var ANNOT_MIN_SIZE = 10; // px
2121

22-
var AnnotationUtils = (function AnnotationUtilsClosure() {
22+
var AnnotationLayer = (function AnnotationLayerClosure() {
2323
// TODO(mack): This dupes some of the logic in CanvasGraphics.setFont()
2424
function setTextStyles(element, item, fontObj) {
25-
2625
var style = element.style;
2726
style.fontSize = item.fontSize + 'px';
2827
style.direction = item.fontDirection < 0 ? 'rtl': 'ltr';
@@ -43,34 +42,43 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
4342
style.fontFamily = fontFamily + fallbackName;
4443
}
4544

46-
function initContainer(item) {
45+
function getContainer(data, page, viewport) {
4746
var container = document.createElement('section');
48-
var cstyle = container.style;
49-
var width = item.rect[2] - item.rect[0];
50-
var height = item.rect[3] - item.rect[1];
51-
52-
// Border
53-
if (item.borderStyle.width > 0) {
54-
// Border width
55-
container.style.borderWidth = item.borderStyle.width + 'px';
56-
if (item.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
47+
var width = data.rect[2] - data.rect[0];
48+
var height = data.rect[3] - data.rect[1];
49+
50+
container.setAttribute('data-annotation-id', data.id);
51+
52+
data.rect = Util.normalizeRect([
53+
data.rect[0],
54+
page.view[3] - data.rect[1] + page.view[1],
55+
data.rect[2],
56+
page.view[3] - data.rect[3] + page.view[1]
57+
]);
58+
59+
CustomStyle.setProp('transform', container,
60+
'matrix(' + viewport.transform.join(',') + ')');
61+
CustomStyle.setProp('transformOrigin', container,
62+
-data.rect[0] + 'px ' + -data.rect[1] + 'px');
63+
64+
if (data.borderStyle.width > 0) {
65+
container.style.borderWidth = data.borderStyle.width + 'px';
66+
if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
5767
// Underline styles only have a bottom border, so we do not need
5868
// to adjust for all borders. This yields a similar result as
5969
// Adobe Acrobat/Reader.
60-
width = width - 2 * item.borderStyle.width;
61-
height = height - 2 * item.borderStyle.width;
70+
width = width - 2 * data.borderStyle.width;
71+
height = height - 2 * data.borderStyle.width;
6272
}
6373

64-
// Horizontal and vertical border radius
65-
var horizontalRadius = item.borderStyle.horizontalCornerRadius;
66-
var verticalRadius = item.borderStyle.verticalCornerRadius;
74+
var horizontalRadius = data.borderStyle.horizontalCornerRadius;
75+
var verticalRadius = data.borderStyle.verticalCornerRadius;
6776
if (horizontalRadius > 0 || verticalRadius > 0) {
6877
var radius = horizontalRadius + 'px / ' + verticalRadius + 'px';
6978
CustomStyle.setProp('borderRadius', container, radius);
7079
}
7180

72-
// Border style
73-
switch (item.borderStyle.style) {
81+
switch (data.borderStyle.style) {
7482
case AnnotationBorderStyleType.SOLID:
7583
container.style.borderStyle = 'solid';
7684
break;
@@ -95,24 +103,27 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
95103
break;
96104
}
97105

98-
// Border color
99-
if (item.color) {
106+
if (data.color) {
100107
container.style.borderColor =
101-
Util.makeCssRgb(item.color[0] | 0,
102-
item.color[1] | 0,
103-
item.color[2] | 0);
108+
Util.makeCssRgb(data.color[0] | 0,
109+
data.color[1] | 0,
110+
data.color[2] | 0);
104111
} else {
105112
// Transparent (invisible) border, so do not draw it at all.
106113
container.style.borderWidth = 0;
107114
}
108115
}
109116

110-
cstyle.width = width + 'px';
111-
cstyle.height = height + 'px';
117+
container.style.left = data.rect[0] + 'px';
118+
container.style.top = data.rect[1] + 'px';
119+
120+
container.style.width = width + 'px';
121+
container.style.height = height + 'px';
122+
112123
return container;
113124
}
114125

115-
function getHtmlElementForTextWidgetAnnotation(item, commonObjs) {
126+
function getHtmlElementForTextWidgetAnnotation(item, page) {
116127
var element = document.createElement('div');
117128
var width = item.rect[2] - item.rect[0];
118129
var height = item.rect[3] - item.rect[1];
@@ -128,15 +139,15 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
128139
content.style.display = 'table-cell';
129140

130141
var fontObj = item.fontRefName ?
131-
commonObjs.getData(item.fontRefName) : null;
142+
page.commonObjs.getData(item.fontRefName) : null;
132143
setTextStyles(content, item, fontObj);
133144

134145
element.appendChild(content);
135146

136147
return element;
137148
}
138149

139-
function getHtmlElementForTextAnnotation(item) {
150+
function getHtmlElementForTextAnnotation(item, page, viewport) {
140151
var rect = item.rect;
141152

142153
// sanity check because of OOo-generated PDFs
@@ -147,7 +158,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
147158
rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
148159
}
149160

150-
var container = initContainer(item);
161+
var container = getContainer(item, page, viewport);
151162
container.className = 'annotText';
152163

153164
var image = document.createElement('img');
@@ -253,8 +264,30 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
253264
return container;
254265
}
255266

256-
function getHtmlElementForLinkAnnotation(item) {
257-
var container = initContainer(item);
267+
function getHtmlElementForLinkAnnotation(item, page, viewport, linkService) {
268+
function bindLink(link, dest) {
269+
link.href = linkService.getDestinationHash(dest);
270+
link.onclick = function annotationsLayerBuilderLinksOnclick() {
271+
if (dest) {
272+
linkService.navigateTo(dest);
273+
}
274+
return false;
275+
};
276+
if (dest) {
277+
link.className = 'internalLink';
278+
}
279+
}
280+
281+
function bindNamedAction(link, action) {
282+
link.href = linkService.getAnchorUrl('');
283+
link.onclick = function annotationsLayerBuilderNamedActionOnClick() {
284+
linkService.executeNamedAction(action);
285+
return false;
286+
};
287+
link.className = 'internalLink';
288+
}
289+
290+
var container = getContainer(item, page, viewport);
258291
container.className = 'annotLink';
259292

260293
var link = document.createElement('a');
@@ -264,26 +297,62 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
264297
link.target = LinkTargetStringMap[PDFJS.externalLinkTarget];
265298
}
266299

300+
if (!item.url) {
301+
if (item.action) {
302+
bindNamedAction(link, item.action);
303+
} else {
304+
bindLink(link, ('dest' in item) ? item.dest : null);
305+
}
306+
}
307+
267308
container.appendChild(link);
268309

269310
return container;
270311
}
271312

272-
function getHtmlElement(data, objs) {
313+
function getHtmlElement(data, page, viewport, linkService) {
273314
switch (data.annotationType) {
274315
case AnnotationType.WIDGET:
275-
return getHtmlElementForTextWidgetAnnotation(data, objs);
316+
return getHtmlElementForTextWidgetAnnotation(data, page);
276317
case AnnotationType.TEXT:
277-
return getHtmlElementForTextAnnotation(data);
318+
return getHtmlElementForTextAnnotation(data, page, viewport);
278319
case AnnotationType.LINK:
279-
return getHtmlElementForLinkAnnotation(data);
320+
return getHtmlElementForLinkAnnotation(data, page, viewport,
321+
linkService);
280322
default:
281323
throw new Error('Unsupported annotationType: ' + data.annotationType);
282324
}
283325
}
284326

327+
function render(viewport, div, annotations, page, linkService) {
328+
for (var i = 0, ii = annotations.length; i < ii; i++) {
329+
var data = annotations[i];
330+
if (!data || !data.hasHtml) {
331+
continue;
332+
}
333+
334+
var element = getHtmlElement(data, page, viewport, linkService);
335+
div.appendChild(element);
336+
}
337+
}
338+
339+
function update(viewport, div, annotations) {
340+
for (var i = 0, ii = annotations.length; i < ii; i++) {
341+
var data = annotations[i];
342+
var element = div.querySelector(
343+
'[data-annotation-id="' + data.id + '"]');
344+
if (element) {
345+
CustomStyle.setProp('transform', element,
346+
'matrix(' + viewport.transform.join(',') + ')');
347+
}
348+
}
349+
div.removeAttribute('hidden');
350+
}
351+
285352
return {
286-
getHtmlElement: getHtmlElement
353+
render: render,
354+
update: update
287355
};
288356
})();
289-
PDFJS.AnnotationUtils = AnnotationUtils;
357+
358+
PDFJS.AnnotationLayer = AnnotationLayer;

test/font/font_test.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<script src="../../src/core/parser.js"></script>
3737
<script src="../../src/core/ps_parser.js"></script>
3838
<script src="../../src/display/pattern_helper.js"></script>
39-
<script src="../../src/display/annotation_helper.js"></script>
39+
<script src="../../src/display/annotation_layer.js"></script>
4040
<script src="../../src/display/text_layer.js"></script>
4141
<script src="../../src/core/stream.js"></script>
4242
<script src="../../src/core/worker.js"></script>

test/test_slave.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<script src="../src/display/pattern_helper.js"></script>
2727
<script src="../src/display/font_loader.js"></script>
2828
<script src="../src/display/dom_utils.js"></script>
29-
<script src="../src/display/annotation_helper.js"></script>
29+
<script src="../src/display/annotation_layer.js"></script>
3030
<script src="../src/display/text_layer.js"></script>
3131
<script src="driver.js"></script>
3232
</head>

test/unit/unit_test.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<script src="../../src/display/pattern_helper.js"></script>
3838
<script src="../../src/display/font_loader.js"></script>
3939
<script src="../../src/display/dom_utils.js"></script>
40-
<script src="../../src/display/annotation_helper.js"></script>
40+
<script src="../../src/display/annotation_layer.js"></script>
4141
<script src="../../src/display/text_layer.js"></script>
4242
<script src="../../src/core/stream.js"></script>
4343
<script src="../../src/core/worker.js"></script>

web/annotations_layer_builder.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
* limitations under the License.
1414
*/
1515

16+
.annotationLayer section {
17+
position: absolute;
18+
}
19+
1620
.annotationLayer .annotLink > a:hover {
1721
opacity: 0.2;
1822
background: #ff0;

0 commit comments

Comments
 (0)