3 files changed, 71 insertions, 12 deletions

diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts
index 5ea17b6..1b94254 100644
--- a/web/src/components/grid/drawGrid.ts
+++ b/web/src/components/grid/drawGrid.ts
@@ -1,6 +1,6 @@
 import { RangeSelection, Selection } from "../../selection";
 import { CellRef } from "../../types";
-import { RenderedCell, RenderedGrid } from "./renderGrid";
+import { getRenderedCell, RenderedCell, RenderedGrid } from "./renderGrid";
 
 interface GridColors {
   bgFill: string;
@@ -74,15 +74,6 @@ function strokeGridLines(
   });
 }
 
-function getRenderedCell(
-  grid: RenderedGrid,
-  cellRef: CellRef,
-): RenderedCell | undefined {
-  const rowsPerPart = grid.renderedRows.length / grid.parts.length;
-  const renderedRowIndex = cellRef.partIndex * rowsPerPart + cellRef.rowIndex;
-  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
-}
-
 function strokeActiveCell(
   ctx: CanvasRenderingContext2D,
   colors: GridColors,
diff --git a/web/src/components/grid/renderGrid.ts b/web/src/components/grid/renderGrid.ts
index 7ef8813..e6a2c54 100644
--- a/web/src/components/grid/renderGrid.ts
+++ b/web/src/components/grid/renderGrid.ts
@@ -6,6 +6,8 @@ export interface RenderedCell extends Cell {
   cellRef: CellRef;
   renderedRowIndex: number;
   rect: Rect;
+  startRatio: Ratio;
+  endRatio: Ratio;
 }
 
 export interface RenderedRow {
@@ -26,6 +28,7 @@ function renderCell(
   renderedRowIndex: number,
   topLeftX: number,
   topLeftY: number,
+  startRatio: Ratio,
 ): RenderedCell {
   const width = cell.widthRatio
     .divideRatio(grid.baseCellWidthRatio)
@@ -34,7 +37,9 @@ function renderCell(
 
   const rect = new Rect(topLeftX, topLeftY, width, grid.baseCellSize);
 
-  return { ...cell, cellRef, rect, renderedRowIndex };
+  const endRatio = startRatio.add(cell.widthRatio);
+
+  return { ...cell, cellRef, rect, renderedRowIndex, startRatio, endRatio };
 }
 
 function renderRow(
@@ -54,6 +59,7 @@ function renderRow(
   }
 
   let topLeftX = 0;
+  let startRatio = Ratio.fromInteger(0);
 
   const renderedCells = row.cells.map((cell, cellIndex) => {
     const cellRef = { ...rowRef, cellIndex };
@@ -65,9 +71,11 @@ function renderRow(
       renderedRowIndex,
       topLeftX,
       topLeftY,
+      startRatio,
     );
 
     topLeftX = renderedCell.rect.bottomRight.x;
+    startRatio = renderedCell.endRatio;
 
     return renderedCell;
   });
@@ -125,3 +133,12 @@ export default function renderGrid(grid: Grid) {
   const rect = renderedRows[0].rect.extend(renderedRows.at(-1)!.rect);
   return { ...grid, rect, renderedRows };
 }
+
+export function getRenderedCell(
+  grid: RenderedGrid,
+  cellRef: CellRef,
+): RenderedCell | undefined {
+  const rowsPerPart = grid.renderedRows.length / grid.parts.length;
+  const renderedRowIndex = cellRef.partIndex * rowsPerPart + cellRef.rowIndex;
+  return grid.renderedRows[renderedRowIndex]?.renderedCells[cellRef.cellIndex];
+}
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" } }, "+"),
       ),
     );