1 files changed, 144 insertions, 0 deletions
diff --git a/packages/web/src/components/grid/renderGrid.ts b/packages/web/src/components/grid/renderGrid.ts
new file mode 100644
index 0000000..89938ec
--- /dev/null
+++ b/packages/web/src/components/grid/renderGrid.ts
@@ -0,0 +1,144 @@
+import Ratio from "../../math/Ratio";
+import Rect from "../../math/Rect";
+import { Cell, CellRef, Grid, Row, RowRef } from "../../types";
+
+export interface RenderedCell extends Cell {
+  cellRef: CellRef;
+  renderedRowIndex: number;
+  rect: Rect;
+  startRatio: Ratio;
+  endRatio: Ratio;
+}
+
+export interface RenderedRow {
+  rowRef: RowRef;
+  rect: Rect;
+  renderedCells: RenderedCell[];
+}
+
+export interface RenderedGrid extends Grid {
+  rect: Rect;
+  renderedRows: RenderedRow[];
+}
+
+function renderCell(
+  grid: Grid,
+  cell: Cell,
+  cellRef: CellRef,
+  renderedRowIndex: number,
+  topLeftX: number,
+  topLeftY: number,
+  startRatio: Ratio,
+): RenderedCell {
+  const width = cell.widthRatio
+    .divideRatio(grid.baseCellWidthRatio)
+    .multiplyRatio(Ratio.fromInteger(grid.baseCellSize))
+    .toNumber();
+
+  const rect = new Rect(topLeftX, topLeftY, width, grid.baseCellSize);
+
+  const endRatio = startRatio.add(cell.widthRatio);
+
+  return { ...cell, cellRef, rect, renderedRowIndex, startRatio, endRatio };
+}
+
+function renderRow(
+  grid: Grid,
+  row: Row,
+  rowRef: RowRef,
+  renderedRowIndex: number,
+  topLeftY: number,
+): RenderedRow {
+  if (row.cells.length === 0) {
+    return {
+      ...row,
+      rowRef,
+      rect: new Rect(0, topLeftY, 0, 0),
+      renderedCells: [],
+    };
+  }
+
+  let topLeftX = 0;
+  let startRatio = Ratio.fromInteger(0);
+
+  const renderedCells = row.cells.map((cell, cellIndex) => {
+    const cellRef = { ...rowRef, cellIndex };
+
+    const renderedCell = renderCell(
+      grid,
+      cell,
+      cellRef,
+      renderedRowIndex,
+      topLeftX,
+      topLeftY,
+      startRatio,
+    );
+
+    topLeftX = renderedCell.rect.bottomRight.x;
+    startRatio = renderedCell.endRatio;
+
+    return renderedCell;
+  });
+
+  const { topLeft } = renderedCells[0].rect;
+  const { bottomRight } = renderedCells.at(-1)!.rect;
+
+  const rect = new Rect(
+    topLeft.x,
+    topLeft.y,
+    bottomRight.x - topLeft.x,
+    bottomRight.y - topLeft.y,
+  );
+
+  return { ...row, renderedCells, rect, rowRef };
+}
+
+function renderRows(grid: Grid): RenderedRow[] {
+  const renderedRows: RenderedRow[] = [];
+
+  let partIndex = 0;
+  let rowIndex = 0;
+  let topLeftY = 0;
+  let renderedRowIndex = 0;
+
+  while (true) {
+    if (!grid.parts[partIndex]?.rows[rowIndex]) break;
+
+    const row = grid.parts[partIndex].rows[rowIndex];
+    const rowRef = { partIndex, rowIndex };
+    const renderedRow = renderRow(
+      grid,
+      row,
+      rowRef,
+      renderedRowIndex,
+      topLeftY,
+    );
+
+    topLeftY = renderedRow.rect.bottomRight.y;
+    renderedRows.push(renderedRow);
+
+    if (!grid.parts[++partIndex]) {
+      partIndex = 0;
+      rowIndex++;
+    }
+
+    renderedRowIndex++;
+  }
+
+  return renderedRows;
+}
+
+export default function renderGrid(grid: Grid) {
+  const renderedRows = renderRows(grid);
+  const rect = renderedRows[0].rect.extend(renderedRows.at(-1)!.rect);
+  return { ...grid, rect, renderedRows };
+}
+
+export function getRenderedCell(
+  grid: RenderedGrid,
+  cellRef: CellRef,
+): RenderedCell | undefined {
+  const renderedRowIndex =
+    cellRef.rowIndex * grid.parts.length + cellRef.partIndex;
+  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
+}