Center the cropper selection in the canvas

diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index 48c54bb115c07350473b2a5dd25966d551aefc4b..f556ff997b359e22657585f8aa60c2751c77b386 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
@@ -155,6 +155,7 @@ abstract class ImageCropper {
     }
     this.cropperImage!.$center("contain");
     this.cropperSelection!.$center();
+    this.cropperSelection!.scrollIntoView({ block: "center", inline: "center" });
 
     // Limit the selection to the canvas boundaries
     this.cropperSelection!.addEventListener("change", (event: CustomEvent) => {

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 5c375ab64725847a2368380b1b14081bd62ea033..ab2688dbca713c0a9a878adb48cbdb4006df08e7 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
@@ -123,6 +123,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
             }
             this.cropperImage.$center("contain");
             this.cropperSelection.$center();
+            this.cropperSelection.scrollIntoView({ block: "center", inline: "center" });
             // Limit the selection to the canvas boundaries
             this.cropperSelection.addEventListener("change", (event) => {
                 // see https://fengyuanchen.github.io/cropperjs/v2/api/cropper-selection.html#limit-boundaries