diff --git a/src/App.vue b/src/App.vue index b8b66a9..757c3f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -51,5 +51,6 @@ export default defineComponent({ right: 0; background-color: #fff; padding: 10px; + z-index: -1; } \ No newline at end of file diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts index 2589492..b0db611 100644 --- a/src/utils/emitter.ts +++ b/src/utils/emitter.ts @@ -3,6 +3,7 @@ import mitt, { Emitter } from 'mitt' export enum EmitterEvents { UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE', EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND', + SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE', } const emitter: Emitter = mitt() diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 1a06725..8bfb5ab 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -3,6 +3,7 @@ import { useStore } from 'vuex' import { State, MutationTypes } from '@/store' import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides' import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit' +import emitter, { EmitterEvents } from '@/utils/emitter' import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas' import { MIN_SIZE } from '@/configs/element' import { AlignLine, uniqAlignLines } from '@/utils/element' @@ -97,6 +98,7 @@ export default ( const scaleElement = (e: MouseEvent, element: Exclude, command: OperateResizeHandlers) => { let isMouseDown = true + emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, true) const elOriginLeft = element.left const elOriginTop = element.top @@ -376,6 +378,7 @@ export default ( document.onmouseup = e => { isMouseDown = false + emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, false) document.onmousemove = null document.onmouseup = null alignmentLines.value = [] diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue index 76961b5..601b5cd 100644 --- a/src/views/components/element/TextElement/index.vue +++ b/src/views/components/element/TextElement/index.vue @@ -84,19 +84,25 @@ export default defineComponent({ const elementRef = ref(null) - const debounceUpdateTextElementHeight = debounce(function(realHeight) { - store.commit(MutationTypes.UPDATE_ELEMENT, { - id: props.elementInfo.id, - props: { height: realHeight }, - }) - }, 300, { trailing: true }) + const isScaling = ref(false) - const updateTextElementHeight = () => { + emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, state => { + isScaling.value = state + }) + + const updateTextElementHeight = (entries: ResizeObserverEntry[]) => { + const contentRect = entries[0].contentRect if(!elementRef.value) return - const realHeight = elementRef.value.clientHeight - if(props.elementInfo.height !== realHeight) { - debounceUpdateTextElementHeight(realHeight) + const realHeight = contentRect.height + + if(!isScaling.value) { + if(props.elementInfo.height !== realHeight) { + store.commit(MutationTypes.UPDATE_ELEMENT, { + id: props.elementInfo.id, + props: { height: realHeight }, + }) + } } } const resizeObserver = new ResizeObserver(updateTextElementHeight)