Compute the transformOrigin correctly, for negative values, when rendering AnnotationElements (bug 1627030)

This changes the `transformOrigin` calculations in `AnnotationElement._createContainer` and `PopupAnnotationElement.render`, to ensure that e.g. the clickable area of annotations and/or popups are both positioned correctly.

The problem occurs for *negative* values, since they're not negated correctly because of how the `transformOrigin` strings were build; see issue 12406 for a more in-depth explanation. Previously, for negative values, the `transformOrigin` strings would thus be ignored since they're not valid.
This commit is contained in:
Jonas Jenwald 2020-09-24 10:28:29 +02:00
parent 139c8a8cb5
commit fca53a8eb0
3 changed files with 19 additions and 7 deletions

View File

@ -177,7 +177,7 @@ class AnnotationElement {
]); ]);
container.style.transform = `matrix(${viewport.transform.join(",")})`; container.style.transform = `matrix(${viewport.transform.join(",")})`;
container.style.transformOrigin = `-${rect[0]}px -${rect[1]}px`; container.style.transformOrigin = `${-rect[0]}px ${-rect[1]}px`;
if (!ignoreBorder && data.borderStyle.width > 0) { if (!ignoreBorder && data.borderStyle.width > 0) {
container.style.borderWidth = `${data.borderStyle.width}px`; container.style.borderWidth = `${data.borderStyle.width}px`;
@ -763,12 +763,13 @@ class PopupAnnotationElement extends AnnotationElement {
// Position the popup next to the parent annotation's container. // Position the popup next to the parent annotation's container.
// PDF viewers ignore a popup annotation's rectangle. // PDF viewers ignore a popup annotation's rectangle.
const parentLeft = parseFloat(parentElement.style.left); const parentTop = parseFloat(parentElement.style.top),
const parentWidth = parseFloat(parentElement.style.width); parentLeft = parseFloat(parentElement.style.left),
this.container.style.transformOrigin = `-${parentLeft + parentWidth}px -${ parentWidth = parseFloat(parentElement.style.width);
parentElement.style.top const popupLeft = parentLeft + parentWidth;
}`;
this.container.style.left = `${parentLeft + parentWidth}px`; this.container.style.transformOrigin = `${-popupLeft}px ${-parentTop}px`;
this.container.style.left = `${popupLeft}px`;
this.container.appendChild(popup.render()); this.container.appendChild(popup.render());
return this.container; return this.container;

View File

@ -0,0 +1 @@
https://bug1627030.bmoattachments.org/attachment.cgi?id=9137808

View File

@ -780,6 +780,16 @@
"annotations": true, "annotations": true,
"about": "Annotation with (ridiculously) large border width." "about": "Annotation with (ridiculously) large border width."
}, },
{ "id": "bug1627030",
"file": "pdfs/bug1627030.pdf",
"md5": "4cde6134daa80449c43defd02c1393e2",
"rounds": 1,
"link": true,
"firstPage": 3,
"lastPage": 3,
"type": "eq",
"annotations": true
},
{ "id": "issue4934", { "id": "issue4934",
"file": "pdfs/issue4934.pdf", "file": "pdfs/issue4934.pdf",
"md5": "6099da44f677702ae65a648b51a2226d", "md5": "6099da44f677702ae65a648b51a2226d",