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-22 21:06:15 +08:00
parent 5f20da11b3
commit 845cecd553
3 changed files with 47 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -118,7 +118,8 @@
import { computed, defineComponent, ref, PropType } from 'vue'
import { PPTImageElement } from '@/types/slides'
import { OPERATE_KEYS, ElementScaleHandler, OperateResizablePointTypes, OperateBorderLineTypes } from '@/types/edit'
import { ElementScaleHandler } from '@/types/edit'
import useCommonOperate from '@/views/_common/_element/useCommonOperate'
import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
@ -192,8 +193,11 @@ export default defineComponent({
setup(props) {
const clipingImageElId = ref('')
const scaleWidth = computed(() => props.elementInfo ? props.elementInfo.width * props.canvasScale : 0)
const scaleHeight = computed(() => props.elementInfo ? props.elementInfo.height * props.canvasScale : 0)
const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
const { resizablePoints, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const isCliping = computed(() => clipingImageElId.value === props.elementInfo.elId)
const imgPosition = computed(() => {
@ -228,28 +232,6 @@ export default defineComponent({
return CLIPPATHS[shape]
})
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'} },
]
})
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'} },
]
})
const filter = computed(() => {
if(!props.elementInfo.filter) return ''
let filter = ''
@ -359,7 +341,7 @@ export default defineComponent({
}
&.multi-select:not(.selected) .el-border-line {
border-color: rgba($color: $themeColor, $alpha: .5);
border-color: rgba($color: $themeColor, $alpha: .3);
}
.el-border-line,

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

@ -76,7 +76,8 @@
import { computed, defineComponent, PropType } from 'vue'
import { PPTTextElement } from '@/types/slides'
import { OPERATE_KEYS, ElementScaleHandler, OperateResizablePointTypes, OperateBorderLineTypes } from '@/types/edit'
import { ElementScaleHandler } from '@/types/edit'
import useCommonOperate from '@/views/_common/_element/useCommonOperate'
import ElementBorder from '@/views/_common/_element/ElementBorder.vue'
import RotateHandler from '@/views/_common/_operate/RotateHandler.vue'
@ -139,30 +140,10 @@ export default defineComponent({
},
},
setup(props) {
const scaleWidth = computed(() => props.elementInfo ? props.elementInfo.width * props.canvasScale : 0)
const scaleHeight = computed(() => props.elementInfo ? props.elementInfo.height * props.canvasScale : 0)
const scaleWidth = computed(() => props.elementInfo.width * props.canvasScale)
const scaleHeight = computed(() => props.elementInfo.height * props.canvasScale)
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'} },
]
})
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'} },
]
})
const { resizablePoints, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
const handleSelectElement = (e: MouseEvent, canMove = true) => {
if(props.elementInfo.isLock) return
@ -251,7 +232,7 @@ export default defineComponent({
}
&.multi-select:not(.selected) .el-border-line {
border-color: rgba($color: $themeColor, $alpha: .5);
border-color: rgba($color: $themeColor, $alpha: .3);
}
.el-border-line,

33
src/views/_common/_element/useCommonOperate.ts Normal file
View File

@ -0,0 +1,33 @@
import { computed, Ref } from 'vue'
import { OPERATE_KEYS, 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'} },
]
})
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'} },
]
})
return {
scaleWidth,
scaleHeight,
resizablePoints,
borderLines,
}
}