const cssMap = [
["width", "width"],
["min-width", "minWidth"],
["max-width", "maxWidth"],
["height", "height"],
["max-height", "maxHeight"],
["min-height", "minHeight"],
["display", "display"],
["flex-direction", "flexDirection"],
["justify-content", "justifyContent"],
["align-items", "alignItems"],
["gap", "gap"],
["flex-wrap", "flexWrap"],
["margin-top", "marginTop"],
["margin-right", "marginRight"],
["margin-bottom", "marginBottom"],
["margin-left", "marginLeft"],
["padding-top", "paddingTop"],
["padding-right", "paddingRight"],
["padding-bottom", "paddingBottom"],
["padding-left", "paddingLeft"],
["font-weight", "fontWeight"],
["font-size", "fontSize"],
["background", "background"],
["font-family", "fontFamily"],
["font-style", "fontStyle"],
["text-decoration", "textDecoration"],
["font-variant", "fontVariant"],
["border-width", "borderWidth"],
["border-style", "borderStyle"],
["border-color", "borderColor"],
["color", "color"],
];
export function generateCode({ tab, tree, dataMap, styleMap }) {
let cind = 0;
let css = `* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
`;
const work = (id, spacing) => {
cind++;
let html = "";
css += `${
dataMap[id].type === "root" ? "body" : "." + dataMap[id].name + "_" + cind
}{\n`;
cssMap.map(
([x, y]) => {
if(dataMap[id].type !== 'root' || (y !== 'width' && y!=='minWidth'))
css += styleMap[id][y] ? " "+x + ": " + styleMap[id][y] + `;\n` :'';
}
);
css+=`}\n`;
if (dataMap[id].type === "root") {
html = `${spacing}${tree[id].length ? "\n\n" : ""}`;
tree[id].map((tab) => {
html += work(tab, spacing + " ");
});
html += `${tree[id].length ? `\n${spacing}` : ""}\n`;
} else if (dataMap[id].type === "Block") {
html = `${spacing}${
tree[id].length ? "\n\n" : ""
}`;
tree[id].map((tab) => {
html += work(tab, spacing + " ");
});
html += `${tree[id].length ? `\n${spacing}` : ""}
\n`;
} else if (dataMap[id].type === "Row") {
html = `${spacing}${
tree[id].length ? "\n\n" : ""
}`;
tree[id].map((tab) => {
html += work(tab, spacing + " ");
});
html += `${tree[id].length ? `\n${spacing}` : ""}
\n`;
} else if (dataMap[id].type === "Heading") {
html = `${spacing}`;
html += `${dataMap[id].content}`;
html += `
\n`;
} else if (dataMap[id].type === "Text") {
html = `${spacing}`;
html += `${dataMap[id].content}`;
html += `
\n`;
} else if (dataMap[id].type === "Paragraph") {
html = `${spacing}`;
html += `${dataMap[id].content}`;
html += `
\n`;
} else if (dataMap[id].type === "Image") {
html = `${spacing}![${
dataMap[id].alt
}](${dataMap[id].src})
\n`;
} else if (dataMap[id].type === "Video") {
}
return html;
};
let html = `
${dataMap[tab].name}
`;
html += work(tab, "");
html += ``;
return { html, css };
}