Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MNT-17527 Add support for annotation layer #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

MNT-17527 Add support for annotation layer #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions share/src/main/webapp/components/preview/PdfJs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,70 @@ canvas {
background-color: rgba(0, 100, 0, 0.2);
}

.annotationLayer section {
position: absolute;
}

.annotationLayer .linkAnnotation > a {
position: absolute;
font-size: 1em;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.annotationLayer .linkAnnotation > a /* -ms-a */ {
background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
}

.annotationLayer .linkAnnotation > a:hover {
opacity: 0.2;
background: #ff0;
box-shadow: 0px 2px 10px #ff0;
}

.annotationLayer .textAnnotation img {
position: absolute;
cursor: pointer;
}

.annotationLayer .popupWrapper {
position: absolute;
width: 20em;
}

.annotationLayer .popup {
position: absolute;
z-index: 200;
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 .popup h1 {
font-size: 1em;
border-bottom: 1px solid #000000;
padding-bottom: 0.2em;
}

.annotationLayer .popup p {
padding-top: 0.2em;
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .fileAttachmentAnnotation {
cursor: pointer;
}

/* TODO: file FF bug to support ::-moz-selection:window-inactive
so we can override the opaque grey background when the window is inactive;
see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
Expand Down
83 changes: 80 additions & 3 deletions share/src/main/webapp/components/preview/PdfJs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
* @author Peter Lofgren Loftux AB
* @author Will Abson
* @author Kevin Roast
* @author Younes Regaieg
*/

(function()
Expand Down Expand Up @@ -181,6 +182,16 @@
*/
disableTextLayer : "false",

/**
* Whether annotation overlays on pages should be disabled. Annotations allow users to click links
* from their documents within the preview but reduce rendering performance.
*
* @property disableAnnotationLayer
* @type String
* @default "false"
*/
disableAnnotationLayer : "false",

/**
* Whether to use HTML5 browser storage to persist the page number and zoom level of previously-viewed documents
*
Expand Down Expand Up @@ -1902,7 +1913,7 @@
this.textLayerDiv = null;
this.config = config || {};
this.textContent = null;
this.textLayerDiv = null;
this.annotationLayerDiv = null;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems you removed the parameter variable textLayerDiv here

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forget it. You created a copy of the original one, and then changed it to annotationLayerDiv... sorry

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@douglascrp well... I reused an existing (duplicate property), instead of adding a new one..

this.pdfJsPlugin = pdfJsPlugin;
}

Expand Down Expand Up @@ -1986,6 +1997,16 @@
this.textLayerDiv = textLayerDiv;
this.textLayer = textLayerDiv ? new TextLayerBuilder(textLayerDiv, this.id - 1, this.pdfJsPlugin, viewport) : null;

var annotationLayerDiv = null;
if (!this.parent.config.disableAnnotationLayer)
{
annotationLayerDiv = document.createElement('div');
annotationLayerDiv.className = 'annotationLayer';
this.container.appendChild(annotationLayerDiv);
}
this.annotationLayerDiv = annotationLayerDiv;
this.annotationLayer = annotationLayerDiv ? new AnnotationLayerBuilder(annotationLayerDiv) : null;

var content = this.content,
view = content.view,
ctx = canvas.getContext('2d');
Expand All @@ -1994,7 +2015,8 @@
var renderContext = {
canvasContext : ctx,
viewport : viewport,
textLayer : this.textLayer
textLayer : this.textLayer,
annotationLayer: this.annotationLayer
};

var startTime = 0;
Expand All @@ -2013,7 +2035,12 @@
{
this.getTextContent().then(setTextFn);
}


if (this.annotationLayer)
{
this.annotationLayer.render(this, this.content, viewport);
}

// Hide the loading icon and make the canvas visible again
if (this.loadingIconDiv)
{
Expand Down Expand Up @@ -2944,6 +2971,56 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv, pageIdx, pdfJsPlu
};
};

/**
* Copied from pdf.js viewer and adjusted.
*/
/**
* @class
*/
var AnnotationLayerBuilder = function annotationLayerBuilder(annotationLayerDiv) {

this.annotationLayerDiv = annotationLayerDiv;


/**
* @param {PageViewport} viewport
* @param {string} intent (default value is 'display')
*/
this.render = function AnnotationLayerBuilder_render(self, pdfPage, viewport) {
var intent = 'display';
self.viewport = viewport;
var parameters = {
intent: (intent === undefined ? 'display' : intent),
};

pdfPage.getAnnotations(parameters).then(function (annotations) {
var viewport = self.viewport.clone({ dontFlip: true });
parameters = {
viewport: viewport,
div: self.annotationLayerDiv,
annotations: annotations,
page: pdfPage,
linkService: self.linkService,
downloadManager: self.downloadManager
};

if (self.annotationLayerDiv) {
// If an annotationLayer already exists, refresh its children's
// transformation matrices.
PDFJS.AnnotationLayer.render(parameters);
} else {
console.warn("Annotation DIV does not exist");
}
});
};

this.hide = function AnnotationLayerBuilder_hide() {
if (!this.annotationLayerDiv) {
return;
}
this.annotationLayerDiv.setAttribute('hidden', 'true');
}
};

/**
* PDFFindController - copied from pdf.js project, file viewer.js Changes
Expand Down