feat(web): show selected subdivisions

1 files changed, 52 insertions, 1 deletions

diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index d844a69..e672a48 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -1,8 +1,59 @@
 import h, { CreateElement } from "../../html";
+import { ActiveCellSelection, RangeSelection } from "../../selection";
+import { RenderedGrid } from "../grid/renderGrid";
 import "./index.css";
 
+function getSelectedSubdivisionsCount(): number | undefined {
+  const selection = window.notive.selection;
+
+  if (!selection) return;
+
+  if (selection instanceof ActiveCellSelection) {
+    return 1;
+  }
+
+  if (!(selection instanceof RangeSelection)) return;
+
+  const grid = window.notive.getGrid(selection.gridId);
+
+  if (!grid) return;
+
+  const selectedCells = selection.getSelectedCells(grid);
+
+  return Math.min(...selectedCells.map((cells) => cells.length));
+}
+
 class NotiveToolbarElement extends HTMLElement {
+  #subdivisionsInputEl: HTMLInputElement = h.input({
+    title: "Subdivisions",
+    placeholder: "-",
+    disabled: true,
+  });
+
   connectedCallback() {
+    this.#render();
+
+    window.addEventListener("ntv:selection-changed", () => {
+      if (window.notive.pendingSelection) {
+        this.#subdivisionsInputEl.disabled = true;
+        this.#subdivisionsInputEl.value = "";
+        return;
+      }
+
+      const subdivisionsCount = getSelectedSubdivisionsCount();
+
+      if (!subdivisionsCount) {
+        this.#subdivisionsInputEl.disabled = true;
+        this.#subdivisionsInputEl.value = "";
+        return;
+      }
+
+      this.#subdivisionsInputEl.disabled = false;
+      this.#subdivisionsInputEl.value = subdivisionsCount.toString();
+    });
+  }
+
+  #render() {
     this.append(
       h.section(
         h.button({ dataset: { variant: "menu" } }, "File"),
@@ -11,7 +62,7 @@ class NotiveToolbarElement extends HTMLElement {
       ),
       h.section(
         h.button({ dataset: { variant: "icon" } }, "-"),
-        h.input({ type: "text", value: "1" }),
+        this.#subdivisionsInputEl,
         h.button({ dataset: { variant: "icon" } }, "+"),
       ),
     );