From 0779aeca6a7cd031674ffc27d1a3d16a336c4d05 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: Sun, 7 Aug 2022 17:24:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?=
=?UTF-8?q?=E7=9A=84=E9=80=89=E4=B8=AD=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/packages/public/publicConfig.ts | 2 +-
.../modules/chartEditStore/chartEditStore.ts | 33 ++++++++++
.../components/EditGroup/index.vue | 60 ++++++++++++-------
.../components/EditShapeBox/index.vue | 4 +-
.../chart/ContentEdit/hooks/useDrag.hook.ts | 12 ++--
src/views/chart/ContentEdit/index.vue | 2 +-
6 files changed, 80 insertions(+), 33 deletions(-)
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index cc752b8f..b1c2038d 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -92,7 +92,7 @@ export class PublicGroupConfigClass implements CreateComponentGroupType {
// 标识
public id = getUUID()
// 基本信息
- public attr = { ...chartInitConfig, zIndex: -1 }
+ public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 }
// 基本样式
public styles = {
// 色相
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index a5207285..84488af0 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -597,11 +597,44 @@ export const useChartEditStore = defineStore({
try {
loadingStart()
const groupClass = new PublicGroupConfigClass()
+ // 记录整体坐标
+ const groupAttr = {
+ l: this.getEditCanvasConfig.width,
+ t: this.getEditCanvasConfig.height,
+ r: 0,
+ b: 0
+ }
+ const targetList: CreateComponentType[] = []
this.getTargetChart.selectId.forEach((id: string) => {
// 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+ const { x, y, w, h } = item.attr
+ const { l, t, r, b } = groupAttr
+ // 左
+ groupAttr.l = l > x ? x : l
+ // 上
+ groupAttr.t = t > y ? y : t
+ // 宽
+ groupAttr.r = r < x + w ? x + w : r
+ // 高
+ groupAttr.b = b < y + h ? y + h : b
+
+ targetList.push(item)
+ })
+
+ // 设置子组件的位置
+ targetList.forEach((item: CreateComponentType) => {
+ item.attr.x = item.attr.x - groupAttr.l
+ item.attr.y = item.attr.y - groupAttr.t
groupClass.groupList.push(item)
})
+
+ // 设置 group 属性
+ groupClass.attr.x = groupAttr.l
+ groupClass.attr.y = groupAttr.t
+ groupClass.attr.w = groupAttr.r - groupAttr.l
+ groupClass.attr.h = groupAttr.b - groupAttr.t
+
this.addComponentList(groupClass)
loadingFinish()
} catch (error) {
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index c20e0108..d12a2f3e 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -1,32 +1,47 @@
<template>
<div class="go-edit-group-box">
- <!-- 组合组件 -->
<edit-shape-box
- v-for="item in groupData.groupList"
- :key="item.id"
- :data-id="item.id"
+ :key="groupData.id"
+ :data-id="groupData.id"
:index="groupIndex"
- :style="useComponentStyle(item.attr, groupIndex)"
- :item="item"
- @click="mouseClickHandle($event, item)"
- @mousedown="mousedownHandle($event, item)"
- @mouseenter="mouseenterHandle($event, item)"
- @mouseleave="mouseleaveHandle($event, item)"
- @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+ :item="groupData"
+ :style="{
+ ...useComponentStyle(groupData.attr, groupIndex),
+ ...useSizeStyle(groupData.attr),
+ ...getFilterStyle(groupData.styles),
+ ...getTransformStyle(groupData.styles)
+ }"
+ @click="mouseClickHandle($event, groupData)"
+ @mousedown="mousedownHandle($event, groupData)"
+ @mouseenter="mouseenterHandle($event, groupData)"
+ @mouseleave="mouseleaveHandle($event, groupData)"
+ @contextmenu="handleContextMenu($event, groupData, undefined, undefined, pickOptionsList)"
>
- <component
- class="edit-content-chart"
- :class="animationsClass(item.styles.animations)"
- :is="item.chartConfig.chartKey"
- :chartConfig="item"
- :themeSetting="themeSetting"
- :themeColor="themeColor"
+ <!-- 组合组件 -->
+ <edit-shape-box
+ v-for="item in groupData.groupList"
+ :key="item.id"
+ :data-id="item.id"
+ :index="groupIndex"
+ :item="item"
:style="{
- ...useSizeStyle(item.attr),
- ...getFilterStyle(item.styles),
- ...getTransformStyle(item.styles)
+ ...useComponentStyle(item.attr, groupIndex)
}"
- ></component>
+ >
+ <component
+ class="edit-content-chart"
+ :class="animationsClass(item.styles.animations)"
+ :is="item.chartConfig.chartKey"
+ :chartConfig="item"
+ :themeSetting="themeSetting"
+ :themeColor="themeColor"
+ :style="{
+ ...useSizeStyle(item.attr),
+ ...getFilterStyle(item.styles),
+ ...getTransformStyle(item.styles)
+ }"
+ ></component>
+ </edit-shape-box>
</edit-shape-box>
</div>
</template>
@@ -43,7 +58,6 @@ import { useMouseHandle } from '../../hooks/useDrag.hook'
import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
import { EditShapeBox } from '../../components/EditShapeBox'
-
const props = defineProps({
groupData: {
type: Object as PropType<CreateComponentGroupType>,
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index 59899b73..6aa8f99f 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@@ -22,13 +22,13 @@
import { ref, computed, PropType, toRefs } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
import { useMousePointHandle } from '../../hooks/useDrag.hook'
const props = defineProps({
item: {
- type: Object as PropType<CreateComponentType>,
+ type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
required: true
}
})
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 1f7c161f..cacb2a02 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -1,7 +1,7 @@
import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
import { createComponent } from '@/packages'
import { ConfigType } from '@/packages/index.d'
-import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -51,7 +51,7 @@ export const dragoverHandle = (e: DragEvent) => {
}
// * 不拦截默认行为点击
-export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType) => {
+export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
if (item) {
chartEditStore.setTargetSelectChart(item.id)
return
@@ -62,7 +62,7 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType)
// * 移动图表
export const useMouseHandle = () => {
// * Click 事件, 松开鼠标触发
- const mouseClickHandle = (e: MouseEvent, item: CreateComponentType) => {
+ const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
// 若此时按下了 CTRL, 表示多选
@@ -75,7 +75,7 @@ export const useMouseHandle = () => {
}
// * 按下事件（包含移动事件）
- const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
+ const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
onClickOutSide()
@@ -148,14 +148,14 @@ export const useMouseHandle = () => {
}
// * 进入事件
- const mouseenterHandle = (e: MouseEvent, item: CreateComponentType) => {
+ const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
chartEditStore.setTargetHoverChart(item.id)
}
// * 移出事件
- const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType) => {
+ const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f982920d..61c533c5 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -26,7 +26,7 @@
<EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
<!-- 单组件 -->
<edit-shape-box
- v-else
+ v-if="!item.isGroup"
:data-id="item.id"
:index="index"
:style="useComponentStyle(item.attr, index)"