Merge pull request #15060 from calixteman/annotation_rotation

Rotate annotations based on the MK::R value (bug 1675139)
This commit is contained in:
calixteman 2022-06-21 18:03:09 +02:00 committed by GitHub
commit 8d466f5dac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 562 additions and 78 deletions

View file

@ -264,12 +264,39 @@ class AnnotationElement {
container.style.left = `${(100 * (rect[0] - pageLLx)) / pageWidth}%`;
container.style.top = `${(100 * (rect[1] - pageLLy)) / pageHeight}%`;
container.style.width = `${(100 * width) / pageWidth}%`;
container.style.height = `${(100 * height) / pageHeight}%`;
const { rotation } = data;
if (data.hasOwnCanvas || rotation === 0) {
container.style.width = `${(100 * width) / pageWidth}%`;
container.style.height = `${(100 * height) / pageHeight}%`;
} else {
this.setRotation(rotation, container);
}
return container;
}
setRotation(angle, container = this.container) {
const [pageLLx, pageLLy, pageURx, pageURy] = this.viewport.viewBox;
const pageWidth = pageURx - pageLLx;
const pageHeight = pageURy - pageLLy;
const { width, height } = getRectDims(this.data.rect);
let elementWidth, elementHeight;
if (angle % 180 === 0) {
elementWidth = (100 * width) / pageWidth;
elementHeight = (100 * height) / pageHeight;
} else {
elementWidth = (100 * height) / pageWidth;
elementHeight = (100 * width) / pageHeight;
}
container.style.width = `${elementWidth}%`;
container.style.height = `${elementHeight}%`;
container.setAttribute("data-annotation-rotation", (360 - angle) % 360);
}
get _commonActions() {
const setColor = (jsName, styleName, event) => {
const color = event.detail[jsName];
@ -335,6 +362,13 @@ class AnnotationElement {
strokeColor: event => {
setColor("strokeColor", "borderColor", event);
},
rotation: event => {
const angle = event.detail.rotation;
this.setRotation(angle);
this.annotationStorage.setValue(this.data.id, {
rotation: angle,
});
},
});
}