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

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,146 +97,150 @@ const canvasPositionList = computed(() => {
 watch(
   () => chartEditStore.getMousePosition,
   throttle(() => {
-    if (!isComputedLine.value || selectId.value.length !== 1) return
-    // 获取目标组件数据
+    try {
+      if (!isComputedLine.value || selectId.value.length !== 1) return
+      // 获取目标组件数据
 
-    const selectW = selectAttr.value.w
-    const selectH = selectAttr.value.h
+      const selectW = selectAttr.value.w
+      const selectH = selectAttr.value.h
 
-    // 距离左侧
-    const selectLeftX = selectAttr.value.x
-    const selectHalfX = selectLeftX + selectW / 2
-    const selectRightX = selectLeftX + selectW
-    const seletX = [selectLeftX, selectHalfX, selectRightX]
+      // 距离左侧
+      const selectLeftX = selectAttr.value.x
+      const selectHalfX = selectLeftX + selectW / 2
+      const selectRightX = selectLeftX + selectW
+      const seletX = [selectLeftX, selectHalfX, selectRightX]
 
-    // 距离顶部
-    const selectTopY = selectAttr.value.y
-    const selectHalfY = selectTopY + selectH / 2
-    const selectBottomY = selectTopY + selectH
-    const selectY = [selectTopY, selectHalfY, selectBottomY]
+      // 距离顶部
+      const selectTopY = selectAttr.value.y
+      const selectHalfY = selectTopY + selectH / 2
+      const selectBottomY = selectTopY + selectH
+      const selectY = [selectTopY, selectHalfY, selectBottomY]
 
-    line.select.clear()
-    line.sorptioned.y = false
-    // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
-      return {
-        id: e.id,
-        attr: e.attr
-      }
-    })
-    componentList.push(canvasPositionList.value)
-    // 传入画布数据
-    line.lineArr.forEach(lineItem => {
-      componentList.forEach((component: typeof canvasPositionList.value) => {
-        // 排除自身
-        if (selectId.value[0] === component.id) return
-        const componentW = component.attr.w
-        const componentH = component.attr.h
-
-        // 距离左侧
-        const componentLeftX = component.attr.x
-        const componentHalfX = componentLeftX + componentW / 2
-        const componentRightX = componentLeftX + componentW
-        const componentX = [componentLeftX, componentHalfX, componentRightX]
-
-        // 距离顶部
-        const componentTopY = component.attr.y
-        const componentHalfY = componentTopY + componentH / 2
-        const componentBottomY = componentTopY + componentH
-        const componentY = [componentTopY, componentHalfY, componentBottomY]
-
-        // 横线对比的是 Y
-        if (lineItem.includes('rowt')) {
-          // 顶部
-          if (isSorption(selectTopY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY)
-          }
-          if (isSorption(selectTopY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY)
-          }
-          if (isSorption(selectTopY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY)
-          }
-        }
-        if (lineItem.includes('rowc')) {
-          // 顶部
-          if (isSorption(selectHalfY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
-          }
-          if (isSorption(selectHalfY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
-          }
-          if (isSorption(selectHalfY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
-          }
-        }
-        if (lineItem.includes('rowb')) {
-          // 顶部
-          if (isSorption(selectBottomY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH)
-          }
-          if (isSorption(selectBottomY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
-          }
-          if (isSorption(selectBottomY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
-          }
-        }
-
-        // 纵线对比的是 X
-        if (lineItem.includes('coll')) {
-          if (isSorption(selectLeftX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX, selectTopY)
-          }
-          if (isSorption(selectLeftX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX, selectTopY)
-          }
-          if (isSorption(selectLeftX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX, selectTopY)
-          }
-        }
-        if (lineItem.includes('colc')) {
-          if (isSorption(selectHalfX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
-          }
-          if (isSorption(selectHalfX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
-          }
-          if (isSorption(selectHalfX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
-          }
-        }
-        if (lineItem.includes('colr')) {
-          if (isSorption(selectRightX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW, selectTopY)
-          }
-          if (isSorption(selectRightX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW, selectTopY)
-          }
-          if (isSorption(selectRightX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
-          }
+      line.select.clear()
+      line.sorptioned.y = false
+      // 循环查询所有组件数据
+      const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
+        return {
+          id: e.id,
+          attr: e.attr
         }
       })
-    })
+      componentList.push(canvasPositionList.value)
+      // 传入画布数据
+      line.lineArr.forEach(lineItem => {
+        componentList.forEach((component: typeof canvasPositionList.value) => {
+          // 排除自身
+          if (selectId.value[0] === component.id) return
+          const componentW = component.attr.w
+          const componentH = component.attr.h
+
+          // 距离左侧
+          const componentLeftX = component.attr.x
+          const componentHalfX = componentLeftX + componentW / 2
+          const componentRightX = componentLeftX + componentW
+          const componentX = [componentLeftX, componentHalfX, componentRightX]
+
+          // 距离顶部
+          const componentTopY = component.attr.y
+          const componentHalfY = componentTopY + componentH / 2
+          const componentBottomY = componentTopY + componentH
+          const componentY = [componentTopY, componentHalfY, componentBottomY]
+
+          // 横线对比的是 Y
+          if (lineItem.includes('rowt')) {
+            // 顶部
+            if (isSorption(selectTopY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY)
+            }
+            if (isSorption(selectTopY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY)
+            }
+            if (isSorption(selectTopY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY)
+            }
+          }
+          if (lineItem.includes('rowc')) {
+            // 顶部
+            if (isSorption(selectHalfY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2)
+            }
+            if (isSorption(selectHalfY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2)
+            }
+            if (isSorption(selectHalfY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2)
+            }
+          }
+          if (lineItem.includes('rowb')) {
+            // 顶部
+            if (isSorption(selectBottomY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH)
+            }
+            if (isSorption(selectBottomY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH)
+            }
+            if (isSorption(selectBottomY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH)
+            }
+          }
+
+          // 纵线对比的是 X
+          if (lineItem.includes('coll')) {
+            if (isSorption(selectLeftX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX, selectTopY)
+            }
+            if (isSorption(selectLeftX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX, selectTopY)
+            }
+            if (isSorption(selectLeftX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              setComponentPosition(selectTarget.value, componentRightX, selectTopY)
+            }
+          }
+          if (lineItem.includes('colc')) {
+            if (isSorption(selectHalfX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY)
+            }
+            if (isSorption(selectHalfX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY)
+            }
+            if (isSorption(selectHalfX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY)
+            }
+          }
+          if (lineItem.includes('colr')) {
+            if (isSorption(selectRightX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY)
+            }
+            if (isSorption(selectRightX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY)
+            }
+            if (isSorption(selectRightX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              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)
-      return
+    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
 
     // 按下右键 + 选中多个 + 目标元素是多选子元素
     const selectId = chartEditStore.getTargetChart.selectId
@@ -264,38 +263,43 @@ export const useMouseHandle = () => {
         // 基于右下角位置检测
         currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
         currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
-
-        componentInstance.attr = Object.assign(componentInstance.attr, {
-          x: currX,
-          y: currY
-        })
+        if (componentInstance) {
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            x: currX,
+            y: currY
+          })
+        }
       })
       return
     }, 20)
 
     const mouseup = () => {
-      chartEditStore.setMousePosition(0, 0, 0, 0)
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
-      // 加入历史栈
-      if (prevComponentInstance.length) {
-        chartEditStore.getTargetChart.selectId.forEach(id => {
-          if (!targetMap.has(id)) return
-          const index = chartEditStore.fetchTargetIndex(id)
-          const curComponentInstance = chartEditStore.getComponentList[index]
-          // 找到记录的所选组件
-          prevComponentInstance.forEach(preItem => {
-            if (preItem.id === id) {
-              preItem.attr = Object.assign(preItem.attr, {
-                offsetX: curComponentInstance.attr.x - preItem.attr.x,
-                offsetY: curComponentInstance.attr.y - preItem.attr.y
-              })
-            }
+      try {
+        chartEditStore.setMousePosition(0, 0, 0, 0)
+        chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+        // 加入历史栈
+        if (prevComponentInstance.length) {
+          chartEditStore.getTargetChart.selectId.forEach(id => {
+            if (!targetMap.has(id)) return
+            const index = chartEditStore.fetchTargetIndex(id)
+            const curComponentInstance = chartEditStore.getComponentList[index]
+            // 找到记录的所选组件
+            prevComponentInstance.forEach(preItem => {
+              if (preItem.id === id) {
+                preItem.attr = Object.assign(preItem.attr, {
+                  offsetX: curComponentInstance.attr.x - preItem.attr.x,
+                  offsetY: curComponentInstance.attr.y - preItem.attr.y
+                })
+              }
+            })
           })
-        })
-        chartEditStore.moveComponentList(prevComponentInstance)
+          chartEditStore.moveComponentList(prevComponentInstance)
+        }
+        document.removeEventListener('mousemove', mousemove)
+        document.removeEventListener('mouseup', mouseup)
+      } catch (err) {
+        console.log(err)
       }
-      document.removeEventListener('mousemove', mousemove)
-      document.removeEventListener('mouseup', mouseup)
     }
 
     document.addEventListener('mousemove', mousemove)