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

perf: 面板直接修改宽高时，对锁定比例的元素维持原比例

Browse Source
This commit is contained in:
pipipi-pikachu 2024-03-09 12:11:39 +08:00
parent dd1ade812c
commit 1c82303fe1
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,7 +66,7 @@
</template> </template>
</NumberInput> </NumberInput>
<template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)"> <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
<IconLock style="width: 10%;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" /> <IconLock style="width: 10%;" class="icon-btn active" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
<IconUnlock style="width: 10%;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else /> <IconUnlock style="width: 10%;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
</template> </template>
<div style="width: 10%;" v-else></div> <div style="width: 10%;" v-else></div>
@ -198,16 +198,24 @@ const updateShapePathData = (width: number, height: number) => {
return null return null
} }
const updateWidth = (value: number) => { const updateWidth = (value: number) => {
let props = { width: value } const ratio = width.value / height.value
const shapePathData = updateShapePathData(value, height.value) let props = {
width: value,
height: fixedRatio.value ? value / ratio : height.value,
}
const shapePathData = updateShapePathData(value, props.height)
if (shapePathData) props = { ...props, ...shapePathData } if (shapePathData) props = { ...props, ...shapePathData }
slidesStore.updateElement({ id: handleElementId.value, props }) slidesStore.updateElement({ id: handleElementId.value, props })
addHistorySnapshot() addHistorySnapshot()
} }
const updateHeight = (value: number) => { const updateHeight = (value: number) => {
let props = { height: value } const ratio = width.value / height.value
const shapePathData = updateShapePathData(width.value, value) let props = {
height: value,
width: fixedRatio.value ? value * ratio : width.value,
}
const shapePathData = updateShapePathData(props.width, value)
if (shapePathData) props = { ...props, ...shapePathData } if (shapePathData) props = { ...props, ...shapePathData }
slidesStore.updateElement({ id: handleElementId.value, props }) slidesStore.updateElement({ id: handleElementId.value, props })
@ -259,6 +267,10 @@ const updateRotate45 = (command: '+' | '-') => {
} }
.icon-btn { .icon-btn {
cursor: pointer; cursor: pointer;
&.active {
color: $themeColor;
}
} }
.text-btn { .text-btn {
height: 30px; height: 30px;