feat(web): change subvisions

1 files changed, 45 insertions, 2 deletions

diff --git a/web/src/components/app/index.ts b/web/src/components/app/index.ts
index aa7c738..a2c0c9d 100644
--- a/web/src/components/app/index.ts
+++ b/web/src/components/app/index.ts
@@ -1,5 +1,10 @@
+import { produce } from "immer";
 import defaultDoc from "../../defaultDoc";
 import NotiveElement, { customElement } from "../../element";
+import {
+  changeSelectedSubdivisions,
+  getSelectedSubdivisionsCount,
+} from "../../grid";
 import { Doc } from "../../types";
 import ntvGrid, { NotiveGridElement } from "../grid";
 import renderGrid from "../grid/renderGrid";
@@ -15,9 +20,21 @@ export class NotiveAppElement extends NotiveElement {
   #selection?: GridSelection;
 
   setSelection(gridId: string, selection: GridSelection) {
+    const grid = this.doc.grids.find((grid) => grid.id === gridId);
+    if (!grid) throw new Error("Invalid grid ID");
+
     this.#selectedGridId = gridId;
     this.#selection = selection;
     this.#updateGridSelections();
+
+    this.#toolbar.subdivisions = getSelectedSubdivisionsCount(grid, selection);
+  }
+
+  clearSelection() {
+    this.#selectedGridId = undefined;
+    this.#selection = undefined;
+    this.#updateGridSelections();
+    this.#toolbar.subdivisions = undefined;
   }
 
   #updateGridSelections() {
@@ -27,10 +44,36 @@ export class NotiveAppElement extends NotiveElement {
     });
   }
 
+  #toolbar = ntvToolbar({
+    onsubdivisionschange: ({ subdivisions }) => {
+      if (!subdivisions) return;
+
+      const gridId = this.#selectedGridId;
+      const selection = this.#selection;
+
+      if (!gridId || !selection) return;
+
+      const gridIndex = this.doc.grids.findIndex((grid) => grid.id === gridId);
+
+      this.doc = produce(this.doc, (doc) => {
+        doc.grids[gridIndex] = changeSelectedSubdivisions(
+          this.doc.grids[gridIndex],
+          selection,
+          subdivisions,
+        );
+      });
+
+      this.querySelector<NotiveGridElement>(
+        `ntv-grid[data-grid-id="${gridId}"]`,
+      )!.grid = renderGrid(this.doc.grids[gridIndex]);
+
+      this.clearSelection();
+    },
+  });
+
   connectedCallback() {
     this.append(
-      ntvToolbar(),
-
+      this.#toolbar,
       ...this.doc.grids.map((grid) =>
         ntvGrid({
           grid: renderGrid(grid),