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

rename

Browse Source
This commit is contained in:
pipipi-pikachu 2020-12-24 18:13:52 +08:00
parent 1a87b3aeec
commit 57914f1e23
14 changed files with 163 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/types/edit.ts
View File

@ -18,40 +18,33 @@ export enum ElementAlignCommands {
HORIZONTAL = 'horizontal',
}
export type ElementScaleHandler = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
export type OperateBorderLine = 'top' | 'bottom' | 'left' | 'right'
export type OperateBorderLineType = 't' | 'b' | 'l' | 'r'
export enum OperateBorderLineTypes {
T = 't',
B = 'b',
L = 'l',
R = 'r',
export enum OperateBorderLines {
T = 'top',
B = 'bottom',
L = 'left',
R = 'right',
}
export type OperateResizablePointType = 't-l' | 't-c' | 't-r' | 'm-l' | 'm-r' | 'b-l' | 'b-c' | 'b-r' | 'any'
export type OperateResizeHandler = 'left-top' |
'top' |
'right-top' |
'left' |
'right' |
'left-bottom' |
'bottom' |
'right-bottom'
export enum OperateResizablePointTypes {
TL = 't-l',
TC = 't-c',
TR = 't-r',
ML = 'm-l',
MR = 'm-r',
BL = 'b-l',
BC = 'b-c',
BR = 'b-r',
ANY = 'any',
}
export enum OperatePoints {
LEFT_TOP = 1,
TOP = 2,
RIGHT_TOP = 3,
LEFT = 4,
RIGHT = 5,
LEFT_BOTTOM = 6,
BOTTOM = 7,
RIGHT_BOTTOM = 8,
export enum OperateResizeHandlers {
LEFT_TOP = 'left-top',
TOP = 'top',
RIGHT_TOP = 'right-top',
LEFT = 'left',
RIGHT = 'right',
LEFT_BOTTOM = 'left-bottom',
BOTTOM = 'bottom',
RIGHT_BOTTOM = 'right-bottom',
}
export interface AlignmentLineAxis {

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

@ -9,11 +9,11 @@
>
<BorderLine v-for="line in borderLines" :key="line.type" :type="line.type" :style="line.style" />
<template v-if="!disableResizablePoint">
<ResizablePoint
v-for="point in resizablePoints"
:key="point.type"
:type="point.type"
<template v-if="!disableResize">
<ResizeHandler
v-for="point in resizeHandlers"
:key="point.direction"
:type="point.direction"
:style="point.style"
@mousedown.stop="scaleMultiElement($event, { minX, maxX, minY, maxY }, point.direction)"
/>
@ -27,15 +27,16 @@ import { useStore } from 'vuex'
import { State } from '@/store'
import { PPTElement, ElementTypes } from '@/types/slides'
import { getElementListRange } from '@/utils/element'
import { ElementScaleHandler, OperateResizablePointTypes, OperateBorderLineTypes, MultiSelectRange, OperatePoints } from '@/types/edit'
import { OperateResizeHandler, MultiSelectRange } from '@/types/edit'
import useCommonOperate from '@/views/_common/_element/hooks/useCommonOperate'
import ResizablePoint from '@/views/_common/_operate/ResizablePoint.vue'
import ResizeHandler from '@/views/_common/_operate/ResizeHandler.vue'
import BorderLine from '@/views/_common/_operate/BorderLine.vue'
export default defineComponent({
name: 'multi-select-operate',
components: {
ResizablePoint,
ResizeHandler,
BorderLine,
},
props: {
@ -44,7 +45,7 @@ export default defineComponent({
required: true,
},
scaleMultiElement: {
type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: ElementScaleHandler) => void>,
type: Function as PropType<(e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandler) => void>,
required: true,
},
},
@ -63,30 +64,9 @@ export default defineComponent({
const width = computed(() => (range.maxX - range.minX) * canvasScale.value)
const height = computed(() => (range.maxY - range.minY) * canvasScale.value)
const { resizeHandlers, borderLines } = useCommonOperate(width, height)
const resizablePoints = computed(() => {
return [
{ 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'} },
]
})
const borderLines = computed(() => {
return [
{ type: OperateBorderLineTypes.T, style: {width: width.value + 'px'} },
{ type: OperateBorderLineTypes.B, style: {top: height.value + 'px', width: width.value + 'px'} },
{ type: OperateBorderLineTypes.L, style: {height: height.value + 'px'} },
{ type: OperateBorderLineTypes.R, style: {left: width.value + 'px', height: height.value + 'px'} },
]
})
const disableResizablePoint = computed(() => {
const disableResize = computed(() => {
return localActiveElementList.value.some(item => {
if(
(item.type === ElementTypes.IMAGE || item.type === ElementTypes.SHAPE) &&
@ -110,8 +90,8 @@ export default defineComponent({
...toRefs(range),
canvasScale,
borderLines,
disableResizablePoint,
resizablePoints,
disableResize,
resizeHandlers,
}
},
})

84
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 { OperatePoints, ElementScaleHandler, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
import { AlignLine, uniqAlignLines } from '@/utils/element'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -68,16 +68,16 @@ const getRotateElementPoints = (element: RotateElementData, angle: number) => {
}
// 获取元素某个操作点对角线上另一端的操作点坐标（例如：左上 <-> 右下）
const getOppositePoint = (direction: number, points: ReturnType<typeof getRotateElementPoints>): { left: number; top: number } => {
const getOppositePoint = (direction: string, points: ReturnType<typeof getRotateElementPoints>): { left: number; top: number } => {
const oppositeMap = {
[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,
[OperateResizeHandlers.RIGHT_BOTTOM]: points.leftTopPoint,
[OperateResizeHandlers.LEFT_BOTTOM]: points.rightTopPoint,
[OperateResizeHandlers.LEFT_TOP]: points.rightBottomPoint,
[OperateResizeHandlers.RIGHT_TOP]: points.leftBottomPoint,
[OperateResizeHandlers.TOP]: points.bottomPoint,
[OperateResizeHandlers.BOTTOM]: points.topPoint,
[OperateResizeHandlers.LEFT]: points.rightPoint,
[OperateResizeHandlers.RIGHT]: points.leftPoint,
}
return oppositeMap[direction]
}
@ -94,7 +94,7 @@ export default (
const { addHistorySnapshot } = useHistorySnapshot()
const scaleElement = (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: ElementScaleHandler) => {
const scaleElement = (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
let isMouseDown = true
const elOriginLeft = element.left
@ -237,45 +237,45 @@ export default (
// 锁定宽高比例
if(fixedRatio) {
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) revisedY = revisedX / aspectRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) revisedY = -revisedX / aspectRatio
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
}
// 根据不同的操作点分别计算元素缩放后的大小和位置
// 这里计算的位置是错误的，因为旋转后缩放实际上也改变了元素的位置，需要在后面进行矫正
// 这里计算的大小是正确的，因为上面修正鼠标按下后移动的距离时其实已经进行过了矫正
if(command === OperatePoints.RIGHT_BOTTOM) {
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth + revisedX)
height = getSizeWithinRange(elOriginHeight + revisedY)
}
else if(command === OperatePoints.LEFT_BOTTOM) {
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
width = getSizeWithinRange(elOriginWidth - revisedX)
height = getSizeWithinRange(elOriginHeight + revisedY)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OperatePoints.LEFT_TOP) {
else if(command === OperateResizeHandlers.LEFT_TOP) {
width = getSizeWithinRange(elOriginWidth - revisedX)
height = getSizeWithinRange(elOriginHeight - revisedY)
left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.RIGHT_TOP) {
else if(command === OperateResizeHandlers.RIGHT_TOP) {
width = getSizeWithinRange(elOriginWidth + revisedX)
height = getSizeWithinRange(elOriginHeight - revisedY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.TOP) {
else if(command === OperateResizeHandlers.TOP) {
height = getSizeWithinRange(elOriginHeight - revisedY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.BOTTOM) {
else if(command === OperateResizeHandlers.BOTTOM) {
height = getSizeWithinRange(elOriginHeight + revisedY)
}
else if(command === OperatePoints.LEFT) {
else if(command === OperateResizeHandlers.LEFT) {
width = getSizeWithinRange(elOriginWidth - revisedX)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OperatePoints.RIGHT) {
else if(command === OperateResizeHandlers.RIGHT) {
width = getSizeWithinRange(elOriginWidth + revisedX)
}
@ -298,11 +298,11 @@ export default (
let moveY = y / canvasScale.value
if(fixedRatio) {
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) moveY = moveX / aspectRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) moveY = -moveX / aspectRatio
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
}
if(command === OperatePoints.RIGHT_BOTTOM) {
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -313,7 +313,7 @@ export default (
width = getSizeWithinRange(elOriginWidth + moveX)
height = getSizeWithinRange(elOriginHeight + moveY)
}
else if(command === OperatePoints.LEFT_BOTTOM) {
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -325,7 +325,7 @@ export default (
height = getSizeWithinRange(elOriginHeight + moveY)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OperatePoints.LEFT_TOP) {
else if(command === OperateResizeHandlers.LEFT_TOP) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -338,7 +338,7 @@ export default (
left = elOriginLeft - (width - elOriginWidth)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.RIGHT_TOP) {
else if(command === OperateResizeHandlers.RIGHT_TOP) {
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY)
moveX = moveX - offsetX
moveY = moveY - offsetY
@ -350,24 +350,24 @@ export default (
height = getSizeWithinRange(elOriginHeight - moveY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.LEFT) {
else if(command === OperateResizeHandlers.LEFT) {
const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth - moveX)
left = elOriginLeft - (width - elOriginWidth)
}
else if(command === OperatePoints.RIGHT) {
else if(command === OperateResizeHandlers.RIGHT) {
const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
moveX = moveX - offsetX
width = getSizeWithinRange(elOriginWidth + moveX)
}
else if(command === OperatePoints.TOP) {
else if(command === OperateResizeHandlers.TOP) {
const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight - moveY)
top = elOriginTop - (height - elOriginHeight)
}
else if(command === OperatePoints.BOTTOM) {
else if(command === OperateResizeHandlers.BOTTOM) {
const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
moveY = moveY - offsetY
height = getSizeWithinRange(elOriginHeight + moveY)
@ -390,7 +390,7 @@ export default (
}
}
const scaleMultiElement = (e: MouseEvent, range: MultiSelectRange, command: ElementScaleHandler) => {
const scaleMultiElement = (e: MouseEvent, range: MultiSelectRange, command: OperateResizeHandlers) => {
let isMouseDown = true
const { minX, maxX, minY, maxY } = range
@ -415,8 +415,8 @@ export default (
// 锁定宽高比例
if(ctrlOrShiftKeyActive.value) {
if(command === OperatePoints.RIGHT_BOTTOM || command === OperatePoints.LEFT_TOP) y = x / aspectRatio
if(command === OperatePoints.LEFT_BOTTOM || command === OperatePoints.RIGHT_TOP) y = -x / aspectRatio
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) y = x / aspectRatio
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) y = -x / aspectRatio
}
// 获取鼠标缩放时当前所有激活元素的范围
@ -425,32 +425,32 @@ export default (
let currentMinY = minY
let currentMaxY = maxY
if(command === OperatePoints.RIGHT_BOTTOM) {
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
currentMaxX = maxX + x
currentMaxY = maxY + y
}
else if(command === OperatePoints.LEFT_BOTTOM) {
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
currentMinX = minX + x
currentMaxY = maxY + y
}
else if(command === OperatePoints.LEFT_TOP) {
else if(command === OperateResizeHandlers.LEFT_TOP) {
currentMinX = minX + x
currentMinY = minY + y
}
else if(command === OperatePoints.RIGHT_TOP) {
else if(command === OperateResizeHandlers.RIGHT_TOP) {
currentMaxX = maxX + x
currentMinY = minY + y
}
else if(command === OperatePoints.TOP) {
else if(command === OperateResizeHandlers.TOP) {
currentMinY = minY + y
}
else if(command === OperatePoints.BOTTOM) {
else if(command === OperateResizeHandlers.BOTTOM) {
currentMaxY = maxY + y
}
else if(command === OperatePoints.LEFT) {
else if(command === OperateResizeHandlers.LEFT) {
currentMinX = minX + x
}
else if(command === OperatePoints.RIGHT) {
else if(command === OperateResizeHandlers.RIGHT) {
currentMaxX = maxX + x
}

4
src/views/Editor/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="editor">
<div class="hamster-ppt-editor">
<EditorHeader class="layout-header" />
<div class="layout-content">
<Thumbnails class="layout-content-left" />
@ -41,7 +41,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.editor {
.hamster-ppt-editor {
height: 100%;
}
.layout-header {

2
src/views/SlideShow/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="slide-show">
<div class="hamster-ppt-slide-show">
slide-show
</div>
</template>

4
src/views/_common/_element/EditableElement.vue
View File

@ -36,7 +36,7 @@ import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import { ElementOrderCommands, ElementAlignCommands, ElementScaleHandler } from '@/types/edit'
import { ElementOrderCommands, ElementAlignCommands, OperateResizeHandler } from '@/types/edit'
import ImageElement from './ImageElement/index.vue'
import TextElement from './TextElement/index.vue'
@ -81,7 +81,7 @@ export default defineComponent({
required: true,
},
scaleElement: {
type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: ElementScaleHandler) => void>,
type: Function as PropType<(e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandler) => void>,
required: true,
},
},

4
src/views/_common/_element/ImageElement/BaseImageElement.vue
View File

@ -37,7 +37,7 @@
:outline="elementInfo.outline"
/>
<div class="img-wrapper" :style="{ clipPath: clipShape.style }">
<div class="image-content" :style="{ clipPath: clipShape.style }">
<img
:src="elementInfo.src"
:draggable="false"
@ -155,7 +155,7 @@ export default defineComponent({
height: 100%;
position: relative;
.img-wrapper {
.image-content {
width: 100%;
height: 100%;
overflow: hidden;

4
src/views/_common/_element/ImageElement/ImageClipHandler.vue
View File

@ -13,7 +13,7 @@
/>
<div
class="top-img-wrapper"
class="top-image-content"
:style="{
...topImgWrapperPositionStyle,
clipPath: clipPath,
@ -456,7 +456,7 @@ export default defineComponent({
height: 100%;
}
.top-img-wrapper {
.top-image-content {
position: absolute;
overflow: hidden;

36
src/views/_common/_element/ImageElement/index.vue
View File

@ -54,7 +54,7 @@
:createPath="clipShape.createPath"
/>
<div class="img-wrapper" :style="{clipPath: clipShape.style}">
<div class="image-content" :style="{clipPath: clipShape.style}">
<img
:src="elementInfo.src"
:draggable="false"
@ -88,16 +88,16 @@
:style="line.style"
/>
<template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
<ResizablePoint
class="operate-resizable-point"
v-for="point in resizablePoints"
:key="point.type"
:type="point.type"
<ResizeHandler
class="operate-resize-handler"
v-for="point in resizeHandlers"
:key="point.direction"
:type="point.direction"
:style="point.style"
@mousedown.stop="scaleElement($event, elementInfo, point.direction)"
/>
<RotateHandler
class="operate-rotate-handle"
class="operate-rotate-handler"
:style="{left: scaleWidth / 2 + 'px'}"
@mousedown.stop="rotateElement(elementInfo)"
/>
@ -112,13 +112,13 @@
import { computed, defineComponent, ref, PropType } from 'vue'
import { PPTImageElement } from '@/types/slides'
import { ElementScaleHandler } from '@/types/edit'
import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '@/views/_common/_element/hooks/useCommonOperate'
import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
import RotateHandler from '@/views/_common/_operate/RotateHandler.vue'
import ResizablePoint from '@/views/_common/_operate/ResizablePoint.vue'
import ResizeHandler from '@/views/_common/_operate/ResizeHandler.vue'
import BorderLine from '@/views/_common/_operate/BorderLine.vue'
import AnimationIndex from '@/views/_common/_operate/AnimationIndex.vue'
@ -133,7 +133,7 @@ export default defineComponent({
name: 'editable-element-image',
components: {
RotateHandler,
ResizablePoint,
ResizeHandler,
BorderLine,
AnimationIndex,
ImageClip,
@ -179,7 +179,7 @@ export default defineComponent({
required: true,
},
scaleElement: {
type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: ElementScaleHandler) => void>,
type: Function as PropType<(e: MouseEvent, element: PPTImageElement, command: OperateResizeHandler) => void>,
required: true,
},
contextmenus: {
@ -192,7 +192,7 @@ export default defineComponent({
const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
const { resizablePoints, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const isCliping = computed(() => clipingImageElId.value === props.elementInfo.id)
@ -278,7 +278,7 @@ export default defineComponent({
isCliping,
imgPosition,
clipShape,
resizablePoints,
resizeHandlers,
borderLines,
filter,
flip,
@ -313,7 +313,7 @@ export default defineComponent({
position: relative;
cursor: move;
.img-wrapper {
.image-content {
width: 100%;
height: 100%;
overflow: hidden;
@ -334,8 +334,8 @@ export default defineComponent({
&.active {
.operate-border-line,
.operate-resizable-point,
.operate-rotate-handle {
.operate-resize-handler,
.operate-rotate-handler {
display: block;
}
}
@ -345,8 +345,8 @@ export default defineComponent({
}
.operate-border-line,
.operate-resizable-point,
.operate-rotate-handle {
.operate-resize-handler,
.operate-rotate-handler {
display: none;
}
}

30
src/views/_common/_element/TextElement/index.vue
View File

@ -49,15 +49,15 @@
@mousedown="handleSelectElement($event)"
/>
<template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
<ResizablePoint class="operate-resizable-point"
v-for="point in resizablePoints"
:key="point.type"
:type="point.type"
<ResizeHandler class="operate-resize-handler"
v-for="point in resizeHandlers"
:key="point.direction"
:type="point.direction"
:style="point.style"
@mousedown.stop="scaleElement($event, elementInfo, point.direction)"
/>
<RotateHandler
class="operate-rotate-handle"
class="operate-rotate-handler"
:style="{ left: scaleWidth / 2 + 'px' }"
@mousedown.stop="rotateElement(elementInfo)"
/>
@ -72,12 +72,12 @@
import { computed, defineComponent, PropType } from 'vue'
import { PPTTextElement } from '@/types/slides'
import { ElementScaleHandler } from '@/types/edit'
import { OperateResizeHandler } from '@/types/edit'
import useCommonOperate from '@/views/_common/_element/hooks/useCommonOperate'
import ElementOutline from '@/views/_common/_element/ElementOutline.vue'
import RotateHandler from '@/views/_common/_operate/RotateHandler.vue'
import ResizablePoint from '@/views/_common/_operate/ResizablePoint.vue'
import ResizeHandler from '@/views/_common/_operate/ResizeHandler.vue'
import BorderLine from '@/views/_common/_operate/BorderLine.vue'
import AnimationIndex from '@/views/_common/_operate/AnimationIndex.vue'
@ -88,7 +88,7 @@ export default defineComponent({
components: {
ElementOutline,
RotateHandler,
ResizablePoint,
ResizeHandler,
BorderLine,
AnimationIndex,
},
@ -130,7 +130,7 @@ export default defineComponent({
required: true,
},
scaleElement: {
type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: ElementScaleHandler) => void>,
type: Function as PropType<(e: MouseEvent, element: PPTTextElement, command: OperateResizeHandler) => void>,
required: true,
},
contextmenus: {
@ -141,7 +141,7 @@ export default defineComponent({
const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
const { resizablePoints, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const handleSelectElement = (e: MouseEvent, canMove = true) => {
if(props.elementInfo.lock) return
@ -155,7 +155,7 @@ export default defineComponent({
return {
scaleWidth,
resizablePoints,
resizeHandlers,
borderLines,
handleSelectElement,
shadowStyle,
@ -212,8 +212,8 @@ export default defineComponent({
&.active {
.operate-border-line,
.operate-resizable-point,
.operate-rotate-handle {
.operate-resize-handler,
.operate-rotate-handles {
display: block;
}
}
@ -223,8 +223,8 @@ export default defineComponent({
}
.operate-border-line,
.operate-resizable-point,
.operate-rotate-handle {
.operate-resize-handler,
.operate-rotate-handles {
display: none;
}
}

34
src/views/_common/_element/hooks/useCommonOperate.ts
View File

@ -1,33 +1,31 @@
import { computed, Ref } from 'vue'
import { OperatePoints, OperateResizablePointTypes, OperateBorderLineTypes } from '@/types/edit'
import { OperateResizeHandlers, OperateBorderLines } from '@/types/edit'
export default (scaleWidth: Ref<number>, scaleHeight: Ref<number>) => {
const resizablePoints = computed(() => {
export default (width: Ref<number>, height: Ref<number>) => {
const resizeHandlers = computed(() => {
return [
{ 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'} },
{ direction: OperateResizeHandlers.LEFT_TOP, style: {} },
{ direction: OperateResizeHandlers.TOP, style: {left: width.value / 2 + 'px'} },
{ direction: OperateResizeHandlers.RIGHT_TOP, style: {left: width.value + 'px'} },
{ direction: OperateResizeHandlers.LEFT, style: {top: height.value / 2 + 'px'} },
{ direction: OperateResizeHandlers.RIGHT, style: {left: width.value + 'px', top: height.value / 2 + 'px'} },
{ direction: OperateResizeHandlers.LEFT_BOTTOM, style: {top: height.value + 'px'} },
{ direction: OperateResizeHandlers.BOTTOM, style: {left: width.value / 2 + 'px', top: height.value + 'px'} },
{ direction: OperateResizeHandlers.RIGHT_BOTTOM, style: {left: width.value + 'px', top: height.value + 'px'} },
]
})
const borderLines = computed(() => {
return [
{ type: OperateBorderLineTypes.T, style: {width: scaleWidth.value + 'px'} },
{ type: OperateBorderLineTypes.B, style: {top: scaleHeight.value + 'px', width: scaleWidth.value + 'px'} },
{ type: OperateBorderLineTypes.L, style: {height: scaleHeight.value + 'px'} },
{ type: OperateBorderLineTypes.R, style: {left: scaleWidth.value + 'px', height: scaleHeight.value + 'px'} },
{ type: OperateBorderLines.T, style: {width: width.value + 'px'} },
{ type: OperateBorderLines.B, style: {top: height.value + 'px', width: width.value + 'px'} },
{ type: OperateBorderLines.L, style: {height: height.value + 'px'} },
{ type: OperateBorderLines.R, style: {left: width.value + 'px', height: height.value + 'px'} },
]
})
return {
scaleWidth,
scaleHeight,
resizablePoints,
resizeHandlers,
borderLines,
}
}

20
src/views/_common/_operate/BorderLine.vue
View File

@ -4,13 +4,13 @@
<script lang="ts">
import { PropType } from 'vue'
import { OperateBorderLineType } from '@/types/edit'
import { OperateBorderLine } from '@/types/edit'
export default {
name: 'border-line',
props: {
type: {
type: String as PropType<OperateBorderLineType>,
type: String as PropType<OperateBorderLine>,
required: true,
},
isWide: {
@ -30,16 +30,16 @@ export default {
top: 0;
border: 0 dashed $themeColor;
&.t {
&.top {
border-top-width: 1px;
}
&.b {
&.bottom {
border-bottom-width: 1px;
}
&.l {
&.left {
border-left-width: 1px;
}
&.r {
&.right {
border-right-width: 1px;
}
@ -51,25 +51,25 @@ export default {
cursor: move;
}
&.t::before {
&.top::before {
top: -8px;
left: -8px;
width: calc(100% + 16px);
height: 16px;
}
&.b::before {
&.bottom::before {
bottom: -8px;
left: -8px;
width: calc(100% + 16px);
height: 16px;
}
&.l::before {
&.left::before {
top: -8px;
left: -8px;
width: 16px;
height: calc(100% + 16px);
}
&.r::before {
&.right::before {
top: -8px;
right: -8px;
width: 16px;

29
src/views/_common/_operate/ResizablePoint.vue → src/views/_common/_operate/ResizeHandler.vue
View File

@ -1,16 +1,16 @@
<template>
<div :class="['resizable-point', type]"></div>
<div :class="['resize-handler', type]"></div>
</template>
<script lang="ts">
import { PropType } from 'vue'
import { OperateResizablePointType } from '@/types/edit'
import { OperateResizeHandler } from '@/types/edit'
export default {
name: 'resizable-point',
name: 'resize-handler',
props: {
type: {
type: String as PropType<OperateResizablePointType>,
type: String as PropType<OperateResizeHandler>,
required: true,
},
},
@ -18,7 +18,7 @@ export default {
</script>
<style lang="scss" scoped>
.resizable-point {
.resize-handler {
position: absolute;
width: 10px;
height: 10px;
@ -29,32 +29,29 @@ export default {
background-color: #fff;
border-radius: 50%;
&.t-l {
&.left-top {
cursor: nwse-resize;
}
&.t-c {
&.top {
cursor: ns-resize;
}
&.t-r {
&.right-top {
cursor: nesw-resize;
}
&.m-l {
&.left {
cursor: ew-resize;
}
&.m-r {
&.right {
cursor: ew-resize;
}
&.b-l {
&.left-bottom {
cursor: nesw-resize;
}
&.b-c {
&.bottom {
cursor: ns-resize;
}
&.b-r {
&.right-bottom {
cursor: nwse-resize;
}
&.any {
cursor: pointer;
}
}
</style>

6
src/views/_common/_operate/RotateHandler.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="rotate-handle">
<div class="rotate-handler">
<div class="rotate-icon"><IconFont type="icon-rotate" /></div>
</div>
</template>
<script>
export default {
name: 'rotate-handle',
name: 'rotate-handler',
}
</script>
<style lang="scss" scoped>
.rotate-handle {
.rotate-handler {
position: absolute;
top: -24px;
margin: -12px 0 0 -12px;