From a3ccdeffc2a8050b5abd333f938ccac9e0f29391 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Sat, 29 Jul 2023 11:18:34 +0800
Subject: [PATCH] feat(img): add img flip feature (#6785)

---
 components/image/PreviewGroup.tsx   |  3 +++
 components/vc-image/src/Preview.tsx | 30 +++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
index e081479d8..e2f75ebdc 100644
--- a/components/image/PreviewGroup.tsx
+++ b/components/image/PreviewGroup.tsx
@@ -11,6 +11,7 @@ import ZoomOutOutlined from '@ant-design/icons-vue/ZoomOutOutlined';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
+import SwapOutlined from '@ant-design/icons-vue/SwapOutlined';
 import useStyle from './style';
 import { anyType } from '../_util/type';
 
@@ -22,6 +23,8 @@ export const icons = {
   close: <CloseOutlined />,
   left: <LeftOutlined />,
   right: <RightOutlined />,
+  flipX: <SwapOutlined />,
+  flipY: <SwapOutlined rotate={90} />,
 };
 const previewGroupProps = () => ({
   previewPrefixCls: String,
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index fc14f23ea..b35cf65ec 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -36,6 +36,8 @@ export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'
     close?: VNode;
     left?: VNode;
     right?: VNode;
+    flipX?: VNode;
+    flipY?: VNode;
   };
 }
 
@@ -60,10 +62,13 @@ const Preview = defineComponent({
   props: previewProps,
   emits: ['close', 'afterClose'],
   setup(props, { emit, attrs }) {
-    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = reactive(props.icons);
+    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = reactive(
+      props.icons,
+    );
 
     const scale = shallowRef(1);
     const rotate = shallowRef(0);
+    const flip = reactive({ x: 1, y: 1 });
     const [position, setPosition] = useFrameSetState<{
       x: number;
       y: number;
@@ -130,6 +135,15 @@ const Preview = defineComponent({
     const onRotateLeft = () => {
       rotate.value -= 90;
     };
+
+    const onFlipX = () => {
+      flip.x = -flip.x;
+    };
+
+    const onFlipY = () => {
+      flip.y = -flip.y;
+    };
+
     const onSwitchLeft: MouseEventHandler = event => {
       event.preventDefault();
       // Without this mask close will abnormal
@@ -180,6 +194,16 @@ const Preview = defineComponent({
         onClick: onRotateLeft,
         type: 'rotateLeft',
       },
+      {
+        icon: flipX,
+        onClick: onFlipX,
+        type: 'flipX',
+      },
+      {
+        icon: flipY,
+        onClick: onFlipY,
+        type: 'flipY',
+      },
     ];
 
     const onMouseUp: MouseEventHandler = () => {
@@ -365,7 +389,9 @@ const Preview = defineComponent({
               src={combinationSrc.value}
               alt={props.alt}
               style={{
-                transform: `scale3d(${scale.value}, ${scale.value}, 1) rotate(${rotate.value}deg)`,
+                transform: `scale3d(${flip.x * scale.value}, ${flip.y * scale.value}, 1) rotate(${
+                  rotate.value
+                }deg)`,
               }}
             />
           </div>