feat(web): add subdivideSelection method

1 files changed, 36 insertions, 3 deletions

diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index e672a48..666114b 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -33,7 +33,7 @@ class NotiveToolbarElement extends HTMLElement {
   connectedCallback() {
     this.#render();
 
-    window.addEventListener("ntv:selection-changed", () => {
+    window.addEventListener("ntv:selectionchange", () => {
       if (window.notive.pendingSelection) {
         this.#subdivisionsInputEl.disabled = true;
         this.#subdivisionsInputEl.value = "";
@@ -51,6 +51,12 @@ class NotiveToolbarElement extends HTMLElement {
       this.#subdivisionsInputEl.disabled = false;
       this.#subdivisionsInputEl.value = subdivisionsCount.toString();
     });
+
+    this.#subdivisionsInputEl.addEventListener("change", () => {
+      window.notive.subdivideSelection(
+        parseInt(this.#subdivisionsInputEl.value),
+      );
+    });
   }
 
   #render() {
@@ -61,9 +67,36 @@ class NotiveToolbarElement extends HTMLElement {
         h.button({ dataset: { variant: "menu" } }, "Format"),
       ),
       h.section(
-        h.button({ dataset: { variant: "icon" } }, "-"),
+        h.button(
+          {
+            dataset: { variant: "icon" },
+            onclick: () => {
+              const subdivisions = Math.max(
+                1,
+                parseInt(this.#subdivisionsInputEl.value) - 1,
+              );
+
+              this.#subdivisionsInputEl.value = subdivisions.toString();
+              window.notive.subdivideSelection(subdivisions);
+            },
+          },
+          "-",
+        ),
         this.#subdivisionsInputEl,
-        h.button({ dataset: { variant: "icon" } }, "+"),
+        h.button(
+          {
+            dataset: { variant: "icon" },
+
+            onclick: () => {
+              const subdivisions =
+                parseInt(this.#subdivisionsInputEl.value) + 1;
+
+              this.#subdivisionsInputEl.value = subdivisions.toString();
+              window.notive.subdivideSelection(subdivisions);
+            },
+          },
+          "+",
+        ),
       ),
     );
   }