diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index e4513c8e..f26c0461 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -107,7 +107,7 @@ export type MousePositionType = { // 操作目标 export type TargetChartType = { hoverId?: string - selectId?: string + selectId: string[] } // 数据记录 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 131d95cc..a0b63abe 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -1,5 +1,4 @@ import { defineStore } from 'pinia' -import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils' import { CreateComponentType } from '@/packages/index.d' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' @@ -11,6 +10,14 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { MenuEnum } from '@/enums/editPageEnum' +import { + getUUID, + loadingStart, + loadingFinish, + loadingError, + isString, + isArray +} from '@/utils' import { ChartEditStoreEnum, ChartEditStorage, @@ -60,7 +67,7 @@ export const useChartEditStore = defineStore({ // 目标图表 targetChart: { hoverId: undefined, - selectId: undefined + selectId: [] }, // 记录临时数据(复制等) recordChart: undefined, @@ -159,8 +166,36 @@ export const useChartEditStore = defineStore({ this.targetChart.hoverId = hoverId }, // * 设置目标数据 select - setTargetSelectChart(selectId?:TargetChartType["selectId"]) { - this.targetChart.selectId = selectId + setTargetSelectChart(selectId?: string | string[], push: boolean = false) { + // 无 id 清空 + if(!selectId) { + this.targetChart.selectId = [] + return + } + // 新增 + if(push) { + // 字符串 + if(isString(selectId)) { + this.targetChart.selectId.push(selectId) + return + } + // 数组 + if(isArray(selectId)) { + this.targetChart.selectId.push(...selectId) + return + } + } else { + // 字符串 + if(isString(selectId)) { + this.targetChart.selectId = [selectId] + return + } + // 数组 + if(isArray(selectId)) { + this.targetChart.selectId = selectId + return + } + } }, // * 设置记录数据 setRecordChart(item: RecordChartType | undefined) { @@ -175,7 +210,7 @@ export const useChartEditStore = defineStore({ }, // * 找到目标 id 数据下标位置(无则返回-1) fetchTargetIndex(id?: string): number { - const targetId = id || this.getTargetChart.selectId + const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined if(!targetId) { loadingFinish() return -1 diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 9117594a..92ba612d 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -123,7 +123,8 @@ const expandHindle = () => { const selectTarget = computed(() => { const selectId = chartEditStore.getTargetChart.selectId - if (!selectId) return undefined + // 排除多个 + if (selectId.length !== 1) return undefined return chartEditStore.componentList[chartEditStore.fetchTargetIndex()] }) diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 233c33db..dea92fe1 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -4,12 +4,9 @@ class="line" v-for="item in line.lineArr" :key="item" - :class="[ - item.includes('row') ? 'row' : 'col', - line['select'].has(item) && 'visible' - ]" + :class="[item.includes('row') ? 'row' : 'col', line['select'].has(item) && 'visible']" :style="useComponentStyle(line['select'].get(item))" - > + > @@ -21,7 +18,7 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { CreateComponentType } from '@/packages/index.d' import throttle from 'lodash/throttle' -import cloneDeep from 'lodash/cloneDeep' +import cloneDeep from 'lodash/cloneDeep' // 全局颜色 const designStore = useDesignStore() const themeColor = ref(designStore.getAppTheme) @@ -53,7 +50,7 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => { } // * 吸附距离 -const minDistance = computed(()=>{ +const minDistance = computed(() => { return settingStore.getChartAlignRange }) @@ -72,9 +69,7 @@ const isSorption = (selectValue: number, componentValue: number) => { // * 当前目标 const selectId = computed(() => chartEditStore.getTargetChart.selectId) -const selectTarget = computed( - () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()] -) +const selectTarget = computed(() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]) const selectAttr = computed(() => selectTarget.value?.attr || {}) // * 画布坐标 @@ -95,7 +90,7 @@ const canvasPositionList = computed(() => { watch( () => chartEditStore.getMousePosition, throttle(() => { - if (!isComputedLine.value) return + if (!isComputedLine.value || selectId.value.length !== 1) return // 获取目标组件数据 const selectW = selectAttr.value.w @@ -111,12 +106,12 @@ watch( const selectTopY = selectAttr.value.y const selectHalfY = selectTopY + selectH / 2 const selectBottomY = selectTopY + selectH - const seletY = [selectTopY, selectHalfY, selectBottomY] + const selectY = [selectTopY, selectHalfY, selectBottomY] line.select.clear() line.sorptioned.y = false // 循环查询所有组件数据 - const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => { + const componentList = chartEditStore.getComponentList.map((e: CreateComponentType) => { return { id: e.id, attr: e.attr @@ -127,7 +122,7 @@ watch( line.lineArr.forEach(lineItem => { componentList.forEach((component: typeof canvasPositionList.value) => { // 排除自身 - if (selectId.value === component.id) return + if (selectId.value[0] === component.id) return const componentW = component.attr.w const componentH = component.attr.h @@ -163,24 +158,15 @@ watch( // 顶部 if (isSorption(selectHalfY, componentTopY)) { line.select.set(lineItem, { y: componentTopY }) - selectTarget.value.setPosition( - selectLeftX, - componentTopY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2) } if (isSorption(selectHalfY, componentHalfY)) { line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition( - selectLeftX, - componentHalfY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2) } if (isSorption(selectHalfY, componentBottomY)) { line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition( - selectLeftX, - componentBottomY - selectH / 2 - ) + selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2) } } if (lineItem.includes('rowb')) { @@ -191,17 +177,11 @@ watch( } if (isSorption(selectBottomY, componentHalfY)) { line.select.set(lineItem, { y: componentHalfY }) - selectTarget.value.setPosition( - selectLeftX, - componentHalfY - selectH - ) + selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH) } if (isSorption(selectBottomY, componentBottomY)) { line.select.set(lineItem, { y: componentBottomY }) - selectTarget.value.setPosition( - selectLeftX, - componentBottomY - selectH - ) + selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH) } } @@ -223,24 +203,15 @@ watch( if (lineItem.includes('colc')) { if (isSorption(selectHalfX, componentLeftX)) { line.select.set(lineItem, { x: componentLeftX }) - selectTarget.value.setPosition( - componentLeftX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY) } if (isSorption(selectHalfX, componentHalfX)) { line.select.set(lineItem, { x: componentHalfX }) - selectTarget.value.setPosition( - componentHalfX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY) } if (isSorption(selectHalfX, componentRightX)) { line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition( - componentRightX - selectW / 2, - selectTopY - ) + selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY) } } if (lineItem.includes('colr')) { @@ -254,14 +225,14 @@ watch( } if (isSorption(selectRightX, componentRightX)) { line.select.set(lineItem, { x: componentRightX }) - selectTarget.value.setPosition( componentRightX - selectW, selectTopY ) + selectTarget.value.setPosition(componentRightX - selectW, selectTopY) } } /* * 我也不知道为什么这个不行,还没时间调 if(lineItem.includes('row')) { - seletY.forEach(sY => { + selectY.forEach(sY => { componentY.forEach(cY => { if (isSorption(sY, cY)) { line.select.set(lineItem, { y: cY }) diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue index 9198aef3..59899b73 100644 --- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue @@ -4,19 +4,16 @@
+ >
-
+
@@ -52,8 +49,10 @@ const hover = computed(() => { return props.item.id === chartEditStore.getTargetChart.hoverId }) +// 兼容多值场景 const select = computed(() => { - return props.item.id === chartEditStore.getTargetChart.selectId + const id = props.item.id + return chartEditStore.getTargetChart.selectId.find((e: string) => e === id) }) @@ -79,7 +78,7 @@ const select = computed(() => { width: 30px; transform: translate(-50%, -30%); } - &.l, + &.l, &.r { height: 30px; } @@ -89,9 +88,8 @@ const select = computed(() => { &.l { transform: translate(-45%, -50%); } - &.rt, - &.rb - { + &.rt, + &.rb { transform: translate(-30%, -30%); } } diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue index 3444807e..97c09028 100644 --- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue @@ -43,7 +43,8 @@ const { image } = toRefs(props.componentData.chartConfig) // 计算当前选中目标 const select = computed(() => { - return props.componentData.id === chartEditStore.getTargetChart.selectId + const id = props.componentData.id + return chartEditStore.getTargetChart.selectId.find((e: string) => e === id) }) const hover = computed(() => {