1 files changed, 31 insertions, 5 deletions
diff --git a/web/src/components/grid/index.ts b/web/src/components/grid/index.ts
index 829a511..0acace4 100644
--- a/web/src/components/grid/index.ts
+++ b/web/src/components/grid/index.ts
@@ -1,5 +1,5 @@
 import h, { type CreateElement } from "../../html";
-import renderGrid from "./renderGrid";
+import cellAtCoord from "./cellAtCoord";
 import drawGrid from "./drawGrid";
 import "./index.css";
 
@@ -15,6 +15,10 @@ class NotiveGridElement extends HTMLElement {
     this.setAttribute("grid-id", val);
   }
 
+  get renderedGrid() {
+    return window.notive.getGrid(this.#gridId)!;
+  }
+
   canvasEl: HTMLCanvasElement = h.canvas();
 
   connectedCallback() {
@@ -22,19 +26,41 @@ class NotiveGridElement extends HTMLElement {
       throw new Error("ntv-grid requries gridId attribute");
     }
 
+    this.canvasEl.addEventListener("mousedown", (event) => {
+      const clientRect = this.canvasEl.getBoundingClientRect();
+      const x = event.x - clientRect.x;
+      const y = event.y - clientRect.y;
+      const cellRef = cellAtCoord(this.renderedGrid, x, y);
+      if (!cellRef) return;
+      window.notive.selectCell(this.#gridId, cellRef);
+    });
+
+    window.addEventListener("ntv:selection-changed", () => {
+      this.draw();
+    });
+
     this.append(this.canvasEl);
     this.draw();
   }
 
   draw() {
     const ctx = this.canvasEl.getContext("2d");
+
     if (!ctx) throw new Error("Unable to get canvas context");
+
     const grid = window.notive.getGrid(this.gridId);
+
     if (!grid) return;
-    const renderedGrid = renderGrid(grid);
-    this.canvasEl.setAttribute("width", renderedGrid.rect.width + "px");
-    this.canvasEl.setAttribute("height", renderedGrid.rect.height + "px");
-    drawGrid(ctx, renderedGrid);
+
+    this.canvasEl.setAttribute("width", grid.rect.width + "px");
+    this.canvasEl.setAttribute("height", grid.rect.height + "px");
+
+    drawGrid(
+      ctx,
+      grid,
+      window.notive.selection,
+      window.notive.pendingSelection,
+    );
   }
 }