refactor(module:image): follow nz-zorro conventions (#8173)

* refactor(module:image): follow nz-zorro conventions * refactor(module:image): follow nz-zorro conventions
NG-ZORRO · Nov 20, 2023 · 14e5cdc · 14e5cdc
1 parent b11eab9
commit 14e5cdc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
@@ -29,7 +29,7 @@ import { isNotNil } from 'ng-zorro-antd/core/util';
 import { FADE_CLASS_NAME_MAP, NZ_CONFIG_MODULE_NAME } from './image-config';
 import { NzImage, NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewRef } from './image-preview-ref';
-import { TImageUrl, TImageScaleStep } from './image.directive';
+import { NzImageUrl, NzImageScaleStep } from './image.directive';
 import { getClientSize, getFitContentPosition, getOffset } from './utils';
 
 export interface NzImageContainerOperation {
@@ -44,9 +44,9 @@ const initialPosition = {
   y: 0
 };
 
-export const DEFAULT_NZ_SCALE_STEP = 0.5;
-const DEFAULT_NZ_ZOOM = 1;
-const DEFAULT_NZ_ROTATE = 0;
+export const NZ_DEFAULT_SCALE_STEP = 0.5;
+const NZ_DEFAULT_ZOOM = 1;
+const NZ_DEFAULT_ROTATE = 0;
 
 @Component({
   selector: 'nz-image-preview',
@@ -128,17 +128,17 @@ const DEFAULT_NZ_ROTATE = 0;
   providers: [NzDestroyService]
 })
 export class NzImagePreviewComponent implements OnInit {
-  readonly _defaultNzZoom = DEFAULT_NZ_ZOOM;
-  readonly _defaultNzScaleStep = DEFAULT_NZ_SCALE_STEP;
-  readonly _defaultNzRotate = DEFAULT_NZ_ROTATE;
+  readonly _defaultNzZoom = NZ_DEFAULT_ZOOM;
+  readonly _defaultNzScaleStep = NZ_DEFAULT_SCALE_STEP;
+  readonly _defaultNzRotate = NZ_DEFAULT_ROTATE;
 
   images: NzImage[] = [];
   index = 0;
   isDragging = false;
   visible = true;
   animationState: 'void' | 'enter' | 'leave' = 'enter';
   animationStateChanged = new EventEmitter<AnimationEvent>();
-  scaleStepMap: Map<TImageUrl, TImageScaleStep> = new Map<TImageUrl, TImageScaleStep>();
+  scaleStepMap: Map<NzImageUrl, NzImageScaleStep> = new Map<NzImageUrl, NzImageScaleStep>();
 
   previewImageTransform = '';
   previewImageWrapperTransform = '';
@@ -281,7 +281,7 @@ export class NzImagePreviewComponent implements OnInit {
 
   onZoomIn(): void {
     const zoomStep =
-      this.scaleStepMap.get(this.images[this.index].src ?? this.images[this.index].src) ?? this.scaleStep;
+      this.scaleStepMap.get(this.images[this.index].src ?? this.images[this.index].srcset) ?? this.scaleStep;
     this.zoom += zoomStep;
     this.updatePreviewImageTransform();
     this.updateZoomOutDisabled();
@@ -291,7 +291,7 @@ export class NzImagePreviewComponent implements OnInit {
   onZoomOut(): void {
     if (this.zoom > 1) {
       const zoomStep =
-        this.scaleStepMap.get(this.images[this.index].src ?? this.images[this.index].src) ?? this.scaleStep;
+        this.scaleStepMap.get(this.images[this.index].src ?? this.images[this.index].srcset) ?? this.scaleStep;
       this.zoom -= zoomStep;
       this.updatePreviewImageTransform();
       this.updateZoomOutDisabled();

diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts
@@ -25,14 +25,14 @@ import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { NzImageGroupComponent } from './image-group.component';
-import { DEFAULT_NZ_SCALE_STEP } from './image-preview.component';
+import { NZ_DEFAULT_SCALE_STEP } from './image-preview.component';
 import { NzImageService } from './image.service';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'image';
 
 export type ImageStatusType = 'error' | 'loading' | 'normal';
-export type TImageUrl = string;
-export type TImageScaleStep = number;
+export type NzImageUrl = string;
+export type NzImageScaleStep = number;
 
 @Directive({
   selector: 'img[nz-image]',
@@ -102,11 +102,11 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy {
       const previewAbleImages = this.parentGroup.images.filter(e => e.previewable);
       const previewImages = previewAbleImages.map(e => ({ src: e.nzSrc, srcset: e.nzSrcset }));
       const previewIndex = previewAbleImages.findIndex(el => this === el);
-      const scaleStepMap = new Map<TImageUrl, TImageScaleStep>();
+      const scaleStepMap = new Map<NzImageUrl, NzImageScaleStep>();
       previewAbleImages.forEach(imageDirective => {
         scaleStepMap.set(
           imageDirective.nzSrc ?? imageDirective.nzSrcset,
-          imageDirective.nzScaleStep ?? this.parentGroup.nzScaleStep ?? this.nzScaleStep ?? DEFAULT_NZ_SCALE_STEP
+          imageDirective.nzScaleStep ?? this.parentGroup.nzScaleStep ?? this.nzScaleStep ?? NZ_DEFAULT_SCALE_STEP
         );
       });
       const previewRef = this.nzImageService.preview(
@@ -122,7 +122,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy {
       const previewImages = [{ src: this.nzSrc, srcset: this.nzSrcset }];
       this.nzImageService.preview(previewImages, {
         nzDirection: this.dir,
-        nzScaleStep: this.nzScaleStep ?? DEFAULT_NZ_SCALE_STEP
+        nzScaleStep: this.nzScaleStep ?? NZ_DEFAULT_SCALE_STEP
       });
     }
   }

diff --git a/components/image/image.service.ts b/components/image/image.service.ts
@@ -14,7 +14,7 @@ import { IMAGE_PREVIEW_MASK_CLASS_NAME, NZ_CONFIG_MODULE_NAME } from './image-co
 import { NzImage, NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewRef } from './image-preview-ref';
 import { NzImagePreviewComponent } from './image-preview.component';
-import { TImageScaleStep, TImageUrl } from './image.directive';
+import { NzImageScaleStep, NzImageUrl } from './image.directive';
 
 export interface NzImageService {
   preview(images: NzImage[], option?: NzImagePreviewOptions): NzImagePreviewRef;
@@ -32,15 +32,15 @@ export class NzImageService {
   preview(
     images: NzImage[],
     options?: NzImagePreviewOptions,
-    zoomMap?: Map<TImageUrl, TImageScaleStep>
+    zoomMap?: Map<NzImageUrl, NzImageScaleStep>
   ): NzImagePreviewRef {
     return this.display(images, options, zoomMap);
   }
 
   private display(
     images: NzImage[],
     config?: NzImagePreviewOptions,
-    scaleStepMap?: Map<TImageUrl, TImageScaleStep>
+    scaleStepMap?: Map<NzImageUrl, NzImageScaleStep>
   ): NzImagePreviewRef {
     const configMerged = { ...new NzImagePreviewOptions(), ...(config ?? {}) };
     const overlayRef = this.createOverlay(configMerged);