github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
pipipi-pikachu 2021-01-08 19:59:14 +08:00
parent 922415ee93
commit c8c8a443a3
1 changed files with 95 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -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" />
<UnlockOutlined style="flex: 1;" class="icon-btn" v-else />
<LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" v-if="fixedRatio" />
<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;" />
<RotateRightOutlined class="icon-btn" style="flex: 2;" />
<RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" 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,
}
},
})