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

import { EditorModule } from "..";
import {
  addCacheToMap,
  createCompId,
} from "../components/CompUI/defines/createCompId";
import { DesignTemp } from "../defines/DesignTemp";
import { DesignComp } from "../defines/DesignTemp/DesignComp";
import { EditorMode, ICompKeys } from "../typings";

export const store = EditorModule.store({
  state: () => ({
    mode: "edit" as EditorMode,
    currCompId: "",
    designData: new DesignTemp(),
  }),
  getters: {
    isEditMode(state) {
      return state.mode === "edit";
    },
    currComp(state) {
      return state.designData.compMap[state.currCompId];
    },
  },
  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);
    },
    insertDesignContent(compKey: ICompKeys, index?: number) {
      index === undefined && (index = this.store.designData.content.length);
      const compId = createCompId(compKey);
      addCacheToMap(this.store.designData.compMap);
      this.store.designData.content.splice(index, 0, compId);
      return compId;
    },
    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
      const compId = createCompId(compKey);
      addCacheToMap(this.store.designData.compMap);
      container.children || (container.children = {});
      container.children[compId] = compId;
      return compId;
    },
    setCurrComp(compId: string) {
      this.store.currCompId = compId;
    },
    deleteComp(compId: string) {
      const { content, compMap } = this.store.designData;
      const parentComp = this.helper.findParentComp(compId);
      let deleteOK = false;
      if (parentComp) {
        // 只能删除children中以compId作为key的组件
        if (parentComp.children?.[compId]) {
          delete parentComp.children[compId];
          deleteOK = true;
        }
      } else {
        const index = content.findIndex((id) => id === compId);
        if (index >= 0) {
          content.splice(index, 1);
          deleteOK = true;
        }
      }

      if (deleteOK) {
        const comp = this.helper.findComp(compId);
        const ids = flatCompChildIds(comp?.children || {});
        [compId, ...ids].forEach((id) => {
          delete compMap[id];
        });
      }
    },
    moveComp(selIndex: number, targetIndex: number) {
      const { content } = this.store.designData;
      const [selComp] = content.splice(selIndex, 1);
      content.splice(targetIndex, 0, selComp);
    },
  },
});

function flatCompChildIds(obj: object, ids: string[] = []) {
  Object.values(obj).forEach((item) => {
    if (item instanceof Object) {
      flatCompChildIds(item, ids);
    } else if (typeof item === "string") {
      ids.push(item);
    }
  });
  return ids;
}