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

import { formatColor } from "@/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList";
import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
import { EditorModule } from "@/modules/editor/module";
import { Layout } from "@/modules/editor/typings";
import { DesignComp } from "../DesignComp";
import { compMasks } from "./CompMasks";
import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";

const UnitAngle = 180.0 / Math.PI;

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

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

  if (layout.opacity !== undefined) {
    style["opacity"] = layout.opacity;
  }

  if (layout.border) {
    if (layout.border.style) {
      style["border-style"] = layout.border.style;
    }
    style["border-width"] = (layout.border.width || 0) + "px";
    style["border-color"] = layout.border.color || "#000";

    if (layout.border.radius) {
      style["border-radius"] = layout.border.radius / 2 + "%";
      style["overflow"] = "hidden";
    }
    if (layout.border.radius2 !== undefined) {
      style["border-radius"] =
        (designSizeToPx(Math.min(layout.size[0], layout.size[1])) *
          layout.border.radius2) /
          100.0 +
        "px";
      style["overflow"] = "hidden";
    }
  }

  if (layout.radius !== undefined) {
    style["border-radius"] = layout.radius / 2 + "%";
    style["overflow"] = "hidden";
  }

  if (layout.locked === true) {
    style["pointer-events"] = "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;
  }

  const [w, h, sizeOpts] = layout.size;

  style.width = designToNaturalSize(w);
  style.height = designToNaturalSize(h, {
    adaptiveH: sizeOpts?.unit === "%",
  });

  if (layout.transformMatrix) {
    //样式的scale转 width
    const m = Matrix.createFromMatrixStr(layout.transformMatrix);
    const t = new Transform();
    t.setFromMatrix(m);
    const [w, h, sizeOpts] = layout.size;
    style.width = designToNaturalSize(w * t.scale.x);
    style.height = designToNaturalSize(h * t.scale.y, {
      adaptiveH: sizeOpts?.unit === "%",
    });

    style.left = t.position.x + "px";
    style.top = t.position.y + "px";
    style.transform = `rotate(${t.rotation * UnitAngle}deg)`;
    style.transformOrigin = "0 0";
  }

  if (layout.background) {
    if (layout.background.color) {
      style.background = formatColor(layout.background.color);
    }
  }
  if (comp.compKey !== "Page") {
    style.position = "absolute";
  }
  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;
}