feat： 新增对齐线

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

@@ -1,15 +1,18 @@
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
-import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
+import {
+  CreateComponentType,
+  PickCreateComponentType
+} from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
-import { getChartEditStore, getChartEditStoreEnum } from './useStore.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import throttle from 'lodash/throttle'
-const { onClickoutside } = useContextMenu()
 
-const chartEditStore = getChartEditStore()
-const chartEditStoreEnum = getChartEditStoreEnum()
+const chartEditStore = useChartEditStore()
+const { onClickoutside } = useContextMenu()
 
 // * 拖拽到编辑区域里
 export const handleDrag = async (e: DragEvent) => {
@@ -25,7 +28,7 @@ export const handleDrag = async (e: DragEvent) => {
     }
 
     // 设置拖拽状态
-    chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, false)
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
 
     const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
       drayDataString
@@ -52,7 +55,7 @@ export const handleDragOver = (e: DragEvent) => {
   e.stopPropagation()
 
   // 设置拖拽状态
-  chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, true)
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }
 
@@ -90,9 +93,14 @@ export const useMouseHandle = () => {
     // 记录点击初始位置
     const startX = e.screenX
     const startY = e.screenY
+    // 记录初始位置
+    chartEditStore.setMousePosition(startX, startY)
 
     // 计算偏移量（处理 scale 比例问题）
     const mousemove = throttle((moveEvent: MouseEvent) => {
+      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
+      chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
+
       let currX = Math.round(itemAttrX + (moveEvent.screenX - startX) / scale)
       let currY = Math.round(itemAttrY + (moveEvent.screenY - startY) / scale)
 
@@ -111,6 +119,8 @@ export const useMouseHandle = () => {
     }, 30)
 
     const mouseup = () => {
+      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+      chartEditStore.setMousePosition(0, 0)
       document.removeEventListener('mousemove', mousemove)
       document.removeEventListener('mouseup', mouseup)
     }
@@ -144,6 +154,9 @@ export const useMousePointHandle = (
 ) => {
   e.stopPropagation()
   e.preventDefault()
+
+  // 设置拖拽状态
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
   const scale = chartEditStore.getEditCanvas.scale
 
   const itemAttrX = attr.x
@@ -154,11 +167,16 @@ export const useMousePointHandle = (
   // 记录点击初始位置
   const startX = e.screenX
   const startY = e.screenY
- 
-  const move = throttle((moveEvent: MouseEvent) => {
+
+  // 记录初始位置
+  chartEditStore.setMousePosition(startX, startY)
+
+  const mousemove = throttle((moveEvent: MouseEvent) => {
+    chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
+
     let currX = Math.round((moveEvent.screenX - startX) / scale)
     let currY = Math.round((moveEvent.screenY - startY) / scale)
- 
+
     const isTop = /t/.test(point)
     const isBottom = /b/.test(point)
     const isLeft = /l/.test(point)
@@ -166,18 +184,21 @@ export const useMousePointHandle = (
 
     const newHeight = itemAttrH + (isTop ? -currY : (isBottom ? currY : 0))
     const newWidth = itemAttrW + (isLeft ? -currX : (isRight ? currX : 0))
-    
+
     attr.h = newHeight > 0 ? newHeight : 0
     attr.w = newWidth > 0 ? newWidth : 0
     attr.x = itemAttrX + (isLeft ? currX : 0)
     attr.y = itemAttrY + (isTop ? currY : 0)
   })
 
-  const up = () => {
-    document.removeEventListener('mousemove', move)
-    document.removeEventListener('mouseup', up)
+  const mouseup = () => {
+    // 设置拖拽状态
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+    chartEditStore.setMousePosition(0, 0)
+    document.removeEventListener('mousemove', mousemove)
+    document.removeEventListener('mouseup', mouseup)
   }
 
-  document.addEventListener('mousemove', move)
-  document.addEventListener('mouseup', up)
+  document.addEventListener('mousemove', mousemove)
+  document.addEventListener('mouseup', mouseup)
 }

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

@@ -1,8 +1,8 @@
 import { onUnmounted, onMounted } from 'vue'
-import { getChartEditStore } from './useStore.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
-const chartEditStore = getChartEditStore()
+const chartEditStore = useChartEditStore()
 
 // 布局处理
 export const useLayout = () => {

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

@@ -1,10 +0,0 @@
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-const chartEditStore = useChartEditStoreStore()
-
-export const getChartEditStore = () => {
-  return chartEditStore
-}
-export const getChartEditStoreEnum = () => {
-  return EditCanvasTypeEnum
-}

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

@@ -11,10 +11,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
   return componentStyle
 }
 
-export const useSizeStyle = (attr: AttrType) => {
+export const useSizeStyle = (attr: AttrType, scale?: number) => {
   const sizeStyle = {
-    width: `${attr.w}px`,
-    height: `${attr.h}px`
+    width: `${scale ? scale * attr.w : attr.w}px`,
+    height: `${scale ? scale * attr.h : attr.h}px`
   }
   return sizeStyle
 }
@@ -55,11 +55,9 @@ export const usePointStyle = (
   }
 
   const style = {
-    marginLeft: isRight ? '-3px' : '-3px',
-    marginTop: '-3px',
     left: `${newLeft}px`,
     top: `${newTop}px`,
-    cursor: cursorResize[index] + '-resize',
+    cursor: cursorResize[index] + '-resize'
   }
 
   return style