feat: 优先删除组合元素成员中被选中可独立操作的元素

src/hooks/useDeleteElement.ts

@@ -1,19 +1,29 @@
 import { computed } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { Slide } from '@/types/slides'
+import { PPTElement, Slide } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
   const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
+  const activeGroupElementId = computed(() => store.state.activeGroupElementId)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
   // 删除全部选中元素
+  // 组合元素成员中，存在被选中可独立操作的元素时，优先删除该元素。否则默认删除所有被选中的元素
   const deleteElement = () => {
     if (!activeElementIdList.value.length) return
-    const newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.id))
+
+    let newElementList: PPTElement[] = []
+    if (activeGroupElementId.value) {
+      newElementList = currentSlide.value.elements.filter(el => el.id !== activeGroupElementId.value)
+    }
+    else {
+      newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.id))
+    }
+
     store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
     addHistorySnapshot()

src/store/constants.ts

@@ -3,6 +3,7 @@ export const enum MutationTypes {
   // editor
   SET_ACTIVE_ELEMENT_ID_LIST = 'setActiveElementIdList',
   SET_HANDLE_ELEMENT_ID = 'setHandleElementId',
+  SET_ACTIVE_GROUP_ELEMENT_ID = 'setActiveGroupElementId',
   SET_CANVAS_PERCENTAGE = 'setCanvasPercentage',
   SET_CANVAS_SCALE = 'setCanvasScale',
   SET_THUMBNAILS_FOCUS = 'setThumbnailsFocus',

src/store/mutations.ts

@@ -32,6 +32,10 @@ export const mutations: MutationTree<State> = {
     state.handleElementId = handleElementId
   },
   
+  [MutationTypes.SET_ACTIVE_GROUP_ELEMENT_ID](state, activeGroupElementId: string) {
+    state.activeGroupElementId = activeGroupElementId
+  },
+
   [MutationTypes.SET_CANVAS_PERCENTAGE](state, percentage: number) {
     state.canvasPercentage = percentage
   },

src/store/state.ts

@@ -8,6 +8,7 @@ import { SYS_FONTS } from '@/configs/font'
 export interface State {
   activeElementIdList: string[];
   handleElementId: string;
+  activeGroupElementId: string;
   canvasPercentage: number;
   canvasScale: number;
   thumbnailsFocus: boolean;
@@ -33,6 +34,7 @@ export interface State {
 export const state: State = {
   activeElementIdList: [], // 被选中的元素ID集合，包含 handleElementId
   handleElementId: '', // 正在操作的元素ID
+  activeGroupElementId: '', // 组合元素成员中，被选中可独立操作的元素ID
   canvasPercentage: 90, // 画布可视区域百分比
   canvasScale: 1, // 画布缩放比例（基于宽度1000px）
   thumbnailsFocus: false, // 左侧导航缩略图区域聚焦

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

@@ -8,11 +8,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default (
   elementList: Ref<PPTElement[]>,
-  activeGroupElementId: Ref<string>,
   alignmentLines: Ref<AlignmentLineProps[]>,
 ) => {
   const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
+  const activeGroupElementId = computed(() => store.state.activeGroupElementId)
   const canvasScale = computed(() => store.state.canvasScale)
   const viewportRatio = computed(() => store.state.viewportRatio)
 

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

@@ -94,11 +94,11 @@ const getOppositePoint = (direction: string, points: ReturnType<typeof getRotate
 
 export default (
   elementList: Ref<PPTElement[]>,
-  activeGroupElementId: Ref<string>,
   alignmentLines: Ref<AlignmentLineProps[]>,
 ) => {
   const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
+  const activeGroupElementId = computed(() => store.state.activeGroupElementId)
   const canvasScale = computed(() => store.state.canvasScale)
   const viewportRatio = computed(() => store.state.viewportRatio)
   const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)

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

@@ -5,12 +5,12 @@ import { PPTElement } from '@/types/slides'
 
 export default (
   elementList: Ref<PPTElement[]>,
-  activeGroupElementId: Ref<string>,
   moveElement: (e: MouseEvent, element: PPTElement) => void,
 ) => {
   const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const handleElementId = computed(() => store.state.handleElementId)
+  const activeGroupElementId = computed(() => store.state.activeGroupElementId)
   const editorAreaFocus = computed(() => store.state.editorAreaFocus)
   const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
@@ -79,7 +79,7 @@ export default (
         const currentPageY = e.pageY
 
         if (startPageX === currentPageX && startPageY === currentPageY) {
-          activeGroupElementId.value = element.id
+          store.commit(MutationTypes.SET_ACTIVE_GROUP_ELEMENT_ID, element.id)
           ;(e.target as HTMLElement).onmouseup = null
         }
       }

src/views/Editor/Canvas/index.vue

@@ -125,6 +125,7 @@ export default defineComponent({
 
     const activeElementIdList = computed(() => store.state.activeElementIdList)
     const handleElementId = computed(() => store.state.handleElementId)
+    const activeGroupElementId = computed(() => store.state.activeGroupElementId)
     const editorAreaFocus = computed(() => store.state.editorAreaFocus)
     const ctrlKeyState = computed(() => store.state.ctrlKeyState)
     const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
@@ -132,8 +133,9 @@ export default defineComponent({
     const viewportRef = ref<HTMLElement>()
     const alignmentLines = ref<AlignmentLineProps[]>([])
 
-    const activeGroupElementId = ref('')
+    watch(handleElementId, () => {
-    watch(handleElementId, () => activeGroupElementId.value = '')
+      store.commit(MutationTypes.SET_ACTIVE_GROUP_ELEMENT_ID, '')
+    })
 
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
     const elementList = ref<PPTElement[]>([])
@@ -150,10 +152,10 @@ export default defineComponent({
 
     const { mouseSelectionState, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
 
-    const { dragElement } = useDragElement(elementList, activeGroupElementId, alignmentLines)
+    const { dragElement } = useDragElement(elementList, alignmentLines)
     const { dragLineElement } = useDragLineElement(elementList)
-    const { selectElement } = useSelectElement(elementList, activeGroupElementId, dragElement)
+    const { selectElement } = useSelectElement(elementList, dragElement)
-    const { scaleElement, scaleMultiElement } = useScaleElement(elementList, activeGroupElementId, alignmentLines)
+    const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines)
     const { rotateElement } = useRotateElement(elementList, viewportRef)
 
     const { selectAllElement } = useSelectAllElement()