Merge branch '1.4.0'

src/types/edit.ts

@@ -26,6 +26,17 @@ export const enum OperateBorderLines {
   R = 'right',
 }
 
+export const enum OperateTesizeHandlers {
+  LEFT_TOP = 'left-top',
+  // TOP = 'top',
+  RIGHT_TOP = 'right-top',
+  // LEFT = 'left',
+  // RIGHT = 'right',
+  LEFT_BOTTOM = 'left-bottom',
+  // BOTTOM = 'bottom',
+  RIGHT_BOTTOM = 'right-bottom',
+}
+
 export const enum OperateResizeHandlers {
   LEFT_TOP = 'left-top',
   TOP = 'top',

src/views/Editor/Canvas/Operate/TextElementOperate.vue

@@ -22,6 +22,15 @@
         :style="{ left: scaleWidth / 2 + 'px' }"
         @mousedown.stop="$event => rotateElement($event, elementInfo)"
       />
+      <TextsizeHandler
+        class="operate-resize-handler" 
+        v-for="point in tesizeHandlers"
+        :key="point.direction"
+        :type="point.direction"
+        :rotate="elementInfo.rotate"
+        :style="point.style"
+        @mousedown.stop="$event => scaleText($event, elementInfo, point.direction)"
+      />
     </template>
   </div>
 </template>
@@ -37,11 +46,12 @@ import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import type { PPTTextElement } from '@/types/slides'
-import type { OperateResizeHandlers } from '@/types/edit'
+import type { OperateResizeHandlers, OperateTesizeHandlers } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
 import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
+import TextsizeHandler from './TextsizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
 const props = defineProps<{
@@ -49,6 +59,7 @@ const props = defineProps<{
   handlerVisible: boolean
   rotateElement: (e: MouseEvent, element: PPTTextElement) => void
   scaleElement: (e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void
+  scaleText: (e: MouseEvent, element: PPTTextElement, command: OperateTesizeHandlers) => void
 }>()
 
 const { canvasScale } = storeToRefs(useMainStore())
@@ -56,6 +67,7 @@ const { canvasScale } = storeToRefs(useMainStore())
 const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
 const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
 
-const { textElementResizeHandlers, verticalTextElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+const { textElementResizeHandlers, verticalTextElementResizeHandlers, borderLines, textElementTesizeHandlers } = useCommonOperate(scaleWidth, scaleHeight)
 const resizeHandlers = computed(() => props.elementInfo.vertical ? verticalTextElementResizeHandlers.value : textElementResizeHandlers.value)
+const tesizeHandlers = computed(() => props.elementInfo.vertical ? textElementTesizeHandlers.value : textElementTesizeHandlers.value)
 </script>
\ No newline at end of file

src/views/Editor/Canvas/Operate/TextsizeHandler.vue

+<template>
+  <div :class="['resize-handler', rotateClassName, type]"></div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { OperateResizeHandlers } from '@/types/edit'
+
+const props = withDefaults(defineProps<{
+  type?: OperateResizeHandlers
+  rotate?: number
+}>(), {
+  rotate: 0,
+})
+
+const rotateClassName = computed(() => {
+  const prefix = 'rotate-'
+  const rotate = props.rotate
+  if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
+  else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
+  else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
+  else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
+  else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
+  else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
+  else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
+  else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
+  return prefix + 0
+})
+</script>
+
+<style lang="scss" scoped>
+.resize-handler {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  left: 0;
+  top: 0;
+  margin: -5px 0 0 -5px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
+  background-color: #fff;
+  cursor: pointer;
+
+  &.left-top.rotate-0,
+  &.right-bottom.rotate-0,
+  &.left.rotate-45,
+  &.right.rotate-45,
+  &.left-bottom.rotate-90,
+  &.right-top.rotate-90,
+  &.top.rotate-135,
+  &.bottom.rotate-135 {
+    cursor: url('https://im.oytour.com/trip/cusor/8f76b0abb0a62213ab3795d3ebaf3c3e.svg') 16 16, nwse-resize;
+  }
+  &.top.rotate-0,
+  &.bottom.rotate-0,
+  &.left-top.rotate-45,
+  &.right-bottom.rotate-45,
+  &.left.rotate-90,
+  &.right.rotate-90,
+  &.left-bottom.rotate-135,
+  &.right-top.rotate-135 {
+    cursor: url('https://im.oytour.com/trip/cusor/4f7515dd177541d307de562bd6ee8f07.svg') 16 16, ns-resize;
+  }
+  &.left-bottom.rotate-0,
+  &.right-top.rotate-0,
+  &.top.rotate-45,
+  &.bottom.rotate-45,
+  &.left-top.rotate-90,
+  &.right-bottom.rotate-90,
+  &.left.rotate-135,
+  &.right.rotate-135 {
+    cursor: url('https://im.oytour.com/trip/cusor/13cfd89732053891fab7d23547a6d4f0.svg') 16 16, nesw-resize;
+  }
+  &.left.rotate-0,
+  &.right.rotate-0,
+  &.left-bottom.rotate-45,
+  &.right-top.rotate-45,
+  &.top.rotate-90,
+  &.bottom.rotate-90,
+  &.left-top.rotate-135,
+  &.right-bottom.rotate-135 {
+    cursor: url('https://im.oytour.com/trip/cusor/7e6be5a8633602679325c01e745e53ef.svg') 16 16, ew-resize !important;
+  }
+}
+</style>
\ No newline at end of file

src/views/Editor/Canvas/Operate/index.vue

@@ -16,6 +16,7 @@
       :handlerVisible="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"
       :rotateElement="rotateElement"
       :scaleElement="scaleElement"
+      :scaleText="scaleText"
       :dragLineElement="dragLineElement"
       :moveShapeKeypoint="moveShapeKeypoint"
     ></component>
@@ -50,7 +51,7 @@ import {
   type PPTShapeElement,
   type PPTChartElement,
 } from '@/types/slides'
-import type { OperateLineHandlers, OperateResizeHandlers } from '@/types/edit'
+import type { OperateLineHandlers, OperateResizeHandlers, OperateTesizeHandlers } from '@/types/edit'
 
 import ImageElementOperate from './ImageElementOperate.vue'
 import TextElementOperate from './TextElementOperate.vue'
@@ -68,6 +69,7 @@ const props = defineProps<{
   isMultiSelect: boolean
   rotateElement: (e: MouseEvent, element: Exclude<PPTElement, PPTChartElement | PPTLineElement | PPTVideoElement | PPTAudioElement>) => void
   scaleElement: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void
+  scaleText: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateTesizeHandlers) => void
   dragLineElement: (e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void
   moveShapeKeypoint: (e: MouseEvent, element: PPTShapeElement) => void
   openLinkDialog: () => void

src/views/Editor/Canvas/hooks/useCommonOperate.ts

@@ -23,6 +23,18 @@ export default (width: Ref<number>, height: Ref<number>) => {
       { direction: OperateResizeHandlers.RIGHT, style: {left: width.value + 'px', top: height.value / 2 + 'px'} },
     ]
   })
+  const textElementTesizeHandlers = computed(() => {
+    return [
+      { direction: OperateResizeHandlers.LEFT_TOP, style: {} },
+      // { direction: OperateResizeHandlers.TOP, style: {left: width.value / 2 + 'px'} },
+      { direction: OperateResizeHandlers.RIGHT_TOP, style: {left: width.value + 'px'} },
+      // { direction: OperateResizeHandlers.LEFT, style: {top: height.value / 2 + 'px'} },
+      // { direction: OperateResizeHandlers.RIGHT, style: {left: width.value + 'px', top: height.value / 2 + 'px'} },
+      { direction: OperateResizeHandlers.LEFT_BOTTOM, style: {top: height.value + 'px'} },
+      // { direction: OperateResizeHandlers.BOTTOM, style: {left: width.value / 2 + 'px', top: height.value + 'px'} },
+      { direction: OperateResizeHandlers.RIGHT_BOTTOM, style: {left: width.value + 'px', top: height.value + 'px'} },
+    ]
+  })
   const verticalTextElementResizeHandlers = computed(() => {
     return [
       { direction: OperateResizeHandlers.TOP, style: {left: width.value / 2 + 'px'} },
@@ -45,5 +57,6 @@ export default (width: Ref<number>, height: Ref<number>) => {
     textElementResizeHandlers,
     verticalTextElementResizeHandlers,
     borderLines,
+    textElementTesizeHandlers,
   }
 }
\ No newline at end of file

src/views/Editor/Canvas/hooks/useScaleElement.ts

+import { fa } from 'element-plus/es/locale';
 import type { Ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
+import { useMainStore, useSlidesStore, useKeyboardStore, useFontStore } from '@/store'
 import type { PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandlers, type AlignmentLineProps, type MultiSelectRange } from '@/types/edit'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
@@ -8,6 +9,8 @@ import { MIN_SIZE } from '@/configs/element'
 import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
 import { type AlignLine, uniqAlignLines } from '@/utils/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+import { path } from '@amcharts/amcharts4/core';
 
 interface RotateElementData {
   left: number
@@ -100,14 +103,393 @@ export default (
 ) => {
   const mainStore = useMainStore()
   const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeGroupElementId } = storeToRefs(mainStore)
+  const { activeElementIdList, activeGroupElementId, richTextAttrs } = storeToRefs(mainStore)
   const { viewportRatio } = storeToRefs(slidesStore)
   const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
+  // 缩放文字元素
+  const scaleText = (e: MouseEvent | TouchEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
+    const isTouchEvent = !(e instanceof MouseEvent)
+    if (isTouchEvent && (!e.changedTouches || !e.changedTouches[0])) return
+
+    let isMouseDown = true
+    mainStore.setScalingState(true)
+
+    const elOriginLeft = element.left
+    const elOriginTop = element.top
+    const elOriginWidth = element.width
+    const elOriginHeight = element.height
+    const regex = /font-size\s*:\s*(\d+(?:\.\d+)?(px|PX))/g;
+    let matches = []
+    let elOriginFont:{path:string,originSize:number}[] = []
+    if('content' in element){
+      matches = element.content.match(regex)??[];
+      if(matches && matches.length>0){
+        matches.forEach(r=>{
+          const result = /font-size\s*:\s*(\d+(?:\.\d+)?)(px|PX)/.exec(r);
+          if (result) {
+            elOriginFont.push({path:r,originSize:parseInt(result[1])})
+          }
+        })
+      }
+      console.log(elOriginFont)
+    }
+
+    const originTableCellMinHeight = element.type === 'table' ? element.cellMinHeight : 0
+    
+    const elRotate = ('rotate' in element && element.rotate) ? element.rotate : 0
+    const rotateRadian = Math.PI * elRotate / 180
+
+    const fixedRatio = true//ctrlOrShiftKeyActive.value || ('fixedRatio' in element && element.fixedRatio)
+    const aspectRatio = elOriginWidth / elOriginHeight
+
+    const startPageX = isTouchEvent ? e.changedTouches[0].pageX : e.pageX
+    const startPageY = isTouchEvent ? e.changedTouches[0].pageY : e.pageY
+
+    // 元素最小缩放限制
+    const minSize = MIN_SIZE[element.type] || 20
+    const getSizeWithinRange = (size: number) => size < minSize ? minSize : size
+
+    let points: ReturnType<typeof getRotateElementPoints>
+    let baseLeft = 0
+    let baseTop = 0
+    let horizontalLines: AlignLine[] = []
+    let verticalLines: AlignLine[] = []
+
+    // 旋转后的元素进行缩放时，引入基点的概念，以当前操作的缩放点相对的点为基点
+    // 例如拖动右下角缩放时，左上角为基点，需要保持左上角不变然后修改其他的点的位置来达到所放的效果
+    if ('rotate' in element && element.rotate) {
+      const { left, top, width, height } = element
+      points = getRotateElementPoints({ left, top, width, height }, elRotate)
+      const oppositePoint = getOppositePoint(command, points)
+
+      baseLeft = oppositePoint.left
+      baseTop = oppositePoint.top
+    }
+
+    // 未旋转的元素具有缩放时的对齐吸附功能，在此处收集对齐对齐吸附线
+    // 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置：上下左右四边
+    // 其中线条和被旋转过的元素不参与吸附对齐
+    else {
+      const edgeWidth = VIEWPORT_SIZE.Value
+      const edgeHeight = VIEWPORT_SIZE.Value * viewportRatio.value
+      const isActiveGroupElement = element.id === activeGroupElementId.value
+      
+      for (const el of elementList.value) {
+        if ('rotate' in el && el.rotate) continue
+        if (el.type === 'line') continue
+        if (isActiveGroupElement && el.id === element.id) continue
+        if (!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
+
+        const left = el.left
+        const top = el.top
+        const width = el.width
+        const height = el.height
+        const right = left + width
+        const bottom = top + height
+
+        const topLine: AlignLine = { value: top, range: [left, right] }
+        const bottomLine: AlignLine = { value: bottom, range: [left, right] }
+        const leftLine: AlignLine = { value: left, range: [top, bottom] }
+        const rightLine: AlignLine = { value: right, range: [top, bottom] }
+
+        horizontalLines.push(topLine, bottomLine)
+        verticalLines.push(leftLine, rightLine)
+      }
+
+      // 画布可视区域的四个边界、水平中心、垂直中心
+      const edgeTopLine: AlignLine = { value: 0, range: [0, edgeWidth] }
+      const edgeBottomLine: AlignLine = { value: edgeHeight, range: [0, edgeWidth] }
+      const edgeHorizontalCenterLine: AlignLine = { value: edgeHeight / 2, range: [0, edgeWidth] }
+      const edgeLeftLine: AlignLine = { value: 0, range: [0, edgeHeight] }
+      const edgeRightLine: AlignLine = { value: edgeWidth, range: [0, edgeHeight] }
+      const edgeVerticalCenterLine: AlignLine = { value: edgeWidth / 2, range: [0, edgeHeight] }
+
+      horizontalLines.push(edgeTopLine, edgeBottomLine, edgeHorizontalCenterLine)
+      verticalLines.push(edgeLeftLine, edgeRightLine, edgeVerticalCenterLine)
+      
+      horizontalLines = uniqAlignLines(horizontalLines)
+      verticalLines = uniqAlignLines(verticalLines)
+    }
+    
+    // 对齐吸附方法
+    // 将收集到的对齐吸附线与计算的目标元素当前的位置大小相关数据做对比，差值小于设定的值时执行自动缩放校正
+    // 水平和垂直两个方向需要分开计算
+    const alignedAdsorption = (currentX: number | null, currentY: number | null) => {
+      const sorptionRange = 5
+
+      const _alignmentLines: AlignmentLineProps[] = []
+      let isVerticalAdsorbed = false
+      let isHorizontalAdsorbed = false
+      const correctionVal = { offsetX: 0, offsetY: 0 }
+      
+      if (currentY || currentY === 0) {
+        for (let i = 0; i < horizontalLines.length; i++) {
+          const { value, range } = horizontalLines[i]
+          const min = Math.min(...range, currentX || 0)
+          const max = Math.max(...range, currentX || 0)
+          
+          if (Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
+            correctionVal.offsetY = currentY - value
+            isHorizontalAdsorbed = true
+            _alignmentLines.push({ type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100 })
+          }
+        }
+      }
+      if (currentX || currentX === 0) {
+        for (let i = 0; i < verticalLines.length; i++) {
+          const { value, range } = verticalLines[i]
+          const min = Math.min(...range, (currentY || 0))
+          const max = Math.max(...range, (currentY || 0))
+
+          if (Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
+            correctionVal.offsetX = currentX - value
+            isVerticalAdsorbed = true
+            _alignmentLines.push({ type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100 })
+          }
+        }
+      }
+      alignmentLines.value = _alignmentLines
+      return correctionVal
+    }
+
+    const handleMousemove = (e: MouseEvent | TouchEvent) => {
+      if (!isMouseDown) return
+
+      const currentPageX = e instanceof MouseEvent ? e.pageX : e.changedTouches[0].pageX
+      const currentPageY = e instanceof MouseEvent ? e.pageY : e.changedTouches[0].pageY
+
+      const x = currentPageX - startPageX
+      const y = currentPageY - startPageY
+
+      let width = elOriginWidth
+      let height = elOriginHeight
+      let left = elOriginLeft
+      let top = elOriginTop
+      
+      // 元素被旋转的情况下，需要根据元素旋转的角度，重新计算需要缩放的距离（鼠标按下后移动的距离）
+      if (elRotate) {
+        const revisedX = (Math.cos(rotateRadian) * x + Math.sin(rotateRadian) * y) / canvasScale.value
+        let revisedY = (Math.cos(rotateRadian) * y - Math.sin(rotateRadian) * x) / canvasScale.value
+
+        // 锁定宽高比例（仅四个角可能触发，四条边不会触发）
+        // 以水平方向上缩放的距离为基础，计算垂直方向上的缩放距离，保持二者具有相同的缩放比例
+        if (fixedRatio) {
+          if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
+          if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
+        }
+
+        // 根据不同的操作点分别计算元素缩放后的大小和位置
+        // 需要注意：
+        // 此处计算的位置需要在后面重新进行校正，因为旋转后再缩放事实上会改变元素基点的位置（虽然视觉上基点保持不动，但这是【旋转】+【移动】共同作用的结果）
+        // 但此处计算的大小不需要重新校正，因为前面已经重新计算需要缩放的距离，相当于大小已经经过了校正
+        if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
+          width = getSizeWithinRange(elOriginWidth + revisedX)
+          height = getSizeWithinRange(elOriginHeight + revisedY)
+        }
+        else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
+          width = getSizeWithinRange(elOriginWidth - revisedX)
+          height = getSizeWithinRange(elOriginHeight + revisedY)
+          left = elOriginLeft - (width - elOriginWidth)
+        }
+        else if (command === OperateResizeHandlers.LEFT_TOP) {
+          width = getSizeWithinRange(elOriginWidth - revisedX)
+          height = getSizeWithinRange(elOriginHeight - revisedY)
+          left = elOriginLeft - (width - elOriginWidth)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.RIGHT_TOP) {
+          width = getSizeWithinRange(elOriginWidth + revisedX)
+          height = getSizeWithinRange(elOriginHeight - revisedY)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.TOP) {
+          height = getSizeWithinRange(elOriginHeight - revisedY)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.BOTTOM) {
+          height = getSizeWithinRange(elOriginHeight + revisedY)
+        }
+        else if (command === OperateResizeHandlers.LEFT) {
+          width = getSizeWithinRange(elOriginWidth - revisedX)
+          left = elOriginLeft - (width - elOriginWidth)
+        }
+        else if (command === OperateResizeHandlers.RIGHT) {
+          width = getSizeWithinRange(elOriginWidth + revisedX)
+        }
+
+        // 获取当前元素的基点坐标，与初始状态时的基点坐标进行对比，并计算差值进行元素位置的校正
+        const currentPoints = getRotateElementPoints({ width, height, left, top }, elRotate)
+        const currentOppositePoint = getOppositePoint(command, currentPoints)
+        const currentBaseLeft = currentOppositePoint.left
+        const currentBaseTop = currentOppositePoint.top
+
+        const offsetX = currentBaseLeft - baseLeft
+        const offsetY = currentBaseTop - baseTop
+
+        left = left - offsetX
+        top = top - offsetY
+      }
+
+      // 元素未被旋转的情况下，正常计算新的位置大小即可，无需复杂的校正等工作
+      // 额外需要处理对齐吸附相关的操作
+      // 锁定宽高比例相关的操作同上，不再赘述
+      else {
+        let moveX = x / canvasScale.value
+        let moveY = y / canvasScale.value
+
+        if (fixedRatio) {
+          if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
+          if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
+        }
+
+        if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
+          const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY)
+          moveX = moveX - offsetX
+          moveY = moveY - offsetY
+          if (fixedRatio) {
+            if (offsetY) moveX = moveY * aspectRatio
+            else moveY = moveX / aspectRatio
+          }
+          width = getSizeWithinRange(elOriginWidth + moveX)
+          height = getSizeWithinRange(elOriginHeight + moveY)
+        }
+        else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
+          const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
+          moveX = moveX - offsetX
+          moveY = moveY - offsetY
+          if (fixedRatio) {
+            if (offsetY) moveX = -moveY * aspectRatio
+            else moveY = -moveX / aspectRatio
+          }
+          width = getSizeWithinRange(elOriginWidth - moveX)
+          height = getSizeWithinRange(elOriginHeight + moveY)
+          left = elOriginLeft - (width - elOriginWidth)
+        }
+        else if (command === OperateResizeHandlers.LEFT_TOP) {
+          const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY)
+          moveX = moveX - offsetX
+          moveY = moveY - offsetY
+          if (fixedRatio) {
+            if (offsetY) moveX = moveY * aspectRatio
+            else moveY = moveX / aspectRatio
+          }
+          width = getSizeWithinRange(elOriginWidth - moveX)
+          height = getSizeWithinRange(elOriginHeight - moveY)
+          left = elOriginLeft - (width - elOriginWidth)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.RIGHT_TOP) {
+          const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY)
+          moveX = moveX - offsetX
+          moveY = moveY - offsetY
+          if (fixedRatio) {
+            if (offsetY) moveX = -moveY * aspectRatio
+            else moveY = -moveX / aspectRatio
+          }
+          width = getSizeWithinRange(elOriginWidth + moveX)
+          height = getSizeWithinRange(elOriginHeight - moveY)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.LEFT) {
+          const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
+          moveX = moveX - offsetX
+          width = getSizeWithinRange(elOriginWidth - moveX)
+          left = elOriginLeft - (width - elOriginWidth)
+        }
+        else if (command === OperateResizeHandlers.RIGHT) {
+          const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
+          moveX = moveX - offsetX
+          width = getSizeWithinRange(elOriginWidth + moveX)
+        }
+        else if (command === OperateResizeHandlers.TOP) {
+          const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
+          moveY = moveY - offsetY
+          height = getSizeWithinRange(elOriginHeight - moveY)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.BOTTOM) {
+          const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
+          moveY = moveY - offsetY
+          height = getSizeWithinRange(elOriginHeight + moveY)
+        }
+      }
+      
+      elementList.value = elementList.value.map(el => {
+        if (element.id !== el.id) return el
+        if (el.type === 'shape' && 'pathFormula' in el && el.pathFormula) {
+          const pathFormula = SHAPE_PATH_FORMULAS[el.pathFormula]
+
+          let path = ''
+          if ('editable' in pathFormula) path = pathFormula.formula(width, height, el.keypoint!)
+          else path = pathFormula.formula(width, height)
+
+          return {
+            ...el, left, top, width, height,
+            viewBox: [width, height],
+            path,
+          }
+        }
+        if (el.type === 'table') {
+          let cellMinHeight = originTableCellMinHeight + (height - elOriginHeight) / el.data.length
+          cellMinHeight = cellMinHeight < 36 ? 36 : cellMinHeight
+
+          if (cellMinHeight === originTableCellMinHeight) return { ...el, left, width }
+          return {
+            ...el, left, top, width, height,
+            cellMinHeight: cellMinHeight < 36 ? 36 : cellMinHeight,
+          }
+        }
+
+        if('content' in el && 'vertical' in el){
+          elOriginFont.forEach(x=>{
+            const newFontSize = x.originSize * (el.vertical?(height/elOriginHeight): (width / elOriginWidth));
+            const newPath = `font-size: ${newFontSize}px`
+            el.content = el.content.replaceAll(x.path,newPath)
+            x.path = newPath
+          })
+          
+        }
+        return { ...el, left, top, width, height}
+      })
+    }
+
+    const handleMouseup = (e: MouseEvent | TouchEvent) => {
+      isMouseDown = false
+      
+      document.ontouchmove = null
+      document.ontouchend = null
+      document.onmousemove = null
+      document.onmouseup = null
+
+      alignmentLines.value = []
+
+      const currentPageX = e instanceof MouseEvent ? e.pageX : e.changedTouches[0].pageX
+      const currentPageY = e instanceof MouseEvent ? e.pageY : e.changedTouches[0].pageY
+      
+      if (startPageX === currentPageX && startPageY === currentPageY) return
+
+      slidesStore.updateSlide({ elements: elementList.value })
+      mainStore.setScalingState(false)
+      
+      addHistorySnapshot()
+    }
+
+    if (isTouchEvent) {
+      document.ontouchmove = handleMousemove
+      document.ontouchend = handleMouseup
+    }
+    else {
+      document.onmousemove = handleMousemove
+      document.onmouseup = handleMouseup
+    }
+  }
+
   // 缩放元素
   const scaleElement = (e: MouseEvent | TouchEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
+
     const isTouchEvent = !(e instanceof MouseEvent)
     if (isTouchEvent && (!e.changedTouches || !e.changedTouches[0])) return
 
@@ -565,5 +947,6 @@ export default (
   return {
     scaleElement,
     scaleMultiElement,
+    scaleText,
   }
 }
\ No newline at end of file

src/views/Editor/Canvas/index.vue

@@ -51,6 +51,7 @@
           :isMultiSelect="activeElementIdList.length > 1"
           :rotateElement="rotateElement"
           :scaleElement="scaleElement"
+          :scaleText="scaleText"
           :openLinkDialog="openLinkDialog"
           :dragLineElement="dragLineElement"
           :moveShapeKeypoint="moveShapeKeypoint"
@@ -200,7 +201,7 @@ const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMou
 const { dragElement } = useDragElement(elementList, alignmentLines, canvasScale)
 const { dragLineElement } = useDragLineElement(elementList)
 const { selectElement } = useSelectElement(elementList, dragElement)
-const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
+const { scaleElement, scaleMultiElement, scaleText } = useScaleElement(elementList, alignmentLines, canvasScale)
 const { rotateElement } = useRotateElement(elementList, viewportRef, canvasScale)
 const { moveShapeKeypoint } = useMoveShapeKeypoint(elementList, canvasScale)
 

src/views/TeamCenter/Index.vue

@@ -55,7 +55,7 @@
             <span class="title">存储空间</span>
             <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
           </div>
-          <el-button type="info" class="normal">会员尊享{{TravelDesign.CloudTotsl}}{{TravelDesign.CloudTotallnit}}空间</el-button>
+          <el-button type="info" class="normal">会员尊享{{TravelDesign.CloudTotal}}{{TravelDesign.CloudTotalUnit}}空间</el-button>
         </div>
         <div style="font-size: 14px;" class="q-mt-xl">
           <el-progress :percentage="TravelDesign.storagePercent" />

src/views/UserCenter/Index.vue

@@ -59,7 +59,7 @@
             <span class="title">存储空间</span>
             <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
           </div>
-          <el-button type="info" class="normal">会员尊享{{TravelDesign.CloudTotsl}}{{TravelDesign.CloudTotallnit}}空间</el-button>
+          <el-button type="info" class="normal">会员尊享{{TravelDesign.CloudTotal}}{{TravelDesign.CloudTotalUnit}}空间</el-button>
         </div>
         <div style="font-size: 14px;" class="q-mt-xl">
           <el-progress :percentage="TravelDesign.storagePercent" />