From c60208a117f1a3003a4524d1f994ee66a249fa02 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Sun, 10 Mar 2024 13:44:59 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E3=80=81UI=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ColorPicker/index.vue | 4 +- src/hooks/useGlobalHotkey.ts | 6 +-- src/hooks/useHideElement.ts | 35 ++++++++++++++ ...electAllElement.ts => useSelectElement.ts} | 48 ++++++++++++------- src/views/Editor/Canvas/EditableElement.vue | 6 +-- src/views/Editor/Canvas/ShapeCreateCanvas.vue | 7 ++- src/views/Editor/Canvas/index.vue | 10 ++-- src/views/Editor/NotesPanel.vue | 4 +- src/views/Editor/SelectPanel.vue | 45 +++++------------ 9 files changed, 96 insertions(+), 69 deletions(-) create mode 100644 src/hooks/useHideElement.ts rename src/hooks/{useSelectAllElement.ts => useSelectElement.ts} (50%) diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue index 5ebce959..78427b04 100644 --- a/src/components/ColorPicker/index.vue +++ b/src/components/ColorPicker/index.vue @@ -215,7 +215,7 @@ const openEyeDropper = () => { // 原生取色吸管 const browserEyeDropper = () => { - message.success('按 ESC 键关闭取色吸管') + message.success('按 ESC 键关闭取色吸管', { duration: 0 }) // eslint-disable-next-line const eyeDropper = new (window as any).EyeDropper() @@ -226,7 +226,7 @@ const browserEyeDropper = () => { updateRecentColorsCache() }).catch(() => { - message.success('关闭取色吸管') + message.closeAll() }) } diff --git a/src/hooks/useGlobalHotkey.ts b/src/hooks/useGlobalHotkey.ts index bfbe3217..58177584 100644 --- a/src/hooks/useGlobalHotkey.ts +++ b/src/hooks/useGlobalHotkey.ts @@ -9,7 +9,7 @@ import useLockElement from './useLockElement' import useDeleteElement from './useDeleteElement' import useCombineElement from './useCombineElement' import useCopyAndPasteElement from './useCopyAndPasteElement' -import useSelectAllElement from './useSelectAllElement' +import useSelectElement from './useSelectElement' import useMoveElement from './useMoveElement' import useOrderElement from './useOrderElement' import useHistorySnapshot from './useHistorySnapshot' @@ -45,7 +45,7 @@ export default () => { const { deleteElement } = useDeleteElement() const { lockElement } = useLockElement() const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement() - const { selectAllElement } = useSelectAllElement() + const { selectAllElements } = useSelectElement() const { moveElement } = useMoveElement() const { orderElement } = useOrderElement() const { redo, undo } = useHistorySnapshot() @@ -68,7 +68,7 @@ export default () => { } const selectAll = () => { - if (editorAreaFocus.value) selectAllElement() + if (editorAreaFocus.value) selectAllElements() if (thumbnailsFocus.value) selectAllSlide() } diff --git a/src/hooks/useHideElement.ts b/src/hooks/useHideElement.ts new file mode 100644 index 00000000..b3e3e490 --- /dev/null +++ b/src/hooks/useHideElement.ts @@ -0,0 +1,35 @@ +import { storeToRefs } from 'pinia' +import { useSlidesStore, useMainStore } from '@/store' + +export default () => { + const slidesStore = useSlidesStore() + const mainStore = useMainStore() + const { currentSlide } = storeToRefs(slidesStore) + const { activeElementIdList, hiddenElementIdList } = storeToRefs(mainStore) + + const toggleHideElement = (id: string) => { + if (hiddenElementIdList.value.includes(id)) { + mainStore.setHiddenElementIdList(hiddenElementIdList.value.filter(item => item !== id)) + } + else mainStore.setHiddenElementIdList([...hiddenElementIdList.value, id]) + + if (activeElementIdList.value.includes(id)) mainStore.setActiveElementIdList([]) + } + + const showAllElements = () => { + const currentSlideElIdList = currentSlide.value.elements.map(item => item.id) + const needHiddenElementIdList = hiddenElementIdList.value.filter(item => !currentSlideElIdList.includes(item)) + mainStore.setHiddenElementIdList(needHiddenElementIdList) + } + const hideAllElements = () => { + const currentSlideElIdList = currentSlide.value.elements.map(item => item.id) + mainStore.setHiddenElementIdList([...hiddenElementIdList.value, ...currentSlideElIdList]) + if (activeElementIdList.value.length) mainStore.setActiveElementIdList([]) + } + + return { + toggleHideElement, + showAllElements, + hideAllElements, + } +} \ No newline at end of file diff --git a/src/hooks/useSelectAllElement.ts b/src/hooks/useSelectElement.ts similarity index 50% rename from src/hooks/useSelectAllElement.ts rename to src/hooks/useSelectElement.ts index 666f8b48..5e543879 100644 --- a/src/hooks/useSelectAllElement.ts +++ b/src/hooks/useSelectElement.ts @@ -1,19 +1,31 @@ -import { storeToRefs } from 'pinia' -import { useMainStore, useSlidesStore } from '@/store' - -export default () => { - const mainStore = useMainStore() - const { currentSlide } = storeToRefs(useSlidesStore()) - const { hiddenElementIdList } = storeToRefs(mainStore) - - // 将当前页面全部元素设置为被选择状态 - const selectAllElement = () => { - const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id)) - const newActiveElementIdList = unlockedElements.map(el => el.id) - mainStore.setActiveElementIdList(newActiveElementIdList) - } - - return { - selectAllElement, - } +import { storeToRefs } from 'pinia' +import { useMainStore, useSlidesStore } from '@/store' + +export default () => { + const mainStore = useMainStore() + const { currentSlide } = storeToRefs(useSlidesStore()) + const { hiddenElementIdList, handleElementId } = storeToRefs(mainStore) + + // 将当前页面全部元素设置为被选择状态 + const selectAllElements = () => { + const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id)) + const newActiveElementIdList = unlockedElements.map(el => el.id) + mainStore.setActiveElementIdList(newActiveElementIdList) + } + + // 将指定元素设置为被选择状态 + const selectElement = (id: string) => { + if (handleElementId.value === id) return + if (hiddenElementIdList.value.includes(id)) return + + const lockedElements = currentSlide.value.elements.filter(el => el.lock) + if (lockedElements.some(el => el.id === id)) return + + mainStore.setActiveElementIdList([id]) + } + + return { + selectAllElements, + selectElement, + } } \ No newline at end of file diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue index 2d02c39a..b191bf0a 100644 --- a/src/views/Editor/Canvas/EditableElement.vue +++ b/src/views/Editor/Canvas/EditableElement.vue @@ -27,7 +27,7 @@ import useCombineElement from '@/hooks/useCombineElement' import useOrderElement from '@/hooks/useOrderElement' import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas' import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement' -import useSelectAllElement from '@/hooks/useSelectAllElement' +import useSelectElement from '@/hooks/useSelectElement' import { ElementOrderCommands, ElementAlignCommands } from '@/types/edit' @@ -70,7 +70,7 @@ const { combineElements, uncombineElements } = useCombineElement() const { deleteElement } = useDeleteElement() const { lockElement, unlockElement } = useLockElement() const { copyElement, pasteElement, cutElement } = useCopyAndPasteElement() -const { selectAllElement } = useSelectAllElement() +const { selectAllElements } = useSelectElement() const contextmenus = (): ContextmenuItem[] => { if (props.elementInfo.lock) { @@ -150,7 +150,7 @@ const contextmenus = (): ContextmenuItem[] => { { text: '全选', subText: 'Ctrl + A', - handler: selectAllElement, + handler: selectAllElements, }, { text: '锁定', diff --git a/src/views/Editor/Canvas/ShapeCreateCanvas.vue b/src/views/Editor/Canvas/ShapeCreateCanvas.vue index cc34a43a..d496d763 100644 --- a/src/views/Editor/Canvas/ShapeCreateCanvas.vue +++ b/src/views/Editor/Canvas/ShapeCreateCanvas.vue @@ -166,11 +166,14 @@ const keydownListener = (e: KeyboardEvent) => { } onMounted(() => { message.success('点击绘制任意形状，首尾闭合完成绘制，按 ESC 键或鼠标右键取消，按 ENTER 键提前完成', { - duration: 5000, + duration: 0, }) document.addEventListener('keydown', keydownListener) }) -onUnmounted(() => document.removeEventListener('keydown', keydownListener)) +onUnmounted(() => { + document.removeEventListener('keydown', keydownListener) + message.closeAll() +})