@publidata/utils-svg/src/generator/iconBlockRenderer.js

Collection of methods to handle svg files and src

import {
  getBgXoffset,
  getIconTransform,
} from "../utils/transforms";
import {
  addWidthAndHeightToSvg,
  replaceSvgColor
} from "../utils/helpers";
import { BORDER } from "../utils/constants";


/**
 * 
 * @param {object} params - object containing x, y, path, and fill properties
 * @param {number} params.x - x-coordinate for the block
 * @param {number} params.y - y-coordinate for the block
 * @param {string} params.path - SVG path data for the block
 * @param {string} params.fill - fill color for the block
 * @returns {string} - SVG html template for the background block
 */
export const renderBackGroundBlock = ({ x, y, path, fill }) => `
<g transform="translate(${x} ${y})">
    <path d="${path}" fill="${fill}" fill-opacity="1"/>
</g>
`;

/**
 * 
 * @param {object} param - object containing icon and position properties 
 * @param {object} param.icon - icon object containing svg, color, and viewbox properties
 * @param {number} param.position - position of the icon in the flow
 * @returns {string} - SVG html template for the icon block
 */
export const renderIconBlock = ({ icon, position }) => {
  const transformValues = getIconTransform(position, icon);
  const { svg, color, viewbox } = icon;
  const cleanedSvg = replaceSvgColor(svg, color);

  return `
  <g fill="${color}" transform="translate(${transformValues})">
    ${addWidthAndHeightToSvg(cleanedSvg, viewbox.w, viewbox.h)}
  </g>
  `;
};

const startPath =
  "M0 548.625C0 245.628 245.777 0 548.958 0H850V1097.25H548.958C245.777 1097.25 0 851.622 0 548.625Z";
const endPath =
  "M0 0H301.044C604.22 0 850 245.628 850 548.625C850 851.622 604.22 1097.25 301.044 1097.25H0V0Z";

/**
 * 
 * @param {object} start - start icon object containing svg, color, and viewbox properties
 * @returns {string} - SVG html template for the start icon block
 */
export const getStartTemplate = start => `
${renderBackGroundBlock({
  x: BORDER,
  y: BORDER,
  path: startPath,
  fill: start.bgColor
})}
${renderIconBlock({ icon: start, position: 1 })}
`;

/**
 * 
 * @param {object} end - end icon object containing svg, color, and viewbox properties
 * @param {number} iconsLength - total number of icons in the flow
 * @returns {string} - SVG html template for the end icon block
 */
export const getEndTemplate = (end, iconsLength) => `
${renderBackGroundBlock({
  x: getBgXoffset(iconsLength - 1),
  y: BORDER,
  path: endPath,
  fill: end[0].bgColor
})}
${renderIconBlock({ icon: end[0], position: iconsLength })}
`;

/**
 * 
 * @param {object} body - array of icon objects containing svg, color, and viewbox properties 
 * @returns {string} - SVG html template for the body of the flow
 */
export const getBodyTemplate = body => {
  if (!body || body.length === 0) return "";
  return body
    .map(
      (icon, index) =>
        `<rect width="850" height="1097.25" transform="translate(${getBgXoffset(
          index + 1
        )} 70)" fill="${icon.bgColor}" fill-opacity="1"/>
    ${renderIconBlock({ icon, position: index + 2 })}
    `
    )
    .join("");
};