queenshow/src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

import { EditorModule } from "@/modules/editor/module";
import { Layout } from "@/modules/editor/typings";
import { compMasks } from "./CompMasks";
import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";

export function createCompStyle(module: EditorModule, layout: Layout) {
  const { designToNaturalSize } = module.helper;
  const style: any = {};
  const transform: any = {};

  // if (layout.alignSelf) {
  //   style.alignSelf = layout.alignSelf;
  // }
  if (layout.visible === false) {
    style.display = "none";
  }

  if (layout.zIndex) {
    style["zIndex"] = layout.zIndex;
  }

  // if (layout.margin) {
  //   style.margin = layout.margin;
  // }

  if (layout.padding) {
    style.padding = layout.padding;
  }

  if (layout.mask) {
    style.clipPath = compMasks[layout.mask]?.value || layout.mask;
  }

  if (layout.transform) {
    if (layout.transform.x) {
      transform.translateX = designToNaturalSize(layout.transform.x);
    }
    if (layout.transform.y) {
      transform.translateY = designToNaturalSize(layout.transform.y);
    }
    if (layout.transform.r) {
      transform.rotate = layout.transform.r + "deg";
    }
    if (layout.transform.s) {
      transform.scale = layout.transform.s;
    }
  }

  if (layout.size) {
    const [w, h] = layout.size;
    if (w) style.width = designToNaturalSize(w);
    if (h) style.height = designToNaturalSize(h);
  }

  if (layout.position) {
    style.position = layout.position;
  }

  if (layout.transformMatrix) {
    style.transform = layout.transformMatrix;
  } else {
    //转换成matrix形式
    const m = new Matrix();
    const transform = layout.transform;
    if (transform) {
      m.translate(transform.x || 0, transform.y || 0);
      if (transform.s != undefined) {
        m.scale(transform.s, transform.s);
      }
      if (transform.r != undefined) {
        m.rotateDeg(transform.r);
      }
    }
    style.transform = m.getMatrixStr();
    // const s = 
    // style.transform = parseTransform(transform);
  }
  style.transformOrigin = "0 0";
  
  if (layout.background) {
    if (layout.background.color) {
      style.backgroundColor = layout.background.color;
    }
  }
  return style;
}

export function parseTransform(trans: any) {
  let transform = "";

  if (trans.translateX || trans.translateY) {
    transform = `translate(${trans.translateX || 0}, ${trans.translateY || 0})`;
  }
  if (trans.scale) {
    transform += ` scale(${trans.scale})`;
  }
  if (trans.rotate) {
    transform += ` rotate(${trans.rotate})`;
  }
  return transform;
}