From 7bf39eb4ffa82343501a22f8d664295af2136c2a Mon Sep 17 00:00:00 2001
From: Alba <albasb14@gmail.com>
Date: Sat, 27 Jul 2024 19:43:38 +0200
Subject: [PATCH] Fix: Prevent code from running unless there's a change in img
 element size on resize window

---
 .../src/lib/component/image-cropper.component.ts  | 15 ++++++++++-----
 .../src/lib/utils/cropper-position.utils.ts       | 14 ++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts b/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts
index 6fc4c97..44d1477 100644
--- a/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts
+++ b/projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts
@@ -245,15 +245,20 @@ export class ImageCropperComponent implements OnChanges, OnInit {
     if (!this.state.loadedImage) {
       return;
     }
-    if (this.hidden) {
+    if (this.state.hidden) {
       this.resizedWhileHidden = true;
     } else {
       const oldMaxSize = {...this.state.maxSize};
       this.setMaxSize();
-      cropperPosition.resizeCropperAccordingToNewMaxSize(this.state, oldMaxSize);
-      cropperSizeBounds.setAllInternalSizes(this.state);
-      this.settingsUpdated.emit(this.state.getDeepCopyOfSettings());
-      this.cd.markForCheck();
+      if (oldMaxSize.width !== this.state.maxSize.width) {
+        cropperPosition.resizeCropperAccordingToNewMaxSize(
+          this.state, 
+          this.state.maxSize.width / oldMaxSize.width
+        );
+        cropperSizeBounds.setAllInternalSizes(this.state);
+        this.settingsUpdated.emit(this.state.getDeepCopyOfSettings());
+        this.cd.markForCheck();
+      }
     }
   }
 
diff --git a/projects/ngx-image-cropper/src/lib/utils/cropper-position.utils.ts b/projects/ngx-image-cropper/src/lib/utils/cropper-position.utils.ts
index 116a757..0c9edf6 100644
--- a/projects/ngx-image-cropper/src/lib/utils/cropper-position.utils.ts
+++ b/projects/ngx-image-cropper/src/lib/utils/cropper-position.utils.ts
@@ -1,4 +1,4 @@
-import { CropperPosition, MoveStart, BasicEvent, Dimensions } from '../interfaces';
+import { CropperPosition, MoveStart, BasicEvent } from '../interfaces';
 import { HammerInput } from './hammer.utils';
 import { ImageCropperState } from '../state/image-cropper-state';
 
@@ -320,13 +320,11 @@ export function aspectRatioIsCorrect(state: ImageCropperState): boolean {
   return currentCropAspectRatio === state.aspectRatio;
 }
 
-export function resizeCropperAccordingToNewMaxSize(state: ImageCropperState, oldMaxSize: Dimensions): void {
-  if (oldMaxSize.width !== state.maxSize.width || oldMaxSize.height !== state.maxSize.height) {
-    state.cropper.x1 = state.cropper.x1 * state.maxSize.width / oldMaxSize.width;
-    state.cropper.x2 = state.cropper.x2 * state.maxSize.width / oldMaxSize.width;
-    state.cropper.y1 = state.cropper.y1 * state.maxSize.height / oldMaxSize.height;
-    state.cropper.y2 = state.cropper.y2 * state.maxSize.height / oldMaxSize.height;
-  }
+export function resizeCropperAccordingToNewMaxSize(state: ImageCropperState, ratio: number): void {
+  state.cropper.x1 *= ratio;
+  state.cropper.x2 *= ratio;
+  state.cropper.y1 *= ratio;
+  state.cropper.y2 *= ratio;
 }
 
 export function getClientX(event: Event | BasicEvent | TouchEvent | HammerInput): number {