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