feat(web): show selected subdivisions

2 files changed, 19 insertions, 11 deletions

diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts
index 5ea17b6..1b94254 100644
--- a/web/src/components/grid/drawGrid.ts
+++ b/web/src/components/grid/drawGrid.ts
@@ -1,6 +1,6 @@
 import { RangeSelection, Selection } from "../../selection";
 import { CellRef } from "../../types";
-import { RenderedCell, RenderedGrid } from "./renderGrid";
+import { getRenderedCell, RenderedCell, RenderedGrid } from "./renderGrid";
 
 interface GridColors {
   bgFill: string;
@@ -74,15 +74,6 @@ function strokeGridLines(
   });
 }
 
-function getRenderedCell(
-  grid: RenderedGrid,
-  cellRef: CellRef,
-): RenderedCell | undefined {
-  const rowsPerPart = grid.renderedRows.length / grid.parts.length;
-  const renderedRowIndex = cellRef.partIndex * rowsPerPart + cellRef.rowIndex;
-  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
-}
-
 function strokeActiveCell(
   ctx: CanvasRenderingContext2D,
   colors: GridColors,
diff --git a/web/src/components/grid/renderGrid.ts b/web/src/components/grid/renderGrid.ts
index 7ef8813..e6a2c54 100644
--- a/web/src/components/grid/renderGrid.ts
+++ b/web/src/components/grid/renderGrid.ts
@@ -6,6 +6,8 @@ export interface RenderedCell extends Cell {
   cellRef: CellRef;
   renderedRowIndex: number;
   rect: Rect;
+  startRatio: Ratio;
+  endRatio: Ratio;
 }
 
 export interface RenderedRow {
@@ -26,6 +28,7 @@ function renderCell(
   renderedRowIndex: number,
   topLeftX: number,
   topLeftY: number,
+  startRatio: Ratio,
 ): RenderedCell {
   const width = cell.widthRatio
     .divideRatio(grid.baseCellWidthRatio)
@@ -34,7 +37,9 @@ function renderCell(
 
   const rect = new Rect(topLeftX, topLeftY, width, grid.baseCellSize);
 
-  return { ...cell, cellRef, rect, renderedRowIndex };
+  const endRatio = startRatio.add(cell.widthRatio);
+
+  return { ...cell, cellRef, rect, renderedRowIndex, startRatio, endRatio };
 }
 
 function renderRow(
@@ -54,6 +59,7 @@ function renderRow(
   }
 
   let topLeftX = 0;
+  let startRatio = Ratio.fromInteger(0);
 
   const renderedCells = row.cells.map((cell, cellIndex) => {
     const cellRef = { ...rowRef, cellIndex };
@@ -65,9 +71,11 @@ function renderRow(
       renderedRowIndex,
       topLeftX,
       topLeftY,
+      startRatio,
     );
 
     topLeftX = renderedCell.rect.bottomRight.x;
+    startRatio = renderedCell.endRatio;
 
     return renderedCell;
   });
@@ -125,3 +133,12 @@ export default function renderGrid(grid: 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 rowsPerPart = grid.renderedRows.length / grid.parts.length;
+  const renderedRowIndex = cellRef.partIndex * rowsPerPart + cellRef.rowIndex;
+  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
+}