From 47212250c8fa6c11455a3d03c2a0bd8ca97c144b Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Mon, 31 May 2021 16:32:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E5=BD=A2?=
 =?UTF-8?q?=E7=8A=B6=E3=80=81=E5=9B=BE=E7=89=87=E7=BF=BB=E8=BD=AC=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/slides.ts                           |  5 +--
 src/types/slides.ts                           | 10 +++---
 .../Editor/Toolbar/common/ElementFlip.vue     | 33 ++++++++-----------
 .../element/ImageElement/BaseImageElement.vue |  5 +--
 .../components/element/ImageElement/index.vue |  5 +--
 .../element/ShapeElement/BaseShapeElement.vue |  5 +--
 .../components/element/ShapeElement/index.vue |  5 +--
 .../element/hooks/useElementFlip.ts           | 19 ++++-------
 8 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/src/mocks/slides.ts b/src/mocks/slides.ts
index e53534a7..f9d21c2d 100644
--- a/src/mocks/slides.ts
+++ b/src/mocks/slides.ts
@@ -29,10 +29,7 @@ export const slides: Slide[] = [
         path: 'M 0 0 L 0 200 L 200 200 Z',
         fill: '#5b9bd5',
         fixedRatio: false,
-        flip: {
-          x: 180,
-          y: 0,
-        },
+        flipH: true,
         rotate: 0
       },
       {
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 649883f9..bbe96446 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -45,8 +45,8 @@ export interface PPTTextElement extends PPTBaseElement {
 }
 
 export interface ImageOrShapeFlip {
-  x?: number;
-  y?: number;
+  flipH?: boolean;
+  flipV?: boolean;
 }
 export interface ImageElementFilters {
   'blur'?: string;
@@ -69,7 +69,8 @@ export interface PPTImageElement extends PPTBaseElement {
   outline?: PPTElementOutline;
   filters?: ImageElementFilters;
   clip?: ImageElementClip;
-  flip?: ImageOrShapeFlip;
+  flipH?: boolean;
+  flipV?: boolean;
   shadow?: PPTElementShadow;
 }
 
@@ -88,7 +89,8 @@ export interface PPTShapeElement extends PPTBaseElement {
   rotate: number;
   outline?: PPTElementOutline;
   opacity?: number;
-  flip?: ImageOrShapeFlip;
+  flipH?: boolean;
+  flipV?: boolean;
   shadow?: PPTElementShadow;
 }
 
diff --git a/src/views/Editor/Toolbar/common/ElementFlip.vue b/src/views/Editor/Toolbar/common/ElementFlip.vue
index 56592ab0..70cf27d9 100644
--- a/src/views/Editor/Toolbar/common/ElementFlip.vue
+++ b/src/views/Editor/Toolbar/common/ElementFlip.vue
@@ -3,13 +3,13 @@
     <CheckboxButtonGroup class="row">
       <CheckboxButton 
         style="flex: 1;"
-        :checked="flip.x === 180"
-        @click="updateFlip({ x: flip.x === 180 ? 0 : 180, y: flip.y })"
+        :checked="flipH"
+        @click="updateFlip({ flipH: !flipH })"
       ><IconFlipVertically /> 垂直翻转</CheckboxButton>
       <CheckboxButton 
         style="flex: 1;"
-        :checked="flip.y === 180"
-        @click="updateFlip({ x: flip.x, y: flip.y === 180 ? 0 : 180 })"
+        :checked="flipV"
+        @click="updateFlip({ flipV: !flipV })"
       ><IconFlipHorizontally /> 水平翻转</CheckboxButton>
     </CheckboxButtonGroup>
   </div>
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { PPTImageElement, PPTShapeElement } from '@/types/slides'
+import { PPTImageElement, PPTShapeElement, ImageOrShapeFlip } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default defineComponent({
@@ -27,33 +27,26 @@ export default defineComponent({
     const store = useStore()
     const handleElement = computed<PPTImageElement | PPTShapeElement>(() => store.getters.handleElement)
 
-    const flip = ref({
-      x: 0,
-      y: 0,
-    })
+    const flipH = ref(false)
+    const flipV = ref(false)
 
     watch(handleElement, () => {
       if (!handleElement.value || !['image', 'shape'].includes(handleElement.value.type)) return
 
-      if (handleElement.value.flip) {
-        flip.value = {
-          x: handleElement.value.flip.x || 0,
-          y: handleElement.value.flip.y || 0,
-        }
-      }
-      else flip.value = { x: 0, y: 0 }
+      flipH.value = !!handleElement.value.flipH
+      flipV.value = !!handleElement.value.flipV
     }, { deep: true, immediate: true })
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateFlip = (value: number) => {
-      const props = { flip: value }
-      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+    const updateFlip = (flipProps: ImageOrShapeFlip) => {
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props: flipProps })
       addHistorySnapshot()
     }
 
     return {
-      flip,
+      flipH,
+      flipV,
       updateFlip,
     }
   },
diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index 706c4830..467601a2 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -66,8 +66,9 @@ export default defineComponent({
     const shadow = computed(() => props.elementInfo.shadow)
     const { shadowStyle } = useElementShadow(shadow)
 
-    const flip = computed(() => props.elementInfo.flip)
-    const { flipStyle } = useElementFlip(flip)
+    const flipH = computed(() => props.elementInfo.flipH)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
     
     const clip = computed(() => props.elementInfo.clip)
     const { clipShape, imgPosition } = useClipImage(clip)
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 7e7c77a2..96947c5b 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -97,8 +97,9 @@ export default defineComponent({
     const shadow = computed(() => props.elementInfo.shadow)
     const { shadowStyle } = useElementShadow(shadow)
 
-    const flip = computed(() => props.elementInfo.flip)
-    const { flipStyle } = useElementFlip(flip)
+    const flipH = computed(() => props.elementInfo.flipH)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     const clip = computed(() => props.elementInfo.clip)
     const { clipShape, imgPosition } = useClipImage(clip)
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index 01375c8a..4ab4a456 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -82,8 +82,9 @@ export default defineComponent({
     const shadow = computed(() => props.elementInfo.shadow)
     const { shadowStyle } = useElementShadow(shadow)
 
-    const flip = computed(() => props.elementInfo.flip)
-    const { flipStyle } = useElementFlip(flip)
+    const flipH = computed(() => props.elementInfo.flipH)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     return {
       shadowStyle,
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index e9ce8aca..288fb8a2 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -100,8 +100,9 @@ export default defineComponent({
     const shadow = computed(() => props.elementInfo.shadow)
     const { shadowStyle } = useElementShadow(shadow)
 
-    const flip = computed(() => props.elementInfo.flip)
-    const { flipStyle } = useElementFlip(flip)
+    const flipH = computed(() => props.elementInfo.flipH)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     return {
       handleSelectElement,
diff --git a/src/views/components/element/hooks/useElementFlip.ts b/src/views/components/element/hooks/useElementFlip.ts
index 66616330..6fafd487 100644
--- a/src/views/components/element/hooks/useElementFlip.ts
+++ b/src/views/components/element/hooks/useElementFlip.ts
@@ -1,20 +1,15 @@
 import { computed, Ref } from 'vue'
-import { ImageOrShapeFlip } from '@/types/slides'
 
 // 计算元素的翻转样式
-export default (flip: Ref<ImageOrShapeFlip | undefined>) => {
+export default (flipH: Ref<boolean | undefined>, flipV: Ref<boolean | undefined>) => {
   const flipStyle = computed(() => {
-    if (flip.value) {
-      let style = ''
-      
-      const { x, y } = flip.value
-      if (x && y) style = `rotateX(${x}deg) rotateY(${y}deg)`
-      else if (x) style = `rotateX(${x}deg)`
-      else if (y) style = `rotateY(${y}deg)`
+    let style = ''
+    
+    if (flipH.value && flipV.value) style = 'rotateX(180deg) rotateY(180deg)'
+    else if (flipH.value) style = 'rotateX(180deg)'
+    else if (flipV.value) style = 'rotateY(180deg)'
 
-      return style
-    }
-    return ''
+    return style
   })
 
   return {