update

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,

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,

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<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,
+  }
+}