From 2b49692319e50ae39dff1891b76dbe22b8df3ffa Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Wed, 23 Dec 2020 17:33:42 +0800 Subject: [PATCH] update --- src/types/edit.ts | 2 +- .../Editor/Canvas/MultiSelectOperate.vue | 18 ++--- .../Editor/Canvas/hooks/useScaleElement.ts | 78 +++++++++---------- .../_common/_element/useCommonOperate.ts | 18 ++--- 4 files changed, 58 insertions(+), 58 deletions(-) diff --git a/src/types/edit.ts b/src/types/edit.ts index 14cb51ff..c5fb2611 100644 --- a/src/types/edit.ts +++ b/src/types/edit.ts @@ -43,7 +43,7 @@ export enum OperateResizablePointTypes { ANY = 'any', } -export enum OPERATE_KEYS { +export enum OperatePoints { LEFT_TOP = 1, TOP = 2, RIGHT_TOP = 3, diff --git a/src/views/Editor/Canvas/MultiSelectOperate.vue b/src/views/Editor/Canvas/MultiSelectOperate.vue index f7a9fd69..02355679 100644 --- a/src/views/Editor/Canvas/MultiSelectOperate.vue +++ b/src/views/Editor/Canvas/MultiSelectOperate.vue @@ -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'} }, ] }) diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts index bdf9bbc8..3acf59ee 100644 --- a/src/views/Editor/Canvas/hooks/useScaleElement.ts +++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts @@ -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): { 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 } diff --git a/src/views/_common/_element/useCommonOperate.ts b/src/views/_common/_element/useCommonOperate.ts index 00590f51..3e637e65 100644 --- a/src/views/_common/_element/useCommonOperate.ts +++ b/src/views/_common/_element/useCommonOperate.ts @@ -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, scaleHeight: Ref) => { 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'} }, ] })