queenshow/src/modules/editor/module/stores/index.ts

import { EditorModule } from "..";
import { DesignTemp } from "../../objects/DesignTemp";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { EditorMode, ICompKeys } from "../../typings";

export const store = EditorModule.store({
  state: () => ({
    textEditingState: false,
    mode: "editPage" as EditorMode,
    currCompId: "root",
    currStreamCardId: "",
    designData: new DesignTemp(),

    groupModeStatus: false,
    groupIds: [] as string[],
    compPids: {} as Record<string, string>,
  }),
  getters: {
    isEditMode(): boolean {
      return !this.store.isPreview;
    },
    isEditPage(state) {
      return state.mode === "editPage";
    },
    isEditComp(state) {
      return state.mode === "editComp";
    },
    isPreview(state) {
      return state.mode === "preview";
    },
    compMap(state) {
      return state.designData.compMap;
    },

    currComp(state) {
      return state.designData.compMap[state.currCompId];
    },
    currStreamCard(state) {
      return state.designData.compMap[state.currStreamCardId];
    },
    pageCompIds(state): string[] {
      return state.designData.compMap.root?.children.default || [];
    },
    streamCardIds(state): string[] {
      return state.designData.compMap.root?.children.default || [];
    },
  },
  actions: {
    setCompData(id: string, data: any) {
      this.store.designData.compMap[id] = data;
    },
    setMode(v: EditorMode) {
      this.store.mode = v;
    },
    setGroupMode(status: boolean) {
      this.store.groupModeStatus = status;
    },
    setGroupIds(ids: string[]) {
      this.store.groupIds = ids;
    },
    setDesignData(data: Partial<DesignTemp>) {
      this.store.designData = new DesignTemp(data);
    },
    setCompPid(compId: string, pid: string) {
      this.store.compPids[compId] = pid;
    },
    async insertDesignContent(compKey: ICompKeys, index?: number) {
      const { pageCompIds } = this.store;
      index === undefined && (index = pageCompIds.length);
      const compId = await this.controls.compUICtrl.createCompId(compKey);
      pageCompIds.splice(index, 0, compId);
      return compId;
    },
    async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
      const compId = await this.controls.compUICtrl.createCompId(compKey);
      const childIds = [...(container.children.default || [])];
      childIds.push(compId);
      container.children.default = childIds;
      return compId;
    },
    setCurrComp(compId: string) {
      if (compId != "root") {
        this.store.currStreamCardId = "";
      }
     
      this.store.currCompId = compId;

      const comps = this.helper.getCompTrees(compId);

      this.store.currStreamCardId = comps[1]?.id || ''
    },

    deleteComp(compId: string) {
      const { compMap } = this.store.designData;
      const parentComp = this.helper.findParentComp(compId);
      let deleteOK = false;
      if (parentComp) {
        const ids = [...parentComp.children.default || []];
        // 只能删除children.default中的组件
        if (ids?.includes(compId)) {
          const index = ids.findIndex((id) => id === compId);
          if (index >= 0) {
            ids.splice(index, 1);
            parentComp.children.default = ids;
            deleteOK = true;
          }
        }
      }

      if (deleteOK) {
        const comp = this.helper.findComp(compId) as DesignComp;
        const ids = comp.getChildIds();
        [compId, ...ids].forEach((id) => {
          delete compMap[id];
        });
        delete this.store.compPids[compId];
      }
    },
    moveComp(selIndex: number, targetIndex: number) {
      const { pageCompIds } = this.store;
      const [selComp] = pageCompIds.splice(selIndex, 1);
      pageCompIds.splice(targetIndex, 0, selComp);
    },
    setTextEditingState(state: boolean) {
      this.store.textEditingState = state;
    },
    setDesignThumbnail(url: string) {
      this.store.designData.thumbnail = url;
    },
  },
});