mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-20 23:28:06 +02:00
Improved annotations' display/behavior.
Added an "InteractiveAnnotation" class to homogenize the annotations' structure (highlighting) and user interactions (for now, used for text and link annotations). Text annotations: The appearance (AP) has priority over the icon (Name). The popup extends horizontally (up to a limit) as well as vertically. Reduced the title's font size. The annotation's color (C) is used to color the popup's background. On top of the mouseover show/hide behavior, a click on the icon will lock the annotation open (for mobile purposes). It can be closed with another click on either the icon or the popup. An annotation printing is conditioned by its "print" bit Unsupported annotations are not displayed at all.
This commit is contained in:
parent
3e931048f2
commit
076b3433b4
8 changed files with 305 additions and 131 deletions
7
web/images/annotation-noicon.svg
Normal file
7
web/images/annotation-noicon.svg
Normal file
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40">
|
||||
</svg>
|
After Width: | Height: | Size: 158 B |
|
@ -306,10 +306,13 @@ var PageView = function pageView(container, id, scale,
|
|||
CustomStyle.setProp('transformOrigin', element, transformOriginStr);
|
||||
|
||||
if (data.subtype === 'Link' && !data.url) {
|
||||
if (data.action) {
|
||||
bindNamedAction(element, data.action);
|
||||
} else {
|
||||
bindLink(element, ('dest' in data) ? data.dest : null);
|
||||
var link = element.getElementsByTagName('a')[0];
|
||||
if (link) {
|
||||
if (data.action) {
|
||||
bindNamedAction(link, data.action);
|
||||
} else {
|
||||
bindLink(link, ('dest' in data) ? data.dest : null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -579,6 +582,7 @@ var PageView = function pageView(container, id, scale,
|
|||
canvasContext: ctx,
|
||||
viewport: this.viewport,
|
||||
textLayer: textLayer,
|
||||
// intent: 'default', // === 'display'
|
||||
continueCallback: function pdfViewcContinueCallback(cont) {
|
||||
if (PDFView.highestPriorityPage !== 'page' + self.id) {
|
||||
self.renderingState = RenderingStates.PAUSED;
|
||||
|
@ -650,13 +654,13 @@ var PageView = function pageView(container, id, scale,
|
|||
|
||||
var renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport
|
||||
viewport: viewport,
|
||||
intent: 'print'
|
||||
};
|
||||
|
||||
pdfPage.render(renderContext).promise.then(function() {
|
||||
// Tell the printEngine that rendering this canvas/page has finished.
|
||||
obj.done();
|
||||
self.pdfPage.destroy();
|
||||
}, function(error) {
|
||||
console.error(error);
|
||||
// Tell the printEngine that rendering this canvas/page has failed.
|
||||
|
@ -666,7 +670,6 @@ var PageView = function pageView(container, id, scale,
|
|||
} else {
|
||||
obj.done();
|
||||
}
|
||||
self.pdfPage.destroy();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
|
@ -1247,14 +1247,7 @@ canvas {
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
.page > a,
|
||||
.annotationLayer > a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.page > a:hover,
|
||||
.annotationLayer > a:hover {
|
||||
.annotLink > a:hover {
|
||||
opacity: 0.2;
|
||||
background: #ff0;
|
||||
box-shadow: 0px 2px 10px #ff0;
|
||||
|
@ -1319,29 +1312,49 @@ canvas {
|
|||
::selection { background:rgba(0,0,255,0.3); }
|
||||
::-moz-selection { background:rgba(0,0,255,0.3); }
|
||||
|
||||
.annotText > div {
|
||||
z-index: 200;
|
||||
.annotationHighlight {
|
||||
position: absolute;
|
||||
padding: 0.6em;
|
||||
max-width: 20em;
|
||||
background-color: #FFFF99;
|
||||
box-shadow: 0px 2px 10px #333;
|
||||
border-radius: 7px;
|
||||
border: 2px #FFFF99 solid;
|
||||
}
|
||||
|
||||
.annotText > img {
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.annotText > img:hover {
|
||||
opacity: 1;
|
||||
.annotTextContentWrapper {
|
||||
position: absolute;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.annotText > div > h1 {
|
||||
font-size: 1.2em;
|
||||
.annotTextContent {
|
||||
z-index: 200;
|
||||
float: left;
|
||||
max-width: 20em;
|
||||
background-color: #FFFF99;
|
||||
box-shadow: 0px 2px 5px #333;
|
||||
border-radius: 2px;
|
||||
padding: 0.6em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.annotTextContent > h1 {
|
||||
font-size: 1em;
|
||||
border-bottom: 1px solid #000000;
|
||||
margin: 0px;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.annotTextContent > p {
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
|
||||
.annotLink > a {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#errorWrapper {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue