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

import { EditorModule } from "@/modules/editor/module";
import { Layout } from "@/modules/editor/typings";

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;
  } else if (layout.offset) {
    if (layout.offset.t) {
      style.marginTop = designToNaturalSize(layout.offset.t);
    }
    if (layout.offset.b) {
      style.marginBottom = designToNaturalSize(layout.offset.b);
    }
    if (layout.offset.x) {
      transform.translateX = designToNaturalSize(layout.offset.x);
    }
  }

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

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

  const styleTransform = parseTransform(transform);

  if (styleTransform) {
    style.transform = styleTransform;
  }

  return style;
}

function parseTransform(trans: any) {
  const transforms: string[] = [];
  Object.entries(trans).forEach(([key, value]) => {
    transforms.push(`${key}(${value})`);
  });
  return transforms.join(" ");
}