src/utils/treeFunctions.js · DivBucket

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}<body>${tree[id].length ? "\n\n" : ""}`;
      tree[id].map((tab) => {
        html += work(tab, spacing + "         ");
      });
      html += `${tree[id].length ? `\n${spacing}` : ""}</body>\n`;
    } else if (dataMap[id].type === "Block") {
      html = `${spacing}<div class='${dataMap[id].name + "_" + cind}'>${
        tree[id].length ? "\n\n" : ""
      }`;
      tree[id].map((tab) => {
        html += work(tab, spacing + "         ");
      });
      html += `${tree[id].length ? `\n${spacing}` : ""}</div>\n`;
    } else if (dataMap[id].type === "Row") {
      html = `${spacing}<div class='${dataMap[id].name + "_" + cind}'>${
        tree[id].length ? "\n\n" : ""
      }`;
      tree[id].map((tab) => {
        html += work(tab, spacing + "         ");
      });
      html += `${tree[id].length ? `\n${spacing}` : ""}</div>\n`;
    } else if (dataMap[id].type === "Heading") {
      html = `${spacing}<div class='${dataMap[id].name + "_" + cind}'>`;
      html += `${dataMap[id].content}`;
      html += `</div>\n`;
    } else if (dataMap[id].type === "Text") {
      html = `${spacing}<div class='${dataMap[id].name + "_" + cind}'>`;
      html += `${dataMap[id].content}`;
      html += `</div>\n`;
    } else if (dataMap[id].type === "Paragraph") {
      html = `${spacing}<div class='${dataMap[id].name + "_" + cind}'>`;
      html += `${dataMap[id].content}`;
      html += `</div>\n`;
    } else if (dataMap[id].type === "Image") {
      html = `${spacing}<img class='${dataMap[id].name + "_" + cind}' alt='${
        dataMap[id].alt
      }' src='${dataMap[id].src}' />\n`;
    } else if (dataMap[id].type === "Video") {
    }

    return html;
  };

  let html = `<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>${dataMap[tab].name}</title>
</head>
`;
  html += work(tab, "");
  html += `</html>`;

  return { html, css };
}