优化字体放大缩小

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 => scaleElement($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,8 @@ 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)
+console.log(textElementTesizeHandlers.value,'---------')
 </script>
\ 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)