refactor: 修改形状、图片翻转类型定义

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: {
+        flipH: true,
-          x: 180,
-          y: 0,
-        },
         rotate: 0
       },
       {

src/types/slides.ts

@@ -45,8 +45,8 @@ export interface PPTTextElement extends PPTBaseElement {
 }
 
 export interface ImageOrShapeFlip {
-  x?: number;
+  flipH?: boolean;
-  y?: number;
+  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;
 }
 

src/views/Editor/Toolbar/common/ElementFlip.vue

@@ -3,13 +3,13 @@
     <CheckboxButtonGroup class="row">
       <CheckboxButton 
         style="flex: 1;"
-        :checked="flip.x === 180"
+        :checked="flipH"
-        @click="updateFlip({ x: flip.x === 180 ? 0 : 180, y: flip.y })"
+        @click="updateFlip({ flipH: !flipH })"
       ><IconFlipVertically /> 垂直翻转</CheckboxButton>
       <CheckboxButton 
         style="flex: 1;"
-        :checked="flip.y === 180"
+        :checked="flipV"
-        @click="updateFlip({ x: flip.x, y: flip.y === 180 ? 0 : 180 })"
+        @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({
+    const flipH = ref(false)
-      x: 0,
+    const flipV = ref(false)
-      y: 0,
-    })
 
     watch(handleElement, () => {
       if (!handleElement.value || !['image', 'shape'].includes(handleElement.value.type)) return
 
-      if (handleElement.value.flip) {
+      flipH.value = !!handleElement.value.flipH
-        flip.value = {
+      flipV.value = !!handleElement.value.flipV
-          x: handleElement.value.flip.x || 0,
-          y: handleElement.value.flip.y || 0,
-        }
-      }
-      else flip.value = { x: 0, y: 0 }
     }, { deep: true, immediate: true })
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const updateFlip = (value: number) => {
+    const updateFlip = (flipProps: ImageOrShapeFlip) => {
-      const props = { flip: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props: flipProps })
-      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
       addHistorySnapshot()
     }
 
     return {
-      flip,
+      flipH,
+      flipV,
       updateFlip,
     }
   },

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 flipH = computed(() => props.elementInfo.flipH)
-    const { flipStyle } = useElementFlip(flip)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
     
     const clip = computed(() => props.elementInfo.clip)
     const { clipShape, imgPosition } = useClipImage(clip)

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 flipH = computed(() => props.elementInfo.flipH)
-    const { flipStyle } = useElementFlip(flip)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     const clip = computed(() => props.elementInfo.clip)
     const { clipShape, imgPosition } = useClipImage(clip)

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 flipH = computed(() => props.elementInfo.flipH)
-    const { flipStyle } = useElementFlip(flip)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     return {
       shadowStyle,

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 flipH = computed(() => props.elementInfo.flipH)
-    const { flipStyle } = useElementFlip(flip)
+    const flipV = computed(() => props.elementInfo.flipV)
+    const { flipStyle } = useElementFlip(flipH, flipV)
 
     return {
       handleSelectElement,

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 = ''
-      let style = ''
     
-      const { x, y } = flip.value
+    if (flipH.value && flipV.value) style = 'rotateX(180deg) rotateY(180deg)'
-      if (x && y) style = `rotateX(${x}deg) rotateY(${y}deg)`
+    else if (flipH.value) style = 'rotateX(180deg)'
-      else if (x) style = `rotateX(${x}deg)`
+    else if (flipV.value) style = 'rotateY(180deg)'
-      else if (y) style = `rotateY(${y}deg)`
 
-      return style
+    return style
-    }
-    return ''
   })
 
   return {