1 files changed, 86 insertions, 9 deletions
diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts
index 6284693..01240b5 100644
--- a/web/src/components/grid/drawGrid.ts
+++ b/web/src/components/grid/drawGrid.ts
@@ -1,16 +1,21 @@
-import { RenderedGrid } from "./renderGrid";
-import colors from "open-color";
+import colors from "tailwindcss/colors";
+import { PendingSelection, Selection } from "../../selection";
+import { CellRef } from "../../types";
+import { RenderedCell, RenderedGrid } from "./renderGrid";
 
-export default function drawGrid(
-  ctx: CanvasRenderingContext2D,
-  grid: RenderedGrid,
-) {
+function fillBackground(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
   ctx.clearRect(0, 0, grid.rect.width, grid.rect.height);
-
-  ctx.fillStyle = colors.gray[8];
+  ctx.fillStyle = colors.neutral[800];
   ctx.fillRect(0, 0, grid.rect.width, grid.rect.height);
+}
+
+function strokeGrid(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
+  ctx.strokeStyle = colors.neutral[700];
+  ctx.strokeRect(0.5, 0.5, grid.rect.width - 1, grid.rect.height - 1);
+}
 
-  ctx.strokeStyle = colors.gray[7];
+function strokeGridLines(ctx: CanvasRenderingContext2D, grid: RenderedGrid) {
+  ctx.strokeStyle = colors.neutral[700];
 
   grid.renderedRows.forEach((row, renderedRowIndex) => {
     const isLastRow = renderedRowIndex === grid.renderedRows.length - 1;
@@ -28,3 +33,75 @@ export default function drawGrid(
     });
   });
 }
+
+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 drawPendingSelection(
+  ctx: CanvasRenderingContext2D,
+  grid: RenderedGrid,
+  selection: PendingSelection,
+) {}
+
+function drawSelection(
+  ctx: CanvasRenderingContext2D,
+  grid: RenderedGrid,
+  selection: Selection,
+) {
+  if (selection.gridId !== grid.id) return;
+
+  const cell = getRenderedCell(grid, selection.activeCellRef);
+
+  if (!cell) return;
+
+  const isLastCell = cell.rect.bottomRight.x === grid.rect.bottomRight.x;
+  const isLastRow = cell.rect.bottomRight.y === grid.rect.bottomRight.y;
+
+  // ctx.fillStyle = colors.green[4] + "30";
+
+  // ctx.fillRect(
+  //   cell.rect.topLeft.x + 1,
+  //   cell.rect.topLeft.y + 1,
+  //   cell.rect.width - 1,
+  //   cell.rect.height - 1,
+  // );
+
+  ctx.strokeStyle = colors.green[600];
+  ctx.lineWidth = 2;
+
+  ctx.strokeRect(
+    cell.rect.topLeft.x + 1,
+    cell.rect.topLeft.y + 1,
+    isLastCell ? cell.rect.width - 2 : cell.rect.width - 1,
+    isLastRow ? cell.rect.height - 2 : cell.rect.height - 1,
+  );
+}
+
+export default function drawGrid(
+  ctx: CanvasRenderingContext2D,
+  grid: RenderedGrid,
+  selection?: Selection,
+  pendingSelection?: PendingSelection,
+) {
+  const excursion = (f: () => void) => {
+    ctx.save();
+    f();
+    ctx.restore();
+  };
+
+  excursion(() => fillBackground(ctx, grid));
+  excursion(() => strokeGridLines(ctx, grid));
+  excursion(() => strokeGrid(ctx, grid));
+
+  if (pendingSelection) {
+    excursion(() => drawPendingSelection(ctx, grid, pendingSelection));
+  } else if (selection) {
+    excursion(() => drawSelection(ctx, grid, selection));
+  }
+}