From 752a5b6f3e76d467a839a39aa587deaed953ed72 Mon Sep 17 00:00:00 2001
From: Artur Androsovych <arthurandrosovich@gmail.com>
Date: Thu, 21 Apr 2022 06:43:33 +0300
Subject: [PATCH] perf(module:image): do not run change detection when the
 image preview is clicked (#7309)

---
 components/image/image-preview.component.ts | 13 ++++++++-----
 components/image/image.spec.ts              |  9 +++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
index 9973a77fbe..8b4dc203e8 100644
--- a/components/image/image-preview.component.ts
+++ b/components/image/image-preview.component.ts
@@ -63,10 +63,10 @@ const initialPosition = {
           </ul>
           <div
             class="ant-image-preview-img-wrapper"
+            #imagePreviewWrapper
             cdkDrag
             [style.transform]="previewImageWrapperTransform"
             [cdkDragFreeDragPosition]="position"
-            (mousedown)="onDragStarted()"
             (cdkDragReleased)="onDragReleased()"
           >
             <ng-container *ngFor="let image of images; index as imageIndex">
@@ -176,6 +176,7 @@ export class NzImagePreviewComponent implements OnInit {
   closeClick = new EventEmitter<void>();
 
   @ViewChild('imgRef') imageRef!: ElementRef<HTMLImageElement>;
+  @ViewChild('imagePreviewWrapper', { static: true }) imagePreviewWrapper!: ElementRef<HTMLElement>;
 
   private zoom: number;
   private rotate: number;
@@ -214,6 +215,12 @@ export class NzImagePreviewComponent implements OnInit {
             this.ngZone.run(() => this.containerClick.emit());
           }
         });
+
+      fromEvent(this.imagePreviewWrapper.nativeElement, 'mousedown')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.isDragging = true;
+        });
     });
   }
 
@@ -319,10 +326,6 @@ export class NzImagePreviewComponent implements OnInit {
     this.cdr.markForCheck();
   }
 
-  onDragStarted(): void {
-    this.isDragging = true;
-  }
-
   onDragReleased(): void {
     this.isDragging = false;
     const width = this.imageRef.nativeElement.offsetWidth * this.zoom;
diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts
index 8f2852fa7e..b27616970a 100644
--- a/components/image/image.spec.ts
+++ b/components/image/image.spec.ts
@@ -443,11 +443,12 @@ describe('Preview', () => {
     it('should drag released work', fakeAsync(() => {
       context.images = [{ src: QUICK_SRC }];
       context.createUsingService();
-      const previewInstance = context.previewRef?.previewInstance;
+      const previewInstance = context.previewRef?.previewInstance!;
       tickChanges();
-      previewInstance?.onDragStarted();
-      previewInstance?.onDragReleased();
-      expect(previewInstance?.position).toEqual({ x: 0, y: 0 });
+      previewInstance.imagePreviewWrapper.nativeElement.dispatchEvent(new MouseEvent('mousedown'));
+      expect(previewInstance.isDragging).toEqual(true);
+      previewInstance.onDragReleased();
+      expect(previewInstance.position).toEqual({ x: 0, y: 0 });
     }));
 
     it('should position calculate correct', () => {