Disable zoom

Set default max width and height for the selection

diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index f556ff997b359e22657585f8aa60c2751c77b386..f85cf2dc8f01783257d0e788df860095255176ee 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
@@ -288,7 +288,7 @@ class MinMaxImageCropper extends ImageCropper {
     <cropper-image skewable scalable translatable rotatable></cropper-image>
     <cropper-shade hidden></cropper-shade>
     <cropper-handle action="move" plain></cropper-handle>
-    <cropper-selection movable zoomable resizable outlined>
+    <cropper-selection movable resizable outlined>
       <cropper-grid role="grid" bordered covered></cropper-grid>
       <cropper-crosshair centered></cropper-crosshair>
       <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
@@ -308,8 +308,8 @@ class MinMaxImageCropper extends ImageCropper {
   protected setCropperStyle() {
     super.setCropperStyle();
 
-    this.cropperSelection!.width = this.minSize.width;
-    this.cropperSelection!.height = this.minSize.height;
+    this.cropperSelection!.width = Math.min(this.width, this.maxSize.width);
+    this.cropperSelection!.height = Math.min(this.height, this.maxSize.height);
     this.cropperCanvas!.style.minWidth = `min(${this.maxSize.width}px, ${this.width}px)`;
     this.cropperCanvas!.style.minHeight = `min(${this.maxSize.height}px, ${this.height}px)`;
   }
@@ -320,6 +320,7 @@ class MinMaxImageCropper extends ImageCropper {
     this.dialog!.addEventListener("extra", () => {
       this.cropperImage!.$center("contain");
       this.cropperSelection!.$reset();
+      this.cropperSelection!.scrollIntoView({ block: "center", inline: "center" });
     });
 
     // Limit the selection to the min/max size

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
index ab2688dbca713c0a9a878adb48cbdb4006df08e7..8441b7e1356d6613c78938aa4f73534935d5cd27 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
@@ -218,7 +218,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
     <cropper-image skewable scalable translatable rotatable></cropper-image>
     <cropper-shade hidden></cropper-shade>
     <cropper-handle action="move" plain></cropper-handle>
-    <cropper-selection movable zoomable resizable outlined>
+    <cropper-selection movable resizable outlined>
       <cropper-grid role="grid" bordered covered></cropper-grid>
       <cropper-crosshair centered></cropper-crosshair>
       <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
@@ -236,8 +236,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
         }
         setCropperStyle() {
             super.setCropperStyle();
-            this.cropperSelection.width = this.minSize.width;
-            this.cropperSelection.height = this.minSize.height;
+            this.cropperSelection.width = Math.min(this.width, this.maxSize.width);
+            this.cropperSelection.height = Math.min(this.height, this.maxSize.height);
             this.cropperCanvas.style.minWidth = `min(${this.maxSize.width}px, ${this.width}px)`;
             this.cropperCanvas.style.minHeight = `min(${this.maxSize.height}px, ${this.height}px)`;
         }
@@ -246,6 +246,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
             this.dialog.addEventListener("extra", () => {
                 this.cropperImage.$center("contain");
                 this.cropperSelection.$reset();
+                this.cropperSelection.scrollIntoView({ block: "center", inline: "center" });
             });
             // Limit the selection to the min/max size
             this.cropperSelection.addEventListener("change", (event) => {