refactor(web): move selection code

1 files changed, 10 insertions, 113 deletions

diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index 84f6a65..da4b69d 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -1,131 +1,28 @@
 import NotiveElement, { customElement } from "../../element";
-import h, { CreateElement } from "../../html";
-import { ActiveCellSelection, RangeSelection } from "../../selection";
+import h, { fragment } from "../../html";
 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));
-}
-
 @customElement("ntv-toolbar")
 class NotiveToolbarElement extends NotiveElement {
+  connectedCallback() {
+    this.append(this.#view());
+  }
+
   #subdivisionsInputEl: HTMLInputElement = h.input({
     title: "Subdivisions",
-    placeholder: "-",
     disabled: true,
   });
 
-  connectedCallback() {
-    this.#render();
-
-    window.addEventListener("ntv:selectionchange", () => {
-      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();
-    });
-
-    this.#subdivisionsInputEl.addEventListener("change", () => {
-      window.notive.subdivideSelection(
-        parseInt(this.#subdivisionsInputEl.value),
-      );
-    });
-  }
-
-  #render() {
-    this.append(
+  #view() {
+    return fragment(
       h.section(
-        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);
-            },
-          },
-          "-",
-        ),
+        h.button({ dataset: { icon: "" } }, "-"),
         this.#subdivisionsInputEl,
-        h.button(
-          {
-            dataset: { variant: "icon" },
-
-            onclick: () => {
-              const subdivisions =
-                parseInt(this.#subdivisionsInputEl.value) + 1;
-
-              this.#subdivisionsInputEl.value = subdivisions.toString();
-              window.notive.subdivideSelection(subdivisions);
-            },
-          },
-          "+",
-        ),
-      ),
-      h.section(
-        h.button(
-          {
-            dataset: { variant: "menu" },
-            onclick: () => {
-              this.#play();
-            },
-          },
-          "Play",
-        ),
+        h.button({ dataset: { icon: "" } }, "+"),
       ),
+      h.section(h.button("Play")),
     );
   }
-
-  async #play() {
-    const Tone = await import("tone");
-    await Tone.start();
-    const transport = Tone.getTransport();
-    transport.stop();
-    transport.position = 0;
-    transport.cancel();
-    const synth = new Tone.Synth().toDestination();
-    const seq = new Tone.Sequence(
-      (time, note) => {
-        synth.triggerAttackRelease(note, 0.1, time);
-      },
-      ["C4", "D4", "E4"],
-      "1m",
-    ).start(0);
-    seq.loop = false;
-    transport.start();
-  }
 }
 
 export default NotiveToolbarElement.makeFactory();