fix: size range

pipipi-pikachu · Mar 9, 2024 · aba93ce · aba93ce
1 parent 17ab32a
commit aba93ce
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 25 deletions.
diff --git 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
@@ -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<typeof getRotateElementPoints>
     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
@@ -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<PPTElement> = { 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<PPTElement> = { 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 })