fix: 修改拖拽的问题

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -14,6 +14,7 @@ export enum EditCanvasTypeEnum {
   SCALE = 'scale',
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
+  IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
 }
 
@@ -30,6 +31,8 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
+  // 初始化创建
+  [EditCanvasTypeEnum.IS_CREATE]: boolean
   // 拖拽中
   [EditCanvasTypeEnum.IS_DRAG]: boolean
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -43,6 +43,8 @@ export const useChartEditStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
+      // 初始化
+      isCreate: false,
       // 拖拽中
       isDrag: false
     },

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -6,7 +6,8 @@
       v-for="(item, index) in menuOptions"
       :key="index"
       draggable
-      @dragstart="handleDragStart($event, item)"
+      @dragstart="dragStartHandle($event, item)"
+      @dragend="dragendHandle"
     >
       <div class="list-header">
         <mac-os-control-btn :mini="true" :disabled="true"></mac-os-control-btn>
@@ -22,11 +23,14 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
 import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import omit from 'lodash/omit'
+const chartEditStore = useChartEditStore()
 
 defineProps({
   menuOptions: {
@@ -36,12 +40,19 @@ defineProps({
 })
 
 // 拖拽处理
-const handleDragStart = (e: DragEvent, item: ConfigType) => {
+const dragStartHandle = (e: DragEvent, item: ConfigType) => {
   // 动态注册图表组件
   componentInstall(item.chartKey, fetchChartComponent(item))
   componentInstall(item.conKey, fetchConfigComponent(item))
   // 将配置项绑定到拖拽属性上
   e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['image'])))
+  // 修改状态
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
+}
+
+// 拖拽结束
+const dragendHandle = () => {
+  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
 }
 </script>
 

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

@@ -75,10 +75,6 @@ const rangeModelStyle = computed(() => {
     position: absolute;
     left: 0;
     top: 0;
-    border-radius: 15px;
-    border: 1px solid rgba(0, 0, 0, 0);
-    background-color: greenyellow;
-    opacity: 1;
   }
 }
 </style>

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

@@ -3,7 +3,7 @@ import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
 import {
   CreateComponentType,
-  PickCreateComponentType
+  PickCreateComponentType,
 } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -15,11 +15,12 @@ const chartEditStore = useChartEditStore()
 const { onClickOutSide } = useContextMenu()
 
 // * 拖拽到编辑区域里
-export const handleDrag = async (e: DragEvent) => {
+export const dragHandle = async (e: DragEvent) => {
   e.preventDefault()
 
   try {
     loadingStart()
+
     // 获取拖拽数据
     const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
     if (!drayDataString) {
@@ -27,10 +28,10 @@ export const handleDrag = async (e: DragEvent) => {
       return
     }
 
-    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
-      drayDataString
-    )
-    
+    // 修改状态
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
+    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(drayDataString)
+
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
 
@@ -47,8 +48,8 @@ export const handleDrag = async (e: DragEvent) => {
   }
 }
 
-// * 拖拽中
-export const handleDragOver = (e: DragEvent) => {
+// * 进入拖拽区域
+export const dragoverHandle = (e: DragEvent) => {
   e.preventDefault()
   e.stopPropagation()
 
@@ -179,8 +180,8 @@ export const useMousePointHandle = (
     const isLeft = /l/.test(point)
     const isRight = /r/.test(point)
 
-    const newHeight = itemAttrH + (isTop ? -currY : (isBottom ? currY : 0))
-    const newWidth = itemAttrW + (isLeft ? -currX : (isRight ? currX : 0))
+    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

src/views/chart/ContentEdit/index.vue

@@ -6,8 +6,9 @@
     :showBottom="true"
     :depth="1"
     :xScroll="true"
-    @drop="handleDrag"
-    @dragover="handleDragOver"
+    @drop="dragHandle"
+    @dragover="dragoverHandle"
+    @dragenter="dragoverHandle"
   >
     <!-- 画布主体 -->
     <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
@@ -60,11 +61,7 @@ import { EditTools } from './components/EditTools'
 
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
-import {
-  handleDrag,
-  handleDragOver,
-  useMouseHandle
-} from './hooks/useDrag.hook'
+import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'