diff --git a/src/hooks/useDeleteElement.ts b/src/hooks/useDeleteElement.ts index e405ea02..d447bf48 100644 --- a/src/hooks/useDeleteElement.ts +++ b/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(() => 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() diff --git a/src/store/constants.ts b/src/store/constants.ts index 326d0701..2982f6ad 100644 --- a/src/store/constants.ts +++ b/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', diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 04607d8b..e9a553c2 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -31,6 +31,10 @@ export const mutations: MutationTree = { [MutationTypes.SET_HANDLE_ELEMENT_ID](state, handleElementId: string) { 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 diff --git a/src/store/state.ts b/src/store/state.ts index 3d98cadf..bc0ae9eb 100644 --- a/src/store/state.ts +++ b/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, // 左侧导航缩略图区域聚焦 diff --git a/src/views/Editor/Canvas/hooks/useDragElement.ts b/src/views/Editor/Canvas/hooks/useDragElement.ts index 5347dbac..31c3c40d 100644 --- a/src/views/Editor/Canvas/hooks/useDragElement.ts +++ b/src/views/Editor/Canvas/hooks/useDragElement.ts @@ -8,11 +8,11 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot' export default ( elementList: Ref, - activeGroupElementId: Ref, alignmentLines: Ref, ) => { 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) diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 82caf072..dc0ff546 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -94,11 +94,11 @@ const getOppositePoint = (direction: string, points: ReturnType, - activeGroupElementId: Ref, alignmentLines: Ref, ) => { 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(() => store.getters.ctrlOrShiftKeyActive) diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts index 98184544..bf2229b6 100644 --- a/src/views/Editor/Canvas/hooks/useSelectElement.ts +++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts @@ -5,12 +5,12 @@ import { PPTElement } from '@/types/slides' export default ( elementList: Ref, - activeGroupElementId: Ref, 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(() => 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 } } diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue index 57b5c0f9..d51e96b1 100644 --- a/src/views/Editor/Canvas/index.vue +++ b/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(() => store.getters.ctrlOrShiftKeyActive) @@ -132,8 +133,9 @@ export default defineComponent({ const viewportRef = ref() const alignmentLines = ref([]) - const activeGroupElementId = ref('') - watch(handleElementId, () => activeGroupElementId.value = '') + watch(handleElementId, () => { + store.commit(MutationTypes.SET_ACTIVE_GROUP_ELEMENT_ID, '') + }) const currentSlide = computed(() => store.getters.currentSlide) const elementList = ref([]) @@ -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 { scaleElement, scaleMultiElement } = useScaleElement(elementList, activeGroupElementId, alignmentLines) + const { selectElement } = useSelectElement(elementList, dragElement) + const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines) const { rotateElement } = useRotateElement(elementList, viewportRef) const { selectAllElement } = useSelectAllElement()