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

Merge pull request #16645 from calixteman/editor_simplify_aspectratio

Browse Source 
[Editor] Use css aspect-ratio property to keep the aspect ratio during resize
This commit is contained in:
calixteman 2023-07-06 10:17:03 +02:00 committed by GitHub
commit 2a837ba0b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/display/editor/editor.js
View File

@ -39,7 +39,7 @@ const RESIZER_SIZE = 16;
* Base class for editors.
*/
class AnnotationEditor {
#aspectRatio = 0;
#keepAspectRatio = false;
#boundFocusin = this.focusin.bind(this);
@ -289,14 +289,16 @@ class AnnotationEditor {
setDims(width, height) {
const [parentWidth, parentHeight] = this.parentDimensions;
this.div.style.width = `${(100 * width) / parentWidth}%`;
this.div.style.height = `${(100 * height) / parentHeight}%`;
if (!this.#keepAspectRatio) {
this.div.style.height = `${(100 * height) / parentHeight}%`;
}
}
fixDims() {
const { style } = this.div;
const { height, width } = style;
const widthPercent = width.endsWith("%");
const heightPercent = height.endsWith("%");
const heightPercent = !this.#keepAspectRatio && height.endsWith("%");
if (widthPercent && heightPercent) {
return;
}
@ -305,7 +307,7 @@ class AnnotationEditor {
if (!widthPercent) {
style.width = `${(100 * parseFloat(width)) / parentWidth}%`;
}
if (!heightPercent) {
if (!this.#keepAspectRatio && !heightPercent) {
style.height = `${(100 * parseFloat(height)) / parentHeight}%`;
}
}
@ -622,38 +624,24 @@ class AnnotationEditor {
}
}
/**
* Set the minimum dimensions of the editor.
*/
setMinDims() {
const { style } = this.div;
if (this.#aspectRatio >= 1) {
style.minHeight = `${RESIZER_SIZE}px`;
style.minWidth = `${Math.round(this.#aspectRatio * RESIZER_SIZE)}px`;
} else {
style.minWidth = `${RESIZER_SIZE}px`;
style.minHeight = `${Math.round(RESIZER_SIZE / this.#aspectRatio)}px`;
}
}
/**
* Set the aspect ratio to use when resizing.
* @param {number} width
* @param {number} height
*/
setAspectRatio(width, height) {
this.#aspectRatio = width / height;
}
getHeight(width, height) {
if (
this.#aspectRatio &&
Math.abs(this.#aspectRatio - width / height) > 1e-2
) {
height = Math.ceil(width / this.#aspectRatio);
this.setDims(width, height);
this.#keepAspectRatio = true;
const aspectRatio = width / height;
const { style } = this.div;
style.aspectRatio = aspectRatio;
style.height = "auto";
if (aspectRatio >= 1) {
style.minHeight = `${RESIZER_SIZE}px`;
style.minWidth = `${Math.round(aspectRatio * RESIZER_SIZE)}px`;
} else {
style.minWidth = `${RESIZER_SIZE}px`;
style.minHeight = `${Math.round(RESIZER_SIZE / aspectRatio)}px`;
}
return height;
}
static get MIN_SIZE() {

6
src/display/editor/ink.js
View File

@ -778,6 +778,7 @@ class InkEditor extends AnnotationEditor {
if (this.width) {
// This editor was created in using copy (ctrl+c).
const [parentWidth, parentHeight] = this.parentDimensions;
this.setAspectRatio(this.width * parentWidth, this.height * parentHeight);
this.setAt(
baseX * parentWidth,
baseY * parentHeight,
@ -788,7 +789,6 @@ class InkEditor extends AnnotationEditor {
this.#setCanvasDims();
this.setDims(this.width * parentWidth, this.height * parentHeight);
this.#redraw();
this.setMinDims();
this.div.classList.add("disabled");
} else {
this.div.classList.add("editing");
@ -832,8 +832,6 @@ class InkEditor extends AnnotationEditor {
this.canvas.style.visibility = "hidden";
height = this.getHeight(width, height);
const [parentWidth, parentHeight] = this.parentDimensions;
this.width = width / parentWidth;
this.height = height / parentHeight;
@ -1084,7 +1082,6 @@ class InkEditor extends AnnotationEditor {
this.height = height / parentHeight;
this.setAspectRatio(width, height);
this.setMinDims();
const prevTranslationX = this.translationX;
const prevTranslationY = this.translationY;
@ -1122,7 +1119,6 @@ class InkEditor extends AnnotationEditor {
const scaleFactor = editor.parentScale;
const padding = data.thickness / 2;
editor.setAspectRatio(width, height);
editor.#disableEditing = true;
editor.#realWidth = Math.round(width);
editor.#realHeight = Math.round(height);