From e9c263728b7b4cdb56756f7d86c99f5ceb754b73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Mon, 11 Apr 2022 18:17:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=8B=96=E6=8B=BD?=
=?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../chartEditStore/chartEditStore.d.ts | 3 +++
.../modules/chartEditStore/chartEditStore.ts | 2 ++
.../components/ItemBox/index.vue | 15 +++++++++++--
.../components/EditRange/index.vue | 4 ----
.../chart/ContentEdit/hooks/useDrag.hook.ts | 21 ++++++++++---------
src/views/chart/ContentEdit/index.vue | 11 ++++------
6 files changed, 33 insertions(+), 23 deletions(-)
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 6de3b5c7..85937840 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/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
}
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index e67456f6..12149f9c 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -43,6 +43,8 @@ export const useChartEditStore = defineStore({
userScale: 1,
// 锁定缩放
lockScale: false,
+ // 初始化
+ isCreate: false,
// 拖拽中
isDrag: false
},
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue
index 7424602e..2340040c 100644
--- a/src/views/chart/ContentCharts/components/ItemBox/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 7ea38ad1..14c9cd9c 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index e309ed5b..a2292099 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/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
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index fb0f18cb..295776ec 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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'