diff --git a/src/components/ColorPicker/EditableInput.vue b/src/components/ColorPicker/EditableInput.vue index 7f971f75..9f33cf0e 100644 --- a/src/components/ColorPicker/EditableInput.vue +++ b/src/components/ColorPicker/EditableInput.vue @@ -29,7 +29,12 @@ const val = computed(() => { const handleInput = (e: Event) => { const value = (e.target as HTMLInputElement).value - if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb()) + if (value.length >= 6) { + const color = tinycolor(value) + if (color.isValid()) { + emit('colorChange', color.toRgb()) + } + } } diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts index a00bbb8b..b858d9ef 100644 --- a/src/utils/emitter.ts +++ b/src/utils/emitter.ts @@ -2,6 +2,7 @@ import mitt, { type Emitter } from 'mitt' export const enum EmitterEvents { RICH_TEXT_COMMAND = 'RICH_TEXT_COMMAND', + SYNC_RICH_TEXT_ATTRS_TO_STORE = 'SYNC_RICH_TEXT_ATTRS_TO_STORE', OPEN_CHART_DATA_EDITOR = 'OPEN_CHART_DATA_EDITOR', OPEN_LATEX_EDITOR = 'OPEN_LATEX_EDITOR', } @@ -18,6 +19,7 @@ export interface RichTextCommand { type Events = { [EmitterEvents.RICH_TEXT_COMMAND]: RichTextCommand + [EmitterEvents.SYNC_RICH_TEXT_ATTRS_TO_STORE]: void [EmitterEvents.OPEN_CHART_DATA_EDITOR]: void [EmitterEvents.OPEN_LATEX_EDITOR]: void } diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 051d11c2..065f24e7 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -133,6 +133,10 @@ export default ( // 元素最小缩放限制 const minSize = MIN_SIZE[element.type] || 20 const getSizeWithinRange = (size: number) => size < minSize ? minSize : size + const getHeightWithinRange = (height: number) => { + const minHeight = minSize / aspectRatio + return height < minHeight ? minHeight : height + } let points: ReturnType let baseLeft = 0 @@ -269,22 +273,22 @@ export default ( // 但此处计算的大小不需要重新校正,因为前面已经重新计算需要缩放的距离,相当于大小已经经过了校正 if (command === OperateResizeHandlers.RIGHT_BOTTOM) { width = getSizeWithinRange(elOriginWidth + revisedX) - height = getSizeWithinRange(elOriginHeight + revisedY) + height = getHeightWithinRange(elOriginHeight + revisedY) } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { width = getSizeWithinRange(elOriginWidth - revisedX) - height = getSizeWithinRange(elOriginHeight + revisedY) + height = getHeightWithinRange(elOriginHeight + revisedY) left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { width = getSizeWithinRange(elOriginWidth - revisedX) - height = getSizeWithinRange(elOriginHeight - revisedY) + height = getHeightWithinRange(elOriginHeight - revisedY) left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.RIGHT_TOP) { width = getSizeWithinRange(elOriginWidth + revisedX) - height = getSizeWithinRange(elOriginHeight - revisedY) + height = getHeightWithinRange(elOriginHeight - revisedY) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.TOP) { @@ -336,7 +340,7 @@ export default ( else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) - height = getSizeWithinRange(elOriginHeight + moveY) + height = getHeightWithinRange(elOriginHeight + moveY) } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY) @@ -347,7 +351,7 @@ export default ( else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) - height = getSizeWithinRange(elOriginHeight + moveY) + height = getHeightWithinRange(elOriginHeight + moveY) left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { @@ -359,7 +363,7 @@ export default ( else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) - height = getSizeWithinRange(elOriginHeight - moveY) + height = getHeightWithinRange(elOriginHeight - moveY) left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } @@ -372,7 +376,7 @@ export default ( else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) - height = getSizeWithinRange(elOriginHeight - moveY) + height = getHeightWithinRange(elOriginHeight - moveY) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.LEFT) { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index a07725a5..fc5284ba 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -457,6 +457,7 @@ watch(handleElement, () => { lineHeight.value = handleElement.value.lineHeight || 1.5 wordSpace.value = handleElement.value.wordSpace || 0 paragraphSpace.value = handleElement.value.paragraphSpace === undefined ? 5 : handleElement.value.paragraphSpace + emitter.emit(EmitterEvents.SYNC_RICH_TEXT_ATTRS_TO_STORE) }, { deep: true, immediate: true }) const fontSizeOptions = [ diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue index ee2adbc5..182f0fd2 100644 --- a/src/views/components/element/ProsemirrorEditor.vue +++ b/src/views/components/element/ProsemirrorEditor.vue @@ -262,9 +262,16 @@ onUnmounted(() => { editorView && editorView.destroy() }) +const syncAttrsToStore = () => { + if (handleElementId.value !== props.elementId) return + handleClick() +} + emitter.on(EmitterEvents.RICH_TEXT_COMMAND, execCommand) +emitter.on(EmitterEvents.SYNC_RICH_TEXT_ATTRS_TO_STORE, syncAttrsToStore) onUnmounted(() => { emitter.off(EmitterEvents.RICH_TEXT_COMMAND, execCommand) + emitter.off(EmitterEvents.SYNC_RICH_TEXT_ATTRS_TO_STORE, syncAttrsToStore) })