queenshow/src/modules/editor/controllers/PageCtrl/index.ts

import { ModuleControl } from "queenjs";
import { onMounted, ref } from "vue";
import { EditorModule } from "../../module";
import { RxValue } from "../ReactCtrl/rxValue";
import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
import { DesignTemp } from "../../objects/DesignTemp";
import { CompPageObj } from "../../components/CompUI/basicUI/Page";
import { createObj, history } from "../../objects/DesignTemp/factory";
import { ICompKeys } from "../../typings";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { nanoid } from "nanoid";
import { eachValuesAndPathsDeep } from "@/utils";
import { set } from "lodash";


export class PageCtrl extends ModuleControl<EditorModule> {
  
    state = RxValue.create({
        currCompId: "root",
        currStreamCardId: "",
        rootId: "",
        designId: "",
        title: ''
    }, history)
    get currStreamCardId() {
      return this.state.currStreamCardId;
    }
    get currCompId() {
      return this.state.currCompId;
    }
    
    initEvent() {

        const updatePid = (pid:string)=>{
           const comps = this.compMap[pid].children.default;
           comps.forEach(c=>{
               this.setCompPid(c, pid)
               updatePid(c);
           })
        }

        this.rootPage.children.default.forEach(cid=>{
            const card = this.compMap[cid];
            let first = true;
            this.setCompPid(cid, this.rootPage.id);
            updatePid(this.rootPage.id)
            card.children.onDefaultChanged((childs)=>{
                if (first) {
                    first = false;
                    return;
                }
                childs.forEach(c=>{
                  this.setCompPid(c, card.id);
                  updatePid(c)
                })
                this.helper.extendStreamCard(cid);
            })
        })
    }

    designData = {} as DesignTemp
    compPids = {} as Record<string, string>;

    toJson() {
        const out:any = {
           _id: this.designData._id,
           version: this.designData.version,
         
           title: this.designData.title,
           desc: this.designData.desc,
           pageStyle: this.designData.pageStyle,
           content: this.designData.content,
           thumbnail: this.designData.thumbnail,
           compScreenMap: this.designData.compScreenMap,
        }

        const keys = Object.keys(this.designData.compMap);
        const compMap :any = {};
        keys.forEach(k=>{
           compMap[k] = this.designData.compMap[k].toJson();
        })
        out.compMap = compMap;
        console.log(out);

        return out;
    }

    setCompPid(compId: string, pid: string) {
        this.compPids[compId] = pid;
    }
    get compMap() {
        return this.designData.compMap || {};
    }
    get currComp() {
        return this.compMap[this.state.currCompId];
    }
    get currStreamCard() {
        return this.compMap[this.state.currStreamCardId];
    }
    
    get streamCardIds(): string[] {
        return this.rootPage?.children.default || [];
    }

    setDesignData(data: Partial<DesignTemp>) {  
       history.enable = false;
       this.designData = new DesignTemp(data);
       this.state.title = data.title || '';
        //设置组件父子关系
        const ite = (root:any)=> {
          const cards = root.children?.default || [];
          cards.forEach((c:string)=>{
            this.setCompPid(c, root.id);
              const r = this.compMap[c];
              if (r) {
                ite(r);
              }
          })
        }
        ite(this.designData.compMap.root);

        this.state.rootId = "root";
        this.state.currStreamCardId = this.streamCardIds[0];
        this.initEvent();
        this.controls.propsCtrl.state.propId = "root";

        const root = this.rootPage;
        this.controls.screenCtrl.state.screen.useFor= root.value.useFor as any || "mobile"
        this.controls.screenCtrl.state.screen.pageMode = root.value.pageMode as any || "long"  
        this.controls.screenCtrl.state.screen.pageSizeType = root.value.pageSizeType as any || "normal"
        
        if (this.store.isEditMode) {
          this.controls.screenCtrl.updateAdapterState();
        }
        
        setTimeout(() => {
              history.clear();
              history.enable = true;
        }, 1000);
    }

    get rootPage() {
        return this.compMap[this.state.rootId] as CompPageObj;
    }

    setCurrComp(compId: string) {
        if (compId == "") compId = "root";
        this.state.setCurrCompId(compId);
        if (compId == "root") {
          return;
        }

        const comps = this.helper.getCompTrees(compId);
        let cardId = comps[1]?.id || "";
        if (this.helper.isStreamCard(compId)) {
          cardId = compId;
        }
        this.state.setCurrStreamCardId(cardId);
    }

    findParentComp(compId: string): DesignComp | undefined {
      const comp = this.compMap[compId];
      if (comp) return this.compMap[this.compPids[compId]];
    }

    deleteComp(compId: string) {
        const parentComp = this.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.setDefault(ids);
              deleteOK = true;
            }
          }
        }
        if (deleteOK) {
          delete this.compPids[compId];
        }
    }  

    insertDesignCard(index?: number) {
        const card = createObj({compKey: "Container"}, false);
        if(this.controls.screenCtrl.state.screen.useFor == 'pc'){
          card.layout.size = [2732, 1536]
        }
        this.setCompPid(card.id, this.rootPage.id);
        this.compMap[card.id] = card;
        const childIds = [...this.rootPage.children.default];
        index === undefined && (index = childIds.length);
        childIds.splice(index, 0, card.id);
        this.rootPage.children.setDefault(childIds);
        card.children.onDefaultChanged(()=>{
            this.helper.extendStreamCard(card.id);
        })
        return card.id;
    }

    insertCompContainer(compKey: ICompKeys, container: DesignComp) {
        const compId = this.controls.compUICtrl.createCompId(compKey);
        this.setCompPid(compId, container.id);

        const childIds = [...(container.children.default || [])];
        childIds.push(compId);
        container.children.setDefault(childIds);

        return compId;
    }

    moveComp(selIndex: number, targetIndex: number) {

        const pageCompIds = [...this.streamCardIds];
        const [selComp] = pageCompIds.splice(selIndex, 1);
        pageCompIds.splice(targetIndex, 0, selComp);
        this.rootPage.children.setDefault(pageCompIds );

        history.submit();
    }

    addUserCard(detail: any) {
        const { compMap } = this.controls.pageCtrl.designData;
        const idMap = new Map<string, string>();
        const nextCompMap: Record<string, DesignComp> = {};
        Object.entries(detail.compMap as Record<string, DesignComp>).forEach(
          ([key, comp]) => {
            
            if (key === "root") {
              idMap.set(key, nanoid());
              comp.title = detail.title;
              comp.thumbnail = detail.thumbnail;
            }
            const newPid = idMap.get(key) || nanoid();
            idMap.set(key, newPid);
            comp.id = newPid;
            eachValuesAndPathsDeep(
              comp.children,
              (v) => typeof v === "string",
              (v, paths) => {
                const id = idMap.get(v) || nanoid();
                idMap.set(v, id);

                this.setCompPid(id, newPid)
                
                set(comp.children, paths, id);
              }
            );
            nextCompMap[newPid] = createObj(comp);
          }
        );
        Object.assign(compMap, nextCompMap);
        return nextCompMap[idMap.get("root") as string];
    }
    setDesignThumbnail(url: string) {
      this.designData.thumbnail = url;
    }
}