gridCellNumbers static HTML

turned the createGridSection() function in style that created an HTML for the text labels in gridOverlay inside the JS with javascript dynamic to static HTML in index.html.

index.html

@@ -1114,6 +1114,13 @@
                   <input id="styleGridShiftY" type="number" data-tip="Shift by y axis in pixels" />
                 </td>
               </tr>
+
+              <tr data-tip="Show cell numbers on the grid">
+               <td colspan="2">
+                 <input id="gridCellNumbers" class="checkbox" type="checkbox" />
+                 <label for="gridCellNumbers" class="checkbox-label">Show cell numbers</label>
+               </td>
+              </tr>
             </tbody>
 
             <tbody id="styleCompass">

modules/ui/layers.js

@@ -1414,6 +1414,9 @@ function toggleGrid(event) {
     turnButtonOff("toggleGrid");
     gridOverlay.selectAll("*").remove();
   }
+
+  // Update the checkbox state when toggling the grid
+  document.getElementById("gridCellNumbers").checked = gridOverlay.attr("cell-numbers") === "true";
 }
 
 function drawGrid() {
@@ -1443,11 +1446,15 @@ function drawGrid() {
     .attr("height", maxHeight)
     .attr("fill", "url(" + pattern + ")")
     .attr("stroke", "none");
-  if (gridOverlay.attr("cell-numbers") === "true") {
-    drawCellNumbers();
-  }
+
+    // Check both the attribute and the checkbox state
+    if (gridOverlay.attr("cell-numbers") === "true" || document.getElementById("gridCellNumbers").checked) {
+      drawCellNumbers();
+    }
 }
 
+
+
 function drawCellNumbers() {
   const pattern = gridOverlay.attr("type") || "pointyHex";
   const scale = +gridOverlay.attr("scale") || 1;

modules/ui/style.js

@@ -70,31 +70,6 @@ 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);
 
@@ -567,7 +542,8 @@ styleGridNumbers.on("change", function () {
 
 byId("gridCellNumbers")?.addEventListener("change", function() {
   gridOverlay.attr("cell-numbers", this.checked);
-  drawGrid();
+  // drawGrid(); // without condition of if layerIsOn.
+  if (layerIsOn("toggleGrid")) drawGrid();
 });
 
 styleRescaleMarkers.on("change", function () {