feat(module:image): add scale step (#8163)

* feat(module:image): add zoom step * feat(module:image): add zoom step * feat(module:image): add scale step * feat(module:image): add scale step * feat(module:image): add scale step * feat(module:image): add scale step * feat(module:image): add scale step * feat(module:image): add scale step
NG-ZORRO · Nov 18, 2023 · 5aa4db9 · 5aa4db9
1 parent 211db31
commit 5aa4db9
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 83 deletions.
diff --git a/components/core/config/config.ts b/components/core/config/config.ts
@@ -354,6 +354,7 @@ export interface ImageConfig {
   nzDisablePreview?: string;
   nzCloseOnNavigation?: boolean;
   nzDirection?: Direction;
+  nzScaleStep?: number;
 }
 
 export interface ImageExperimentalConfig {

diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 受控的预览
+  en-US: Controlled Preview
+---
+
+## zh-CN
+
+可以使预览受控。
+
+## en-US
+
+You can make preview controlled.
diff --git a/components/image/demo/controlled-preview.ts b/components/image/demo/controlled-preview.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+
+import { NzImageService } from 'ng-zorro-antd/image';
+
+@Component({
+  selector: 'nz-demo-image-controlled-preview',
+  template: `
+    <div>
+      <label>
+        <span>scale step:</span>
+        <nz-input-number [(ngModel)]="scaleStep" [nzMin]="0.1" [nzStep]="1"></nz-input-number>
+      </label>
+
+      <button nz-button nzType="primary" (click)="onClick()">Preview</button>
+    </div>
+  `,
+  styles: [
+    `
+      div {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    `
+  ]
+})
+export class NzDemoImageControlledPreviewComponent {
+  scaleStep: number = 0.5;
+
+  constructor(private nzImageService: NzImageService) {}
+
+  onClick(): void {
+    const images = [
+      {
+        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        alt: ''
+      }
+    ];
+    this.nzImageService.preview(images, { nzZoom: 1, nzRotate: 0, nzScaleStep: this.scaleStep });
+  }
+}
diff --git a/components/image/demo/module b/components/image/demo/module
@@ -1,5 +1,6 @@
 import { NzImageModule } from 'ng-zorro-antd/image';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 
-export const moduleList = [ NzImageModule, NzButtonModule, NzSpaceModule ];
+export const moduleList = [ NzImageModule, NzButtonModule, NzSpaceModule, NzInputNumberModule ];
diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md
@@ -20,52 +20,59 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 
 ### [nz-image]
 
-| Property | Description | Type | Default | Global Config |
-| --- | --- | --- | --- | --- |
-| nzSrc | Image path | `string` | - | - |
-| nzFallback | Load failure fault-tolerant src | `string` | - | ✅ |
-| nzPlaceholder | Load placeholder src | `string` | - | ✅ |
-| nzDisablePreview | Whether to disable the preview | `boolean` | `false` | ✅ |
-| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `false` | ✅ |
-| nzDirection | Text directionality | `Direction` | `'ltr'` | ✅ |
+| Property            | Description                                                                                                                                                                                        | Type        | Default | Global Config |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ------------- |
+| nzSrc               | Image path                                                                                                                                                                                         | `string`    | -       | -             |
+| nzFallback          | Load failure fault-tolerant src                                                                                                                                                                    | `string`    | -       | ✅            |
+| nzPlaceholder       | Load placeholder src                                                                                                                                                                               | `string`    | -       | ✅            |
+| nzDisablePreview    | Whether to disable the preview                                                                                                                                                                     | `boolean`   | `false` | ✅            |
+| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean`   | `false` | ✅            |
+| nzDirection         | Text directionality                                                                                                                                                                                | `Direction` | `'ltr'` | ✅            |
+| nzScaleStep         | `1 + nzScaleStep` is the step to increase or decrease the scale                                                                                                                                    | `number`    | 0.5     | ✅            |
 
 Other attributes [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
 
-
 ### NzImageService
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| images | Preview images | `NzImage[]` | - |
-| options | Preview options | `NzImagePreviewOptions` | - |
+| Property | Description     | Type                    | Default |
+| -------- | --------------- | ----------------------- | ------- |
+| images   | Preview images  | `NzImage[]`             | -       |
+| options  | Preview options | `NzImagePreviewOptions` | -       |
 
 ## Related type definition
 
 ### NzImage
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| src | src | `string` | - |
-| alt | alt | `string` | - |
-| width | width | `string` | - |
-| height | height | `string` | - |
+| Property | Description | Type     | Default |
+| -------- | ----------- | -------- | ------- |
+| src      | src         | `string` | -       |
+| alt      | alt         | `string` | -       |
+| width    | width       | `string` | -       |
+| height   | height      | `string` | -       |
 
 ### NzImagePreviewOptions
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| nzKeyboard      | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` |
-| nzMaskClosable      | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` |
-| nzCloseOnNavigation      | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` |
-| nzZIndex      | The z-index of the image preview | `number` | 1000 |
-| nzZoom      | Zoom rate | `number` | 1 |
-| nzRotate      | Rotate rate | `number` | 0 |
+| Property            | Description                                                                                                                                                                                        | Type      | Default |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| nzKeyboard          | Whether support press `esc` to close, press `left` or `right` to switch image                                                                                                                      | `boolean` | `true`  |
+| nzMaskClosable      | Whether to close the image preview when the mask (area outside the image) is clicked                                                                                                               | `boolean` | `true`  |
+| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true`  |
+| nzZIndex            | The z-index of the image preview                                                                                                                                                                   | `number`  | 1000    |
+| nzZoom              | Zoom rate                                                                                                                                                                                          | `number`  | 1       |
+| nzRotate            | Rotate rate                                                                                                                                                                                        | `number`  | 0       |
+| nzScaleStep         | `1 + nzScaleStep` is the step to increase or decrease the scale                                                                                                                                    | `number`  | 0.5     |
 
 ### NzImagePreviewRef
 
-| Name | Description |
-| --- | --- |
-| switchTo(index: number): void | Switch to index |
-| prev(): void | Previous image |
-| next(): void | Next image |
-| close(): void | Close image preview |
+| Name                          | Description         |
+| ----------------------------- | ------------------- |
+| switchTo(index: number): void | Switch to index     |
+| prev(): void                  | Previous image      |
+| next(): void                  | Next image          |
+| close(): void                 | Close image preview |
+
+### NzImageGroupComponent
+
+| Property    | Description                                                                                                                     | Type     | Default |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| nzScaleStep | The value of `nzScaleStep` will be applied to all the images inside, unless an image has its own `nzScaleStep` value specified. | `number` | -       |
diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md
@@ -21,51 +21,59 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 
 ### [nz-image]
 
-| 参数        | 说明                               | 类型             | 默认值 | 支持全局配置  |
-| ----------- | ---------------------------------- | ---------------- | ------ | ----- |
-| nzSrc | 图片地址 | `string` | - | - |
-| nzFallback | 加载失败容错地址 | `string` | - | ✅ |
-| nzPlaceholder | 加载占位地址 | `string` | - | ✅ |
-| nzDisablePreview | 是否禁止预览 | `boolean` | `false` | ✅ |
-| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `false` | ✅ |
-| nzDirection | 文字方向 | `Direction` | `'ltr'` | ✅ |
+| 参数                | 说明                                                                                                     | 类型        | 默认值  | 支持全局配置 |
+| ------------------- | -------------------------------------------------------------------------------------------------------- | ----------- | ------- | ------------ |
+| nzSrc               | 图片地址                                                                                                 | `string`    | -       | -            |
+| nzFallback          | 加载失败容错地址                                                                                         | `string`    | -       | ✅           |
+| nzPlaceholder       | 加载占位地址                                                                                             | `string`    | -       | ✅           |
+| nzDisablePreview    | 是否禁止预览                                                                                             | `boolean`   | `false` | ✅           |
+| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。 | `boolean`   | `false` | ✅           |
+| nzDirection         | 文字方向                                                                                                 | `Direction` | `'ltr'` | ✅           |
+| nzScaleStep         | `1 + nzScaleStep` 为缩放放大的每步倍数                                                                   | `number`    | 0.5     | ✅           |
 
 其他属性见 [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
 
 ### NzImageService
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| images | 预览图片 | `NzImage[]` | - |
-| options | 预览参数 | `NzImagePreviewOptions` | - |
+| 参数    | 说明     | 类型                    | 默认值 |
+| ------- | -------- | ----------------------- | ------ |
+| images  | 预览图片 | `NzImage[]`             | -      |
+| options | 预览参数 | `NzImagePreviewOptions` | -      |
 
 ## 相关类型定义
 
 ### NzImage
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| src | src | `string` | - |
-| alt | alt | `string` | - |
-| width | 图片宽度 | `string` | - |
-| height | 图片高度 | `string` | - |
+| 参数   | 说明     | 类型     | 默认值 |
+| ------ | -------- | -------- | ------ |
+| src    | src      | `string` | -      |
+| alt    | alt      | `string` | -      |
+| width  | 图片宽度 | `string` | -      |
+| height | 图片高度 | `string` | -      |
 
 ### NzImagePreviewOptions
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| nzKeyboard      | 是否支持键盘 esc 关闭、左右键切换图片 | `boolean` | `true` |
-| nzMaskClosable      | 点击蒙层是否允许关闭 | `boolean` | `true` |
-| nzCloseOnNavigation      | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` |
-| nzZIndex      | 设置预览层的 z-index | `number` | 1000 |
-| nzZoom      | 缩放比例 | `number` | 1 |
-| nzRotate      | 旋转角度 | `number` | 0 |
+| 参数                | 说明                                                                                                     | 类型      | 默认值 |
+| ------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ------ |
+| nzKeyboard          | 是否支持键盘 esc 关闭、左右键切换图片                                                                    | `boolean` | `true` |
+| nzMaskClosable      | 点击蒙层是否允许关闭                                                                                     | `boolean` | `true` |
+| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。 | `boolean` | `true` |
+| nzZIndex            | 设置预览层的 z-index                                                                                     | `number`  | 1000   |
+| nzZoom              | 缩放比例                                                                                                 | `number`  | 1      |
+| nzRotate            | 旋转角度                                                                                                 | `number`  | 0      |
+| nzScaleStep         | `1 + nzScaleStep` 为缩放放大的每步倍数                                                                   | `number`  | 0.5    |
 
 ### NzImagePreviewRef
 
-| 名称 | 描述 |
-| --- | --- |
+| 名称                          | 描述         |
+| ----------------------------- | ------------ |
 | switchTo(index: number): void | 设置预览索引 |
-| prev(): void | 上一张 |
-| next(): void | 下一张 |
-| close(): void | 关闭预览 |
+| prev(): void                  | 上一张       |
+| next(): void                  | 下一张       |
+| close(): void                 | 关闭预览     |
+
+### NzImageGroupComponent
+
+| Property    | Description                                                                                                                     | Type | Default |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------- | ---- | ------- |
+| nzScaleStep | The value of `nzScaleStep` will be applied to all the images inside, unless an image has its own `nzScaleStep` value specified. |
diff --git a/components/image/image-group.component.ts b/components/image/image-group.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 
 import { NzImageDirective } from './image.directive';
 
@@ -16,6 +16,8 @@ import { NzImageDirective } from './image.directive';
   encapsulation: ViewEncapsulation.None
 })
 export class NzImageGroupComponent {
+  @Input() nzScaleStep: number | null = null;
+
   images: NzImageDirective[] = [];
 
   addImage(image: NzImageDirective): void {

diff --git a/components/image/image-preview-options.ts b/components/image/image-preview-options.ts
@@ -13,6 +13,7 @@ export class NzImagePreviewOptions {
   nzZIndex?: number;
   nzZoom?: number;
   nzRotate?: number;
+  nzScaleStep?: number;
   nzDirection?: Direction;
 }