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",
    designData: new DesignTemp(),
  }),
  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";
    },
    currComp(state) {
      return state.designData.compMap[state.currCompId];
    },
    pageCompIds(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;
    },
    initDesignData(data: Partial<DesignTemp>) {
      this.store.designData = new DesignTemp(data);
    },
    async insertDesignContent(compKey: ICompKeys, index?: number) {
      const { pageCompIds } = this.store;
      index === undefined && (index = pageCompIds.length);
      const compId = await this.controls.compUICtrl.createCompId(
        compKey,
        "root"
      );
      pageCompIds.splice(index, 0, compId);
      return compId;
    },
    async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
      const compId = await this.controls.compUICtrl.createCompId(
        compKey,
        container.id
      );
      container.children.default || (container.children.default = []);
      container.children.default.push(compId);
      return compId;
    },
    setCurrComp(compId: string) {
      this.store.currCompId = compId;
    },
    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);
            deleteOK = true;
          }
        }
      }

      if (deleteOK) {
        const comp = this.helper.findComp(compId) as DesignComp;
        const ids = comp.getChildIds();
        [compId, ...ids].forEach((id) => {
          delete compMap[id];
        });
      }
    },
    moveComp(selIndex: number, targetIndex: number) {
      const { pageCompIds } = this.store;
      const [selComp] = pageCompIds.splice(selIndex, 1);
      pageCompIds.splice(targetIndex, 0, selComp);
    },
    clearUnusedComps() {
      const used = new Set<string>();
      const getUsedIds = (ids: string[]) => {
        ids.forEach((id) => {
          const comp = this.helper.findComp(id);
          if (!comp) return;
          used.add(id);
          getUsedIds(comp.getChildIds());
        });
        return used;
      };
      const rootId = (this.helper.findRootComp() as DesignComp).id;
      getUsedIds([rootId]);
      Object.keys(this.store.designData.compMap).forEach((compId) => {
        if (!used.has(compId)) {
          delete this.store.designData.compMap[compId];
        }
      });
    },
    setTextEditingState(state: boolean) {
      this.store.textEditingState = state;
    },
    updateDesignThumbnail(url: string) {
      this.store.designData.thumbnail = url;
    },
  },
});