diff --git a/src/configs/element.ts b/src/configs/element.ts index 608a11ab..a8f880a3 100644 --- a/src/configs/element.ts +++ b/src/configs/element.ts @@ -13,7 +13,7 @@ export const ELEMENT_TYPE_ZH: { [key: string]: string } = { export const MIN_SIZE: { [key: string]: number } = { text: 20, image: 20, - shape: 15, + shape: 20, chart: 200, table: 20, video: 250, diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index 065f24e7..051d11c2 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -133,10 +133,6 @@ 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 @@ -273,22 +269,22 @@ export default ( // 但此处计算的大小不需要重新校正,因为前面已经重新计算需要缩放的距离,相当于大小已经经过了校正 if (command === OperateResizeHandlers.RIGHT_BOTTOM) { width = getSizeWithinRange(elOriginWidth + revisedX) - height = getHeightWithinRange(elOriginHeight + revisedY) + height = getSizeWithinRange(elOriginHeight + revisedY) } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { width = getSizeWithinRange(elOriginWidth - revisedX) - height = getHeightWithinRange(elOriginHeight + revisedY) + height = getSizeWithinRange(elOriginHeight + revisedY) left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { width = getSizeWithinRange(elOriginWidth - revisedX) - height = getHeightWithinRange(elOriginHeight - revisedY) + height = getSizeWithinRange(elOriginHeight - revisedY) left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.RIGHT_TOP) { width = getSizeWithinRange(elOriginWidth + revisedX) - height = getHeightWithinRange(elOriginHeight - revisedY) + height = getSizeWithinRange(elOriginHeight - revisedY) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.TOP) { @@ -340,7 +336,7 @@ export default ( else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) - height = getHeightWithinRange(elOriginHeight + moveY) + height = getSizeWithinRange(elOriginHeight + moveY) } else if (command === OperateResizeHandlers.LEFT_BOTTOM) { const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY) @@ -351,7 +347,7 @@ export default ( else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) - height = getHeightWithinRange(elOriginHeight + moveY) + height = getSizeWithinRange(elOriginHeight + moveY) left = elOriginLeft - (width - elOriginWidth) } else if (command === OperateResizeHandlers.LEFT_TOP) { @@ -363,7 +359,7 @@ export default ( else moveY = moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth - moveX) - height = getHeightWithinRange(elOriginHeight - moveY) + height = getSizeWithinRange(elOriginHeight - moveY) left = elOriginLeft - (width - elOriginWidth) top = elOriginTop - (height - elOriginHeight) } @@ -376,7 +372,7 @@ export default ( else moveY = -moveX / aspectRatio } width = getSizeWithinRange(elOriginWidth + moveX) - height = getHeightWithinRange(elOriginHeight - moveY) + height = getSizeWithinRange(elOriginHeight - moveY) top = elOriginTop - (height - elOriginHeight) } else if (command === OperateResizeHandlers.LEFT) { diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue index 1e8baeeb..6c3de814 100644 --- a/src/views/Editor/Toolbar/ElementPositionPanel.vue +++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue @@ -115,6 +115,7 @@ import { computed, ref, watch } from 'vue' import { round } from 'lodash' import { storeToRefs } from 'pinia' import { useMainStore, useSlidesStore } from '@/store' +import type { PPTElement } from '@/types/slides' import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit' import { MIN_SIZE } from '@/configs/element' import { SHAPE_PATH_FORMULAS } from '@/configs/shapes' @@ -197,30 +198,51 @@ const updateShapePathData = (width: number, height: number) => { } return null } + const updateWidth = (value: number) => { - const ratio = width.value / height.value - let props = { - width: value, - height: fixedRatio.value ? value / ratio : height.value, + let h = height.value + + if (fixedRatio.value) { + const ratio = width.value / height.value + h = (value / ratio) < minSize.value ? minSize.value : (value / ratio) + } + let props: Partial = { width: value, height: h } + + const shapePathData = updateShapePathData(value, h) + if (shapePathData) { + props = { + width: value, + height: h, + ...shapePathData, + } } - const shapePathData = updateShapePathData(value, props.height) - if (shapePathData) props = { ...props, ...shapePathData } slidesStore.updateElement({ id: handleElementId.value, props }) addHistorySnapshot() } + const updateHeight = (value: number) => { - const ratio = width.value / height.value - let props = { - height: value, - width: fixedRatio.value ? value * ratio : width.value, + let w = width.value + + if (fixedRatio.value) { + const ratio = width.value / height.value + w = (value * ratio) < minSize.value ? minSize.value : (value * ratio) + } + let props: Partial = { width: w, height: value } + + const shapePathData = updateShapePathData(w, value) + if (shapePathData) { + props = { + width: w, + height: value, + ...shapePathData, + } } - const shapePathData = updateShapePathData(props.width, value) - if (shapePathData) props = { ...props, ...shapePathData } slidesStore.updateElement({ id: handleElementId.value, props }) addHistorySnapshot() } + const updateRotate = (value: number) => { const props = { rotate: value } slidesStore.updateElement({ id: handleElementId.value, props })