From 8a10a9cf82b875c440fb46f2736f7de6f282d984 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: Tue, 28 Jun 2022 21:57:29 +0800 Subject: [PATCH 01/44] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=A4=9A=E9=80=89=E5=92=8C=E5=8F=B3=E9=94=AE=E6=88=90?= =?UTF-8?q?=E7=BB=84=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/enums/editPageEnum.ts | 14 +++- src/plugins/icon.ts | 10 ++- .../modules/chartEditStore/chartEditStore.ts | 2 +- .../chartHistoryStore/chartHistoryStore.d.ts | 3 +- .../EditShortcutKey/ShortcutKeyModal.vue | 5 ++ .../chart/ContentEdit/hooks/useDrag.hook.ts | 58 ++++++++++------ src/views/chart/ContentEdit/index.vue | 3 +- src/views/chart/hooks/useContextMenu.hook.ts | 67 ++++++++++--------- src/views/chart/hooks/useKeyboard.hook.ts | 10 +-- 9 files changed, 109 insertions(+), 63 deletions(-) diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index 1bd8fbc6..773963f4 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -1,3 +1,9 @@ +// 鼠标点击左右键 +export enum MouseEventButton { + LEFT = 1, + RIGHT = 2 +} + // 页面拖拽键名 export enum DragKeyEnum { DROG_KEY = 'ChartData' @@ -27,6 +33,9 @@ export enum WinKeyboard { CTRL = 'ctrl', SHIFT = 'shift', ALT = ' alt', + CTRL_SOURCE_KEY = "control", + SHIFT_SOURCE_KEY = "shift", + ALT_SOURCE_KEY = "alt" } // Mac 键盘枚举 @@ -35,4 +44,7 @@ export enum MacKeyboard { CTRL = '⌘', SHIFT = '⇧', ALT = '⌥', -} \ No newline at end of file + CTRL_SOURCE_KEY = "⌘", + SHIFT_SOURCE_KEY = "⇧", + ALT_SOURCE_KEY = "⌥" +} diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 7a9b3adf..5c9817f4 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -80,7 +80,9 @@ import { Scale as ScaleIcon, FitToScreen as FitToScreenIcon, FitToHeight as FitToHeightIcon, - FitToWidth as FitToWidthIcon + FitToWidth as FitToWidthIcon, + Carbon3DCursor as Carbon3DCursorIcon, + Carbon3DSoftware as Carbon3DSoftwareIcon } from '@vicons/carbon' const ionicons5 = { @@ -234,7 +236,11 @@ const carbon = { ScaleIcon, FitToScreenIcon, FitToHeightIcon, - FitToWidthIcon + FitToWidthIcon, + // 成组 + Carbon3DCursorIcon, + // 解组 + Carbon3DSoftwareIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index a0b63abe..568782df 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -172,7 +172,7 @@ export const useChartEditStore = defineStore({ this.targetChart.selectId = [] return } - // 新增 + // 多选 if(push) { // 字符串 if(isString(selectId)) { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 1aee786d..624b954b 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -51,7 +51,8 @@ export enum HistoryStackItemEnum { // 历史记录项类型 export interface HistoryItemType { - [HistoryStackItemEnum.ID]: string + // 会有同时操作多个组件场景 + [HistoryStackItemEnum.ID]: string | string[] [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType diff --git a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue index d3014b04..487d7bad 100644 --- a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue +++ b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue @@ -99,6 +99,11 @@ const shortcutKeyOptions = [ win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + Z `, mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + Z `, }, + { + label: '多选', + win: `${WinKeyboard.CTRL.toUpperCase()} + 🖱️ `, + mac: `${MacKeyboard.CTRL_SOURCE_KEY.toUpperCase()} + 🖱️ `, + }, ] const closeHandle = () => { emit('update:modelShow', false) diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index a2292099..ede65ccd 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -1,10 +1,7 @@ -import { DragKeyEnum } from '@/enums/editPageEnum' +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, 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' @@ -35,10 +32,7 @@ export const dragHandle = async (e: DragEvent) => { // 创建新图表组件 let newComponent: CreateComponentType = await createComponent(dropData) - newComponent.setPosition( - e.offsetX - newComponent.attr.w / 2, - e.offsetY - newComponent.attr.h / 2 - ) + newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2) chartEditStore.addComponentList(newComponent, false, true) chartEditStore.setTargetSelectChart(newComponent.id) loadingFinish() @@ -57,10 +51,7 @@ export const dragoverHandle = (e: DragEvent) => { } // * 不拦截默认行为点击 -export const mousedownHandleUnStop = ( - e: MouseEvent, - item?: CreateComponentType -) => { +export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType) => { if (item) { chartEditStore.setTargetSelectChart(item.id) return @@ -70,13 +61,42 @@ export const mousedownHandleUnStop = ( // * 移动图表 export const useMouseHandle = () => { - // 点击事件（包含移动事件） + // * Click 事件, 松开鼠标触发 + const mouseClickHandle = (e: MouseEvent, item: CreateComponentType) => { + e.preventDefault() + e.stopPropagation() + // 若此时按下了 CTRL, 表示多选 + if ( + window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || + window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY) + ) { + chartEditStore.setTargetSelectChart(item.id, true) + } + } + + // * 按下事件（包含移动事件） const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => { e.preventDefault() e.stopPropagation() - onClickOutSide() + + // 按下左键 + CTRL + if ( + e.buttons === MouseEventButton.LEFT && + (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || + window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)) + ) + return + + // 按下右键 + 选中多个 + if (e.buttons === MouseEventButton.RIGHT && chartEditStore.getTargetChart.selectId.length > 1) return + + // 选中当前目标组件 chartEditStore.setTargetSelectChart(item.id) + + // 按下右键 + if (e.buttons === MouseEventButton.RIGHT) return + const scale = chartEditStore.getEditCanvas.scale const width = chartEditStore.getEditCanvasConfig.width const height = chartEditStore.getEditCanvasConfig.height @@ -141,15 +161,11 @@ export const useMouseHandle = () => { chartEditStore.setTargetHoverChart(undefined) } - return { mousedownHandle, mouseenterHandle, mouseleaveHandle } + return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle } } // * 移动锚点 -export const useMousePointHandle = ( - e: MouseEvent, - point: string, - attr: PickCreateComponentType<'attr'> -) => { +export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCreateComponentType<'attr'>) => { e.stopPropagation() e.preventDefault() diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 27a017c2..98f1ade2 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -27,6 +27,7 @@ :index="index" :style="useComponentStyle(item.attr, index)" :item="item" + @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)" @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)" @@ -87,7 +88,7 @@ const { handleContextMenu } = useContextMenu() useLayout() // 点击事件 -const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle() +const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() // 主题色 const themeSetting = computed(() => { diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index a733df25..c657ee50 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -6,82 +6,85 @@ import { icon } from '@/plugins' import { MenuOptionsItemType } from './useContextMenu.hook.d' import { MenuEnum } from '@/enums/editPageEnum' -const { - CopyIcon, - CutIcon, - ClipboardOutlineIcon, - TrashIcon, - ChevronDownIcon, - ChevronUpIcon, -} = icon.ionicons5 -const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon } = icon.carbon +const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5 +const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon const chartEditStore = useChartEditStore() -// * 默认选项 +// * 默认单组件选项 const defaultOptions: MenuOptionsItemType[] = [ { label: '复制', key: MenuEnum.COPY, icon: renderIcon(CopyIcon), - fnHandle: chartEditStore.setCopy, + fnHandle: chartEditStore.setCopy }, { label: '剪切', key: MenuEnum.CUT, icon: renderIcon(CutIcon), - fnHandle: chartEditStore.setCut, + fnHandle: chartEditStore.setCut }, { label: '粘贴', key: MenuEnum.PARSE, icon: renderIcon(ClipboardOutlineIcon), - fnHandle: chartEditStore.setParse, + fnHandle: chartEditStore.setParse }, { type: 'divider', - key: 'd1', + key: 'd1' }, { label: '置顶', key: MenuEnum.TOP, icon: renderIcon(UpToTopIcon), - fnHandle: chartEditStore.setTop, + fnHandle: chartEditStore.setTop }, { label: '置底', key: MenuEnum.BOTTOM, icon: renderIcon(DownToBottomIcon), - fnHandle: chartEditStore.setBottom, + fnHandle: chartEditStore.setBottom }, { label: '上移一层', key: MenuEnum.UP, icon: renderIcon(ChevronUpIcon), - fnHandle: chartEditStore.setUp, + fnHandle: chartEditStore.setUp }, { label: '下移一层', key: MenuEnum.DOWN, icon: renderIcon(ChevronDownIcon), - fnHandle: chartEditStore.setDown, + fnHandle: chartEditStore.setDown }, { type: 'divider', - key: 'd2', + key: 'd2' }, { label: '清空剪贴板', key: MenuEnum.CLEAR, icon: renderIcon(PaintBrushIcon), - fnHandle: chartEditStore.setRecordChart, + fnHandle: chartEditStore.setRecordChart }, { label: '删除', key: MenuEnum.DELETE, icon: renderIcon(TrashIcon), - fnHandle: chartEditStore.removeComponentList, - }, + fnHandle: chartEditStore.removeComponentList + } +] + +// * 默认多选组件选项 +const defaultMultiSelectionOptions: MenuOptionsItemType[] = [ + { + label: '成组', + key: MenuEnum.COPY, + icon: renderIcon(Carbon3DSoftwareIcon), + fnHandle: chartEditStore.setCopy + } ] // * 无数据传递拥有的选项 @@ -126,7 +129,7 @@ const handleContextMenu = ( // 隐藏选项列表 hideOptionsList?: MenuEnum[], // 挑选选项列表 - pickOptionsList?: MenuEnum[], + pickOptionsList?: MenuEnum[] ) => { e.stopPropagation() e.preventDefault() @@ -136,8 +139,13 @@ const handleContextMenu = ( } chartEditStore.setRightMenuShow(false) - // * 设置默认选项 - menuOptions.value = defaultOptions + // * 多选默认选项 + if (chartEditStore.getTargetChart.selectId.length > 1) { + menuOptions.value = defaultMultiSelectionOptions + } else { + // * 单选默认选项 + menuOptions.value = defaultOptions + } if (!item) { menuOptions.value = pickOption(menuOptions.value, defaultNoItemKeys) @@ -163,7 +171,6 @@ const handleContextMenu = ( * @returns */ export const useContextMenu = () => { - // 设置默认项 menuOptions.value = defaultOptions @@ -175,9 +182,7 @@ export const useContextMenu = () => { // * 事件处理 const handleMenuSelect = (key: string) => { chartEditStore.setRightMenuShow(false) - const targetItem: MenuOptionsItemType[] = menuOptions.value.filter( - (e: MenuOptionsItemType) => e.key === key - ) + const targetItem: MenuOptionsItemType[] = menuOptions.value.filter((e: MenuOptionsItemType) => e.key === key) menuOptions.value.forEach((e: MenuOptionsItemType) => { if (e.key === key) { @@ -189,12 +194,12 @@ export const useContextMenu = () => { } }) } - + return { menuOptions, handleContextMenu, onClickOutSide, handleMenuSelect, - mousePosition: chartEditStore.getMousePosition, + mousePosition: chartEditStore.getMousePosition } } diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 58ab28c4..4429eb0e 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -77,14 +77,14 @@ const macKeyList: Array = [ // 处理键盘记录 const keyRecordHandle = () => { - document.onkeydown = throttle((e: KeyboardEvent) => { + document.onkeydown = (e: KeyboardEvent) => { if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase()) - else window.$KeyboardActive = new Set([e.key]) - }, 200) + else window.$KeyboardActive = new Set([e.key.toLocaleLowerCase()]) + } - document.onkeyup = throttle((e: KeyboardEvent) => { + document.onkeyup = (e: KeyboardEvent) => { if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase()) - }, 200) + } } // 初始化监听事件 From 7d3267959fc021fdac6507d6d7b343a3b05a50fe 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: Fri, 5 Aug 2022 10:58:46 +0800 Subject: [PATCH 02/44] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E5=8F=B3?= =?UTF-8?q?=E9=94=AE=E5=A4=9A=E9=80=89=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index ede65ccd..1f7c161f 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -88,8 +88,9 @@ export const useMouseHandle = () => { ) return - // 按下右键 + 选中多个 - if (e.buttons === MouseEventButton.RIGHT && chartEditStore.getTargetChart.selectId.length > 1) return + // 按下右键 + 选中多个 + 目标元素是多选子元素 + const selectId = chartEditStore.getTargetChart.selectId + if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id)) return // 选中当前目标组件 chartEditStore.setTargetSelectChart(item.id) From 451913f087986a1337caaeb06c8e68ee019f0c35 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: Fri, 5 Aug 2022 21:12:05 +0800 Subject: [PATCH 03/44] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=A4=9A?= =?UTF-8?q?=E9=80=89=E7=9A=84=E5=85=A8=E9=83=A8=E5=88=97=E8=A1=A8=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0,=20=E7=BB=93=E6=9E=84=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.d.ts | 13 +++-- src/packages/public/publicConfig.ts | 48 +++++++++++++++++-- .../chartEditStore/chartEditStore.d.ts | 9 ++-- .../modules/chartEditStore/chartEditStore.ts | 32 +++++++++---- .../chartHistoryStore/chartHistoryStore.d.ts | 4 +- .../chartHistoryStore/chartHistoryStore.ts | 16 +++---- .../components/ChartDataRequest/index.vue | 5 +- src/views/chart/hooks/useContextMenu.hook.ts | 8 ++-- 8 files changed, 100 insertions(+), 35 deletions(-) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 41a1caac..9e0c88d7 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -60,9 +60,8 @@ export enum FilterEnum { } // 组件实例类 -export interface PublicConfigType extends requestConfig { +export interface PublicConfigType { id: string - rename?: string attr: { x: number; y: number; w: number; h: number; zIndex: number } styles: { [FilterEnum.OPACITY]: number; @@ -84,12 +83,20 @@ export interface PublicConfigType extends requestConfig { setPosition: Function } -export interface CreateComponentType extends PublicConfigType { +export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType option: GlobalThemeJsonType } +// 组件成组实例类 (部分属性用不到设置为 any) +export interface CreateComponentGroupType extends PublicConfigType { + chartConfig: { + categoryName: string + } + groupList: Array +} + // 获取组件实例类中某个key对应value类型的方法 export type PickCreateComponentType = Pick[T] diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 8a3bd08a..33d1113c 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,5 @@ import { getUUID } from '@/utils' -import { PublicConfigType } from '@/packages/index.d' +import { PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { RequestHttpEnum, @@ -10,6 +10,7 @@ import { } from '@/enums/httpEnum' import { chartInitConfig } from '@/settings/designSetting' +// 请求基础属性 const requestConfig: RequestConfigType = { requestDataType: RequestDataTypeEnum.STATIC, requestHttpType: RequestHttpEnum.GET, @@ -33,10 +34,9 @@ const requestConfig: RequestConfigType = { } } +// 单实例类 export class publicConfig implements PublicConfigType { public id = getUUID() - // 重命名 - public rename = undefined // 基本信息 public attr = { ...chartInitConfig, zIndex: -1 } // 基本样式 @@ -75,3 +75,45 @@ export class publicConfig implements PublicConfigType { this.attr.y = y } } + +// 成组类 (部分属性不需要, 不继承 publicConfig) +export class PublicGroupConfigClass implements CreateComponentGroupType { + public id = getUUID() + chartConfig = { + categoryName: '分组' + } + // 基本信息 + public attr = { ...chartInitConfig, zIndex: -1 } + // 基本样式 + public styles = { + // 色相 + hueRotate: 0, + // 饱和度 + saturate: 1, + // 对比度 + contrast: 1, + // 亮度 + brightness: 1, + // 透明 + opacity: 1, + + // 旋转 + rotateZ: 0, + rotateX: 0, + rotateY: 0, + + // 倾斜 + skewX: 0, + skewY: 0, + + // 动画 + animations: [] + } + // 组成员列表 + public groupList: Array = [] + // 设置坐标 + public setPosition(x: number, y: number): void { + this.attr.x = x + this.attr.y = y + } +} diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 8e8ec864..599d1fdd 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,4 +1,4 @@ -import { CreateComponentType, FilterEnum } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { RequestHttpEnum, @@ -117,7 +117,7 @@ export type TargetChartType = { // 数据记录 export type RecordChartType = { - charts: CreateComponentType | CreateComponentType[] + charts: CreateComponentType | CreateComponentType[] | CreateComponentGroupType type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY } @@ -180,11 +180,12 @@ export interface ChartEditStoreType { [ChartEditStoreEnum.TARGET_CHART]: TargetChartType [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType - [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] + [ChartEditStoreEnum.COMPONENT_LIST]: Array } +// 存储数据类型 export interface ChartEditStorage { [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType - [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] + [ChartEditStoreEnum.COMPONENT_LIST]: Array } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 27cab452..828314d0 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -1,10 +1,10 @@ import { defineStore } from 'pinia' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' +import { PublicGroupConfigClass } from '@/packages/public/publicConfig' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting' -import { RequestBodyEnum } from '@/enums/httpEnum' // 记录记录 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' // 全局设置 @@ -148,7 +148,7 @@ export const useChartEditStore = defineStore({ getRequestGlobalConfig(): RequestGlobalConfigType { return this.requestGlobalConfig }, - getComponentList(): CreateComponentType[] { + getComponentList(): Array { return this.componentList }, // 获取需要存储的数据项 @@ -243,7 +243,7 @@ export const useChartEditStore = defineStore({ * @param isHistory 是否进行记录 * @returns */ - addComponentList(chartConfig: CreateComponentType, isHead = false, isHistory = false): void { + addComponentList(chartConfig: CreateComponentType | CreateComponentGroupType, isHead = false, isHistory = false): void { if (isHistory) { chartHistoryStore.createAddHistory(chartConfig) } @@ -253,7 +253,7 @@ export const useChartEditStore = defineStore({ } this.componentList.push(chartConfig) }, - // * 删除组件列表 + // * 删除单个组件 removeComponentList(isHistory = true): void { try { loadingStart() @@ -269,7 +269,7 @@ export const useChartEditStore = defineStore({ } }, // * 更新组件列表某一项的值 - updateComponentList(index: number, newData: CreateComponentType) { + updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { if (index < 1 && index > this.getComponentList.length) return this.componentList[index] = newData }, @@ -303,7 +303,7 @@ export const useChartEditStore = defineStore({ } // 记录原有位置 - const setIndex = (t:CreateComponentType, i:number) => { + const setIndex = (t:CreateComponentType | CreateComponentGroupType, i:number) => { const temp = cloneDeep(t) temp.attr.zIndex = i return temp @@ -412,7 +412,7 @@ export const useChartEditStore = defineStore({ loadingFinish() return } - const parseHandle = (e: CreateComponentType) => { + const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => { e = cloneDeep(e) // 生成新 id e.id = getUUID() @@ -566,6 +566,22 @@ export const useChartEditStore = defineStore({ break; } }, + // * 创建分组 + setGroup() { + const groupClass = new PublicGroupConfigClass() + this.getTargetChart.selectId.forEach((id: string) => { + // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理) + const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType + groupClass.groupList.push(item) + }) + this.addComponentList(groupClass) + // todo 输出 + console.log(this.getComponentList) + }, + // * 解除分组 + setUnGroup() { + + }, // ---------------- // * 设置页面大小 setPageSize(scale: number): void { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 624b954b..835a4dc9 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -1,4 +1,4 @@ -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' // 操作类型枚举 @@ -55,7 +55,7 @@ export interface HistoryItemType { [HistoryStackItemEnum.ID]: string | string[] [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum - [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType + [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | CreateComponentGroupType | EditCanvasType } // 历史 Store 类型 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 31b0425d..9f362160 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' import { loadingStart, loadingFinish, loadingError } from '@/utils' import { editHistoryMax } from '@/settings/designSetting' @@ -35,7 +35,7 @@ export const useChartHistoryStore = defineStore({ * @param targetType 对象类型（默认图表） */ createStackItem( - item: CreateComponentType | EditCanvasType, + item: CreateComponentType | CreateComponentGroupType | EditCanvasType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART ) { @@ -148,7 +148,7 @@ export const useChartHistoryStore = defineStore({ } }, // * 新增组件记录 - createAddHistory(item: CreateComponentType) { + createAddHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.ADD, @@ -156,7 +156,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 更新属性记录（大小、图表属性） - createUpdateHistory(item: CreateComponentType) { + createUpdateHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.UPDATE, @@ -164,7 +164,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 删除组件记录 - createDeleteHistory(item: CreateComponentType) { + createDeleteHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.DELETE, @@ -172,7 +172,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 移动组件记录 - createMoveHistory(item: CreateComponentType) { + createMoveHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.MOVE, @@ -181,7 +181,7 @@ export const useChartHistoryStore = defineStore({ }, // * 改变层级组件记录 createLayerHistory( - item: CreateComponentType, + item: CreateComponentType | CreateComponentGroupType, type: | HistoryActionTypeEnum.TOP | HistoryActionTypeEnum.DOWN @@ -195,7 +195,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 剪切组件记录 - createPasteHistory(item: CreateComponentType) { + createPasteHistory(item: CreateComponentType | CreateComponentGroupType) { this.createStackItem( item, HistoryActionTypeEnum.CUT, diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue index ab469c05..36fb25b2 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue @@ -15,7 +15,7 @@