From 1028ea0302e2b6719d397bef980f20bf5a99afea Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Fri, 4 Mar 2022 20:57:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E6=96=B0=E5=A2=9E=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chartEditStore/chartEditStore.d.ts        |  17 +-
 .../modules/chartEditStore/chartEditStore.ts  |  20 +-
 .../chartLayoutStore/chartLayoutStore.ts      |   4 +-
 src/views/chart/ContentBox/index.vue          |   4 +-
 .../components/ChartThemeColor/index.vue      |   8 +-
 .../components/CanvasPage/index.vue           |  22 +-
 .../components/ChartSetting/index.vue         |   8 +-
 .../chart/ContentConfigurations/index.vue     |  10 +-
 .../components/EditAlignLine/index.ts         |   3 +
 .../components/EditAlignLine/index.vue        | 321 ++++++++++++++++++
 .../components/EditBottom/index.vue           |  13 +-
 .../components/EditRange/index.vue            |  13 +-
 .../components/EditShapeBox/index.vue         |   7 +-
 .../chart/ContentEdit/hooks/useDrag.hook.ts   |  53 ++-
 .../chart/ContentEdit/hooks/useLayout.hook.ts |   4 +-
 .../chart/ContentEdit/hooks/useStore.hook.ts  |  10 -
 .../chart/ContentEdit/hooks/useStyle.hook.ts  |  10 +-
 src/views/chart/ContentEdit/index.vue         |   4 +-
 .../components/ListItem/index.vue             |   4 +-
 src/views/chart/ContentLayers/index.vue       |   4 +-
 src/views/chart/hooks/useContextMenu.hook.ts  |   4 +-
 src/views/chart/hooks/useKeyboard.hook.ts     |   4 +-
 src/views/chart/index.vue                     |   4 +-
 23 files changed, 452 insertions(+), 99 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/EditAlignLine/index.ts
 create mode 100644 src/views/chart/ContentEdit/components/EditAlignLine/index.vue
 delete mode 100644 src/views/chart/ContentEdit/hooks/useStore.hook.ts

diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 4d8779f2..682deeaf 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -10,7 +10,8 @@ export enum EditCanvasTypeEnum {
   SCALE = 'scale',
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
-  Is_Drag= 'isDrag',
+  IS_CREATE = 'isCreate',
+  IS_DRAG= 'isDrag',
 }
 
 // 编辑区域
@@ -26,8 +27,10 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
+  // 初始化创建
+  [EditCanvasTypeEnum.IS_CREATE]: boolean
   // 拖拽中
-  [EditCanvasTypeEnum.Is_Drag]: boolean
+  [EditCanvasTypeEnum.IS_DRAG]: boolean
 }
 
 // 滤镜
