feat: 支持通过控制点调整形状

This commit is contained in:
pipipi-pikachu 2022-07-08 22:01:09 +08:00
parent 985be943ca
commit 8d739ec8cf
10 changed files with 422 additions and 79 deletions

View File

@ -136,8 +136,6 @@ npm run serve
# 📅 后续规划 # 📅 后续规划
- 组合元素重构:能够支持组合元素进行旋转、缩放、整体执行动画等; - 组合元素重构:能够支持组合元素进行旋转、缩放、整体执行动画等;
- 添加强化版基础形状:支持调整圆角矩形弧度、调整三角形顶点位置等操作;
- 移动端简单编辑支持;
- 导入本地PPTX文件 - 导入本地PPTX文件
- 将 Vue CLI 更换到 Vite 生态; - 将 Vue CLI 更换到 Vite 生态;

View File

@ -14,56 +14,196 @@ interface ShapeListItem {
} }
export const SHAPE_PATH_FORMULAS = { export const SHAPE_PATH_FORMULAS = {
[ShapePathFormulasKeys.ROUND_RECT]: (width: number, height: number) => { [ShapePathFormulasKeys.ROUND_RECT]: {
const radius = Math.min(width, height) / 8 editable: true,
defaultValue: 0.125,
range: [0, 0.5],
relative: 'left',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height - radius} Q ${width} ${height} ${width - radius} ${height} L ${radius} ${height} Q 0 ${height} 0 ${height - radius} L 0 ${radius} Q 0 0 ${radius} 0 Z` return `M ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height - radius} Q ${width} ${height} ${width - radius} ${height} L ${radius} ${height} Q 0 ${height} 0 ${height - radius} L 0 ${radius} Q 0 0 ${radius} 0 Z`
}
}, },
[ShapePathFormulasKeys.CUT_RECT_DIAGONAL]: (width: number, height: number) => { [ShapePathFormulasKeys.CUT_RECT_DIAGONAL]: {
const radius = Math.min(width, height) / 5 editable: true,
defaultValue: 0.2,
range: [0, 0.9],
relative: 'right',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 ${height - radius} L 0 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} L ${radius} ${height} Z` return `M 0 ${height - radius} L 0 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} L ${radius} ${height} Z`
}
}, },
[ShapePathFormulasKeys.CUT_RECT_SINGLE]: (width: number, height: number) => { [ShapePathFormulasKeys.CUT_RECT_SINGLE]: {
const radius = Math.min(width, height) / 5 editable: true,
defaultValue: 0.2,
range: [0, 0.9],
relative: 'right',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 ${height} L 0 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} Z` return `M 0 ${height} L 0 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} Z`
}
}, },
[ShapePathFormulasKeys.CUT_RECT_SAMESIDE]: (width: number, height: number) => { [ShapePathFormulasKeys.CUT_RECT_SAMESIDE]: {
const radius = Math.min(width, height) / 5 editable: true,
defaultValue: 0.2,
range: [0, 0.5],
relative: 'left',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 ${radius} L ${radius} 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} L 0 ${height} Z` return `M 0 ${radius} L ${radius} 0 L ${width - radius} 0 L ${width} ${radius} L ${width} ${height} L 0 ${height} Z`
}
}, },
[ShapePathFormulasKeys.ROUND_RECT_DIAGONAL]: (width: number, height: number) => { [ShapePathFormulasKeys.ROUND_RECT_DIAGONAL]: {
const radius = Math.min(width, height) / 8 editable: true,
defaultValue: 0.125,
range: [0, 1],
relative: 'right',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L ${radius} ${height} Q 0 ${height} 0 ${height - radius} L 0 0 Z` return `M 0 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L ${radius} ${height} Q 0 ${height} 0 ${height - radius} L 0 0 Z`
}
}, },
[ShapePathFormulasKeys.ROUND_RECT_SINGLE]: (width: number, height: number) => { [ShapePathFormulasKeys.ROUND_RECT_SINGLE]: {
const radius = Math.min(width, height) / 8 editable: true,
defaultValue: 0.125,
range: [0, 1],
relative: 'right',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L 0 ${height} L 0 0 Z` return `M 0 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L 0 ${height} L 0 0 Z`
}
}, },
[ShapePathFormulasKeys.ROUND_RECT_SAMESIDE]: (width: number, height: number) => { [ShapePathFormulasKeys.ROUND_RECT_SAMESIDE]: {
const radius = Math.min(width, height) / 8 editable: true,
defaultValue: 0.125,
range: [0, 0.5],
relative: 'left',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const radius = Math.min(width, height) * value
return `M 0 ${radius} Q 0 0 ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L 0 ${height} Z` return `M 0 ${radius} Q 0 0 ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height} L 0 ${height} Z`
}
}, },
[ShapePathFormulasKeys.MESSAGE]: (width: number, height: number) => { [ShapePathFormulasKeys.MESSAGE]: {
const arrowWidth = width / 5 formula: (width: number, height: number) => {
const arrowheight = height / 5 const arrowWidth = width * 0.2
const arrowheight = height * 0.2
return `M 0 0 L ${width} 0 L ${width} ${height - arrowheight} L ${width / 2} ${height - arrowheight} L ${width / 2 - arrowWidth} ${height} L ${width / 2 - arrowWidth} ${height - arrowheight} L 0 ${height - arrowheight} Z` return `M 0 0 L ${width} 0 L ${width} ${height - arrowheight} L ${width / 2} ${height - arrowheight} L ${width / 2 - arrowWidth} ${height} L ${width / 2 - arrowWidth} ${height - arrowheight} L 0 ${height - arrowheight} Z`
}
}, },
[ShapePathFormulasKeys.ROUND_MESSAGE]: (width: number, height: number) => { [ShapePathFormulasKeys.ROUND_MESSAGE]: {
const radius = Math.min(width, height) / 8 formula: (width: number, height: number) => {
const arrowWidth = width / 5 const radius = Math.min(width, height) * 0.125
const arrowheight = height / 5 const arrowWidth = width * 0.2
const arrowheight = height * 0.2
return `M 0 ${radius} Q 0 0 ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height - radius - arrowheight} Q ${width} ${height - arrowheight} ${width - radius} ${height - arrowheight} L ${width / 2} ${height - arrowheight} L ${width / 2 - arrowWidth} ${height} L ${width / 2 - arrowWidth} ${height - arrowheight} L ${radius} ${height - arrowheight} Q 0 ${height - arrowheight} 0 ${height - radius - arrowheight} L 0 ${radius} Z` return `M 0 ${radius} Q 0 0 ${radius} 0 L ${width - radius} 0 Q ${width} 0 ${width} ${radius} L ${width} ${height - radius - arrowheight} Q ${width} ${height - arrowheight} ${width - radius} ${height - arrowheight} L ${width / 2} ${height - arrowheight} L ${width / 2 - arrowWidth} ${height} L ${width / 2 - arrowWidth} ${height - arrowheight} L ${radius} ${height - arrowheight} Q 0 ${height - arrowheight} 0 ${height - radius - arrowheight} L 0 ${radius} Z`
}
}, },
[ShapePathFormulasKeys.L]: (width: number, height: number) => { [ShapePathFormulasKeys.L]: {
const lineWidth = Math.min(width, height) / 4 editable: true,
defaultValue: 0.25,
range: [0.1, 0.9],
relative: 'left',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const lineWidth = Math.min(width, height) * value
return `M 0 0 L 0 ${height} L ${width} ${height} L ${width} ${height - lineWidth} L ${lineWidth} ${height - lineWidth} L ${lineWidth} 0 Z` return `M 0 0 L 0 ${height} L ${width} ${height} L ${width} ${height - lineWidth} L ${lineWidth} ${height - lineWidth} L ${lineWidth} 0 Z`
}
}, },
[ShapePathFormulasKeys.RING_RECT]: (width: number, height: number) => { [ShapePathFormulasKeys.RING_RECT]: {
const lineWidth = Math.min(width, height) / 4 editable: true,
defaultValue: 0.25,
range: [0.1, 0.45],
relative: 'left',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const lineWidth = Math.min(width, height) * value
return `M 0 0 ${width} 0 ${width} ${height} L 0 ${height} L 0 0 Z M ${lineWidth} ${lineWidth} L ${lineWidth} ${height - lineWidth} L ${width - lineWidth} ${height - lineWidth} L ${width - lineWidth} ${lineWidth} Z` return `M 0 0 ${width} 0 ${width} ${height} L 0 ${height} L 0 0 Z M ${lineWidth} ${lineWidth} L ${lineWidth} ${height - lineWidth} L ${width - lineWidth} ${height - lineWidth} L ${width - lineWidth} ${lineWidth} Z`
}
}, },
[ShapePathFormulasKeys.PLUS]: (width: number, height: number) => { [ShapePathFormulasKeys.PLUS]: {
const lineWidth = Math.min(width, height) / 4 editable: true,
defaultValue: 0.25,
range: [0.1, 0.9],
relative: 'center',
getBaseSize: (width: number, height: number) => Math.min(width, height),
formula: (width: number, height: number, value: number) => {
const lineWidth = Math.min(width, height) * value
return `M ${width / 2 - lineWidth / 2} 0 L ${width / 2 - lineWidth / 2} ${height / 2 - lineWidth / 2} L 0 ${height / 2 - lineWidth / 2} L 0 ${height / 2 + lineWidth / 2} L ${width / 2 - lineWidth / 2} ${height / 2 + lineWidth / 2} L ${width / 2 - lineWidth / 2} ${height} L ${width / 2 + lineWidth / 2} ${height} L ${width / 2 + lineWidth / 2} ${height / 2 + lineWidth / 2} L ${width} ${height / 2 + lineWidth / 2} L ${width} ${height / 2 - lineWidth / 2} L ${width / 2 + lineWidth / 2} ${height / 2 - lineWidth / 2} L ${width / 2 + lineWidth / 2} 0 Z` return `M ${width / 2 - lineWidth / 2} 0 L ${width / 2 - lineWidth / 2} ${height / 2 - lineWidth / 2} L 0 ${height / 2 - lineWidth / 2} L 0 ${height / 2 + lineWidth / 2} L ${width / 2 - lineWidth / 2} ${height / 2 + lineWidth / 2} L ${width / 2 - lineWidth / 2} ${height} L ${width / 2 + lineWidth / 2} ${height} L ${width / 2 + lineWidth / 2} ${height / 2 + lineWidth / 2} L ${width} ${height / 2 + lineWidth / 2} L ${width} ${height / 2 - lineWidth / 2} L ${width / 2 + lineWidth / 2} ${height / 2 - lineWidth / 2} L ${width / 2 + lineWidth / 2} 0 Z`
}
},
[ShapePathFormulasKeys.TRIANGLE]: {
editable: true,
defaultValue: 0.5,
range: [0, 1],
relative: 'left',
getBaseSize: (width: number, height: number) => width,
formula: (width: number, height: number, value: number) => {
const vertex = width * value
return `M ${vertex} 0 L 0 ${height} L ${width} ${height} Z`
}
},
[ShapePathFormulasKeys.PARALLELOGRAM_LEFT]: {
editable: true,
defaultValue: 0.25,
range: [0, 0.9],
relative: 'left',
getBaseSize: (width: number, height: number) => width,
formula: (width: number, height: number, value: number) => {
const point = width * value
return `M ${point} 0 L ${width} 0 L ${width - point} ${height} L 0 ${height} Z`
}
},
[ShapePathFormulasKeys.PARALLELOGRAM_RIGHT]: {
editable: true,
defaultValue: 0.25,
range: [0, 0.9],
relative: 'right',
getBaseSize: (width: number, height: number) => width,
formula: (width: number, height: number, value: number) => {
const point = width * value
return `M 0 0 L ${width - point} 0 L ${width} ${height} L ${point} ${height} Z`
}
},
[ShapePathFormulasKeys.TRAPEZOID]: {
editable: true,
defaultValue: 0.25,
range: [0, 0.5],
relative: 'left',
getBaseSize: (width: number, height: number) => width,
formula: (width: number, height: number, value: number) => {
const point = width * value
return `M ${point} 0 L ${width - point} 0 L ${width} ${height} L 0 ${height} Z`
}
},
[ShapePathFormulasKeys.BULLET]: {
editable: true,
defaultValue: 0.2,
range: [0, 1],
relative: 'top',
getBaseSize: (width: number, height: number) => height,
formula: (width: number, height: number, value: number) => {
const point = height * value
return `M ${width / 2} 0 L 0 ${point} L 0 ${height} L ${width} ${height} L ${width} ${point} Z`
}
},
[ShapePathFormulasKeys.INDICATOR]: {
editable: true,
defaultValue: 0.2,
range: [0, 0.9],
relative: 'right',
getBaseSize: (width: number, height: number) => width,
formula: (width: number, height: number, value: number) => {
const point = width * value
return `M ${width} ${height / 2} L ${width - point} 0 L 0 0 L ${point} ${height / 2} L 0 ${height} L ${width - point} ${height} Z`
}
}, },
} }
@ -120,6 +260,44 @@ export const SHAPE_LIST: ShapeListItem[] = [
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z' path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z'
}, },
{
viewBox: [200, 200],
path: 'M 100 0 L 0 200 L 200 200 L 100 0 Z',
pathFormula: ShapePathFormulasKeys.TRIANGLE,
},
{
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z'
},
{
viewBox: [200, 200],
path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z',
pathFormula: ShapePathFormulasKeys.PARALLELOGRAM_LEFT,
},
{
viewBox: [200, 200],
path: 'M 0 0 L 150 0 L 200 200 L 50 200 L 0 0 Z',
pathFormula: ShapePathFormulasKeys.PARALLELOGRAM_RIGHT,
},
{
viewBox: [200, 200],
path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z',
pathFormula: ShapePathFormulasKeys.TRAPEZOID,
},
{
viewBox: [200, 200],
path: 'M 100 0 L 0 100 L 100 200 L 200 100 L 100 0 Z'
},
{
viewBox: [200, 200],
path: 'M 100 0 L 0 50 L 0 200 L 200 200 L 200 50 L 100 0 Z',
pathFormula: ShapePathFormulasKeys.BULLET,
},
{
viewBox: [200, 200],
path: 'M 200 100 L 150 0 L 0 0 L 50 100 L 0 200 L 150 200 L 200 100 Z',
pathFormula: ShapePathFormulasKeys.INDICATOR,
},
{ {
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 0 200 A 50 100 0 1 1 200 200 L 0 200 Z', path: 'M 0 200 A 50 100 0 1 1 200 200 L 0 200 Z',
@ -148,30 +326,6 @@ export const SHAPE_LIST: ShapeListItem[] = [
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 0 0 L 200 0 Q 200 200 0 200 L 0 0 Z' path: 'M 0 0 L 200 0 Q 200 200 0 200 L 0 0 Z'
}, },
{
viewBox: [200, 200],
path: 'M 100 0 L 0 200 L 200 200 L 100 0 Z'
},
{
viewBox: [200, 200],
path: 'M 0 0 L 0 200 L 200 200 Z'
},
{
viewBox: [200, 200],
path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z'
},
{
viewBox: [200, 200],
path: 'M 0 0 L 150 0 L 200 200 L 50 200 L 0 0 Z'
},
{
viewBox: [200, 200],
path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z'
},
{
viewBox: [200, 200],
path: 'M 100 0 L 0 100 L 100 200 L 200 100 L 100 0 Z'
},
{ {
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 100 0 L 0 90 L 50 200 L 150 200 L 200 90 L 100 0 Z' path: 'M 100 0 L 0 90 L 50 200 L 150 200 L 200 90 L 100 0 Z'
@ -188,10 +342,6 @@ export const SHAPE_LIST: ShapeListItem[] = [
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 75 0 L 125 0 L 175 25 L 200 75 L 200 125 L 175 175 L 125 200 L 75 200 L 25 175 L 0 125 L 0 75 L 25 25 L 75 0 Z' path: 'M 75 0 L 125 0 L 175 25 L 200 75 L 200 125 L 175 175 L 125 200 L 75 200 L 25 175 L 0 125 L 0 75 L 25 25 L 75 0 Z'
}, },
{
viewBox: [200, 200],
path: 'M 100 0 L 0 50 L 0 200 L 200 200 L 200 50 L 100 0 Z'
},
{ {
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 150 0 A 50 100 0 1 1 150 200 L 0 200 L 0 0 L 150 0 Z' path: 'M 150 0 A 50 100 0 1 1 150 200 L 0 200 L 0 0 L 150 0 Z'
@ -204,10 +354,6 @@ export const SHAPE_LIST: ShapeListItem[] = [
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 150 0 A 50 100 0 1 1 150 200 L 0 200 A 50 100 0 0 0 0 0 L 150 0 Z' path: 'M 150 0 A 50 100 0 1 1 150 200 L 0 200 A 50 100 0 0 0 0 0 L 150 0 Z'
}, },
{
viewBox: [200, 200],
path: 'M 200 100 L 150 0 L 0 0 L 50 100 L 0 200 L 150 200 L 200 100 Z'
},
{ {
viewBox: [200, 200], viewBox: [200, 200],
path: 'M 200 0 L 200 200 L 0 200 L 0 100 L 200 0 Z' path: 'M 200 0 L 200 200 L 0 200 L 0 100 L 200 0 Z'

View File

@ -218,7 +218,13 @@ export default () => {
if (data.pathFormula) { if (data.pathFormula) {
newElement.pathFormula = data.pathFormula newElement.pathFormula = data.pathFormula
newElement.viewBox = [width, height] newElement.viewBox = [width, height]
newElement.path = SHAPE_PATH_FORMULAS[data.pathFormula](width, height)
const pathFormula = SHAPE_PATH_FORMULAS[data.pathFormula]
if ('editable' in pathFormula) {
newElement.path = pathFormula.formula(width, height, pathFormula.defaultValue)
newElement.keypoint = pathFormula.defaultValue
}
else newElement.path = pathFormula.formula(width, height)
} }
createElement(newElement) createElement(newElement)
} }

View File

@ -13,6 +13,12 @@ export const enum ShapePathFormulasKeys {
L = 'L', L = 'L',
RING_RECT = 'ringRect', RING_RECT = 'ringRect',
PLUS = 'plus', PLUS = 'plus',
TRIANGLE = 'triangle',
PARALLELOGRAM_LEFT = 'parallelogramLeft',
PARALLELOGRAM_RIGHT = 'parallelogramRight',
TRAPEZOID = 'trapezoid',
BULLET = 'bullet',
INDICATOR = 'indicator',
} }
export const enum ElementTypes { export const enum ElementTypes {
@ -304,6 +310,8 @@ export interface ShapeText {
* pathFormula?: 形状路径计算公式 * pathFormula?: 形状路径计算公式
* viewBox viewBox path * viewBox viewBox path
* viewBox path * viewBox path
*
* keypoint?: 关键点位置百分比
*/ */
export interface PPTShapeElement extends PPTBaseElement { export interface PPTShapeElement extends PPTBaseElement {
type: 'shape' type: 'shape'
@ -320,6 +328,7 @@ export interface PPTShapeElement extends PPTBaseElement {
special?: boolean special?: boolean
text?: ShapeText text?: ShapeText
pathFormula?: ShapePathFormulasKeys pathFormula?: ShapePathFormulasKeys
keypoint?: number
} }

View File

@ -22,6 +22,12 @@
:style="{ left: scaleWidth / 2 + 'px' }" :style="{ left: scaleWidth / 2 + 'px' }"
@mousedown.stop="rotateElement(elementInfo)" @mousedown.stop="rotateElement(elementInfo)"
/> />
<div
class="operate-keypoint-handler"
v-if="elementInfo.keypoint !== undefined"
:style="keypointStyle"
@mousedown.stop="$event => moveShapeKeypoint($event, elementInfo)"
></div>
</template> </template>
</div> </div>
</template> </template>
@ -38,6 +44,7 @@ import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store' import { useMainStore } from '@/store'
import { PPTShapeElement } from '@/types/slides' import { PPTShapeElement } from '@/types/slides'
import { OperateResizeHandlers } from '@/types/edit' import { OperateResizeHandlers } from '@/types/edit'
import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
import useCommonOperate from '../hooks/useCommonOperate' import useCommonOperate from '../hooks/useCommonOperate'
import RotateHandler from './RotateHandler.vue' import RotateHandler from './RotateHandler.vue'
@ -61,6 +68,10 @@ const props = defineProps({
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>, type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandlers) => void>,
required: true, required: true,
}, },
moveShapeKeypoint: {
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement) => void>,
required: true,
},
}) })
const { canvasScale } = storeToRefs(useMainStore()) const { canvasScale } = storeToRefs(useMainStore())
@ -68,4 +79,33 @@ const { canvasScale } = storeToRefs(useMainStore())
const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value) const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value) const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight) const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const keypointStyle = computed(() => {
if (!props.elementInfo.pathFormula || !props.elementInfo.keypoint) return {}
const pathFormula = SHAPE_PATH_FORMULAS[props.elementInfo.pathFormula]
if ('editable' in pathFormula) {
const keypointPos = pathFormula.getBaseSize(props.elementInfo.width, props.elementInfo.height) * props.elementInfo.keypoint
if (pathFormula.relative === 'left') return { left: keypointPos * canvasScale.value + 'px' }
if (pathFormula.relative === 'right') return { left: (props.elementInfo.width - keypointPos) * canvasScale.value + 'px' }
if (pathFormula.relative === 'center') return { left: (props.elementInfo.width - keypointPos) / 2 * canvasScale.value + 'px' }
if (pathFormula.relative === 'top') return { top: keypointPos * canvasScale.value + 'px' }
if (pathFormula.relative === 'bottom') return { top: (props.elementInfo.height - keypointPos) * canvasScale.value + 'px' }
}
return {}
})
</script> </script>
<style lang="scss" scoped>
.operate-keypoint-handler {
position: absolute;
width: 10px;
height: 10px;
left: 0;
top: 0;
margin: -5px 0 0 -5px;
border: 1px solid $themeColor;
background-color: #ffe873;
border-radius: 1px;
}
</style>

