From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Fri, 20 Dec 2024 09:14:19 +0000 (+0100)
Subject: use `$change` instead of changing all values individually, for each value the `$chang... 
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3e736558295438270a7239b5cea39251a3dbf90f;p=GitHub%2FWoltLab%2FWCF.git

use `$change` instead of changing all values individually, for each value the `$change` function was called
---

diff --git a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
index 3b230dc3e6..4c1048249d 100644
--- a/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
+++ b/ts/WoltLabSuite/Core/Component/Image/Cropper.ts
@@ -234,21 +234,22 @@ abstract class ImageCropper {
       const maxSelection: Selection = {
         x: 0,
         y: 0,
-        width: this.cropperCanvasRect!.width,
-        height: this.cropperCanvasRect!.height,
+        width: this.cropperCanvasRect.width,
+        height: this.cropperCanvasRect.height,
       };
 
       if (!inSelection(selection, maxSelection)) {
         event.preventDefault();
 
         // Clamp the position to the boundaries of the canvas.
-        this.cropperSelection!.x = clampValue(selection.x, selection.width, maxSelection.width);
-        this.cropperSelection!.y = clampValue(selection.y, selection.height, maxSelection.height);
-
-        this.cropperSelection!.width = selection.width;
-        this.cropperSelection!.height = selection.height;
-
-        this.cropperSelection!.$render();
+        void this.cropperSelection!.$nextTick().then(() => {
+          this.cropperSelection!.$change(
+            clampValue(selection.x, selection.width, maxSelection.width),
+            clampValue(selection.y, selection.height, maxSelection.height),
+            selection.width,
+            selection.height,
+          );
+        });
       }
     });
   }
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 28648311ed..4d8597286f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Image/Cropper.js
@@ -181,11 +181,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Image/Resizer", "WoltL
                 if (!inSelection(selection, maxSelection)) {
                     event.preventDefault();
                     // Clamp the position to the boundaries of the canvas.
-                    this.cropperSelection.x = clampValue(selection.x, selection.width, maxSelection.width);
-                    this.cropperSelection.y = clampValue(selection.y, selection.height, maxSelection.height);
-                    this.cropperSelection.width = selection.width;
-                    this.cropperSelection.height = selection.height;
-                    this.cropperSelection.$render();
+                    void this.cropperSelection.$nextTick().then(() => {
+                        this.cropperSelection.$change(clampValue(selection.x, selection.width, maxSelection.width), clampValue(selection.y, selection.height, maxSelection.height), selection.width, selection.height);
+                    });
                 }
             });
         }