@@ -74,15 +77,21 @@ export interface EditCanvasConfigType {
 
 // 坐标轴信息
 export enum EditCanvasTypeEnum {
+  START_X = 'startX',
+  START_Y = 'startY',
   X = 'x',
   Y = 'y'
 }
 
 // 鼠标位置
 export type MousePositionType = {
-  // X 轴
+  // 开始 X
+  [EditCanvasTypeEnum.START_X]: number
+  // 开始 Y
+  [EditCanvasTypeEnum.START_Y]: number
+  // X
   [EditCanvasTypeEnum.X]: number
-  // y 轴
+  // y
   [EditCanvasTypeEnum.Y]: number
 }
 
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 010b53fd..32a79987 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -19,8 +19,8 @@ import {
 const chartHistoryStoreStore = useChartHistoryStoreStore()
 
 // 编辑区域内容
-export const useChartEditStoreStore = defineStore({
-  id: 'useChartEditStoreStore',
+export const useChartEditStore = defineStore({
+  id: 'useChartEditStore',
   state: (): chartEditStoreType => ({
     // 画布属性
     editCanvas: {
@@ -35,6 +35,8 @@ export const useChartEditStoreStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
+      // 初始化
+      isCreate: false,
       // 拖拽中
       isDrag: false
     },
@@ -42,6 +44,8 @@ export const useChartEditStoreStore = defineStore({
     rightMenuShow: false,
     // 鼠标定位
     mousePosition: {
+      startX: 0,
+      startY: 0,
       x: 0,
       y: 0
     },
@@ -128,6 +132,13 @@ export const useChartEditStoreStore = defineStore({
     setRecordChart(item: RecordChartType | undefined) {
       this.recordChart = cloneDeep(item)
     },
+    // * 设置鼠标位置
+    setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void {
+      if (startX) this.mousePosition.startX = startX
+      if (startY) this.mousePosition.startY = startY
+      if (x) this.mousePosition.x = x
+      if (y) this.mousePosition.y = y
+    },
     // * 找到目标 id 数据下标位置
     fetchTargetIndex(): number {
       if(!this.getTargetChart.selectId) {
@@ -451,11 +462,6 @@ export const useChartEditStoreStore = defineStore({
       }
     },
     // ----------------
-    // * 设置鼠标位置
-    setMousePosition(x: number, y: number): void {
-      this.mousePosition.x = x
-      this.mousePosition.y = y
-    },
     // * 设置页面变换时候的 Class
     setPageSizeClass(): void {
       const dom = this.getEditCanvas.editContentDom
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index a3931f82..de32435f 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -2,9 +2,9 @@ import { defineStore } from 'pinia'
 import { ChartLayoutType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue
index aab92681..685915a0 100644
--- a/src/views/chart/ContentBox/index.vue
+++ b/src/views/chart/ContentBox/index.vue
@@ -47,11 +47,11 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { icon } from '@/plugins'
 const { ChevronBackOutlineIcon } = icon.ionicons5
 
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 const emit = defineEmits(['back'])
 
 defineProps({
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
index 1742a382..2a59edc9 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import {
   chartColors,
@@ -42,14 +42,14 @@ import cloneDeep from 'lodash/cloneDeep'
 import { icon } from '@/plugins'
 
 const { SquareIcon } = icon.ionicons5
-const chartEditStoreStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
 const selectName = computed(() => {
-  return chartEditStoreStore.getEditCanvasConfig.chartThemeColor
+  return chartEditStore.getEditCanvasConfig.chartThemeColor
 })
 
 // 获取用来展示的色号
@@ -59,7 +59,7 @@ const fetchShowColors = (colors: Array<string>) => {
 
 // 设置主体色（在 ContentEdit > List 中进行注入）
 const selectTheme = (theme: ChartColorsNameType) => {
-  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
 }
 </script>
 
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
index 32355265..3be9f875 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -7,7 +7,7 @@
           size="small"
           v-model:value="canvasConfig.width"
           :validator="validator"
-          @update:value="chartEditStoreStore.computedScale"
+          @update:value="chartEditStore.computedScale"
         />
       </n-form-item>
       <n-form-item label="高度">
@@ -15,7 +15,7 @@
           size="small"
           v-model:value="canvasConfig.height"
           :validator="validator"
-          @update:value="chartEditStoreStore.computedScale"
+          @update:value="chartEditStore.computedScale"
         />
       </n-form-item>
     </n-form>
@@ -110,7 +110,7 @@
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
@@ -119,8 +119,8 @@ import { icon } from '@/plugins'
 const { ColorPaletteIcon } = icon.ionicons5
 const { ZAxisIcon } = icon.carbon
 
-const chartEditStoreStore = useChartEditStoreStore()
-const canvasConfig = chartEditStoreStore.getEditCanvasConfig
+const chartEditStore = useChartEditStore()
+const canvasConfig = chartEditStore.getEditCanvasConfig
 
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
@@ -184,11 +184,11 @@ const beforeUploadHandle = async ({ file }) => {
 
 // 清除背景
 const clearImage = () => {
-  chartEditStoreStore.setEditCanvasConfig(
+  chartEditStore.setEditCanvasConfig(
     EditCanvasConfigEnum.BACKGROUND_IAMGE,
     undefined
   )
-  chartEditStoreStore.setEditCanvasConfig(
+  chartEditStore.setEditCanvasConfig(
     EditCanvasConfigEnum.SELECT_COLOR,
     true
   )
@@ -196,12 +196,12 @@ const clearImage = () => {
 
 // 清除颜色
 const clearColor = () => {
-  chartEditStoreStore.setEditCanvasConfig(
+  chartEditStore.setEditCanvasConfig(
     EditCanvasConfigEnum.BACKGROUND,
     undefined
   )
   if (canvasConfig.backgroundImage) {
-    chartEditStoreStore.setEditCanvasConfig(
+    chartEditStore.setEditCanvasConfig(
       EditCanvasConfigEnum.SELECT_COLOR,
       false
     )
@@ -232,11 +232,11 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   nextTick(() => {
     if (file.file) {
       const ImageUrl = fileToUrl(file.file)
-      chartEditStoreStore.setEditCanvasConfig(
+      chartEditStore.setEditCanvasConfig(
         EditCanvasConfigEnum.BACKGROUND_IAMGE,
         ImageUrl
       )
-      chartEditStoreStore.setEditCanvasConfig(
+      chartEditStore.setEditCanvasConfig(
         EditCanvasConfigEnum.SELECT_COLOR,
         false
       )
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index 37464d97..13c04b84 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { computed, Ref } from 'vue'
 import { loadAsyncComponent } from '@/utils'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
@@ -33,11 +33,11 @@ import { SettingItemBox } from '@/components/ChartItemSetting/index'
 const GlobalSettingCom = loadAsyncComponent(() =>
   import('@/components/ChartItemSetting/index')
 )
-const chartEditStoreStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStoreStore.getComponentList
-  const targetIndex = chartEditStoreStore.fetchTargetIndex()
+  const list = chartEditStore.getComponentList
+  const targetIndex = chartEditStore.fetchTargetIndex()
   return list[targetIndex]
 })
 </script>
diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue
index e35233ef..d9eefc6f 100644
--- a/src/views/chart/ContentConfigurations/index.vue
+++ b/src/views/chart/ContentConfigurations/index.vue
@@ -82,11 +82,11 @@ import { loadAsyncComponent } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
-const chartEditStoreStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 const { ConstructIcon, FlashIcon, DesktopOutlineIcon, RocketIcon } = icon.ionicons5
 
@@ -117,10 +117,10 @@ const expandHindle = () => {
 }
 
 const selectTarget = computed(() => {
-  const selectId = chartEditStoreStore.getTargetChart.selectId
+  const selectId = chartEditStore.getTargetChart.selectId
   if (!selectId) return undefined
-  return chartEditStoreStore.componentList[
-    chartEditStoreStore.fetchTargetIndex()
+  return chartEditStore.componentList[
+    chartEditStore.fetchTargetIndex()
   ]
 })
 
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.ts b/src/views/chart/ContentEdit/components/EditAlignLine/index.ts
new file mode 100644
index 00000000..d07271c8
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.ts
@@ -0,0 +1,3 @@
+import EditAlignLine from './index.vue'
+
+export { EditAlignLine }
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
new file mode 100644
index 00000000..0bfad9f0
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="go-edit-align-line">
+    <div
+      class="line"
+      v-for="item in line.lineArr"
+      :key="item"
+      :class="[
+        item.includes('row') ? 'row' : 'col',
+        line['select'].has(item) && 'visible'
+      ]"
+      :style="useComponentStyle(line['select'].get(item))"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '@/packages/index.d'
+import throttle from 'lodash/throttle'
+import cloneDeep  from 'lodash/cloneDeep'
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const chartEditStore = useChartEditStore()
+
+// 线条集合
+const line = reactive({
+  // 吸附距离（px）
+  minDistance: 10,
+  // 行横向row（上中下），列竖线col（左中右）
+  lineArr: ['rowt', 'rowc', 'rowb', 'coll', 'colc', 'colr'],
+  // 展示线
+  select: new Map(),
+  // 已经吸附
+  sorptioned: {
+    x: false,
+    y: false
+  }
+})
+
+// 位置计算
+const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
+  if (!attr) return {}
+  const componentStyle = {
+    left: `${attr.x ? attr.x : 0}px`,
+    top: `${attr.y ? attr.y : 0}px`
+  }
+  return componentStyle
+}
+
+// 是否开始计算
+const isComputedLine = computed(() => {
+  const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
+  return isDrag
+})
+
+// 吸附判定
+const isSorption = (selectValue: number, componentValue: number) => {
+  const isSorption = Math.abs(selectValue - componentValue) <= line.minDistance
+  return isSorption
+}
+
+// 当前目标
+const selectId = computed(() => chartEditStore.getTargetChart.selectId)
+const selectTatget = computed(
+  () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
+)
+const selectAttr = computed(() => selectTatget.value.attr)
+
+// 画布坐标
+const canvasPositionList = computed(() => {
+  return {
+    id: '0',
+    attr: {
+      w: cloneDeep(chartEditStore.getEditCanvasConfig.width),
+      h: cloneDeep(chartEditStore.getEditCanvasConfig.height),
+      x: 0,
+      y: 0,
+      zIndex: 0
+    }
+  }
+})
+
+// 监听鼠标移动
+watch(
+  () => chartEditStore.getMousePosition,
+  throttle(e => {
+    if (!isComputedLine.value) return
+    // 获取目标组件数据
+
+    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 selectTopY = selectAttr.value.y
+    const selectHalfY = selectTopY + selectH / 2
+    const selectBottomY = selectTopY + selectH
+    const seletY = [selectTopY, selectHalfY, selectBottomY]
+
+    line.select.clear()
+    line.sorptioned.y = false
+    // 循环查询所有组件数据
+    const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => {
+      return {
+        id: e.id,
+        attr: e.attr
+      }
+    })
+    componentList.push(canvasPositionList.value)
+    // 传入画布数据
+    line.lineArr.forEach(lineItem => {
+      componentList.forEach((component: typeof canvasPositionList.value) => {
+        // 排除自身
+        if (selectId.value === 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 })
+            selectTatget.value.setPosition(selectLeftX, componentTopY)
+          }
+          if (isSorption(selectTopY, componentHalfY)) {
+            line.select.set(lineItem, { y: componentHalfY })
+            selectTatget.value.setPosition(selectLeftX, componentHalfY)
+          }
+          if (isSorption(selectTopY, componentBottomY)) {
+            line.select.set(lineItem, { y: componentBottomY })
+            selectTatget.value.setPosition(selectLeftX, componentBottomY)
+          }
+        }
+        if (lineItem.includes('rowc')) {
+          // 顶部
+          if (isSorption(selectHalfY, componentTopY)) {
+            line.select.set(lineItem, { y: componentTopY })
+            selectTatget.value.setPosition(
+              selectLeftX,
+              componentTopY - selectH / 2
+            )
+          }
+          if (isSorption(selectHalfY, componentHalfY)) {
+            line.select.set(lineItem, { y: componentHalfY })
+            selectTatget.value.setPosition(
+              selectLeftX,
+              componentHalfY - selectH / 2
+            )
+          }
+          if (isSorption(selectHalfY, componentBottomY)) {
+            line.select.set(lineItem, { y: componentBottomY })
+            selectTatget.value.setPosition(
+              selectLeftX,
+              componentBottomY - selectH / 2
+            )
+          }
+        }
+        if (lineItem.includes('rowb')) {
+          // 顶部
+          if (isSorption(selectBottomY, componentTopY)) {
+            line.select.set(lineItem, { y: componentTopY })
+            selectTatget.value.setPosition(selectLeftX, componentTopY - selectH)
+          }
+          if (isSorption(selectBottomY, componentHalfY)) {
+            line.select.set(lineItem, { y: componentHalfY })
+            selectTatget.value.setPosition(
+              selectLeftX,
+              componentHalfY - selectH
+            )
+          }
+          if (isSorption(selectBottomY, componentBottomY)) {
+            line.select.set(lineItem, { y: componentBottomY })
+            selectTatget.value.setPosition(
+              selectLeftX,
+              componentBottomY - selectH
+            )
+          }
+        }
+
+        // 纵线对比的是 X
+        if (lineItem.includes('coll')) {
+          if (isSorption(selectLeftX, componentLeftX)) {
+            line.select.set(lineItem, { x: componentLeftX })
+            selectTatget.value.setPosition(componentLeftX, selectTopY)
+          }
+          if (isSorption(selectLeftX, componentHalfX)) {
+            line.select.set(lineItem, { x: componentHalfX })
+            selectTatget.value.setPosition(componentHalfX, selectTopY)
+          }
+          if (isSorption(selectLeftX, componentRightX)) {
+            line.select.set(lineItem, { x: componentRightX })
+            selectTatget.value.setPosition(componentRightX, selectTopY)
+          }
+        }
+        if (lineItem.includes('colc')) {
+          if (isSorption(selectHalfX, componentLeftX)) {
+            line.select.set(lineItem, { x: componentLeftX })
+            selectTatget.value.setPosition(
+              componentLeftX - selectW / 2,
+              selectTopY
+            )
+          }
+          if (isSorption(selectHalfX, componentHalfX)) {
+            line.select.set(lineItem, { x: componentHalfX })
+            selectTatget.value.setPosition(
+              componentHalfX - selectW / 2,
+              selectTopY
+            )
+          }
+          if (isSorption(selectHalfX, componentRightX)) {
+            line.select.set(lineItem, { x: componentRightX })
+            selectTatget.value.setPosition(
+              componentRightX - selectW / 2,
+              selectTopY
+            )
+          }
+        }
+        if (lineItem.includes('colr')) {
+          if (isSorption(selectRightX, componentLeftX)) {
+            line.select.set(lineItem, { x: componentLeftX })
+            selectTatget.value.setPosition(componentLeftX - selectW, selectTopY)
+          }
+          if (isSorption(selectRightX, componentHalfX)) {
+            line.select.set(lineItem, { x: componentHalfX })
+            selectTatget.value.setPosition(componentHalfX - selectW, selectTopY)
+          }
+          if (isSorption(selectRightX, componentRightX)) {
+            line.select.set(lineItem, { x: componentRightX })
+            selectTatget.value.setPosition( componentRightX - selectW, selectTopY )
+          }
+        }
+
+        /*
+          * 我也不知道为什么这个不行，还没时间调
+          if(lineItem.includes('row')) {
+            seletY.forEach(sY => {
+              componentY.forEach(cY => {
+                if (isSorption(sY, cY)) {
+                  line.select.set(lineItem, { y: cY })
+                }
+              })
+            })
+            return
+          }
+          if(lineItem.includes('col')) {
+            seletX.forEach(sX => {
+              componentX.forEach(cX => {
+                if (isSorption(sX, cX)) {
+                  line.select.set(lineItem, { x: sX })
+                }
+              })
+            })
+            return
+          }
+        */
+      })
+    })
+  }, 200),
+  {
+    deep: true
+  }
+)
+// 取消对齐线
+watch(
+  () => isComputedLine.value,
+  (val: boolean) => {
+    if (!val) {
+      line.select.clear()
+      line.sorptioned.y = false
+      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go(edit-align-line) {
+  .line {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: v-bind('themeColor');
+    opacity: 0.7;
+    &.visible {
+      display: block;
+    }
+  }
+  .row {
+    width: 100%;
+  }
+  .col {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue
index 29a6b210..41e7d353 100644
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -62,19 +62,18 @@ import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 const { DicomOverlayIcon } = icon.carbon
-import {
-  getChartEditStore,
-  getChartEditStoreEnum
-} from '../../hooks/useStore.hook'
+
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
-const chartEditStore = getChartEditStore()
-const ChartEditStoreEnum = getChartEditStoreEnum()
+const chartEditStore = useChartEditStore()
 const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
 
 // 缩放选项
@@ -115,7 +114,7 @@ const selectHandle = (v: number) => {
 
 // 点击锁处理
 const lockHandle = () => {
-  chartEditStore.setEditCanvas(ChartEditStoreEnum.LOCK_SCALE, !lockScale.value)
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.LOCK_SCALE, !lockScale.value)
 }
 
 // 拖动
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 5d5c2bcd..2813119f 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -6,18 +6,22 @@
   >
     <slot></slot>
   </div>
+  <!-- 拖拽时的辅助线 -->
+  <EditAlignLine />
+  <!-- 拖拽时的遮罩 -->
   <div class="go-edit-range-model" :style="rangeModelStyle"></div>
 </template>
 
 <script setup lang="ts">
 import { toRefs, computed } from 'vue'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useSizeStyle } from '../../hooks/useStyle.hook'
 import { mousedownHandleUnStop } from '../../hooks/useDrag.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditAlignLine } from '../EditAlignLine/index'
 
-const chartEditStoreStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
-const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStoreStore)
+const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStore)
 
 const size = computed(() => {
   return {
@@ -40,7 +44,7 @@ const rangeStyle = computed(() => {
 
 // 模态层
 const rangeModelStyle = computed(() => {
-  const dragStyle = getEditCanvas.value.isDrag && {'z-index': 99999 }
+  const dragStyle = getEditCanvas.value.isCreate && {'z-index': 99999 }
   // @ts-ignore
   return { ...useSizeStyle(size.value), ...dragStyle}
 })
@@ -54,6 +58,7 @@ const rangeModelStyle = computed(() => {
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');
   @include fetch-theme-custom('border-color', 'background-color4');
+  @include filter-bg-color('background-color2')
 }
 @include go(edit-range-model) {
   z-index: -1;
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index 7111f045..277ef460 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@@ -23,9 +23,9 @@
 
 <script setup lang="ts">
 import { ref, computed, PropType, toRefs } from 'vue'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
+import { CreateComponentType } from '@/packages/index.d'
 import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
 import { useMousePointHandle } from '../../hooks/useDrag.hook'
 
@@ -39,7 +39,7 @@ const props = defineProps({
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 // 锚点
 const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
@@ -70,6 +70,7 @@ const select = computed(() => {
     border: 3px solid v-bind('themeColor');
     border-radius: 5px;
     background-color: #fff;
+    transform: translate(-40%, -30%);
   }
   /* 选中 */
   .shape-modal {
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 116f92c1..02f7d842 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/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)
 }
diff --git a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
index 51823c1f..d46886fa 100644
--- a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
+++ b/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 = () => {
diff --git a/src/views/chart/ContentEdit/hooks/useStore.hook.ts b/src/views/chart/ContentEdit/hooks/useStore.hook.ts
deleted file mode 100644
index f96fa1ac..00000000
--- a/src/views/chart/ContentEdit/hooks/useStore.hook.ts
+++ /dev/null
@@ -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
-}
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
index e2e5e890..5ca5ad71 100644
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/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
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 5fdf8733..a0925907 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -55,12 +55,12 @@ import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { handleDrag, handleDragOver, useMouseHandle } from './hooks/useDrag.hook'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
-import { getChartEditStore } from './hooks/useStore.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { CreateComponentType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 
-const chartEditStore = getChartEditStore()
+const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
 
 // 布局处理
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
index 962981c4..5b6f0edf 100644
--- a/src/views/chart/ContentLayers/components/ListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -25,12 +25,12 @@
 import { ref, toRefs, computed } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 const props = defineProps({
   componentData: {
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 081287c0..5080174a 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -30,7 +30,7 @@ import { computed } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep';
 import {
@@ -48,7 +48,7 @@ import { icon } from '@/plugins'
 
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 const { handleContextMenu } = useContextMenu({
   hideOptionsList: [MenuEnum.CLEAR, MenuEnum.PARSE]
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index 7e7cbf1e..63ee6d4b 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -1,5 +1,5 @@
 import { reactive, nextTick } from 'vue'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType } from '@/packages/index.d'
 import { renderIcon, loadingError } from '@/utils'
 import { icon } from '@/plugins'
@@ -14,7 +14,7 @@ const {
 } = icon.ionicons5
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon } = icon.carbon
 
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 export enum MenuEnum {
   DELETE = 'delete',
diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts
index d328ffeb..4ecfe806 100644
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@@ -1,8 +1,8 @@
 import { isMac, addEventListener, removeEventListener } from '@/utils'
-import { getChartEditStore } from '../ContentEdit/hooks/useStore.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook'
 
-const chartEditStore = getChartEditStore()
+const chartEditStore = useChartEditStore()
 
 
 export const keyboardValue = {
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 69f176c9..4de09023 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -38,11 +38,11 @@
 import { loadAsyncComponent } from '@/utils'
 import { HeaderPro } from '@/layout/components/HeaderPro'
 import { useContextMenu } from './hooks/useContextMenu.hook'
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 
 const chartHistoryStoreStore = useChartHistoryStoreStore()
-const chartEditStore = useChartEditStoreStore()
+const chartEditStore = useChartEditStore()
 
 // 记录初始化
 chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)