feat: 新增多选中的前置处理，选中存储对象修改成数组形式

2025-02-24 00:02:51 +08:00 · 2022-06-21 17:39:16 +08:00 · 2022-06-21 17:39:16 +08:00 · 0f73536ce0
commit 0f73536ce0
parent 455e387a62
6 changed files with 73 additions and 67 deletions
--- 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[]
 }

 // 数据记录
--- 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"]) {
+    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
--- 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()]
 })

--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
@ -4,10 +4,7 @@
      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))"
    ></div>
  </div>
@ -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,7 +106,7 @@ 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
@ -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')) {
@ -261,7 +232,7 @@ watch(
        /*
          * 我也不知道为什么这个不行，还没时间调
          if(lineItem.includes('row')) {
-            seletY.forEach(sY => {
+            selectY.forEach(sY => {
              componentY.forEach(cY => {
                if (isSorption(sY, cY)) {
                  line.select.set(lineItem, { y: cY })
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@ -4,7 +4,7 @@
    <!-- 锚点 -->
    <div
      :class="`shape-point ${point}`"
-      v-for="(point, index) in (select? pointList : [])"
+      v-for="(point, index) in select ? pointList : []"
      :key="index"
      :style="usePointStyle(point, index, item.attr, cursorResize)"
      @mousedown="useMousePointHandle($event, point, item.attr)"
@ -13,10 +13,7 @@
    <!-- 选中 -->
    <div class="shape-modal" :style="useSizeStyle(item.attr)">
      <div class="shape-modal-select" :class="{ active: select }"></div>
-      <div
-        class="shape-modal-change"
-        :class="{ selectActive: select, hoverActive: hover }"
-     ></div>
+      <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
    </div>
  </div>
 </template>
@ -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)
 })
 </script>

@ -90,8 +89,7 @@ const select = computed(() => {
      transform: translate(-45%, -50%);
    }
    &.rt,
-    &.rb
-    {
+    &.rb {
      transform: translate(-30%, -30%);
    }
  }
--- 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(() => {