diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md index b6902970484..f8dd1da3bcb 100644 --- a/components/image/doc/index.en-US.md +++ b/components/image/doc/index.en-US.md @@ -61,6 +61,8 @@ Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem | 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 | +| nzFlipHorizontally | Flip image on horizontal vector | `boolean` | `false` | +| nzFlipVertically | Flip image on vertical vector | `boolean` | `false` | ### NzImagePreviewRef diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index 66337b777a7..9723a1823f3 100644 --- a/components/image/doc/index.zh-CN.md +++ b/components/image/doc/index.zh-CN.md @@ -62,6 +62,8 @@ import { NzImageModule } from 'ng-zorro-antd/image'; | nzZoom | 缩放比例 | `number` | 1 | | nzRotate | 旋转角度 | `number` | 0 | | nzScaleStep | `1 + nzScaleStep` 为缩放放大的每步倍数 | `number` | 0.5 | +| nzFlipHorizontally | 在水平向量上翻转图像 | `boolean` | `false` | +| nzFlipVertically | 在垂直向量上翻转图像 | `boolean` | `false` | ### NzImagePreviewRef diff --git a/components/image/image-preview-options.ts b/components/image/image-preview-options.ts index 809a5ce4dea..a747b9cbd40 100644 --- a/components/image/image-preview-options.ts +++ b/components/image/image-preview-options.ts @@ -13,6 +13,8 @@ export class NzImagePreviewOptions { nzZIndex?: number; nzZoom?: number; nzRotate?: number; + nzFlipHorizontally?: boolean; + nzFlipVertically?: boolean; nzScaleStep?: number; nzDirection?: Direction; } diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts index ee4d08a1e03..aa83c164af6 100644 --- a/components/image/image-preview.component.ts +++ b/components/image/image-preview.component.ts @@ -37,7 +37,7 @@ import { getClientSize, getFitContentPosition, getOffset } from './utils'; export interface NzImageContainerOperation { icon: string; type: string; - + rotate?: number; onClick(): void; } @@ -67,7 +67,13 @@ const NZ_DEFAULT_ROTATE = 0; [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'" (click)="option.onClick()" > - + } @@ -185,6 +191,21 @@ export class NzImagePreviewComponent implements OnInit { this.onRotateLeft(); }, type: 'rotateLeft' + }, + { + icon: 'swap', + onClick: () => { + this.onHorizontalFlip(); + }, + type: 'flipHorizontally' + }, + { + icon: 'swap', + onClick: () => { + this.onVerticalFlip(); + }, + type: 'flipVertically', + rotate: 90 } ]; @@ -200,6 +221,8 @@ export class NzImagePreviewComponent implements OnInit { private zoom: number; private rotate: number; private scaleStep: number; + private flipHorizontally: boolean; + private flipVertically: boolean; get animationDisabled(): boolean { return this.config.nzNoAnimation ?? false; @@ -223,6 +246,8 @@ export class NzImagePreviewComponent implements OnInit { this.zoom = this.config.nzZoom ?? this._defaultNzZoom; this.scaleStep = this.config.nzScaleStep ?? this._defaultNzScaleStep; this.rotate = this.config.nzRotate ?? this._defaultNzRotate; + this.flipHorizontally = this.config.nzFlipHorizontally ?? false; + this.flipVertically = this.config.nzFlipVertically ?? false; this.updateZoomOutDisabled(); this.updatePreviewImageTransform(); this.updatePreviewImageWrapperTransform(); @@ -329,6 +354,16 @@ export class NzImagePreviewComponent implements OnInit { this.next(); } + onHorizontalFlip(): void { + this.flipHorizontally = !this.flipHorizontally; + this.updatePreviewImageTransform(); + } + + onVerticalFlip(): void { + this.flipVertically = !this.flipVertically; + this.updatePreviewImageTransform(); + } + onAnimationStart(event: AnimationEvent): void { if (event.toState === 'enter') { this.setEnterAnimationClass(); @@ -379,7 +414,9 @@ export class NzImagePreviewComponent implements OnInit { } private updatePreviewImageTransform(): void { - this.previewImageTransform = `scale3d(${this.zoom}, ${this.zoom}, 1) rotate(${this.rotate}deg)`; + this.previewImageTransform = `scale3d(${this.zoom * (this.flipHorizontally ? -1 : 1)}, ${ + this.zoom * (this.flipVertically ? -1 : 1) + }, 1) rotate(${this.rotate}deg)`; } private updatePreviewImageWrapperTransform(): void { @@ -416,6 +453,8 @@ export class NzImagePreviewComponent implements OnInit { this.zoom = this.config.nzZoom ?? this._defaultNzZoom; this.scaleStep = this.config.nzScaleStep ?? this._defaultNzScaleStep; this.rotate = this.config.nzRotate ?? this._defaultNzRotate; + this.flipHorizontally = false; + this.flipVertically = false; this.position = { ...initialPosition }; } } diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts index 9575e62a6d0..928f0f95cec 100644 --- a/components/image/image.spec.ts +++ b/components/image/image.spec.ts @@ -25,7 +25,8 @@ import { RotateLeftOutline, RotateRightOutline, ZoomInOutline, - ZoomOutOutline + ZoomOutOutline, + SwapOutline } from '@ant-design/icons-angular/icons'; import { NzConfigService } from 'ng-zorro-antd/core/config'; @@ -206,7 +207,8 @@ describe('Preview', () => { LeftCircleOutline, RotateLeftOutline, RotateRightOutline, - CloseCircleOutline + CloseCircleOutline, + SwapOutline ] } ] @@ -289,7 +291,7 @@ describe('Preview', () => { }); describe('ImagePreview', () => { - it('should rotate, zoom and close work', fakeAsync(() => { + it('should rotate, zoom and close and flip work', fakeAsync(() => { context.firstSrc = QUICK_SRC; fixture.detectChanges(); const image = debugElement.nativeElement.querySelector('img'); @@ -303,6 +305,8 @@ describe('Preview', () => { const zoomOut = operations[2]; const rotateRight = operations[3]; const rotateLeft = operations[4]; + const flipHorizontally = operations[5]; + const flipVertically = operations[6]; dispatchFakeEvent(rotateLeft, 'click'); tickChanges(); expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(1, 1, 1) rotate(-90deg)'); @@ -315,6 +319,12 @@ describe('Preview', () => { dispatchFakeEvent(zoomOut, 'click'); tickChanges(); expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(1, 1, 1) rotate(0deg)'); + dispatchFakeEvent(flipHorizontally, 'click'); + expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(-1, 1, 1) rotate(0deg)'); + tickChanges(); + dispatchFakeEvent(flipVertically, 'click'); + expect(imageElement!.getAttribute('style')).toContain('transform: scale3d(-1, -1, 1) rotate(0deg)'); + tickChanges(); dispatchFakeEvent(close, 'click'); tickChanges(); previewElement = getPreviewElement();