From f62e7da2584d4475ca3c15665730d8f7067917a5 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Tue, 27 Sep 2022 20:28:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=83=E7=B4=A0?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MoveablePanel.vue | 6 +- src/hooks/useSelectAllElement.ts | 3 +- src/plugins/icon.ts | 4 + src/store/main.ts | 12 ++ .../Editor/Canvas/hooks/useMouseSelection.ts | 6 +- src/views/Editor/Canvas/index.vue | 3 + src/views/Editor/EditorHeader/index.vue | 5 + src/views/Editor/SelectPanel.vue | 181 ++++++++++++++++++ src/views/Editor/index.vue | 5 +- 9 files changed, 219 insertions(+), 6 deletions(-) create mode 100644 src/views/Editor/SelectPanel.vue diff --git a/src/components/MoveablePanel.vue b/src/components/MoveablePanel.vue index 1ab2ff5e..9255872e 100644 --- a/src/components/MoveablePanel.vue +++ b/src/components/MoveablePanel.vue @@ -10,7 +10,7 @@ >
{{title}}
-
+
@@ -45,6 +45,10 @@ const props = defineProps({ }, }) +const emit = defineEmits<{ + (event: 'close'): void +}>() + const x = ref(0) const y = ref(0) diff --git a/src/hooks/useSelectAllElement.ts b/src/hooks/useSelectAllElement.ts index b3560bff..666f8b48 100644 --- a/src/hooks/useSelectAllElement.ts +++ b/src/hooks/useSelectAllElement.ts @@ -4,10 +4,11 @@ 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) + const unlockedElements = currentSlide.value.elements.filter(el => !el.lock && !hiddenElementIdList.value.includes(el.id)) const newActiveElementIdList = unlockedElements.map(el => el.id) mainStore.setActiveElementIdList(newActiveElementIdList) } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 4a10706e..74e304d7 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -108,6 +108,8 @@ import { TextRotationNone, TextRotationDown, FormatBrush, + PreviewOpen, + PreviewClose, } from '@icon-park/vue-next' export const icons = { @@ -217,6 +219,8 @@ export const icons = { IconTextRotationNone: TextRotationNone, IconTextRotationDown: TextRotationDown, IconFormatBrush: FormatBrush, + IconPreviewOpen: PreviewOpen, + IconPreviewClose: PreviewClose, } export default { diff --git a/src/store/main.ts b/src/store/main.ts index 77c053af..6b6158e0 100644 --- a/src/store/main.ts +++ b/src/store/main.ts @@ -13,6 +13,7 @@ export interface MainState { activeElementIdList: string[] handleElementId: string activeGroupElementId: string + hiddenElementIdList: string[] canvasPercentage: number canvasScale: number canvasDragged: boolean @@ -32,6 +33,7 @@ export interface MainState { dialogForExport: DialogForExportTypes databaseId: string textFormatPainter: TextFormatPainter | null + showSelectPanel: boolean } const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz') @@ -42,6 +44,7 @@ export const useMainStore = defineStore('main', { activeElementIdList: [], // 被选中的元素ID集合，包含 handleElementId handleElementId: '', // 正在操作的元素ID activeGroupElementId: '', // 组合元素成员中，被选中可独立操作的元素ID + hiddenElementIdList: [], // 被隐藏的元素ID集合 canvasPercentage: 90, // 画布可视区域百分比 canvasScale: 1, // 画布缩放比例（基于宽度1000px） canvasDragged: false, // 画布被拖拽移动 @@ -61,6 +64,7 @@ export const useMainStore = defineStore('main', { dialogForExport: '', // 导出面板 databaseId, // 标识当前应用的indexedDB数据库ID textFormatPainter: null, // 文字格式刷 + showSelectPanel: false, // 打开选择面板 }), getters: { @@ -94,6 +98,10 @@ export const useMainStore = defineStore('main', { setActiveGroupElementId(activeGroupElementId: string) { this.activeGroupElementId = activeGroupElementId }, + + setHiddenElementIdList(hiddenElementIdList: string[]) { + this.hiddenElementIdList = hiddenElementIdList + }, setCanvasPercentage(percentage: number) { this.canvasPercentage = percentage @@ -166,5 +174,9 @@ export const useMainStore = defineStore('main', { setTextFormatPainter(textFormatPainter: TextFormatPainter | null) { this.textFormatPainter = textFormatPainter }, + + setSelectPanelState(show: boolean) { + this.showSelectPanel = show + }, }, }) \ No newline at end of file diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts index b458d22b..87d8b825 100644 --- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts +++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts @@ -6,7 +6,7 @@ import { getElementRange } from '@/utils/element' export default (elementList: Ref, viewportRef: Ref) => { const mainStore = useMainStore() - const { canvasScale } = storeToRefs(mainStore) + const { canvasScale, hiddenElementIdList } = storeToRefs(mainStore) const mouseSelectionVisible = ref(false) const mouseSelectionQuadrant = ref(1) @@ -117,8 +117,8 @@ export default (elementList: Ref, viewportRef: Ref
@@ -72,6 +73,7 @@ :isMultiSelect="activeElementIdList.length > 1" :selectElement="selectElement" :openLinkDialog="openLinkDialog" + v-show="!hiddenElementIdList.includes(element.id)" /> @@ -137,6 +139,7 @@ const { activeElementIdList, activeGroupElementId, handleElementId, + hiddenElementIdList, editorAreaFocus, gridLineSize, showRuler, diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue index 96e97550..737fe63f 100644 --- a/src/views/Editor/EditorHeader/index.vue +++ b/src/views/Editor/EditorHeader/index.vue @@ -27,6 +27,7 @@ {{ gridLineSize ? '关闭网格线' : '打开网格线' }} {{ showRuler ? '关闭标尺' : '打开标尺' }} 重置幻灯片 + 打开选择面板 @@ -107,6 +108,10 @@ const toggleRuler = () => { mainStore.setRulerState(!showRuler.value) } +const openSelectPanel = () => { + mainStore.setSelectPanelState(true) +} + const hotkeyDrawerVisible = ref(false) const goIssues = () => { diff --git a/src/views/Editor/SelectPanel.vue b/src/views/Editor/SelectPanel.vue new file mode 100644 index 00000000..a42cb013 --- /dev/null +++ b/src/views/Editor/SelectPanel.vue @@ -0,0 +1,181 @@ + + + + + \ No newline at end of file diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue index 4bdb6bb6..359ccba0 100644 --- a/src/views/Editor/index.vue +++ b/src/views/Editor/index.vue @@ -16,6 +16,8 @@ + + mainStore.setDialogForExport('') const remarkHeight = ref(40)