grid tiles sketch code

grid.js

export function pluginGrid(fn) {
  return (props) => {
    const { context, width, height, data = {} } = props;
    const { background = "white" } = data;
    const cells = gridTiles(width, height, data).map((tile) => {
      context.save();
      context.translate(tile.x, tile.y);
      const cellProps = {
        width: tile.width,
        height: tile.height,
        data: {
          ...data,
          tile,
        },
      };
      const sketch = fn({
        ...props,
        ...cellProps,
      });
      context.restore();
      return {
        tile,
        sketch,
        props: cellProps,
      };
    });

    return (props) => {
      const { context, width, height } = props;

      if (background) {
        context.fillStyle = colorToStyle(background);
        context.fillRect(0, 0, width, height);
      }

      for (let cell of cells) {
        context.save();
        context.translate(cell.tile.x, cell.tile.y);
        cell.sketch({ ...props, ...cell.props });
        context.restore();
      }
    };
  };
}

export function gridTiles(width, height, opt = {}) {
  let {
    rows = 2,
    columns = 2,
    margin = width * 0.1,
    tilePadding = (width * 0.05) / 2,
    verticalAlign = "center",
    horizontalAlign = "center",
    offset = [0, 0],
    squareTiles = true,
  } = opt;

  if (typeof opt.margin === "function") margin = opt.margin({ width, height });
  if (typeof opt.tilePadding === "function")
    tilePadding = opt.tilePadding({ width, height });

  const innerWidth = width - margin * 2;
  const innerHeight = height - margin * 2;

  let tileWidth, tileHeight;
  tileWidth = (innerWidth - tilePadding * (columns - 1)) / columns;
  tileHeight = (innerHeight - tilePadding * (rows - 1)) / rows;
  if (squareTiles) {
    const sq = Math.min(tileWidth, tileHeight);
    tileWidth = tileHeight = sq;
  }

  const boundsWidth = tileWidth * columns + tilePadding * (columns - 1);
  const boundsHeight = tileHeight * rows + tilePadding * (rows - 1);

  const tiles = [];
  for (let row = 0, index = 0; row < rows; row++) {
    for (let column = 0; column < columns; column++, index++) {
      let ox, oy;

      if (horizontalAlign === "left") ox = margin;
      else if (horizontalAlign === "right") ox = width - margin - boundsWidth;
      else ox = (width - boundsWidth) / 2;

      if (verticalAlign === "top") oy = margin;
      else if (verticalAlign === "bottom") oy = height - margin - boundsHeight;
      else oy = (height - boundsHeight) / 2;

      ox += (offset[0] * width) / 2;
      oy += (offset[1] * height) / 2;

      const px = ox + column * (tileWidth + tilePadding);
      const py = oy + row * (tileHeight + tilePadding);
      tiles.push({
        index,
        row,
        column,
        x: px,
        y: py,
        width: tileWidth,
        height: tileHeight,
        surfaceWidth: width,
        surfaceHeight: height,
      });
    }
  }
  return tiles;
}