Merge pull request #16645 from calixteman/editor_simplify_aspectratio

[Editor] Use css aspect-ratio property to keep the aspect ratio during resize

src/display/editor/editor.js

@@ -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;
+    this.#keepAspectRatio = true;
-  }
+    const aspectRatio = width / height;
-
+    const { style } = this.div;
-  getHeight(width, height) {
+    style.aspectRatio = aspectRatio;
-    if (
+    style.height = "auto";
-      this.#aspectRatio &&
+    if (aspectRatio >= 1) {
-      Math.abs(this.#aspectRatio - width / height) > 1e-2
+      style.minHeight = `${RESIZER_SIZE}px`;
-    ) {
+      style.minWidth = `${Math.round(aspectRatio * RESIZER_SIZE)}px`;
-      height = Math.ceil(width / this.#aspectRatio);
+    } else {
-      this.setDims(width, height);
+      style.minWidth = `${RESIZER_SIZE}px`;
+      style.minHeight = `${Math.round(RESIZER_SIZE / aspectRatio)}px`;
     }
-    return height;
   }
 
   static get MIN_SIZE() {

src/display/editor/ink.js

@@ -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);