perf: 优化报错信息捕获，去除setPosition自带函数

src/packages/index.d.ts

@@ -115,7 +115,6 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  setPosition: Function
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {

src/packages/public/publicConfig.ts

@@ -81,12 +81,6 @@ export class PublicConfigClass implements PublicConfigType {
   public request = cloneDeep(requestConfig)
   // 数据过滤
   public filter = undefined
-
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
 }
 
 // 多选成组类

src/utils/index.ts

@@ -4,6 +4,6 @@ export * from '@/utils/router'
 export * from '@/utils/storage'
 export * from '@/utils/style'
 export * from '@/utils/plugin'
-export * from '@/utils/componets'
+export * from '@/utils/components'
 export * from '@/utils/type'
 export * from '@/utils/file'

src/utils/utils.ts

@@ -8,6 +8,7 @@ import { downloadByA } from './file'
 import { toString } from './type'
 import cloneDeep from 'lodash/cloneDeep'
 import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 
 /**
  * * 判断是否是开发环境
@@ -72,6 +73,17 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
   window['$message'].warning('您的浏览器不支持全屏功能！')
 }
 
+/**
+ * 修改元素位置
+ * @param target 对象
+ * @param x X轴
+ * @param y Y轴
+ */
+ export const setComponentPosition = (target: CreateComponentType | CreateComponentGroupType, x?: number, y?:number) => {
+  x && (target.attr.x = x)
+  y && (target.attr.y = y)
+}
+
 /**
  * * 设置元素属性
  * @param HTMLElement 元素

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -17,6 +17,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { setComponentPosition } from '@/utils'
 import throttle from 'lodash/throttle'
 import cloneDeep from 'lodash/cloneDeep'
 // 全局颜色
@@ -96,6 +97,7 @@ const canvasPositionList = computed(() => {
 watch(
   () => chartEditStore.getMousePosition,
   throttle(() => {
+    try {
       if (!isComputedLine.value || selectId.value.length !== 1) return
       // 获取目标组件数据
 
@@ -149,45 +151,45 @@ watch(
             // 顶部
             if (isSorption(selectTopY, componentTopY)) {
               line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY)
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY)
             }
             if (isSorption(selectTopY, componentHalfY)) {
               line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY)
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY)
             }
             if (isSorption(selectTopY, componentBottomY)) {
               line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY)
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY)
             }
           }
           if (lineItem.includes('rowc')) {
             // 顶部
             if (isSorption(selectHalfY, componentTopY)) {
               line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2)
             }
             if (isSorption(selectHalfY, componentHalfY)) {
               line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2)
             }
             if (isSorption(selectHalfY, componentBottomY)) {
               line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2)
             }
           }
           if (lineItem.includes('rowb')) {
             // 顶部
             if (isSorption(selectBottomY, componentTopY)) {
               line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH)
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH)
             }
             if (isSorption(selectBottomY, componentHalfY)) {
               line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH)
             }
             if (isSorption(selectBottomY, componentBottomY)) {
               line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH)
             }
           }
 
@@ -195,47 +197,50 @@ watch(
           if (lineItem.includes('coll')) {
             if (isSorption(selectLeftX, componentLeftX)) {
               line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX, selectTopY)
+              setComponentPosition(selectTarget.value, componentLeftX, selectTopY)
             }
             if (isSorption(selectLeftX, componentHalfX)) {
               line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX, selectTopY)
+              setComponentPosition(selectTarget.value, componentHalfX, selectTopY)
             }
             if (isSorption(selectLeftX, componentRightX)) {
               line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX, selectTopY)
+              setComponentPosition(selectTarget.value, componentRightX, selectTopY)
             }
           }
           if (lineItem.includes('colc')) {
             if (isSorption(selectHalfX, componentLeftX)) {
               line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
+              setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY)
             }
             if (isSorption(selectHalfX, componentHalfX)) {
               line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
+              setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY)
             }
             if (isSorption(selectHalfX, componentRightX)) {
               line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
+              setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY)
             }
           }
           if (lineItem.includes('colr')) {
             if (isSorption(selectRightX, componentLeftX)) {
               line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW, selectTopY)
+              setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY)
             }
             if (isSorption(selectRightX, componentHalfX)) {
               line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW, selectTopY)
+              setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY)
             }
             if (isSorption(selectRightX, componentRightX)) {
               line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
+              setComponentPosition(selectTarget.value, componentRightX - selectW, selectTopY)
             }
           }
         })
       })
+    } catch (err) {
+      console.log(err)
+    }
   }, 200),
   {
     deep: true

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -1,12 +1,12 @@
 import { toRaw } from 'vue'
-import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
+import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
 import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils'
 import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
@@ -33,7 +33,7 @@ export const dragHandle = async (e: DragEvent) => {
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
 
-    newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
+    setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
     chartEditStore.addComponentList(newComponent, false, true)
     chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()
@@ -190,8 +190,7 @@ export const useMouseHandle = () => {
     if (item.status.lock) return
     onClickOutSide()
     // 按下左键 + CTRL
-    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl)
+    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
-      return
 
     // 按下右键 + 选中多个 + 目标元素是多选子元素
     const selectId = chartEditStore.getTargetChart.selectId
@@ -264,16 +263,18 @@ export const useMouseHandle = () => {
         // 基于右下角位置检测
         currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
         currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
-
+        if (componentInstance) {
           componentInstance.attr = Object.assign(componentInstance.attr, {
             x: currX,
             y: currY
           })
+        }
       })
       return
     }, 20)
 
     const mouseup = () => {
+      try {
         chartEditStore.setMousePosition(0, 0, 0, 0)
         chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
         // 加入历史栈
@@ -296,6 +297,9 @@ export const useMouseHandle = () => {
         }
         document.removeEventListener('mousemove', mousemove)
         document.removeEventListener('mouseup', mouseup)
+      } catch (err) {
+        console.log(err)
+      }
     }
 
     document.addEventListener('mousemove', mousemove)