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 2020-12-23 17:33:42 +08:00
parent 4606a64f64
commit 2b49692319
4 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/types/edit.ts
View File

@ -43,7 +43,7 @@ export enum OperateResizablePointTypes {
ANY = 'any',
}
export enum OPERATE_KEYS {
export enum OperatePoints {
LEFT_TOP = 1,
TOP = 2,
RIGHT_TOP = 3,

18
src/views/Editor/Canvas/MultiSelectOperate.vue
View File

@ -27,7 +27,7 @@ import { useStore } from 'vuex'
import { State } from '@/store'
import { PPTElement, ElementTypes } from '@/types/slides'
import { getElementListRange } from '@/utils/element'
import { ElementScaleHandler, OperateResizablePointTypes, OperateBorderLineTypes, MultiSelectRange, OPERATE_KEYS } from '@/types/edit'
import { ElementScaleHandler, OperateResizablePointTypes, OperateBorderLineTypes, MultiSelectRange, OperatePoints } from '@/types/edit'
import ResizablePoint from '@/views/_common/_operate/ResizablePoint.vue'
import BorderLine from '@/views/_common/_operate/BorderLine.vue'
@ -66,14 +66,14 @@ export default defineComponent({
const resizablePoints = computed(() => {
return [
{ type: OperateResizablePointTypes.TL, direction: OPERATE_KEYS.LEFT_TOP, style: {} },
{ type: OperateResizablePointTypes.TC, direction: OPERATE_KEYS.TOP, style: {left: width.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.TR, direction: OPERATE_KEYS.RIGHT_TOP, style: {left: width.value + 'px'} },
{ type: OperateResizablePointTypes.ML, direction: OPERATE_KEYS.LEFT, style: {top: height.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.MR, direction: OPERATE_KEYS.RIGHT, style: {left: width.value + 'px', top: height.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.BL, direction: OPERATE_KEYS.LEFT_BOTTOM, style: {top: height.value + 'px'} },
{ type: OperateResizablePointTypes.BC, direction: OPERATE_KEYS.BOTTOM, style: {left: width.value / 2 + 'px', top: height.value + 'px'} },
{ type: OperateResizablePointTypes.BR, direction: OPERATE_KEYS.RIGHT_BOTTOM, style: {left: width.value + 'px', top: height.value + 'px'} },
{ type: OperateResizablePointTypes.TL, direction: OperatePoints.LEFT_TOP, style: {} },
{ type: OperateResizablePointTypes.TC, direction: OperatePoints.TOP, style: {left: width.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.TR, direction: OperatePoints.RIGHT_TOP, style: {left: width.value + 'px'} },
{ type: OperateResizablePointTypes.ML, direction: OperatePoints.LEFT, style: {top: height.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.MR, direction: OperatePoints.RIGHT, style: {left: width.value + 'px', top: height.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.BL, direction: OperatePoints.LEFT_BOTTOM, style: {top: height.value + 'px'} },
{ type: OperateResizablePointTypes.BC, direction: OperatePoints.BOTTOM, style: {left: width.value / 2 + 'px', top: height.value + 'px'} },
{ type: OperateResizablePointTypes.BR, direction: OperatePoints.RIGHT_BOTTOM, style: {left: width.value + 'px', top: height.value + 'px'} },
]
})

78
src/views/Editor/Canvas/hooks/useScaleElement.ts
View File

@ -2,7 +2,7 @@ import { computed, Ref } from 'vue'
import { useStore } from 'vuex'
import { State, MutationTypes } from '@/store'
import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
import { OPERATE_KEYS, ElementScaleHandler, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
import { OperatePoints, ElementScaleHandler, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
import { AlignLine, uniqAlignLines } from '@/utils/element'
@ -69,14 +69,14 @@ export const getRotateElementPoints = (element: RotateElementData, angle: number
// 获取元素某个操作点对角线上另一端的操作点坐标（例如：左上 <-> 右下）
export const getOppositePoint = (direction: number, points: ReturnType<typeof getRotateElementPoints>): { left: number; top: number } => {
const oppositeMap = {
[OPERATE_KEYS.RIGHT_BOTTOM]: points.leftTopPoint,
[OPERATE_KEYS.LEFT_BOTTOM]: points.rightTopPoint,
[OPERATE_KEYS.LEFT_TOP]: points.rightBottomPoint,
[OPERATE_KEYS.RIGHT_TOP]: points.leftBottomPoint,
[OPERATE_KEYS.TOP]: points.bottomPoint,
[OPERATE_KEYS.BOTTOM]: points.topPoint,
[OPERATE_KEYS.LEFT]: points.rightPoint,
[OPERATE_KEYS.RIGHT]: points.leftPoint,
[OperatePoints.RIGHT_BOTTOM]: points.leftTopPoint,
[OperatePoints.LEFT_BOTTOM]: points.rightTopPoint,
[OperatePoints.LEFT_TOP]: points.rightBottomPoint,
[OperatePoints.RIGHT_TOP]: points.leftBottomPoint,
[OperatePoints.TOP]: points.bottomPoint,
[OperatePoints.BOTTOM]: points.topPoint,
[OperatePoints.LEFT]: points.rightPoint,
[OperatePoints.RIGHT]: points.leftPoint,
}
return oppositeMap[direction]
}
@ -234,45 +234,45 @@ export default (
// 锁定宽高比例
if(isLockRatio) {
if(command === OPERATE_KEYS.RIGHT_BOTTOM || command === OPERATE_KEYS.LEFT_TOP) revisedY = revisedX / lockRatio
if(command === OPERATE_KEYS.LEFT_BOTTOM || command === OPERATE_KEYS.RIGHT_TOP) revisedY = -revisedX / lockRatio
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) revisedY = revisedX / lockRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) revisedY = -revisedX / lockRatio
}
// 根据不同的操作点分别计算元素缩放后的大小和位置
// 这里计算的位置是错误的，因为旋转后缩放实际上也改变了元素的位置，需要在后面进行矫正
// 这里计算的大小是正确的，因为上面修正鼠标按下后移动的距离时其实已经进行过了矫正
if(command === OPERATE_KEYS.RIGHT_BOTTOM) {
if(command === OperatePoints.RIGHT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth + revisedX)
height = getSizeWithinRange(elOriginHeight + revisedY)
}
else if(command === OPERATE_KEYS.LEFT_BOTTOM) {
else if(command === OperatePoints.LEFT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth - revisedX)
height = getSizeWithinRange(elOriginHeight + revisedY)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OPERATE_KEYS.LEFT_TOP) {
else if(command === OperatePoints.LEFT_TOP) {
width = getSizeWithinRange(elOriginWidth - revisedX)
height = getSizeWithinRange(elOriginHeight - revisedY)
left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.RIGHT_TOP) {
else if(command === OperatePoints.RIGHT_TOP) {
width = getSizeWithinRange(elOriginWidth + revisedX)
height = getSizeWithinRange(elOriginHeight - revisedY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.TOP) {
else if(command === OperatePoints.TOP) {
height = getSizeWithinRange(elOriginHeight - revisedY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.BOTTOM) {
else if(command === OperatePoints.BOTTOM) {
height = getSizeWithinRange(elOriginHeight + revisedY)
}
else if(command === OPERATE_KEYS.LEFT) {
else if(command === OperatePoints.LEFT) {
width = getSizeWithinRange(elOriginWidth - revisedX)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OPERATE_KEYS.RIGHT) {
else if(command === OperatePoints.RIGHT) {
width = getSizeWithinRange(elOriginWidth + revisedX)
}
@ -295,11 +295,11 @@ export default (
let moveY = y / canvasScale.value
if(isLockRatio) {
if(command === OPERATE_KEYS.RIGHT_BOTTOM || command === OPERATE_KEYS.LEFT_TOP) moveY = moveX / lockRatio
if(command === OPERATE_KEYS.LEFT_BOTTOM || command === OPERATE_KEYS.RIGHT_TOP) moveY = -moveX / lockRatio
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) moveY = moveX / lockRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) moveY = -moveX / lockRatio
}
if(command === OPERATE_KEYS.RIGHT_BOTTOM) {
if(command === OperatePoints.RIGHT_BOTTOM) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -310,7 +310,7 @@ export default (
width = getSizeWithinRange(elOriginWidth + moveX)
height = getSizeWithinRange(elOriginHeight + moveY)
}
else if(command === OPERATE_KEYS.LEFT_BOTTOM) {
else if(command === OperatePoints.LEFT_BOTTOM) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -322,7 +322,7 @@ export default (
height = getSizeWithinRange(elOriginHeight + moveY)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OPERATE_KEYS.LEFT_TOP) {
else if(command === OperatePoints.LEFT_TOP) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -335,7 +335,7 @@ export default (
left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.RIGHT_TOP) {
else if(command === OperatePoints.RIGHT_TOP) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -347,24 +347,24 @@ export default (
height = getSizeWithinRange(elOriginHeight - moveY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.LEFT) {
else if(command === OperatePoints.LEFT) {
const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth - moveX)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OPERATE_KEYS.RIGHT) {
else if(command === OperatePoints.RIGHT) {
const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth + moveX)
}
else if(command === OPERATE_KEYS.TOP) {
else if(command === OperatePoints.TOP) {
const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight - moveY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OPERATE_KEYS.BOTTOM) {
else if(command === OperatePoints.BOTTOM) {
const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight + moveY)
@ -411,8 +411,8 @@ export default (
// 锁定宽高比例
if(ctrlOrShiftKeyActive.value) {
if(command === OPERATE_KEYS.RIGHT_BOTTOM || command === OPERATE_KEYS.LEFT_TOP) y = x / lockRatio
if(command === OPERATE_KEYS.LEFT_BOTTOM || command === OPERATE_KEYS.RIGHT_TOP) y = -x / lockRatio
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) y = x / lockRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) y = -x / lockRatio
}
// 获取鼠标缩放时当前所有激活元素的范围
@ -421,32 +421,32 @@ export default (
let currentMinY = minY
let currentMaxY = maxY
if(command === OPERATE_KEYS.RIGHT_BOTTOM) {
if(command === OperatePoints.RIGHT_BOTTOM) {
currentMaxX = maxX + x
currentMaxY = maxY + y
}
else if(command === OPERATE_KEYS.LEFT_BOTTOM) {
else if(command === OperatePoints.LEFT_BOTTOM) {
currentMinX = minX + x
currentMaxY = maxY + y
}
else if(command === OPERATE_KEYS.LEFT_TOP) {
else if(command === OperatePoints.LEFT_TOP) {
currentMinX = minX + x
currentMinY = minY + y
}
else if(command === OPERATE_KEYS.RIGHT_TOP) {
else if(command === OperatePoints.RIGHT_TOP) {
currentMaxX = maxX + x
currentMinY = minY + y
}
else if(command === OPERATE_KEYS.TOP) {
else if(command === OperatePoints.TOP) {
currentMinY = minY + y
}
else if(command === OPERATE_KEYS.BOTTOM) {
else if(command === OperatePoints.BOTTOM) {
currentMaxY = maxY + y
}
else if(command === OPERATE_KEYS.LEFT) {
else if(command === OperatePoints.LEFT) {
currentMinX = minX + x
}
else if(command === OPERATE_KEYS.RIGHT) {
else if(command === OperatePoints.RIGHT) {
currentMaxX = maxX + x
}

18
src/views/_common/_element/useCommonOperate.ts
View File

@ -1,17 +1,17 @@
import { computed, Ref } from 'vue'
import { OPERATE_KEYS, OperateResizablePointTypes, OperateBorderLineTypes } from '@/types/edit'
import { OperatePoints, OperateResizablePointTypes, OperateBorderLineTypes } from '@/types/edit'
export default (scaleWidth: Ref<number>, scaleHeight: Ref<number>) => {
const resizablePoints = computed(() => {
return [
{ type: OperateResizablePointTypes.TL, direction: OPERATE_KEYS.LEFT_TOP, style: {} },
{ type: OperateResizablePointTypes.TC, direction: OPERATE_KEYS.TOP, style: {left: scaleWidth.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.TR, direction: OPERATE_KEYS.RIGHT_TOP, style: {left: scaleWidth.value + 'px'} },
{ type: OperateResizablePointTypes.ML, direction: OPERATE_KEYS.LEFT, style: {top: scaleHeight.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.MR, direction: OPERATE_KEYS.RIGHT, style: {left: scaleWidth.value + 'px', top: scaleHeight.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.BL, direction: OPERATE_KEYS.LEFT_BOTTOM, style: {top: scaleHeight.value + 'px'} },
{ type: OperateResizablePointTypes.BC, direction: OPERATE_KEYS.BOTTOM, style: {left: scaleWidth.value / 2 + 'px', top: scaleHeight.value + 'px'} },
{ type: OperateResizablePointTypes.BR, direction: OPERATE_KEYS.RIGHT_BOTTOM, style: {left: scaleWidth.value + 'px', top: scaleHeight.value + 'px'} },
{ type: OperateResizablePointTypes.TL, direction: OperatePoints.LEFT_TOP, style: {} },
{ type: OperateResizablePointTypes.TC, direction: OperatePoints.TOP, style: {left: scaleWidth.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.TR, direction: OperatePoints.RIGHT_TOP, style: {left: scaleWidth.value + 'px'} },
{ type: OperateResizablePointTypes.ML, direction: OperatePoints.LEFT, style: {top: scaleHeight.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.MR, direction: OperatePoints.RIGHT, style: {left: scaleWidth.value + 'px', top: scaleHeight.value / 2 + 'px'} },
{ type: OperateResizablePointTypes.BL, direction: OperatePoints.LEFT_BOTTOM, style: {top: scaleHeight.value + 'px'} },
{ type: OperateResizablePointTypes.BC, direction: OperatePoints.BOTTOM, style: {left: scaleWidth.value / 2 + 'px', top: scaleHeight.value + 'px'} },
{ type: OperateResizablePointTypes.BR, direction: OperatePoints.RIGHT_BOTTOM, style: {left: scaleWidth.value + 'px', top: scaleHeight.value + 'px'} },
]
})