From 138f09cdd25fb535767367d5ebfa1fcb5f1d04c5 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Tue, 17 May 2022 22:43:30 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=96=87=E6=9C=AC=E6=A1=86=E4=BC=98?= =?UTF-8?q?=E5=8C=96=EF=BC=88=E5=88=9B=E5=BB=BA=E6=96=87=E6=9C=AC=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E8=81=9A=E7=84=A6=E3=80=81=E7=A9=BA=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=88=A0=E9=99=A4=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useCreateElement.ts | 14 +++++++++++--- src/store/slides.ts | 7 +++++++ src/views/Editor/Canvas/hooks/useScaleElement.ts | 2 +- src/views/components/element/ProsemirrorEditor.vue | 7 +------ src/views/components/element/TextElement/index.vue | 7 +++++++ 5 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 0c1de7de..f4c6f1e8 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -32,7 +32,7 @@ export default () => { const { addHistorySnapshot } = useHistorySnapshot() // 创建（插入）一个元素并将其设置为被选中元素 - const createElement = (element: PPTElement) => { + const createElement = (element: PPTElement, callback?: () => void) => { slidesStore.addElement(element) mainStore.setActiveElementIdList([element.id]) @@ -42,6 +42,8 @@ export default () => { mainStore.setEditorareaFocus(true) }, 0) + if (callback) callback() + addHistorySnapshot() } @@ -170,11 +172,12 @@ export default () => { * @param position 位置大小信息 * @param content 文本内容 */ - const createTextElement = (position: CommonElementPosition, content = '请输入内容') => { + const createTextElement = (position: CommonElementPosition, content = '') => { const { left, top, width, height } = position + const id = nanoid(10) createElement({ type: 'text', - id: nanoid(10), + id, left, top, width, @@ -183,6 +186,11 @@ export default () => { rotate: 0, defaultFontName: theme.value.fontName, defaultColor: theme.value.fontColor, + }, () => { + setTimeout(() => { + const editorRef: HTMLElement | null = document.querySelector(`#editable-element-${id} .ProseMirror`) + if (editorRef) editorRef.focus() + }, 0) }) } diff --git a/src/store/slides.ts b/src/store/slides.ts index 13d50e11..90234c0b 100644 --- a/src/store/slides.ts +++ b/src/store/slides.ts @@ -155,6 +155,13 @@ export const useSlidesStore = defineStore('slides', { const newEls = [...currentSlideEls, ...elements] this.slides[this.slideIndex].elements = newEls }, + + deleteElement(elementId: string | string[]) { + const elementIdList = Array.isArray(elementId) ? elementId : [elementId] + const currentSlideEls = this.slides[this.slideIndex].elements + const newEls = currentSlideEls.filter(item => !elementIdList.includes(item.id)) + this.slides[this.slideIndex].elements = newEls + }, updateElement(data: UpdateElementData) { const { id, props } = data diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 4f84f49c..553b0479 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -145,7 +145,7 @@ export default ( baseTop = oppositePoint.top } - // 未旋转的元素具有缩放时的对齐吸附功能，在这处收集对齐对齐吸附线 + // 未旋转的元素具有缩放时的对齐吸附功能，在此处收集对齐对齐吸附线 // 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置：上下左右四边 // 其中线条和被旋转过的元素不参与吸附对齐 else { diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue index 008258eb..dbc4a897 100644 --- a/src/views/components/element/ProsemirrorEditor.vue +++ b/src/views/components/element/ProsemirrorEditor.vue @@ -11,7 +11,7 @@ import { debounce } from 'lodash' import { storeToRefs } from 'pinia' import { useMainStore } from '@/store' import { EditorView } from 'prosemirror-view' -import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands' +import { toggleMark, wrapIn } from 'prosemirror-commands' import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror' import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive, getFontsize } from '@/utils/prosemirror/utils' import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter' @@ -63,11 +63,6 @@ export default defineComponent({ }, 300, { trailing: true }) const handleFocus = () => { - if (props.value === '请输入内容') { - setTimeout(() => { - selectAll(editorView.state, editorView.dispatch) - }, 100) - } mainStore.setDisableHotkeysState(true) emit('focus') } diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue index 731ce1c8..19699689 100644 --- a/src/views/components/element/TextElement/index.vue +++ b/src/views/components/element/TextElement/index.vue @@ -40,6 +40,7 @@ :editable="!elementInfo.lock" :value="elementInfo.content" @update="value => updateContent(value)" + @blur="checkEmptyText()" @mousedown="$event => handleSelectElement($event, false)" /> @@ -151,11 +152,17 @@ export default defineComponent({ addHistorySnapshot() } + const checkEmptyText = () => { + const pureText = props.elementInfo.content.replaceAll(/<[^>]+>/g, '') + if (!pureText) slidesStore.deleteElement(props.elementInfo.id) + } + return { elementRef, shadowStyle, updateContent, handleSelectElement, + checkEmptyText, } }, })