shalu-bigscreen-desiner/src/store/modules/action.ts

import { defineStore } from "pinia";
import { AlignEnum } from "@/enum/alignEnum";
import { LayerEnum } from "@/enum/layerEnum";
import { useProjectStore } from "@/store/modules/project";
import { cloneDeep } from "lodash";
import { CustomElement } from "#/project";

export const useAcionStore = defineStore({
  id: 'action',
  state() {
    return {
      // 操作记录
      records: [],
    }
  },
  getters: {
    projectStore: () => useProjectStore(),
  },
  actions: {
    addRecord(record) {

    },
    actionUndo() {

    },
    actionRedo() {

    },
    actionClear() {

    },
    // 对齐
    actionAlign(type: AlignEnum) {
      const activeElements = this.projectStore.currentSelectedElements;
      switch (type) {
        case AlignEnum.Bottom: {
          const maxY = Math.max(...activeElements.map((item) => item.container.props.y + item.container.props.height));
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.y', maxY - item.container.props.height);
          });
          break;
        }
        case AlignEnum.HorizontalCenter: {
          const maxX = Math.max(...activeElements.map((item) => item.container.props.x + item.container.props.width));
          const minX = Math.min(...activeElements.map((item) => item.container.props.x));
          const centerX = minX + (maxX - minX) / 2;
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.x', centerX - item.container.props.width / 2);
          });
          break;
        }
        case AlignEnum.VerticalCenter: {
          const maxY = Math.max(...activeElements.map((item) => item.container.props.y + item.container.props.height));
          const minY = Math.min(...activeElements.map((item) => item.container.props.y));
          const centerY = minY + (maxY - minY) / 2;
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.y', centerY - item.container.props.height / 2);
          });
          break;
        }
        case AlignEnum.Left: {
          const minX = Math.min(...activeElements.map((item) => item.container.props.x));
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.x', minX);
          });
          break;
        }
        case AlignEnum.Right: {
          const maxX = Math.max(...activeElements.map((item) => item.container.props.x + item.container.props.width));
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.x', maxX - item.container.props.width);
          });
          break
        }
        case AlignEnum.Top: {
          const minY = Math.min(...activeElements.map((item) => item.container.props.y));
          console.log(this.projectStore.currentSelectedElements, minY)
          activeElements.forEach((item) => {
            this.projectStore.updateElement(item.key, 'container.props.y', minY);
          });
          break;
        }
        default: 
      }
    },
    // 图层调整
    actionLayer(type: LayerEnum) {
      const activeElements = this.projectStore.currentSelectedElements;
      const elements = cloneDeep(this.projectStore.elements.sort((a, b) => a.zIndex - b.zIndex)) as CustomElement[];

      switch (type) {
        case LayerEnum.UP: {
          activeElements.forEach((item) => {
            const index = elements.findIndex((element) => element.key === item.key);
            if (item.zIndex === elements.length) return;
            elements.splice(index, 1);
            elements.splice(index + 1, 0, {...item});
          });
          elements.forEach((item, index) => { item.zIndex = index + 1});
          elements.forEach(item => {
            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
          });
          break;
        }
        case LayerEnum.DOWN: {
          activeElements.forEach((item) => {
            const index = elements.findIndex((element) => element.key === item.key);
            if (item.zIndex === 1) return;
            elements.splice(index, 1);
            elements.splice(index - 1, 0, {...item});
          });
          elements.forEach((item, index) => { item.zIndex = index + 1});
          elements.forEach(item => {
            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
          });
          break;
        }
        case LayerEnum.TOP: {
          activeElements.forEach((item) => {
            const index = elements.findIndex((element) => element.key === item.key);
            if (item.zIndex === elements.length) return;
            elements.splice(index, 1);
            elements.push({...item});
          });
          elements.forEach((item, index) => { item.zIndex = index + 1});
          elements.forEach(item => {
            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
          });
          break;
        }
        case LayerEnum.BOTTOM: {
          activeElements.forEach((item) => {
            const index = elements.findIndex((element) => element.key === item.key);
            if (item.zIndex === 1) return;
            elements.splice(index, 1);
            elements.unshift({...item});
          });
          elements.forEach((item, index) => { item.zIndex = index + 1});
          elements.forEach(item => {
            this.projectStore.updateElement(item.key, 'zIndex', item.zIndex);
          });
          break;
        }
      }  
    }
  }
})