From c0d860ae27e9b184079b6c56b08c9085289db4f0 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 6 Apr 2022 21:26:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20refactor=20API?=
 =?UTF-8?q?=20=E7=9A=84=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WritingBoard.vue               | 14 +--
 .../Editor/Canvas/ElementCreateSelection.vue  | 11 ++-
 .../Canvas/Operate/MultiSelectOperate.vue     | 21 ++---
 .../Editor/Canvas/hooks/useMouseSelection.ts  | 57 ++++++------
 src/views/Editor/Canvas/index.vue             | 18 ++--
 .../element/ImageElement/ImageClipHandler.vue | 87 +++++++++----------
 6 files changed, 101 insertions(+), 107 deletions(-)

diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index 6936e0e6..9fcb4758 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
 
 const penSize = 6
 const rubberSize = 80
@@ -76,16 +76,10 @@ export default defineComponent({
     let lastLineWidth = -1
 
     // 鼠标位置坐标：用于画笔或橡皮位置跟随
-    const mouse = reactive({
+    const mouse = ref({
       x: 0,
       y: 0,
     })
-
-    // 更新鼠标位置坐标
-    const updateMousePosition = (x: number, y: number) => {
-      mouse.x = x
-      mouse.y = y
-    }
     
     // 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
     const mouseInCanvas = ref(false)
@@ -239,7 +233,7 @@ export default defineComponent({
       lastTime = new Date().getTime()
 
       if (e instanceof TouchEvent) {
-        updateMousePosition(mouseX, mouseY)
+        mouse.value = { x: mouseX, y: mouseY }
         mouseInCanvas.value = true
       }
     }
@@ -250,7 +244,7 @@ export default defineComponent({
       const x = mouseX / widthScale.value
       const y = mouseY / heightScale.value
 
-      updateMousePosition(mouseX, mouseY)
+      mouse.value = { x: mouseX, y: mouseY }
 
       if (isMouseDown) handleMove(x, y)
     }
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 3719fedc..5d9db396 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
 
@@ -42,15 +42,14 @@ export default defineComponent({
     const end = ref<[number, number]>()
 
     const selectionRef = ref<HTMLElement>()
-    const offset = reactive({
+    const offset = ref({
       x: 0,
       y: 0,
     })
     onMounted(() => {
       if (!selectionRef.value) return
       const { x, y } = selectionRef.value.getBoundingClientRect()
-      offset.x = x
-      offset.y = y
+      offset.value = { x, y }
     })
 
     // 鼠标拖动创建元素生成位置大小
@@ -198,8 +197,8 @@ export default defineComponent({
       const height = maxY - minY
 
       return {
-        left: minX - offset.x + 'px',
-        top: minY - offset.y + 'px',
+        left: minX - offset.value.x + 'px',
+        top: minY - offset.value.y + 'px',
         width: width + 'px',
         height: height + 'px',
       }
diff --git a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
index e2e48ea8..69c2cbac 100644
--- a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
+++ b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
@@ -2,8 +2,8 @@
   <div 
     class="multi-select-operate"
     :style="{
-      left: minX * canvasScale + 'px',
-      top: minY * canvasScale + 'px',
+      left: range.minX * canvasScale + 'px',
+      top: range.minY * canvasScale + 'px',
     }"
   >
     <BorderLine v-for="line in borderLines" :key="line.type" :type="line.type" :style="line.style" />
@@ -14,14 +14,14 @@
         :key="point.direction"
         :type="point.direction"
         :style="point.style"
-        @mousedown.stop="scaleMultiElement($event, { minX, maxX, minY, maxY }, point.direction)"
+        @mousedown.stop="scaleMultiElement($event, range, point.direction)"
       />
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue'
+import { computed, defineComponent, ref, PropType, watchEffect } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -53,7 +53,7 @@ export default defineComponent({
 
     const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
 
-    const range = reactive({
+    const range = ref({
       minX: 0,
       maxX: 0,
       minY: 0,
@@ -61,17 +61,14 @@ export default defineComponent({
     })
 
     // 根据多选元素整体在画布中的范围，计算边框线和缩放点的位置信息
-    const width = computed(() => (range.maxX - range.minX) * canvasScale.value)
-    const height = computed(() => (range.maxY - range.minY) * canvasScale.value)
+    const width = computed(() => (range.value.maxX - range.value.minX) * canvasScale.value)
+    const height = computed(() => (range.value.maxY - range.value.minY) * canvasScale.value)
     const { resizeHandlers, borderLines } = useCommonOperate(width, height)
 
     // 计算多选元素整体在画布中的范围
     const setRange = () => {
       const { minX, maxX, minY, maxY } = getElementListRange(localActiveElementList.value)
-      range.minX = minX
-      range.maxX = maxX
-      range.minY = minY
-      range.maxY = maxY
+      range.value = { minX, maxX, minY, maxY }
     }
     watchEffect(setRange)
 
@@ -87,7 +84,7 @@ export default defineComponent({
     })
 
     return {
-      ...toRefs(range),
+      range,
       canvasScale,
       borderLines,
       disableResize,
diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
index ab9e1e00..b458d22b 100644
--- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts
+++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
@@ -1,4 +1,4 @@
-import { Ref, reactive } from 'vue'
+import { Ref, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -8,13 +8,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
   const mainStore = useMainStore()
   const { canvasScale } = storeToRefs(mainStore)
 
-  const mouseSelectionState = reactive({
-    isShow: false,
+  const mouseSelectionVisible = ref(false)
+  const mouseSelectionQuadrant = ref(1)
+  const mouseSelection = ref({
     top: 0,
     left: 0,
     width: 0,
     height: 0,
-    quadrant: 1,
   })
 
   // 更新鼠标框选范围
@@ -33,12 +33,14 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
     const top = (startPageY - viewportRect.y) / canvasScale.value
 
     // 确定框选的起始位置和其他默认值初始化
-    mouseSelectionState.isShow = false
-    mouseSelectionState.quadrant = 4
-    mouseSelectionState.top = top
-    mouseSelectionState.left = left
-    mouseSelectionState.width = 0
-    mouseSelectionState.height = 0
+    mouseSelection.value = {
+      top: top,
+      left: left,
+      width: 0,
+      height: 0,
+    }
+    mouseSelectionVisible.value = false
+    mouseSelectionQuadrant.value = 4
 
     document.onmousemove = e => {
       if (!isMouseDown) return
@@ -63,10 +65,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       else if ( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
 
       // 更新框选范围
-      mouseSelectionState.isShow = true
-      mouseSelectionState.quadrant = quadrant
-      mouseSelectionState.width = width
-      mouseSelectionState.height = height
+      mouseSelection.value = {
+        ...mouseSelection.value,
+        width: width,
+        height: height,
+      }
+      mouseSelectionVisible.value = true
+      mouseSelectionQuadrant.value = quadrant
     }
 
     document.onmouseup = () => {
@@ -78,36 +83,34 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       let inRangeElementList: PPTElement[] = []
       for (let i = 0; i < elementList.value.length; i++) {
         const element = elementList.value[i]
-        const mouseSelectionLeft = mouseSelectionState.left
-        const mouseSelectionTop = mouseSelectionState.top
-        const mouseSelectionWidth = mouseSelectionState.width
-        const mouseSelectionHeight = mouseSelectionState.height
-
-        const quadrant = mouseSelectionState.quadrant
+        const mouseSelectionLeft = mouseSelection.value.left
+        const mouseSelectionTop = mouseSelection.value.top
+        const mouseSelectionWidth = mouseSelection.value.width
+        const mouseSelectionHeight = mouseSelection.value.height
 
         const { minX, maxX, minY, maxY } = getElementRange(element)
 
         // 计算元素是否处在框选范围内时，四个框选方向的计算方式有差异
         let isInclude = false
-        if (quadrant === 4) {
+        if (mouseSelectionQuadrant.value === 4) {
           isInclude = minX > mouseSelectionLeft && 
                       maxX < mouseSelectionLeft + mouseSelectionWidth && 
                       minY > mouseSelectionTop && 
                       maxY < mouseSelectionTop + mouseSelectionHeight
         }
-        else if (quadrant === 1) {
+        else if (mouseSelectionQuadrant.value === 1) {
           isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) && 
                       maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth && 
                       minY > (mouseSelectionTop - mouseSelectionHeight) && 
                       maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
         }
-        else if (quadrant === 2) {
+        else if (mouseSelectionQuadrant.value === 2) {
           isInclude = minX > mouseSelectionLeft && 
                       maxX < mouseSelectionLeft + mouseSelectionWidth && 
                       minY > (mouseSelectionTop - mouseSelectionHeight) && 
                       maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
         }
-        else if (quadrant === 3) {
+        else if (mouseSelectionQuadrant.value === 3) {
           isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) && 
                       maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth && 
                       minY > mouseSelectionTop && 
@@ -130,12 +133,14 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
       const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
       mainStore.setActiveElementIdList(inRangeElementIdList)
 
-      mouseSelectionState.isShow = false
+      mouseSelectionVisible.value = false
     }
   }
 
   return {
-    mouseSelectionState,
+    mouseSelection,
+    mouseSelectionVisible,
+    mouseSelectionQuadrant,
     updateMouseSelection,
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 0bd95a3c..e464bf2e 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -55,12 +55,12 @@
         :style="{ transform: `scale(${canvasScale})` }"
       >
         <MouseSelection 
-          v-if="mouseSelectionState.isShow"
-          :top="mouseSelectionState.top" 
-          :left="mouseSelectionState.left" 
-          :width="mouseSelectionState.width" 
-          :height="mouseSelectionState.height" 
-          :quadrant="mouseSelectionState.quadrant"
+          v-if="mouseSelectionVisible"
+          :top="mouseSelection.top" 
+          :left="mouseSelection.left" 
+          :width="mouseSelection.width" 
+          :height="mouseSelection.height" 
+          :quadrant="mouseSelectionQuadrant"
         />      
         <EditableElement 
           v-for="(element, index) in elementList" 
@@ -170,7 +170,7 @@ export default defineComponent({
 
     useDropImageOrText(canvasRef)
 
-    const { mouseSelectionState, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
+    const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
 
     const { dragElement } = useDragElement(elementList, alignmentLines)
     const { dragLineElement } = useDragLineElement(elementList)
@@ -266,7 +266,9 @@ export default defineComponent({
       viewportRef,
       viewportStyles,
       canvasScale,
-      mouseSelectionState,
+      mouseSelection,
+      mouseSelectionVisible,
+      mouseSelectionQuadrant,
       creatingElement,
       alignmentLines,
       linkDialogVisible,
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index 06f5b92b..7afe59e5 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useKeyboardStore } from '@/store'
 import { KEYS } from '@/configs/hotkey'
@@ -112,7 +112,7 @@ export default defineComponent({
     const { canvasScale } = storeToRefs(useMainStore())
     const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
 
-    const clipWrapperPositionStyle = reactive({
+    const clipWrapperPositionStyle = ref({
       top: '0',
       left: '0',
     })
@@ -153,7 +153,7 @@ export default defineComponent({
     })
 
     // 顶层图片容器位置大小（裁剪高亮区域）
-    const topImgWrapperPosition = reactive({
+    const topImgWrapperPosition = ref({
       top: 0,
       left: 0,
       width: 0,
@@ -162,11 +162,12 @@ export default defineComponent({
 
     // 顶层图片容器位置大小样式（裁剪高亮区域）
     const topImgWrapperPositionStyle = computed(() => {
+      const { top, left, width, height } = topImgWrapperPosition.value
       return {
-        top: topImgWrapperPosition.top + '%',
-        left: topImgWrapperPosition.left + '%',
-        width: topImgWrapperPosition.width + '%',
-        height: topImgWrapperPosition.height + '%',
+        top: top + '%',
+        left: left + '%',
+        width: width + '%',
+        height: height + '%',
       }
     })
 
@@ -175,29 +176,30 @@ export default defineComponent({
       const bottomWidth = imgPosition.value.width
       const bottomHeight = imgPosition.value.height
       
-      const topLeft = topImgWrapperPosition.left
-      const topTop = topImgWrapperPosition.top
-      const topWidth = topImgWrapperPosition.width
-      const topHeight = topImgWrapperPosition.height
+      const { top, left, width, height } = topImgWrapperPosition.value
       
       return {
-        left: -topLeft * (100 / topWidth) + '%',
-        top: -topTop * (100 / topHeight) + '%',
-        width: bottomWidth / topWidth * 100 + '%',
-        height: bottomHeight / topHeight * 100 + '%',
+        left: -left * (100 / width) + '%',
+        top: -top * (100 / height) + '%',
+        width: bottomWidth / width * 100 + '%',
+        height: bottomHeight / height * 100 + '%',
       }
     })
 
     // 初始化裁剪位置信息
     const initClipPosition = () => {
       const { left, top } = getClipDataTransformInfo()
-      topImgWrapperPosition.left = left
-      topImgWrapperPosition.top = top
-      topImgWrapperPosition.width = 100
-      topImgWrapperPosition.height = 100
+      topImgWrapperPosition.value = {
+        left: left,
+        top: top,
+        width: 100,
+        height: 100,
+      }
       
-      clipWrapperPositionStyle.top = -top + '%'
-      clipWrapperPositionStyle.left = -left + '%'
+      clipWrapperPositionStyle.value = {
+        top: -top + '%',
+        left: -left + '%',
+      }
     }
 
     // 执行裁剪：计算裁剪后的图片位置大小和裁剪信息，并将数据同步出去
@@ -212,10 +214,10 @@ export default defineComponent({
       const { left, top } = getClipDataTransformInfo()
 
       const position = {
-        left: (topImgWrapperPosition.left - left) / 100 * props.width,
-        top: (topImgWrapperPosition.top - top) / 100 * props.height,
-        width: (topImgWrapperPosition.width - 100) / 100 * props.width,
-        height: (topImgWrapperPosition.height - 100) / 100 * props.height,
+        left: (topImgWrapperPosition.value.left - left) / 100 * props.width,
+        top: (topImgWrapperPosition.value.top - top) / 100 * props.height,
+        width: (topImgWrapperPosition.value.width - 100) / 100 * props.width,
+        height: (topImgWrapperPosition.value.height - 100) / 100 * props.height,
       }
 
       const clipedEmitData: ImageClipedEmitData = {
@@ -271,12 +273,7 @@ export default defineComponent({
       const startPageX = e.pageX
       const startPageY = e.pageY
       const bottomPosition = imgPosition.value
-      const originPositopn = {
-        left: topImgWrapperPosition.left,
-        top: topImgWrapperPosition.top,
-        width: topImgWrapperPosition.width,
-        height: topImgWrapperPosition.height,
-      }
+      const originPositopn = { ...topImgWrapperPosition.value }
 
       document.onmousemove = e => {
         if (!isMouseDown) return
@@ -312,8 +309,11 @@ export default defineComponent({
           targetTop = bottomPosition.height - originPositopn.height
         }
         
-        topImgWrapperPosition.left = targetLeft
-        topImgWrapperPosition.top = targetTop
+        topImgWrapperPosition.value = {
+          ...topImgWrapperPosition.value,
+          left: targetLeft,
+          top: targetTop,
+        }
       }
 
       document.onmouseup = () => {
@@ -340,14 +340,9 @@ export default defineComponent({
       const startPageX = e.pageX
       const startPageY = e.pageY
       const bottomPosition = imgPosition.value
-      const originPositopn = {
-        left: topImgWrapperPosition.left,
-        top: topImgWrapperPosition.top,
-        width: topImgWrapperPosition.width,
-        height: topImgWrapperPosition.height,
-      }
+      const originPositopn = { ...topImgWrapperPosition.value }
 
-      const aspectRatio = topImgWrapperPosition.width / topImgWrapperPosition.height
+      const aspectRatio = topImgWrapperPosition.value.width / topImgWrapperPosition.value.height
 
       document.onmousemove = e => {
         if (!isMouseDown) return
@@ -498,11 +493,13 @@ export default defineComponent({
           targetLeft = originPositopn.left
           targetTop = originPositopn.top
         }
-        
-        topImgWrapperPosition.left = targetLeft
-        topImgWrapperPosition.top = targetTop
-        topImgWrapperPosition.width = targetWidth
-        topImgWrapperPosition.height = targetHeight
+
+        topImgWrapperPosition.value = {
+          left: targetLeft,
+          top: targetTop,
+          width: targetWidth,
+          height: targetHeight,
+        }
       }
 
       document.onmouseup = () => {