update

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -21,9 +21,19 @@
 
     <div class="row">
       <div style="flex: 3;">位置：</div>
-      <InputNumber :value="left" style="flex: 4;" />
+      <InputNumber
+        :step="5"
+        :value="left"
+        @change="value => updateLeft(value)"
+        style="flex: 4;"
+      />
       <div style="flex: 1;"></div>
-      <InputNumber :value="top" style="flex: 4;" />
+      <InputNumber
+        :step="5"
+        :value="top"
+        @change="value => updateTop(value)"
+        style="flex: 4;"
+      />
     </div>
     <div class="row">
       <div style="flex: 3;"></div>
@@ -35,13 +45,28 @@
     <template v-if="handleElement.type !== 'line'">
       <div class="row">
         <div style="flex: 3;">大小：</div>
-        <InputNumber :value="width" style="flex: 4;" />
+        <InputNumber
+          :min="15"
+          :max="1500"
+          :step="5"
+          :value="width"
+          @change="value => updateWidth(value)"
+          style="flex: 4;"
+        />
         <template v-if="['image', 'shape'].includes(handleElement.type)">
-          <LockOutlined style="flex: 1;" class="icon-btn" v-if="fixedRatio" />
+          <LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" v-if="fixedRatio" />
-          <UnlockOutlined style="flex: 1;" class="icon-btn" v-else />
+          <UnlockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" v-else />
         </template>
         <div style="flex: 1;" v-else></div>
-        <InputNumber :value="height" style="flex: 4;" />
+        <InputNumber 
+          :min="15"
+          :max="800"
+          :step="5"
+          :disabled="handleElement.type === 'text'" 
+          :value="height" 
+          @change="value => updateHeight(value)"
+          style="flex: 4;"
+        />
       </div>
       <div class="row">
         <div style="flex: 3;"></div>
@@ -56,10 +81,17 @@
 
       <div class="row">
         <div style="flex: 3;">旋转：</div>
-        <RotateLeftOutlined class="icon-btn" style="flex: 2;" />
+        <RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
-        <RotateRightOutlined class="icon-btn" style="flex: 2;" />
+        <RotateRightOutlined class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
         <div style="flex: 1;"></div>
-        <InputNumber :value="rotate" style="flex: 4;" />
+        <InputNumber 
+          :min="-180"
+          :max="180"
+          :step="5"
+          :value="rotate" 
+          @change="value => updateRotate(value)" 
+          style="flex: 4;" 
+        />
       </div>
     </template>
   </div>
@@ -69,10 +101,11 @@
 import { computed, defineComponent, ref, Ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import round from 'lodash/round'
-import { State } from '@/store'
+import { MutationTypes, State } from '@/store'
 import { PPTElement } from '@/types/slides'
 import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import { InputNumber, Divider, Button } from 'ant-design-vue'
 import {
@@ -123,6 +156,51 @@ export default defineComponent({
     const { orderElement } = useOrderElement()
     const { alignElementToCanvas } = useAlignElementToCanvas()
 
+    const { addHistorySnapshot } = useHistorySnapshot()
+
+    const updateLeft = (value: number) => {
+      const props = { left: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateTop = (value: number) => {
+      const props = { top: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateWidth = (value: number) => {
+      const props = { width: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateHeight = (value: number) => {
+      const props = { height: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateRotate = (value: number) => {
+      const props = { rotate: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateFixedRatio = (value: boolean) => {
+      const props = { fixedRatio: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+    const updateRotate45 = (command: '+' | '-') => {
+      let _rotate = Math.floor(rotate.value / 45) * 45
+      if(command === '+') _rotate = _rotate + 45
+      else if(command === '-') _rotate = _rotate - 45
+
+      if(_rotate < -180) _rotate = -180
+      if(_rotate > 180) _rotate = 180
+
+      const props = { rotate: _rotate }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
     return {
       handleElement,
       orderElement,
@@ -133,6 +211,13 @@ export default defineComponent({
       height,
       rotate,
       fixedRatio,
+      updateLeft,
+      updateTop,
+      updateWidth,
+      updateHeight,
+      updateRotate,
+      updateFixedRatio,
+      updateRotate45,
     }
   },
 })