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

fix: 多元素对齐异常（存在被旋转元素时）

Browse Source
This commit is contained in:
pipipi-pikachu 2021-04-13 18:09:17 +08:00
parent 5be272f77e
commit eafdb3ff4a
3 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/hooks/useAlignActiveElement.ts
View File

@ -2,7 +2,7 @@ import { computed } from 'vue'
import { MutationTypes, useStore } from '@/store'
import { PPTElement, Slide } from '@/types/slides'
import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit'
import { getElementListRange } from '@/utils/element'
import { getElementListRange, getRectRotatedOffset } from '@/utils/element'
import useHistorySnapshot from './useHistorySnapshot'
export default () => {
@ -35,7 +35,19 @@ export default () => {
if (command === ElementAlignCommands.LEFT) {
elementList.forEach(element => {
if (activeElementIdList.value.includes(element.id)) {
if (!element.groupId) element.left = minX
if (!element.groupId) {
if ('rotate' in element && element.rotate) {
const { offsetX } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
element.left = minX - offsetX
}
else element.left = minX
}
else {
const range = groupElementRangeMap[element.groupId]
const offset = range.minX - minX
@ -49,7 +61,17 @@ export default () => {
if (activeElementIdList.value.includes(element.id)) {
if (!element.groupId) {
const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
element.left = maxX - elWidth
if ('rotate' in element && element.rotate) {
const { offsetX } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
element.left = maxX - elWidth + offsetX
}
else element.left = maxX - elWidth
}
else {
const range = groupElementRangeMap[element.groupId]
@ -62,7 +84,19 @@ export default () => {
else if (command === ElementAlignCommands.TOP) {
elementList.forEach(element => {
if (activeElementIdList.value.includes(element.id)) {
if (!element.groupId) element.top = minY
if (!element.groupId) {
if ('rotate' in element && element.rotate) {
const { offsetY } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
element.top = minY - offsetY
}
else element.top = minY
}
else {
const range = groupElementRangeMap[element.groupId]
const offset = range.minY - minY
@ -76,7 +110,17 @@ export default () => {
if (activeElementIdList.value.includes(element.id)) {
if (!element.groupId) {
const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
element.top = maxY - elHeight
if ('rotate' in element && element.rotate) {
const { offsetY } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
element.top = maxY - elHeight + offsetY
}
else element.top = maxY - elHeight
}
else {
const range = groupElementRangeMap[element.groupId]

22
src/hooks/useUniformDisplayElement.ts
View File

@ -1,7 +1,7 @@
import { computed } from 'vue'
import { MutationTypes, useStore } from '@/store'
import { PPTElement, Slide } from '@/types/slides'
import { getElementRange, getElementListRange, getRectRotatedRange } from '@/utils/element'
import { getElementRange, getElementListRange, getRectRotatedOffset } from '@/utils/element'
import useHistorySnapshot from './useHistorySnapshot'
interface SortedElementData {
@ -58,21 +58,13 @@ export default () => {
for (const sortedItem of sortedElementData) {
if (sortedItem.el.id === element.id) {
if ('rotate' in element && element.rotate) {
const { xRange: originXRange } = getRectRotatedRange({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: 0,
})
const { xRange: rotatedXRange } = getRectRotatedRange({
const { offsetX } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
const offsetX = rotatedXRange[0] - originXRange[0]
element.left = sortedItem.pos - offsetX
}
else element.left = sortedItem.pos
@ -125,21 +117,13 @@ export default () => {
for (const sortedItem of sortedElementData) {
if (sortedItem.el.id === element.id) {
if ('rotate' in element && element.rotate) {
const { yRange: originYRange } = getRectRotatedRange({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: 0,
})
const { yRange: rotatedYRange } = getRectRotatedRange({
const { offsetY } = getRectRotatedOffset({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
const offsetY = rotatedYRange[0] - originYRange[0]
element.top = sortedItem.pos - offsetY
}
else element.top = sortedItem.pos

25
src/utils/element.ts
View File

@ -43,6 +43,31 @@ export const getRectRotatedRange = (element: RotatedElementData) => {
}
}
/**
* 计算元素在画布中的矩形范围旋转后的新位置与旋转之前位置的偏离距离
* @param element 元素的位置大小和旋转角度信息
*/
export const getRectRotatedOffset = (element: RotatedElementData) => {
const { xRange: originXRange, yRange: originYRange } = getRectRotatedRange({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: 0,
})
const { xRange: rotatedXRange, yRange: rotatedYRange } = getRectRotatedRange({
left: element.left,
top: element.top,
width: element.width,
height: element.height,
rotate: element.rotate,
})
return {
offsetX: rotatedXRange[0] - originXRange[0],
offsetY: rotatedYRange[0] - originYRange[0],
}
}
/**
* 计算元素在画布中的位置范围
* @param element 元素信息