diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 34fee0e5..9b479ab4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -193,6 +193,27 @@ export const useChartEditStore = defineStore({ [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig } }, + // * 获取针对 componentList 顺序排过序的 selectId + getSelectIdSortList(ids?: string[]): string[] { + if (!this.getTargetChart.selectId.length && !ids) return [] + const sortArr: string[] = [] + this.getComponentList.forEach((item: CreateComponentType | CreateComponentGroupType) => { + if (ids) { + ids.forEach((id: string) => { + if (item.id === id) { + sortArr.push(id) + } + }) + } else { + this.getTargetChart.selectId.forEach((id: string) => { + if (item.id === id) { + sortArr.push(id) + } + }) + } + }) + return sortArr + }, // * 设置 editCanvas 数据项 setEditCanvas(key: T, value: K) { this.editCanvas[key] = value @@ -740,18 +761,12 @@ export const useChartEditStore = defineStore({ // * 创建分组 setGroup(id?: string | string[], isHistory = true) { try { - const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId + let selectIds = this.idPreFormat(id) || this.getTargetChart.selectId + selectIds = this.getSelectIdSortList(selectIds) if (selectIds.length < 2) return loadingStart() const groupClass = new PublicGroupConfigClass() - // 记录整体坐标 - const groupAttr = { - l: this.getEditCanvasConfig.width, - t: this.getEditCanvasConfig.height, - r: 0, - b: 0 - } const targetList: CreateComponentType[] = [] const historyList: CreateComponentType[] = [] @@ -774,21 +789,35 @@ export const useChartEditStore = defineStore({ newSelectIds.push(id) } }) - newSelectIds.forEach((id: string) => { + // 记录整体坐标 + const groupAttr = { + l: 0, + t: 0, + r: 0, + b: 0 + } + newSelectIds.forEach((id: string, index: number) => { // 获取目标数据并从 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 + if (index === 0) { + groupAttr.l = x + groupAttr.t = y + groupAttr.r = x + w + groupAttr.b = y + h + } else { + 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.unshift(item) + targetList.push(item) historyList.push(toRaw(item)) }) @@ -814,7 +843,7 @@ export const useChartEditStore = defineStore({ loadingFinish() } catch (error) { console.log(error) - window['$message'].error('创建分组失败,请联系管理员!') + window['$message'].error('创建分组失败,请联系管理员') loadingFinish() } }, @@ -834,7 +863,7 @@ export const useChartEditStore = defineStore({ if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup])) // 分离组件并还原位置属性 - targetGroup.groupList.reverse().forEach(item => { + targetGroup.groupList.forEach(item => { item.attr.x = item.attr.x + targetGroup.attr.x item.attr.y = item.attr.y + targetGroup.attr.y if (!callBack) { @@ -859,7 +888,7 @@ export const useChartEditStore = defineStore({ loadingFinish() } catch (error) { console.log(error) - window['$message'].error('解除分组失败,请联系管理员!') + window['$message'].error('解除分组失败,请联系管理员') loadingFinish() } },