View File

@ -17,6 +17,7 @@
:rotateElement="rotateElement" :rotateElement="rotateElement"
:scaleElement="scaleElement" :scaleElement="scaleElement"
:dragLineElement="dragLineElement" :dragLineElement="dragLineElement"
:moveShapeKeypoint="moveShapeKeypoint"
></component> ></component>
<div <div
@ -40,7 +41,7 @@
import { PropType, computed } from 'vue' import { PropType, computed } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store' import { useMainStore, useSlidesStore } from '@/store'
import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement } from '@/types/slides' import { ElementTypes, PPTElement, PPTLineElement, PPTVideoElement, PPTAudioElement, PPTShapeElement } from '@/types/slides'
import { OperateLineHandlers, OperateResizeHandlers } from '@/types/edit' import { OperateLineHandlers, OperateResizeHandlers } from '@/types/edit'
import ImageElementOperate from './ImageElementOperate.vue' import ImageElementOperate from './ImageElementOperate.vue'
@ -84,6 +85,10 @@ const props = defineProps({
type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>, type: Function as PropType<(e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void>,
required: true, required: true,
}, },
moveShapeKeypoint: {
type: Function as PropType<(e: MouseEvent, element: PPTShapeElement) => void>,
required: true,
},
openLinkDialog: { openLinkDialog: {
type: Function as PropType<() => void>, type: Function as PropType<() => void>,
required: true, required: true,

View File

@ -0,0 +1,107 @@
import { Ref } from 'vue'
import { useSlidesStore } from '@/store'
import { PPTElement, PPTShapeElement } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
interface ShapePathData {
baseSize: number,
originPos: number,
min: number,
max: number,
relative: string,
}
export default (
elementList: Ref<PPTElement[]>,
canvasScale: Ref<number>,
) => {
const slidesStore = useSlidesStore()
const { addHistorySnapshot } = useHistorySnapshot()
const moveShapeKeypoint = (e: MouseEvent | TouchEvent, element: PPTShapeElement) => {
const isTouchEvent = !(e instanceof MouseEvent)
if (isTouchEvent && (!e.changedTouches || !e.changedTouches[0])) return
let isMouseDown = true
const startPageX = isTouchEvent ? e.changedTouches[0].pageX : e.pageX
const startPageY = isTouchEvent ? e.changedTouches[0].pageY : e.pageY
const pathFormula = SHAPE_PATH_FORMULAS[element.pathFormula!]
let shapePathData: ShapePathData | null = null
if ('editable' in pathFormula) {
const baseSize = pathFormula.getBaseSize(element.width, element.height)
const originPos = baseSize * element.keypoint!
const [min, max] = pathFormula.range
const relative = pathFormula.relative
shapePathData = { baseSize, originPos, min, max, relative }
}
const handleMousemove = (e: MouseEvent | TouchEvent) => {
if (!isMouseDown) return
const currentPageX = e instanceof MouseEvent ? e.pageX : e.changedTouches[0].pageX
const currentPageY = e instanceof MouseEvent ? e.pageY : e.changedTouches[0].pageY
const moveX = (currentPageX - startPageX) / canvasScale.value
const moveY = (currentPageY - startPageY) / canvasScale.value
elementList.value = elementList.value.map(el => {
if (el.id === element.id && shapePathData) {
const { baseSize, originPos, min, max, relative } = shapePathData
const shapeElement = el as PPTShapeElement
let keypoint = 0
if (relative === 'left') keypoint = (originPos + moveX) / baseSize
if (relative === 'right') keypoint = (originPos - moveX) / baseSize
if (relative === 'center') keypoint = (originPos - moveX * 2) / baseSize
if (relative === 'top') keypoint = (originPos + moveY) / baseSize
if (relative === 'bottom') keypoint = (originPos - moveY) / baseSize
if (keypoint < min) keypoint = min
if (keypoint > max) keypoint = max
return {
...el,
keypoint,
path: pathFormula.formula(shapeElement.width, shapeElement.height, keypoint),
}
}
return el
})
}
const handleMouseup = (e: MouseEvent | TouchEvent) => {
isMouseDown = false
document.ontouchmove = null
document.ontouchend = null
document.onmousemove = null
document.onmouseup = null
const currentPageX = e instanceof MouseEvent ? e.pageX : e.changedTouches[0].pageX
const currentPageY = e instanceof MouseEvent ? e.pageY : e.changedTouches[0].pageY
if (startPageX === currentPageX && startPageY === currentPageY) return
slidesStore.updateSlide({ elements: elementList.value })
addHistorySnapshot()
}
if (isTouchEvent) {
document.ontouchmove = handleMousemove
document.ontouchend = handleMouseup
}
else {
document.onmousemove = handleMousemove
document.onmouseup = handleMouseup
}
}
return {
moveShapeKeypoint,
}
}

View File

@ -400,10 +400,16 @@ export default (
elementList.value = elementList.value.map(el => { elementList.value = elementList.value.map(el => {
if (element.id !== el.id) return el if (element.id !== el.id) return el
if (el.type === 'shape' && 'pathFormula' in el && el.pathFormula) { if (el.type === 'shape' && 'pathFormula' in el && el.pathFormula) {
const pathFormula = SHAPE_PATH_FORMULAS[el.pathFormula]
let path = ''
if ('editable' in pathFormula) path = pathFormula.formula(width, height, el.keypoint!)
else path = pathFormula.formula(width, height)
return { return {
...el, left, top, width, height, ...el, left, top, width, height,
viewBox: [width, height], viewBox: [width, height],
path: SHAPE_PATH_FORMULAS[el.pathFormula](width, height), path,
} }
} }
return { ...el, left, top, width, height } return { ...el, left, top, width, height }

View File

@ -46,6 +46,7 @@
:scaleElement="scaleElement" :scaleElement="scaleElement"
:openLinkDialog="openLinkDialog" :openLinkDialog="openLinkDialog"
:dragLineElement="dragLineElement" :dragLineElement="dragLineElement"
:moveShapeKeypoint="moveShapeKeypoint"
/> />
<ViewportBackground /> <ViewportBackground />
</div> </div>
@ -111,6 +112,7 @@ import useScaleElement from './hooks/useScaleElement'
import useSelectElement from './hooks/useSelectElement' import useSelectElement from './hooks/useSelectElement'
import useDragElement from './hooks/useDragElement' import useDragElement from './hooks/useDragElement'
import useDragLineElement from './hooks/useDragLineElement' import useDragLineElement from './hooks/useDragLineElement'
import useMoveShapeKeypoint from './hooks/useMoveShapeKeypoint'
import useInsertFromCreateSelection from './hooks/useInsertFromCreateSelection' import useInsertFromCreateSelection from './hooks/useInsertFromCreateSelection'
import useDeleteElement from '@/hooks/useDeleteElement' import useDeleteElement from '@/hooks/useDeleteElement'
@ -172,6 +174,7 @@ const { dragLineElement } = useDragLineElement(elementList)
const { selectElement } = useSelectElement(elementList, dragElement) const { selectElement } = useSelectElement(elementList, dragElement)
const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale) const { scaleElement, scaleMultiElement } = useScaleElement(elementList, alignmentLines, canvasScale)
const { rotateElement } = useRotateElement(elementList, viewportRef) const { rotateElement } = useRotateElement(elementList, viewportRef)
const { moveShapeKeypoint } = useMoveShapeKeypoint(elementList, canvasScale)
const { selectAllElement } = useSelectAllElement() const { selectAllElement } = useSelectAllElement()
const { deleteAllElements } = useDeleteElement() const { deleteAllElements } = useDeleteElement()

View File

@ -138,6 +138,7 @@ import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store' import { useMainStore, useSlidesStore } from '@/store'
import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit' import { ElementAlignCommands, ElementOrderCommands } from '@/types/edit'
import { MIN_SIZE } from '@/configs/element' import { MIN_SIZE } from '@/configs/element'
import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
import useOrderElement from '@/hooks/useOrderElement' import useOrderElement from '@/hooks/useOrderElement'
import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas' import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@ -190,13 +191,35 @@ const updateTop = (value: number) => {
} }
// //
//
const updateShapePathData = (width: number, height: number) => {
if (handleElement.value && handleElement.value.type === 'shape' && 'pathFormula' in handleElement.value && handleElement.value.pathFormula) {
const pathFormula = SHAPE_PATH_FORMULAS[handleElement.value.pathFormula]
let path = ''
if ('editable' in pathFormula) path = pathFormula.formula(width, height, handleElement.value.keypoint!)
else path = pathFormula.formula(width, height)
return {
viewBox: [width, height],
path,
}
}
return null
}
const updateWidth = (value: number) => { const updateWidth = (value: number) => {
const props = { width: value } let props = { width: value }
const shapePathData = updateShapePathData(value, height.value)
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) => {
const props = { height: value } let props = { height: value }
const shapePathData = updateShapePathData(width.value, value)
if (shapePathData) props = { ...props, ...shapePathData }
slidesStore.updateElement({ id: handleElementId.value, props }) slidesStore.updateElement({ id: handleElementId.value, props })
addHistorySnapshot() addHistorySnapshot()
} }