From 7faa35e24b3cf40532d866c70dec5db8208d8fae Mon Sep 17 00:00:00 2001
From: Olaf Braun <info@braun-development.de>
Date: Wed, 4 Dec 2024 14:29:18 +0100
Subject: [PATCH] Disable zoom Set default max width and height for the
 selection

---
 ts/WoltLabSuite/Core/Component/Image/Cropper.ts            | 7 ++++---
 .../files/js/WoltLabSuite/Core/Component/Image/Cropper.js  | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index f556ff997b..f85cf2dc8f 100644
--- 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 ab2688dbca..8441b7e135 100644
--- 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) => {
-- 
2.20.1