queenshow/src/modules/editor/module/helpers/index.ts

import { isPc } from "@queenjs/utils";
import { nanoid } from "nanoid";
import { EditorModule } from "..";
import { CompObject } from "../../controllers/SelectCtrl/compObj";
import { Matrix } from "../../controllers/SelectCtrl/matrix";
import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
import { Layout } from "../../typings";

export const helpers = EditorModule.helper({
  pxToDesignSize(value: number) {
    return value * Design_Pixel_Ratio;
  },
  designSizeToPx(value: number) {
    return value / Design_Pixel_Ratio;
  },
  designToNaturalSize(
    value: number,
    options?: { adaptiveH?: boolean }
  ): string {
    if (options?.adaptiveH && !isPc()) {
      value =
        value *
        ((window.innerHeight * Design_Pixel_Ratio) / Design_Page_Size[1]);
    }
    return this.helper.designSizeToPx(value) + "px";
  },

  findComp(compId: string) {
    const { compMap } = this.store.designData;
    const comp = compMap[compId];
    if (comp) return comp;
  },
  isStreamCard(compId: string) {
    return this.store.streamCardIds.indexOf(compId) > -1;
  },
  isGroupComp(compId: string) {
    return this.store.groupIds.indexOf(compId) > -1;
  },
  isGroupCompChild(compId: string) {
    const comps = this.helper.getCompTrees(compId);
    comps.pop();
    while (comps.length) {
      const comp = comps.pop() as DesignComp;
      if (comp.compKey === "Group") {
        return true;
      }
    }
    return false;
  },
  isStreamCardChild(compId: string) {
    if (compId == "root" || this.helper.isStreamCard(compId)) {
      return false;
    }
    const cards = this.store.streamCardIds;
    let n = cards.length;
    const compMap = this.store.designData.compMap;
    while (n--) {
      const childs = compMap[cards[n]].children.default || [];
      if (childs.indexOf(compId) > -1) return true;
    }
    return false;
  },

  findParentComp(compId: string): DesignComp | undefined {
    const comp = this.helper.findComp(compId);
    if (comp) return this.helper.findComp(this.store.compPids[compId]);
  },
  findRootComp(): DesignComp | undefined {
    return this.store.designData.compMap["root"];
  },

  findCardAllChildren(index:number) {
    const cardId = this.store.streamCardIds[index];
    return this.store.designData.compMap[cardId].children.default || [] as string[];
  },

  getCompCard(compId: string) {
    const paths: DesignComp[] = this.helper.getCompTrees(compId);
    return paths[1];
  },

  getCompWorlParentPos(compId: string, vx: number, vy: number) {
    const paths: DesignComp[] = this.helper.getCompTrees(compId);
    const m = new Matrix();
    let n = paths.length;
    let box = paths[1].$el.getBoundingClientRect();
    m.translate(box.left - vx, box.top - vy);
    for (let i = 2; i < n - 1; i++) {
      //card开始遍历
      const m1 = new Matrix();
      m1.setMatrixStr(paths[i].layout.transformMatrix || "matrix(1,0,0,1,0,0)");
      m.append(m1);
    }
    return m;
  },

  getCompTrees(compId: string) {
    const comps: DesignComp[] = [];
    const getParentComp = (compId: string) => {
      const comp = this.helper.findComp(compId);
      if (comp) {
        comps.unshift(comp);
        getParentComp(this.store.compPids[comp.id]);
      }
    };
    getParentComp(compId);
    return comps;
  },
  createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
    return createCompStyle(this, layout, comp);
  },
  isCurrComp(compId: string) {
    return this.store.currCompId === compId;
  },
  isCustomChildComp(comp: DesignComp): boolean {
    const parentComp = this.helper.findParentComp(comp.id);
    if (!parentComp) return false;
    const i =
      parentComp.children.default?.findIndex((d) => d === comp.id) ?? -1;
    return i >= 0;
  },
  isCompCanDelete(compId: string): boolean {
    return (
      this.helper.isStreamCardChild(compId) ||
      (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1)
    );
  },

  isShowSaveComp(comp: DesignComp): boolean {
    if (!this.helper.isStreamCardChild(comp.id)) return false;
    return true;
  },

  clearUnusedComps(compMap: Record<string, DesignComp>, rootId = "root") {
    const used = new Set<string>();
    const getUsedIds = (ids: string[]) => {
      ids.forEach((id) => {
        const comp = compMap[id];
        if (!comp) return;
        used.add(id);
        getUsedIds(comp.getChildIds());
      });
      return used;
    };
    getUsedIds([rootId]);
    Object.keys(compMap).forEach((compId) => {
      if (!used.has(compId)) {
        delete compMap[compId];
      }
    });
  },
  getPointOffsetWith(e: MouseEvent, dom: HTMLElement) {
    const domRect = dom.getBoundingClientRect();
    return {
      x: e.clientX - domRect.left,
      y: e.clientY - domRect.top,
    };
  },

  getCardCompBound(compId: string) {
    const compMap = this.store.designData.compMap;
    const c = compMap[compId];
    const obj = new CompObject(c);
    const bound = obj.getBox();

    return bound;
  },

  extendStreamCard(streamCardId: string) {
    if (!streamCardId) return;

    const compMap = this.store.designData.compMap;
    const card = compMap[streamCardId];
    const childs = card.children.default || [];
    let maxH = 0,
      n = childs.length;
    while (n--) {
      const c = childs[n];
      const aabb = this.helper.getCardCompBound(c);
      maxH = Math.max(maxH, aabb.y + aabb.h);
    }
    maxH = this.helper.pxToDesignSize(maxH);

    if (childs.length < 1) {
      maxH = 200;
    }
    card.setH(maxH);
  },

  getClientId() {
    let clientId = undefined;
    try {
      const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
      clientId = userInfo._id || localStorage.getItem("clientId");
    } catch (error) {
      console.error(error);
    }
    if (!clientId) {
      clientId = nanoid();
      localStorage.setItem("clientId", clientId);
    }
    return clientId;
  },
});