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 @@
位置:
- +
- +
@@ -35,13 +45,28 @@
@@ -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, } }, })