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/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" />