perf: 形状内文字编辑优化

src/store/main.ts

@@ -26,7 +26,6 @@ export interface MainState {
   isScaling: boolean;
   richTextAttrs: TextAttrs;
   selectedTableCells: string[];
-  editingShapeElementId: string;
   selectedSlidesIndex: number[];
 }
 
@@ -50,7 +49,6 @@ export const useMainStore = defineStore('main', {
     richTextAttrs: defaultRichTextAttrs, // 富文本状态
     selectedTableCells: [], // 选中的表格单元格
     isScaling: false, // 正在进行元素缩放
-    editingShapeElementId: '', // 当前正处在编辑文字状态的形状ID  
     selectedSlidesIndex: [], // 当前被选中的页面索引集合
   }),
 
@@ -146,10 +144,6 @@ export const useMainStore = defineStore('main', {
       this.isScaling = isScaling
     },
     
-    setEditingShapeElementId(ellId: string) {
-      this.editingShapeElementId = ellId
-    },
-    
     updateSelectedSlidesIndex(selectedSlidesIndex: number[]) {
       this.selectedSlidesIndex = selectedSlidesIndex
     },

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -71,7 +71,7 @@
     <ElementFlip />
     <Divider />
 
-    <template v-if="showTextTools">
+    <template v-if="handleElement?.text?.content">
       <InputGroup compact class="row">
         <Select
           style="flex: 3;"
@@ -195,7 +195,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeGradient, ShapeText } from '@/types/slides'
@@ -223,9 +223,7 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore()
     const slidesStore = useSlidesStore()
-    const { handleElement, handleElementId, editingShapeElementId, richTextAttrs, availableFonts } = storeToRefs(mainStore)
-
-    const showTextTools = computed(() => editingShapeElementId.value === handleElementId.value)
+    const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(mainStore)
 
     const fill = ref<string>()
     const gradient = ref<ShapeGradient>()
@@ -301,7 +299,7 @@ export default defineComponent({
       availableFonts,
       fontSizeOptions,
       webFonts,
-      showTextTools,
+      handleElement,
       emitRichTextCommand,
       updateFillType,
       updateFill,

src/views/components/element/ShapeElement/index.vue

@@ -24,7 +24,7 @@
         }"
         v-contextmenu="contextmenus"
         @mousedown="$event => handleSelectElement($event)"
-        @dblclick="enterEditing()"
+        @dblclick="editable = true"
       >
         <svg 
           overflow="visible" 
@@ -58,9 +58,9 @@
           </g>
         </svg>
 
-        <div class="shape-text" :class="[text.align, { 'editable': editable }]">
+        <div class="shape-text" :class="[text.align, { 'editable': editable || text.content }]">
           <ProsemirrorEditor
-            v-if="editable"
+            v-if="editable || text.content"
             :elementId="elementInfo.id"
             :defaultColor="text.defaultColor"
             :defaultFontName="text.defaultFontName"
@@ -68,13 +68,8 @@
             :autoFocus="true"
             :value="text.content"
             @update="value => updateText(value)"
-            @mousedown.stop
+            @mousedown="$event => handleSelectElement($event, false)"
           />
-          <div 
-            class="show-text ProseMirror-static"
-            v-else
-            v-html="text.content"
-          ></div>
         </div>
       </div>
     </div>
@@ -121,11 +116,11 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const handleSelectElement = (e: MouseEvent) => {
+    const handleSelectElement = (e: MouseEvent, canMove = true) => {
       if (props.elementInfo.lock) return
       e.stopPropagation()
 
-      props.selectElement(e, props.elementInfo)
+      props.selectElement(e, props.elementInfo, canMove)
     }
 
     const outline = computed(() => props.elementInfo.outline)
@@ -140,19 +135,9 @@ export default defineComponent({
 
     const editable = ref(false)
     
-    const enterEditing = () => {
-      editable.value = true
-      mainStore.setEditingShapeElementId(props.elementInfo.id)
-    }
-
-    const exitEditing = () => {
-      editable.value = false
-      mainStore.setEditingShapeElementId('')
-    }
-    
     watch(handleElementId, () => {
       if (handleElementId.value !== props.elementInfo.id) {
-        if (editable.value) exitEditing()
+        if (editable.value) editable.value = false
       }
     })
 
@@ -188,7 +173,6 @@ export default defineComponent({
       text,
       handleSelectElement,
       updateText,
-      enterEditing,
     }
   },
 })
@@ -249,7 +233,4 @@ export default defineComponent({
     justify-content: flex-end;
   }
 }
-.show-text {
-  pointer-events: none;
-}
 </style>