Skip to content

Commit

Permalink
feat(module:image): now supports horizontal and vertical flip (#8168)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ParsaArvanehPA
ParsaArvanehPA committed Feb 19, 2024
1 parent d882eb9 commit e856515
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 6 deletions.
2 changes: 2 additions & 0 deletions components/image/doc/index.en-US.md
View file
Expand Up @@ -61,6 +61,8 @@ Other attributes [<img\>](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

Expand Down
2 changes: 2 additions & 0 deletions components/image/doc/index.zh-CN.md
View file
Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions components/image/image-preview-options.ts
View file
Expand Up @@ -13,6 +13,8 @@ export class NzImagePreviewOptions {
nzZIndex?: number;
nzZoom?: number;
nzRotate?: number;
nzFlipHorizontally?: boolean;
nzFlipVertically?: boolean;
nzScaleStep?: number;
nzDirection?: Direction;
}
Expand Down
45 changes: 42 additions & 3 deletions components/image/image-preview.component.ts
View file
Expand Up @@ -37,7 +37,7 @@ import { getClientSize, getFitContentPosition, getOffset } from './utils';
export interface NzImageContainerOperation {
icon: string;
type: string;

rotate?: number;
onClick(): void;
}

Expand Down Expand Up @@ -67,7 +67,13 @@ const NZ_DEFAULT_ROTATE = 0;
[class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
(click)="option.onClick()"
>
<span class="ant-image-preview-operations-icon" nz-icon [nzType]="option.icon" nzTheme="outline"></span>
<span
class="ant-image-preview-operations-icon"
nz-icon
[nzType]="option.icon"
[nzRotate]="option.rotate ?? 0"
nzTheme="outline"
></span>
</li>
}
</ul>
Expand Down Expand Up @@ -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
}
];

Expand All @@ -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;
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 };
}
}
16 changes: 13 additions & 3 deletions components/image/image.spec.ts
View file
Expand Up @@ -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';
Expand Down Expand Up @@ -206,7 +207,8 @@ describe('Preview', () => {
LeftCircleOutline,
RotateLeftOutline,
RotateRightOutline,
CloseCircleOutline
CloseCircleOutline,
SwapOutline
]
}
]
Expand Down Expand Up @@ -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');
Expand All @@ -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)');
Expand All @@ -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();
Expand Down

0 comments on commit e856515

Please sign in to comment.