perf(module:image): do not run change detection when the image previe…

…w is clicked (#7309)
NG-ZORRO · Apr 21, 2022 · 752a5b6 · 752a5b6
1 parent cb803f9
commit 752a5b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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', () => {