From c8c8a443a3de75aeddc71f7e1c3d8b9ee8106a14 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Fri, 8 Jan 2021 19:59:14 +0800
Subject: [PATCH] update
---
.../Editor/Toolbar/ElementPositionPanel.vue | 105 ++++++++++++++++--
1 file changed, 95 insertions(+), 10 deletions(-)
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 2152c2f4..554e6cf6 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -21,9 +21,19 @@
位置:
-
+
updateLeft(value)"
+ style="flex: 4;"
+ />
-
+ updateTop(value)"
+ style="flex: 4;"
+ />
@@ -35,13 +45,28 @@
大小:
-
+
updateWidth(value)"
+ style="flex: 4;"
+ />
-
-
+
+
-
+ updateHeight(value)"
+ style="flex: 4;"
+ />
@@ -56,10 +81,17 @@
旋转:
-
-
+
+
-
+
updateRotate(value)"
+ style="flex: 4;"
+ />
@@ -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,
}
},
})