1 files changed, 49 insertions, 18 deletions

diff --git a/web/src/index.ts b/web/src/index.ts
index ac4870c..6ab61c9 100644
--- a/web/src/index.ts
+++ b/web/src/index.ts
@@ -1,7 +1,8 @@
 import Ratio from "./math/Ratio";
 import { Cell, CellRef, Doc, Grid } from "./types";
-import { ActiveCellSelection, PendingSelection, Selection } from "./selection";
+import { ActiveCellSelection, Selection } from "./selection";
 import renderGrid, { RenderedGrid } from "./components/grid/renderGrid";
+import cellAtCoord from "./components/grid/cellAtCoord";
 
 function defaultDoc(): Doc {
   const defaultCells: Cell[] = Array.from({ length: 16 }, () => ({
@@ -12,7 +13,7 @@ function defaultDoc(): Doc {
     grids: [
       {
         id: window.crypto.randomUUID(),
-        baseCellSize: 48,
+        baseCellSize: 42,
         baseCellWidthRatio: new Ratio(1, 16),
         parts: [
           {
@@ -24,7 +25,7 @@ function defaultDoc(): Doc {
       },
       {
         id: window.crypto.randomUUID(),
-        baseCellSize: 48,
+        baseCellSize: 42,
         baseCellWidthRatio: new Ratio(1, 16),
         parts: [
           {
@@ -39,29 +40,59 @@ function defaultDoc(): Doc {
 }
 
 export default class Notive {
-  doc: Doc = defaultDoc();
+  #doc: Doc = defaultDoc();
 
-  gridsById = Object.fromEntries(
-    this.doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
+  get doc() {
+    return this.#doc;
+  }
+
+  #gridsById = Object.fromEntries(
+    this.#doc.grids.map((grid) => [grid.id, renderGrid(grid)]),
   );
 
-  selection?: Selection;
+  getGrid(id: string): RenderedGrid | undefined {
+    return this.#gridsById[id];
+  }
 
-  pendingSelection?: Selection;
+  #selection?: Selection;
 
-  getGrid(id: string): RenderedGrid | undefined {
-    return this.gridsById[id];
+  get selection() {
+    return this.#selection;
+  }
+
+  #pendingSelection?: Selection;
+
+  get pendingSelection() {
+    return this.#pendingSelection;
   }
 
   selectCell(gridId: string, cellRef: CellRef) {
-    const previousSelection = this.selection;
-    this.selection = new ActiveCellSelection(gridId, cellRef);
-
-    window.dispatchEvent(
-      new CustomEvent("ntv:selection-changed", {
-        detail: { selection: this.selection, previousSelection },
-      }),
-    );
+    this.#selection = new ActiveCellSelection(gridId, cellRef);
+    this.#dispatchSelectionChanged();
+  }
+
+  startSelecting(gridId: string, cellRef: CellRef) {
+    this.#pendingSelection = new ActiveCellSelection(gridId, cellRef);
+    this.#dispatchSelectionChanged();
+  }
+
+  extendSelection(cellRef: CellRef) {
+    const newSelection = this.pendingSelection?.extend(cellRef);
+
+    if (newSelection !== this.pendingSelection) {
+      this.#pendingSelection = newSelection;
+      this.#dispatchSelectionChanged();
+    }
+  }
+
+  finishSelecting() {
+    this.#selection = this.pendingSelection;
+    this.#pendingSelection = undefined;
+    this.#dispatchSelectionChanged();
+  }
+
+  #dispatchSelectionChanged() {
+    window.dispatchEvent(new CustomEvent("ntv:selection-changed"));
   }
 }