Merge branch 'main' of github.com:le5le-com/visualization-design

src/views/components/PenProps.vue

@@ -48,7 +48,7 @@
               v-model.number="data.rect.x"
               style="width: 80px"
               :format="decimalPlaces"
-              @change="changeValue('x')"
+              @change="changeRectValue('x')"
             />
             <t-icon name="link" class="hidden ml-4" />
             <t-input
@@ -58,7 +58,7 @@
               v-model.number="data.rect.y"
               style="width: 80px"
               :format="decimalPlaces"
-              @change="changeValue('y')"
+              @change="changeRectValue('y')"
             />
             <t-input
               class="ml-16"
@@ -84,7 +84,7 @@
               min="1"
               style="width: 80px"
               :format="decimalPlaces"
-              @change="changeValue('width')"
+              @change="changeRectValue('width')"
             />
             <t-tooltip v-if="data.pen.ratio" content="固定比例" placement="top">
               <t-icon
@@ -109,7 +109,7 @@
               min="1"
               style="width: 80px"
               :format="decimalPlaces"
-              @change="changeValue('height')"
+              @change="changeRectValue('height')"
             />
 
             <t-input
@@ -1111,6 +1111,12 @@ const changeValue = (prop: string) => {
   updatePen(data.pen, prop);
 };
 
+const changeRectValue = (prop: string) => {
+  data.rect.id = data.pen.id;
+  data.rect.ratio = data.pen.ratio;
+  updatePen(data.rect, prop);
+};
+
 const onFontPopupVisible = (val: boolean) => {
   data.fontFamilyPopupVisible = val;
 };

src/views/components/pen.ts

@@ -1,16 +1,14 @@
 export const updatePen = (pen: any, prop: string, render = true) => {
   const v: any = { id: pen.id };
-  const rect: any = meta2d.getPenRect(pen);
-
   v[prop] = pen[prop];
-  if (prop === 'x') {
-    v.x = rect.x;
-  } else if (prop === 'y') {
-    v.y = rect.y;
-  } else if (prop === 'width') {
-    v.height = (rect.width / pen.width) * pen.height;
-  } else if (prop === 'height') {
-    v.width = (rect.height / pen.height) * pen.width;
+  if (prop === 'width' && pen.ratio) {
+    const rect = meta2d.findOne(pen.id);
+    v.height = (pen.width / rect.width) * rect.height;
+    pen.height = v.height;
+  } else if (prop === 'height' && pen.ratio) {
+    const rect = meta2d.findOne(pen.id);
+    v.width = (pen.height / rect.height) * rect.width;
+    pen.width = v.width;
   } else if (prop === 'shadow') {
     if (v[prop]) {
       !v.shadowOffsetX && (v.shadowOffsetX = 0);