refactor(web): improve state management

1 files changed, 35 insertions, 5 deletions

diff --git a/web/src/components/app/index.ts b/web/src/components/app/index.ts
index ec40754..195011f 100644
--- a/web/src/components/app/index.ts
+++ b/web/src/components/app/index.ts
@@ -1,14 +1,44 @@
-import ntvGrid from "../grid";
+import defaultDoc from "../../defaultDoc";
+import { Selection } from "../../selection";
+import { Doc } from "../../types";
+import ntvGrid, { NotiveGridElement } from "../grid";
+import renderGrid from "../grid/renderGrid";
 import ntvToolbar from "../toolbar";
 import "./index.css";
 
-class NotiveAppElement extends HTMLElement {
+export class NotiveAppElement extends HTMLElement {
+  doc: Doc = defaultDoc();
+  #selection?: Selection;
+
+  get selection() {
+    return this.#selection;
+  }
+
+  set selection(selection: Selection | undefined) {
+    this.#selection = selection;
+    this.#updateGridSelections();
+  }
+
+  #updateGridSelections() {
+    this.querySelectorAll<NotiveGridElement>("ntv-grid").forEach((grid) => {
+      grid.selection =
+        this.#selection?.gridId === grid.grid?.id ? this.#selection : undefined;
+    });
+  }
+
   connectedCallback() {
     this.append(
       ntvToolbar(),
-      ...window.notive.doc.grids.map((grid) => {
-        return ntvGrid({ gridId: grid.id });
-      }),
+
+      ...this.doc.grids.map((grid) =>
+        ntvGrid({
+          grid: renderGrid(grid),
+          dataset: { gridId: grid.id },
+          ongridselectionchange: (event) => {
+            this.selection = event.selection;
+          },
+        }),
+      ),
     );
   }
 }