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

Merge pull request #6792 from timvandermeij/popup-annotation

Browse Source 
Implement support for Popup annotations
This commit is contained in:
Jonas Jenwald 2015-12-26 18:51:50 +01:00
commit cba8a87f84
8 changed files with 302 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/core/annotation.js
View File

@ -52,8 +52,6 @@ var ColorSpace = coreColorSpace.ColorSpace;
var ObjectLoader = coreObj.ObjectLoader;
var OperatorList = coreEvaluator.OperatorList;
var DEFAULT_ICON_SIZE = 22; // px
/**
* @class
* @alias AnnotationFactory
@ -95,6 +93,9 @@ AnnotationFactory.prototype = /** @lends AnnotationFactory.prototype */ {
}
return new WidgetAnnotation(parameters);
case 'Popup':
return new PopupAnnotation(parameters);
default:
warn('Unimplemented annotation type "' + subtype + '", ' +
'falling back to base annotation');
@ -160,7 +161,7 @@ var Annotation = (function AnnotationClosure() {
// Expose public properties using a data object.
this.data = {};
this.data.id = params.ref.num;
this.data.id = params.ref.toString();
this.data.subtype = dict.get('Subtype').name;
this.data.annotationFlags = this.flags;
this.data.rect = this.rectangle;
@ -639,29 +640,35 @@ var TextWidgetAnnotation = (function TextWidgetAnnotationClosure() {
})();
var TextAnnotation = (function TextAnnotationClosure() {
function TextAnnotation(params) {
Annotation.call(this, params);
var DEFAULT_ICON_SIZE = 22; // px
var dict = params.dict;
var data = this.data;
function TextAnnotation(parameters) {
Annotation.call(this, parameters);
var content = dict.get('Contents');
var title = dict.get('T');
data.annotationType = AnnotationType.TEXT;
data.content = stringToPDFString(content || '');
data.title = stringToPDFString(title || '');
data.hasHtml = true;
this.data.annotationType = AnnotationType.TEXT;
this.data.hasHtml = true;
if (data.hasAppearance) {
data.name = 'NoIcon';
var dict = parameters.dict;
if (this.data.hasAppearance) {
this.data.name = 'NoIcon';
} else {
data.rect[1] = data.rect[3] - DEFAULT_ICON_SIZE;
data.rect[2] = data.rect[0] + DEFAULT_ICON_SIZE;
data.name = dict.has('Name') ? dict.get('Name').name : 'Note';
this.data.rect[1] = this.data.rect[3] - DEFAULT_ICON_SIZE;
this.data.rect[2] = this.data.rect[0] + DEFAULT_ICON_SIZE;
this.data.name = dict.has('Name') ? dict.get('Name').name : 'Note';
}
if (dict.has('C')) {
data.hasBgColor = true;
if (!dict.has('C')) {
// Fall back to the default background color.
this.data.color = null;
}
this.data.hasPopup = dict.has('Popup');
if (!this.data.hasPopup) {
// There is no associated Popup annotation, so the Text annotation
// must create its own popup.
this.data.title = stringToPDFString(dict.get('T') || '');
this.data.contents = stringToPDFString(dict.get('Contents') || '');
this.data.hasHtml = (this.data.title || this.data.contents);
}
}
@ -746,6 +753,39 @@ var LinkAnnotation = (function LinkAnnotationClosure() {
return LinkAnnotation;
})();
var PopupAnnotation = (function PopupAnnotationClosure() {
function PopupAnnotation(parameters) {
Annotation.call(this, parameters);
this.data.annotationType = AnnotationType.POPUP;
var dict = parameters.dict;
var parentItem = dict.get('Parent');
if (!parentItem) {
warn('Popup annotation has a missing or invalid parent annotation.');
return;
}
this.data.parentId = dict.getRaw('Parent').toString();
this.data.title = stringToPDFString(parentItem.get('T') || '');
this.data.contents = stringToPDFString(parentItem.get('Contents') || '');
if (!parentItem.has('C')) {
// Fall back to the default background color.
this.data.color = null;
} else {
this.setColor(parentItem.get('C'));
this.data.color = this.color;
}
this.data.hasHtml = (this.data.title || this.data.contents);
}
Util.inherit(PopupAnnotation, Annotation, {});
return PopupAnnotation;
})();
exports.Annotation = Annotation;
exports.AnnotationBorderStyle = AnnotationBorderStyle;
exports.AnnotationFactory = AnnotationFactory;

325
src/display/annotation_layer.js
View File

@ -36,11 +36,10 @@ var LinkTargetStringMap = sharedUtil.LinkTargetStringMap;
var warn = sharedUtil.warn;
var CustomStyle = displayDOMUtils.CustomStyle;
var ANNOT_MIN_SIZE = 10; // px
/**
* @typedef {Object} AnnotationElementParameters
* @property {Object} data
* @property {HTMLDivElement} layer
* @property {PDFPage} page
* @property {PageViewport} viewport
* @property {IPDFLinkService} linkService
@ -70,6 +69,9 @@ AnnotationElementFactory.prototype =
case AnnotationType.WIDGET:
return new WidgetAnnotationElement(parameters);
case AnnotationType.POPUP:
return new PopupAnnotationElement(parameters);
default:
throw new Error('Unimplemented annotation type "' + subtype + '"');
}
@ -83,6 +85,7 @@ AnnotationElementFactory.prototype =
var AnnotationElement = (function AnnotationElementClosure() {
function AnnotationElement(parameters) {
this.data = parameters.data;
this.layer = parameters.layer;
this.page = parameters.page;
this.viewport = parameters.viewport;
this.linkService = parameters.linkService;
@ -292,8 +295,6 @@ var LinkAnnotationElement = (function LinkAnnotationElementClosure() {
var TextAnnotationElement = (function TextAnnotationElementClosure() {
function TextAnnotationElement(parameters) {
AnnotationElement.call(this, parameters);
this.pinned = false;
}
Util.inherit(TextAnnotationElement, AnnotationElement, {
@ -305,127 +306,35 @@ var TextAnnotationElement = (function TextAnnotationElementClosure() {
* @returns {HTMLSectionElement}
*/
render: function TextAnnotationElement_render() {
var rect = this.data.rect, container = this.container;
this.container.className = 'textAnnotation';
// Sanity check because of OOo-generated PDFs.
if ((rect[3] - rect[1]) < ANNOT_MIN_SIZE) {
rect[3] = rect[1] + ANNOT_MIN_SIZE;
}
if ((rect[2] - rect[0]) < ANNOT_MIN_SIZE) {
rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
}
container.className = 'annotText';
var image = document.createElement('img');
image.style.height = container.style.height;
image.style.width = container.style.width;
var iconName = this.data.name;
var image = document.createElement('img');
image.style.height = this.container.style.height;
image.style.width = this.container.style.width;
image.src = PDFJS.imageResourcesPath + 'annotation-' +
iconName.toLowerCase() + '.svg';
this.data.name.toLowerCase() + '.svg';
image.alt = '[{{type}} Annotation]';
image.dataset.l10nId = 'text_annotation_type';
image.dataset.l10nArgs = JSON.stringify({type: iconName});
image.dataset.l10nArgs = JSON.stringify({type: this.data.name});
var contentWrapper = document.createElement('div');
contentWrapper.className = 'annotTextContentWrapper';
contentWrapper.style.left = Math.floor(rect[2] - rect[0] + 5) + 'px';
contentWrapper.style.top = '-10px';
if (!this.data.hasPopup) {
var popupElement = new PopupElement({
parentContainer: this.container,
parentTrigger: image,
color: this.data.color,
title: this.data.title,
contents: this.data.contents
});
var popup = popupElement.render();
var content = this.content = document.createElement('div');
content.className = 'annotTextContent';
content.setAttribute('hidden', true);
// Position the popup next to the Text annotation's container.
popup.style.left = image.style.width;
var i, ii;
if (this.data.hasBgColor && this.data.color) {
var color = this.data.color;
// Enlighten the color (70%).
var BACKGROUND_ENLIGHT = 0.7;
var r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
var g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
var b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
content.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0);
this.container.appendChild(popup);
}
var title = document.createElement('h1');
var text = document.createElement('p');
title.textContent = this.data.title;
if (!this.data.content && !this.data.title) {
content.setAttribute('hidden', true);
} else {
var e = document.createElement('span');
var lines = this.data.content.split(/(?:\r\n?|\n)/);
for (i = 0, ii = lines.length; i < ii; ++i) {
var line = lines[i];
e.appendChild(document.createTextNode(line));
if (i < (ii - 1)) {
e.appendChild(document.createElement('br'));
}
}
text.appendChild(e);
image.addEventListener('click', this._toggle.bind(this));
image.addEventListener('mouseover', this._show.bind(this, false));
image.addEventListener('mouseout', this._hide.bind(this, false));
content.addEventListener('click', this._hide.bind(this, true));
}
content.appendChild(title);
content.appendChild(text);
contentWrapper.appendChild(content);
container.appendChild(image);
container.appendChild(contentWrapper);
return container;
},
/**
* Toggle the visibility of the content box.
*
* @private
* @memberof TextAnnotationElement
*/
_toggle: function TextAnnotationElement_toggle() {
if (this.pinned) {
this._hide(true);
} else {
this._show(true);
}
},
/**
* Show the content box.
*
* @private
* @param {boolean} pin
* @memberof TextAnnotationElement
*/
_show: function TextAnnotationElement_show(pin) {
if (pin) {
this.pinned = true;
}
if (this.content.hasAttribute('hidden')) {
this.container.style.zIndex += 1;
this.content.removeAttribute('hidden');
}
},
/**
* Hide the content box.
*
* @private
* @param {boolean} unpin
* @memberof TextAnnotationElement
*/
_hide: function TextAnnotationElement_hide(unpin) {
if (unpin) {
this.pinned = false;
}
if (!this.content.hasAttribute('hidden') && !this.pinned) {
this.container.style.zIndex -= 1;
this.content.setAttribute('hidden', true);
}
this.container.appendChild(image);
return this.container;
}
});
@ -499,6 +408,189 @@ var WidgetAnnotationElement = (function WidgetAnnotationElementClosure() {
return WidgetAnnotationElement;
})();
/**
* @class
* @alias PopupAnnotationElement
*/
var PopupAnnotationElement = (function PopupAnnotationElementClosure() {
function PopupAnnotationElement(parameters) {
AnnotationElement.call(this, parameters);
}
Util.inherit(PopupAnnotationElement, AnnotationElement, {
/**
* Render the popup annotation's HTML element in the empty container.
*
* @public
* @memberof PopupAnnotationElement
* @returns {HTMLSectionElement}
*/
render: function PopupAnnotationElement_render() {
this.container.className = 'popupAnnotation';
var selector = '[data-annotation-id="' + this.data.parentId + '"]';
var parentElement = this.layer.querySelector(selector);
if (!parentElement) {
return this.container;
}
var popup = new PopupElement({
parentContainer: parentElement,
parentTrigger: parentElement,
color: this.data.color,
title: this.data.title,
contents: this.data.contents
});
// Position the popup next to the parent annotation's container.
// PDF viewers ignore a popup annotation's rectangle.
var parentLeft = parseFloat(parentElement.style.left);
var parentWidth = parseFloat(parentElement.style.width);
CustomStyle.setProp('transformOrigin', this.container,
-(parentLeft + parentWidth) + 'px -' +
parentElement.style.top);
this.container.style.left = (parentLeft + parentWidth) + 'px';
this.container.appendChild(popup.render());
return this.container;
}
});
return PopupAnnotationElement;
})();
/**
* @class
* @alias PopupElement
*/
var PopupElement = (function PopupElementClosure() {
var BACKGROUND_ENLIGHT = 0.7;
function PopupElement(parameters) {
this.parentContainer = parameters.parentContainer;
this.parentTrigger = parameters.parentTrigger;
this.color = parameters.color;
this.title = parameters.title;
this.contents = parameters.contents;
this.pinned = false;
}
PopupElement.prototype = /** @lends PopupElement.prototype */ {
/**
* Render the popup's HTML element.
*
* @public
* @memberof PopupElement
* @returns {HTMLSectionElement}
*/
render: function PopupElement_render() {
var wrapper = document.createElement('div');
wrapper.className = 'popupWrapper';
var popup = this.popup = document.createElement('div');
popup.className = 'popup';
popup.setAttribute('hidden', true);
var color = this.color;
if (color) {
// Enlighten the color.
var r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
var g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
var b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
popup.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0);
}
var contents = this._formatContents(this.contents);
var title = document.createElement('h1');
title.textContent = this.title;
// Attach the event listeners to the trigger element.
var trigger = this.parentTrigger;
trigger.addEventListener('click', this._toggle.bind(this));
trigger.addEventListener('mouseover', this._show.bind(this, false));
trigger.addEventListener('mouseout', this._hide.bind(this, false));
popup.addEventListener('click', this._hide.bind(this, true));
popup.appendChild(title);
popup.appendChild(contents);
wrapper.appendChild(popup);
return wrapper;
},
/**
* Format the contents of the popup by adding newlines where necessary.
*
* @private
* @param {string} contents
* @memberof PopupElement
* @returns {HTMLParagraphElement}
*/
_formatContents: function PopupElement_formatContents(contents) {
var p = document.createElement('p');
var lines = contents.split(/(?:\r\n?|\n)/);
for (var i = 0, ii = lines.length; i < ii; ++i) {
var line = lines[i];
p.appendChild(document.createTextNode(line));
if (i < (ii - 1)) {
p.appendChild(document.createElement('br'));
}
}
return p;
},
/**
* Toggle the visibility of the popup.
*
* @private
* @memberof PopupElement
*/
_toggle: function PopupElement_toggle() {
if (this.pinned) {
this._hide(true);
} else {
this._show(true);
}
},
/**
* Show the popup.
*
* @private
* @param {boolean} pin
* @memberof PopupElement
*/
_show: function PopupElement_show(pin) {
if (pin) {
this.pinned = true;
}
if (this.popup.hasAttribute('hidden')) {
this.popup.removeAttribute('hidden');
this.parentContainer.style.zIndex += 1;
}
},
/**
* Hide the popup.
*
* @private
* @param {boolean} unpin
* @memberof PopupElement
*/
_hide: function PopupElement_hide(unpin) {
if (unpin) {
this.pinned = false;
}
if (!this.popup.hasAttribute('hidden') && !this.pinned) {
this.popup.setAttribute('hidden', true);
this.parentContainer.style.zIndex -= 1;
}
}
};
return PopupElement;
})();
/**
* @typedef {Object} AnnotationLayerParameters
* @property {PageViewport} viewport
@ -532,6 +624,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
var properties = {
data: data,
layer: parameters.div,
page: parameters.page,
viewport: parameters.viewport,
linkService: parameters.linkService

14
test/annotation_layer_test.css
View File

@ -39,35 +39,37 @@
box-shadow: 0px 2px 10px #ff0;
}
.annotationLayer .annotText > img {
.annotationLayer .textAnnotation img {
position: absolute;
}
.annotationLayer .annotTextContentWrapper {
.annotationLayer .popupWrapper {
position: absolute;
width: 20em;
}
.annotationLayer .annotTextContent {
.annotationLayer .popup {
position: absolute;
z-index: 200;
float: left;
max-width: 20em;
background-color: #FFFF99;
box-shadow: 0px 2px 5px #333;
border-radius: 2px;
padding: 0.6em;
margin-left: 5px;
display: block !important;
font: message-box;
word-wrap: break-word;
}
.annotationLayer .annotTextContent > h1 {
.annotationLayer .popup h1 {
font-size: 1em;
border-bottom: 1px solid #000000;
margin: 0;
padding: 0 0 0.2em 0;
}
.annotationLayer .annotTextContent > p {
.annotationLayer .popup p {
margin: 0;
padding: 0.2em 0 0 0;
}

2
test/pdfs/.gitignore vendored
View File

@ -198,3 +198,5 @@
!issue6108.pdf
!issue6113.pdf
!openoffice.pdf
!annotation-link-text-popup.pdf
!annotation-text-without-popup.pdf

BIN
test/pdfs/annotation-link-text-popup.pdf Normal file
View File

Binary file not shown.

BIN
test/pdfs/annotation-text-without-popup.pdf Normal file
View File

Binary file not shown.

15
test/test_manifest.json
View File

@ -2616,6 +2616,21 @@
"rounds": 1,
"type": "load"
},
{ "id": "annotation-link-text-popup",
"file": "pdfs/annotation-link-text-popup.pdf",
"md5": "4bbf56e81d47232de5f305124ab0ba27",
"rounds": 1,
"type": "eq",
"annotations": true
},
{ "id": "annotation-text-without-popup",
"file": "pdfs/annotation-text-without-popup.pdf",
"md5": "7c2d241babe00139e34b9f8369a909eb",
"rounds": 1,
"type": "eq",
"annotations": true,
"about": "Text annotation without a separate Popup annotation"
},
{ "id": "issue6108",
"file": "pdfs/issue6108.pdf",
"md5": "8961cb55149495989a80bf0487e0f076",

14
web/annotation_layer_builder.css
View File

@ -23,34 +23,36 @@
box-shadow: 0px 2px 10px #ff0;
}
.annotationLayer .annotText > img {
.annotationLayer .textAnnotation img {
position: absolute;
cursor: pointer;
}
.annotationLayer .annotTextContentWrapper {
.annotationLayer .popupWrapper {
position: absolute;
width: 20em;
}
.annotationLayer .annotTextContent {
.annotationLayer .popup {
position: absolute;
z-index: 200;
float: left;
max-width: 20em;
background-color: #FFFF99;
box-shadow: 0px 2px 5px #333;
border-radius: 2px;
padding: 0.6em;
margin-left: 5px;
cursor: pointer;
word-wrap: break-word;
}
.annotationLayer .annotTextContent > h1 {
.annotationLayer .popup h1 {
font-size: 1em;
border-bottom: 1px solid #000000;
padding-bottom: 0.2em;
}
.annotationLayer .annotTextContent > p {
.annotationLayer .popup p {
padding-top: 0.2em;
}