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

import { EditorModule } from "..";
import { CompUI } from "../components/CompUI";
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(),
    designCompMap: new Map<string, DesignComp>(),
  }),
  getters: {
    isEditMode(state) {
      return state.mode === "edit";
    },
    currComp(state) {
      return state.designCompMap.get(state.currCompId);
    },
  },
  actions: {
    setMode(v: EditorMode) {
      this.store.mode = v;
    },
    initDesignCompMap() {
      const { designData, designCompMap } = this.store;
      const arr = [...designData.content];
      designCompMap.clear();
      while (arr.length) {
        const item = arr[0];
        designCompMap.set(item.id, item);
        arr.shift();
        if (item.children) {
          arr.unshift(...Object.values(item.children));
        }
      }
    },
    initDesignData(data: Partial<DesignTemp>) {
      this.store.designData = new DesignTemp(data);
      this.store.initDesignCompMap();
    },
    insertDesignContent(compKey: ICompKeys, index?: number) {
      index === undefined && (index = this.store.designData.content.length);
      const options = CompUI[compKey].options;
      const comp = new DesignComp({
        compKey,
        value: options?.value,
        layout: options?.layout,
        background: options?.background,
        children: options?.children as any,
      });
      this.store.designData.content.splice(index, 0, comp);
      this.store.initDesignCompMap();
      return comp;
    },
    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
      const options = CompUI[compKey].options;
      const comp = new DesignComp({
        compKey,
        value: options?.value,
        layout: options?.layout,
        background: options?.background,
        children: options?.children as any,
      });
      container.children || (container.children = {});
      container.children[comp.id] = comp;
      this.store.initDesignCompMap();
      return comp;
    },
    setCurrComp(compId: string) {
      this.store.currCompId = compId;
    },
    deleteComp(compId: string) {
      const parentComp = this.helper.findParentComp(compId);
      if (parentComp) {
        console.log("find parent comp=>", parentComp);
        compId = parentComp?.id;
        // delete parentComp.children[compId];
      }

      //  else {
      const index = this.store.designData.content.findIndex(
        (d) => d.id === compId
      );
      if (index !== -1) {
        this.store.designData.content.splice(index, 1);
      }
      // }
    },
    moveComp(selIndex: number, targetIndex: number) {
      const { content } = this.store.designData;
      const [selComp] = content.splice(selIndex, 1);
      content.splice(targetIndex, 0, selComp);
    },
  },
});