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/layers.js

@@ -1443,6 +1443,43 @@ function drawGrid() {
     .attr("height", maxHeight)
     .attr("fill", "url(" + pattern + ")")
     .attr("stroke", "none");
+  if (gridOverlay.attr("cell-numbers") === "true") {
+    drawCellNumbers();
+  }
+}
+
+function drawCellNumbers() {
+  const pattern = gridOverlay.attr("type") || "pointyHex";
+  const scale = +gridOverlay.attr("scale") || 1;
+  const dx = +gridOverlay.attr("dx") || 0;
+  const dy = +gridOverlay.attr("dy") || 0;
+
+  const patternElement = document.getElementById("pattern_" + pattern);
+  const patternWidth = +patternElement.getAttribute("width") * scale;
+  const patternHeight = +patternElement.getAttribute("height") * scale;
+
+  const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
+  const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
+
+  const columns = Math.ceil(maxWidth / patternWidth);
+  const rows = Math.ceil(maxHeight / patternHeight);
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < columns; col++) {
+      const x = col * patternWidth + dx;
+      const y = row * patternHeight + dy;
+      const cellNumber = row * columns + col + 1;
+
+      gridOverlay
+        .append("text")
+        .attr("x", x + patternWidth / 2)
+        .attr("y", y + patternHeight / 2)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("font-size", Math.min(patternWidth, patternHeight) / 4)
+        .text(cellNumber);
+    }
+  }
 }
 
 function toggleCoordinates(event) {

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();