gridOverlay cell numbers in overlay

- Numbered grid cells in gridOverlay.
- One label per "rect".
- Adjust to scale.

Pending
- Clipping land/water.
- Move labels.
- Labels only in a place

modules/ui/style.js

@@ -70,6 +70,31 @@ function getColorScheme(scheme = "bright") {
   return heightmapColorSchemes[scheme];
 }
 
+function createGridSection() {
+  const gridSection = byId("styleGrid");
+  if (!gridSection) return null;
+
+  // Verificar si el checkbox ya existe
+  if (byId("gridCellNumbers")) return;
+
+  const cellNumbersDiv = document.createElement("div");
+  cellNumbersDiv.className = "option";
+  
+  const checkbox = document.createElement("input");
+  checkbox.id = "gridCellNumbers";
+  checkbox.type = "checkbox";
+  
+  const label = document.createElement("label");
+  label.htmlFor = "gridCellNumbers";
+  label.textContent = "Show cell numbers";
+
+  cellNumbersDiv.appendChild(checkbox);
+  cellNumbersDiv.appendChild(label);
+  gridSection.appendChild(cellNumbersDiv);
+}
+
+document.addEventListener("DOMContentLoaded", createGridSection);
+
 // Toggle style sections on element select
 styleElementSelect.on("change", selectStyleElement);
 
@@ -191,12 +216,23 @@ function selectStyleElement() {
   }
 
   if (styleElement === "gridOverlay") {
+    const gridCellNumbers = byId("gridCellNumbers");
     styleGrid.style.display = "block";
     styleGridType.value = el.attr("type");
     styleGridScale.value = el.attr("scale") || 1;
     styleGridShiftX.value = el.attr("dx") || 0;
     styleGridShiftY.value = el.attr("dy") || 0;
     calculateFriendlyGridSize();
+  
+    if (gridCellNumbers) {
+      gridCellNumbers.checked = el.attr("cell-numbers") === "true";
+      gridCellNumbers.addEventListener("change", function() {
+        el.attr("cell-numbers", this.checked);
+        drawGrid();
+      });
+    } else {
+      console.warn("gridCellNumbers element not found");
+    }
   }
 
   if (styleElement === "compass") {
@@ -524,6 +560,16 @@ styleGridShiftY.on("input", function () {
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
+styleGridNumbers.on("change", function () {
+  getEl().attr("cell-numbers", this.checked);
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+byId("gridCellNumbers")?.addEventListener("change", function() {
+  gridOverlay.attr("cell-numbers", this.checked);
+  drawGrid();
+});
+
 styleRescaleMarkers.on("change", function () {
   markers.attr("rescale", +this.checked);
   invokeActiveZooming();