From 1c82303fe14ef4eb71bc9fc756d1aff6b850e733 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 9 Mar 2024 12:11:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=9D=A2=E6=9D=BF=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=BD=E9=AB=98=E6=97=B6=EF=BC=8C=E5=AF=B9?=
 =?UTF-8?q?=E9=94=81=E5=AE=9A=E6=AF=94=E4=BE=8B=E7=9A=84=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E7=BB=B4=E6=8C=81=E5=8E=9F=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Toolbar/ElementPositionPanel.vue   | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 4d43162e..1e8baeeb 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -66,7 +66,7 @@
           </template>
         </NumberInput>
         <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
-          <IconLock style="width: 10%;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
+          <IconLock style="width: 10%;" class="icon-btn active" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
           <IconUnlock style="width: 10%;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
         </template>
         <div style="width: 10%;" v-else></div>
@@ -198,16 +198,24 @@ const updateShapePathData = (width: number, height: number) => {
   return null
 }
 const updateWidth = (value: number) => {
-  let props = { width: value }
-  const shapePathData = updateShapePathData(value, height.value)
+  const ratio = width.value / height.value
+  let props = {
+    width: value,
+    height: fixedRatio.value ? value / ratio : height.value,
+  }
+  const shapePathData = updateShapePathData(value, props.height)
   if (shapePathData) props = { ...props, ...shapePathData }
 
   slidesStore.updateElement({ id: handleElementId.value, props })
   addHistorySnapshot()
 }
 const updateHeight = (value: number) => {
-  let props = { height: value }
-  const shapePathData = updateShapePathData(width.value, value)
+  const ratio = width.value / height.value
+  let props = {
+    height: value,
+    width: fixedRatio.value ? value * ratio : width.value,
+  }
+  const shapePathData = updateShapePathData(props.width, value)
   if (shapePathData) props = { ...props, ...shapePathData }
 
   slidesStore.updateElement({ id: handleElementId.value, props })
@@ -259,6 +267,10 @@ const updateRotate45 = (command: '+' | '-') => {
 }
 .icon-btn {
   cursor: pointer;
+
+  &.active {
+    color: $themeColor;
+  }
 }
 .text-btn {
   height: 30px;