queenshow/src/modules/editor/module/actions/edit.ts

import { cloneDeep, pick, set } from "lodash";
import { Exception, queenApi } from "queenjs";
import { EditorModule } from "..";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { ICompKeys, Layout } from "../../typings";

export const editActions = EditorModule.action({
  // 添加组件到画布
  async addCompToDesign(compKey: ICompKeys, index?: number) {
    let compId: string;
    if (
      index === undefined &&
      this.store.currComp?.compKey === "Container"
      // this.store.pageCompIds.includes(this.store.currComp.id)
    ) {
      compId = await this.store.insertCompContainer(
        compKey,
        this.store.currComp
      );
      this.actions.pickComp(compId);
      this.actions.setCompPosition(this.store.currComp);
    } else {
      compId = await this.store.insertDesignContent(compKey, index);
      this.actions.pickComp(compId);
    }
  },
  // 切换当前组件
  pickComp(compId: string) {
    // let nextCompId = compId;
    // if (this.store.isEditPage) {
    //   const comps = this.helper.getCompTrees(compId);
    //   nextCompId = comps[1].id;
    // }
    if (compId !== this.store.currCompId) {
      this.store.setCurrComp(compId);
    }
  },
  // 切换到父组件
  pickParentComp(compId: string) {
    const parentComp = this.helper.findParentComp(compId);
    parentComp && this.store.setCurrComp(parentComp.id);
  },
  // 删除组件
  removeComp(compId: string) {
    if (this.helper.isCompCanDelete(compId)) {
      if (compId === this.store.currCompId) {
        this.store.setCurrComp("root");
      }
      this.store.deleteComp(compId);
    }
  },

  // 移动组件顺序
  moveComp(selIndex: number, targetIndex: number) {
    if (selIndex === targetIndex) return;
    this.store.moveComp(selIndex, targetIndex);
  },

  // 保存容器为组件
  async saveAsComp(comp: DesignComp) {
    try {
      // 组件封面
      const blob = await this.helper.screenshot({
        element: comp.$el,
      });
      const thumbnail = URL.createObjectURL(blob);
      const title = await queenApi.showInput({
        title: "保存到我的组件",
        defaultValue: this.controls.compUICtrl.state.components.get(
          comp.compKey
        )?.name,
      });
  
      const data = {
        title,
        thumbnail,
        compMap: cloneDeep(this.store.designData.compMap),
      };
      this.helper.clearUnusedComps(data.compMap, comp.id);
      data.compMap.root = data.compMap[comp.id];
      data.compMap.root.id = "root";
      delete data.compMap[comp.id];

      queenApi.showLoading("保存中");
      await this.controls.uploader.uploadBlobs(data);
      await this.https.createComp(data);
      queenApi.messageSuccess("保存成功");
    } catch (error: any) {
      throw Exception.error(error.toString());
    } finally {
      queenApi.hideLoading();
    }
  },

  // 保存项目
  async saveDesign() {
    try {
      // 清除无用组件
      this.helper.clearUnusedComps(this.store.designData.compMap);
      // 封面截屏
      if (!this.store.designData.thumbnail) {
        await this.actions.updateThumbnailByScreenshot();
      }
      queenApi.showLoading("保存中");
      await this.controls.uploader.uploadBlobs(this.store.designData);
      await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
        this.store.designData
      );
      queenApi.messageSuccess("保存成功");
    } catch (error: any) {
      throw Exception.error(error.toString());
    } finally {
      queenApi.hideLoading();
    }
  },

  // 截屏保存封面
  async updateThumbnailByScreenshot(autoSave?: boolean) {
    try {
      const rootComp = this.helper.findRootComp();
      if (!rootComp) return;
      queenApi.showLoading("截屏中");
      const blob = await this.helper.screenshot({
        element: rootComp.$el,
        ratio: this.store.isEditComp ? 0 : 1,
      });
      const thumbnail = URL.createObjectURL(blob);
      this.store.updateDesignThumbnail(thumbnail);

      if (autoSave) {
        await this.controls.uploader.uploadBlobs(this.store.designData);
        await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
          pick(this.store.designData, ["_id", "thumbnail"])
        );
        queenApi.messageSuccess("保存成功");
      }
    } catch (error: any) {
      throw Exception.error(error.toString());
    } finally {
      queenApi.hideLoading();
    }
  },

  // 设置组件变换
  setCompTransform(comp: DesignComp, transform: Layout["transform"]) {
    comp.layout.transform = transform;
    console.log(comp);
  },

  updateCompData(comp: DesignComp, path: string, value: any) {
    set(comp, path, value);
  },

  // 设置组件显示隐藏
  setCompPosition(comp: DesignComp) {
    comp.layout.position =
      comp.layout.position === "absolute" ? undefined : "absolute";
  },
  // 设置组件显示隐藏
  setCompVisible(comp: DesignComp) {
    comp.layout.visible = comp.layout.visible === false ? true : false;
  },
  // 清除组件变换
  clearCompTransform(comp: DesignComp) {
    comp.layout.margin = "";
    comp.layout.transform = undefined;
  },
  // 设置组件锁定状态
  setCompLock(comp: DesignComp) {
    console.log(comp);
  },
  // 设置组件层级
  setCompLayer(comp: DesignComp, offset: number) {
    comp.layout.zIndex = Math.min(
      Math.max((comp.layout.zIndex || 0) + offset, 0),
      99
    );
  },
  // 宽度铺满
  fullCompWidth(comp: DesignComp) {
    comp.layout.size || (comp.layout.size = []);
    comp.layout.size[0] = 750;
  },
  //
  setCompAlign(comp: DesignComp, align: string) {
    comp.layout.alignSelf = align;
    if (comp.layout.transform?.x) {
      comp.layout.transform.x = 0;
    }
  },
});