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" >
@@ -22,11 +23,14 @@ 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; } } 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 = JSON.parse( - drayDataString - ) - + // 修改状态 + chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false) + const dropData: Exclude = 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" >
@@ -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'