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) {