From 0b58dd4d1733538e8b1cbec8ed1f364e5c9c6969 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 16 Feb 2022 19:18:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=87=8D=E5=8F=A0?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=94=BE=E7=BD=AE=E4=BD=8D=E7=BD=AE=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoadingComponent/index.vue     |  2 ++
 .../chartEditStore/chartEditStore.d.ts        |  3 ++
 .../modules/chartEditStore/chartEditStore.ts  |  6 ++--
 .../components/ChartTheme/index.vue           |  2 +-
 .../components/CanvasPage/index.vue           | 12 ++++----
 .../components/EditBottom/index.vue           |  2 +-
 .../components/EditRange/index.vue            | 28 +++++++++++++++----
 .../{useDrop.hook.ts => useDrag.hook.ts}      | 21 +++++++++-----
 .../chart/ContentEdit/hooks/useLayout.hook.ts |  4 +--
 .../chart/ContentEdit/hooks/useStyle.hook.ts  |  8 ++----
 src/views/chart/ContentEdit/index.vue         |  6 ++--
 11 files changed, 60 insertions(+), 34 deletions(-)
 rename src/views/chart/ContentEdit/hooks/{useDrop.hook.ts => useDrag.hook.ts} (91%)

diff --git a/src/components/LoadingComponent/index.vue b/src/components/LoadingComponent/index.vue
index 09306e7f..34ff91fd 100644
--- a/src/components/LoadingComponent/index.vue
+++ b/src/components/LoadingComponent/index.vue
@@ -7,6 +7,8 @@
 <style lang="scss" scoped>
 @include go('loading-svg') {
   width: 100%;
+  height: 100%;
+  background-color: transparent;
   img {
     height: 50px;
   }
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 2a2f6c79..a4de1600 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -9,6 +9,7 @@ export enum EditCanvasTypeEnum {
   SCALE = 'scale',
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
+  Is_Drag= 'isDrag',
 }
 
 // 编辑区域
@@ -24,6 +25,8 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
+  // 拖拽中
+  [EditCanvasTypeEnum.Is_Drag]: boolean
 }
 
 // 滤镜
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 68ce9497..e6bc17c7 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -35,6 +35,8 @@ export const useChartEditStoreStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
+      // 拖拽中
+      isDrag: false
     },
     // 画布属性（需存储给后端）
     editCanvasConfig: {
@@ -102,10 +104,10 @@ export const useChartEditStoreStore = defineStore({
   },
   actions: {
     // * 设置 editCanvas 数据项
-    setEditCanvasItem<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
+    setEditCanvas<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
     },
-    setCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
+    setEditCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
       this.editCanvasConfig[key] = value
     },
     // * 设置右键菜单
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
index be282e08..a5eec5a1 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue
@@ -57,7 +57,7 @@ const fetchShowColors = (colors: Array<string>) => {
 }
 
 const selectTheme = (theme: string) => {
-  chartEditStoreStore.setCanvasConfig(EditCanvasConfigEnum.CHART_THEME, theme)
+  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME, theme)
 }
 </script>
 
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
index 7efbaff4..0ad6a295 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
@@ -179,21 +179,21 @@ const beforeUploadHandle = async ({ file }) => {
 
 // 清除背景
 const clearImage = () => {
-  chartEditStoreStore.setCanvasConfig(
+  chartEditStoreStore.setEditCanvasConfig(
     EditCanvasConfigEnum.BACKGROUND_IAMGE,
     undefined
   )
-  chartEditStoreStore.setCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
+  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
 }
 
 // 清除颜色
 const clearColor = () => {
-  chartEditStoreStore.setCanvasConfig(
+  chartEditStoreStore.setEditCanvasConfig(
     EditCanvasConfigEnum.BACKGROUND,
     undefined
   )
   if (canvasConfig.backgroundImage) {
-    chartEditStoreStore.setCanvasConfig(
+    chartEditStoreStore.setEditCanvasConfig(
       EditCanvasConfigEnum.SELECT_COLOR,
       false
     )
@@ -224,11 +224,11 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   nextTick(() => {
     if (file.file) {
       const ImageUrl = fileToUrl(file.file)
-      chartEditStoreStore.setCanvasConfig(
+      chartEditStoreStore.setEditCanvasConfig(
         EditCanvasConfigEnum.BACKGROUND_IAMGE,
         ImageUrl
       )
-      chartEditStoreStore.setCanvasConfig(
+      chartEditStoreStore.setEditCanvasConfig(
         EditCanvasConfigEnum.SELECT_COLOR,
         false
       )
diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue
index fdad1358..7627fae5 100644
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -115,7 +115,7 @@ const selectHandle = (v: number) => {
 
 // 点击锁处理
 const lockHandle = () => {
-  chartEditStore.setEditCanvasItem(
+  chartEditStore.setEditCanvas(
     ChartEditStoreEnum.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 5cff417b..492a08fe 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -1,22 +1,23 @@
 <template>
   <div
     class="go-edit-range"
-    :style="style"
+    :style="rangeStyle"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
     <slot></slot>
   </div>
+  <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/useDrop.hook'
+import { mousedownHandleUnStop } from '../../hooks/useDrag.hook'
 
 const chartEditStoreStore = useChartEditStoreStore()
 
-const { getEditCanvasConfig } = toRefs(chartEditStoreStore)
+const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStoreStore)
 
 const size = computed(() => {
   return {
@@ -25,16 +26,23 @@ const size = computed(() => {
   }
 })
 
-const style = computed(() => {
+const rangeStyle = computed(() => {
   const background = getEditCanvasConfig.value.background
   const backgroundImage = getEditCanvasConfig.value.backgroundImage
   const selectColor = getEditCanvasConfig.value.selectColor
   const backgroundColor = background ? background : null
-  const computed = selectColor
+  const computedBackground = selectColor
     ? { background: backgroundColor }
     : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
   // @ts-ignore
-  return { ...useSizeStyle(size.value), ...computed }
+  return { ...useSizeStyle(size.value), ...computedBackground }
+})
+
+// 模态层
+const rangeModelStyle = computed(() => {
+  const dragStyle = getEditCanvas.value.isDrag && {'z-index': 99999 }
+  // @ts-ignore
+  return { ...useSizeStyle(size.value), ...dragStyle}
 })
 </script>
 
@@ -48,4 +56,12 @@ const style = computed(() => {
   @include filter-border-color('hover-border-color');
   @include fetch-theme-custom('border-color', 'background-color4');
 }
+@include go(edit-range-model) {
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 15px;
+  border: 1px solid rgba(0, 0, 0, 0);
+}
 </style>
diff --git a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
similarity index 91%
rename from src/views/chart/ContentEdit/hooks/useDrop.hook.ts
rename to src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index d21a575d..09233341 100644
--- a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -1,20 +1,21 @@
 import { toRefs } from 'vue'
-import { getChartEditStore } from './useStore.hook'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
-import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
-import throttle from 'lodash/throttle'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { getChartEditStore, getChartEditStoreEnum } from './useStore.hook'
+import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import throttle from 'lodash/throttle'
 
 const { onClickoutside } = useContextMenu()
 
 const chartEditStore = getChartEditStore()
+const chartEditStoreEnum = getChartEditStoreEnum()
 const { scale } = toRefs(chartEditStore.getEditCanvas)
 
-// * 拖拽中
-export const handleDrop = async (e: DragEvent) => {
+// * 拖拽到编辑区域里
+export const handleDrag = async (e: DragEvent) => {
   e.preventDefault()
 
   try {
@@ -24,7 +25,10 @@ export const handleDrop = async (e: DragEvent) => {
     if (!drayDataString) {
       loadingFinish()
       return
-    } 
+    }
+
+    // 设置拖拽状态
+    chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, false)
 
     const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
       drayDataString
@@ -42,10 +46,13 @@ export const handleDrop = async (e: DragEvent) => {
   }
 }
 
-// * 拖拽结束
+// * 拖拽中
 export const handleDragOver = (e: DragEvent) => {
   e.preventDefault()
   e.stopPropagation()
+
+  // 设置拖拽状态
+  chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, true)
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }
 
diff --git a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
index 4da36cf4..71fb3639 100644
--- a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
@@ -8,11 +8,11 @@ const chartEditStore = getChartEditStore()
 export const useLayout = () => {
   onMounted(() => {
     // 设置 Dom 值(ref 不生效先用 document)
-    chartEditStore.setEditCanvasItem(
+    chartEditStore.setEditCanvas(
       EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
       document.getElementById('go-chart-edit-layout')
     )
-    chartEditStore.setEditCanvasItem(
+    chartEditStore.setEditCanvas(
       EditCanvasTypeEnum.EDIT_CONTENT_DOM,
       document.getElementById('go-chart-edit-content')
     )
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
index fc9b60a3..481c168b 100644
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
@@ -1,9 +1,5 @@
-interface AttrType {
-  x: number
-  y: number
-  w: number
-  h: number
-}
+import { PublicConfigType } from '@/packages/index.d'
+type AttrType = Pick<PublicConfigType, 'attr'>['attr']
 
 export const useComponentStyle = (attr: AttrType, index: number) => {
   const componentStyle = {
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 8d7f5e31..ee703fc7 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -7,7 +7,7 @@
     :showBottom="true"
     :depth="1"
     :xScroll="true"
-    @drop="handleDrop"
+    @drop="handleDrag"
     @dragover="handleDragOver"
   >
     <div id="go-chart-edit-content">
@@ -52,7 +52,7 @@ import { EditShapeBox } from './components/EditShapeBox/index'
 
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
-import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook'
+import { handleDrag, handleDragOver, useMouseHandle } from './hooks/useDrag.hook'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
@@ -93,7 +93,7 @@ onMounted(() => {
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     margin: 20px;
-    overflow: hidden;
+    /* overflow: hidden; */
     transform-origin: left top;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;