From 845cecd55361b71a16145a8c6adf0c38e474bea0 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Tue, 22 Dec 2020 21:06:15 +0800 Subject: [PATCH] update --- .../_common/_element/ImageElement/index.vue | 34 +++++-------------- .../_common/_element/TextElement/index.vue | 31 ++++------------- .../_common/_element/useCommonOperate.ts | 33 ++++++++++++++++++ 3 files changed, 47 insertions(+), 51 deletions(-) create mode 100644 src/views/_common/_element/useCommonOperate.ts diff --git a/src/views/_common/_element/ImageElement/index.vue b/src/views/_common/_element/ImageElement/index.vue index e42cbeed..3f83122c 100644 --- a/src/views/_common/_element/ImageElement/index.vue +++ b/src/views/_common/_element/ImageElement/index.vue @@ -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, diff --git a/src/views/_common/_element/TextElement/index.vue b/src/views/_common/_element/TextElement/index.vue index db007c82..4a4911a3 100644 --- a/src/views/_common/_element/TextElement/index.vue +++ b/src/views/_common/_element/TextElement/index.vue @@ -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, diff --git a/src/views/_common/_element/useCommonOperate.ts b/src/views/_common/_element/useCommonOperate.ts new file mode 100644 index 00000000..00590f51 --- /dev/null +++ b/src/views/_common/_element/useCommonOperate.ts @@ -0,0 +1,33 @@ +import { computed, Ref } from 'vue' +import { OPERATE_KEYS, 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'} }, + ] + }) + + 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, + } +} \ No newline at end of file