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";

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;
  }

  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, sizeOpts] = layout.size;
    if (w) {
      style.width = designToNaturalSize(w);
    }
    if (h) {
      style.height = designToNaturalSize(h, {
        adaptiveH: sizeOpts?.unit === "%",
      });
    }
  }

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

  if (layout.transformMatrix) {
    const m = Matrix.createFromMatrixStr(layout.transformMatrix);
    // m.ty = parseFloat(
    //   designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
    // );
    style.transform = m.getMatrixStr(); //layout.transformMatrix;
    style.transformOrigin = "0 0";
  } else {
    const v = parseTransform(transform);
    if (v) style.transform = v;
  }

  if (layout.background) {
    if (layout.background.color) {
      style.background = formatColor(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;
}