From a2e10047342fb1e9d7a19e87165a230725a8481b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Montero=20Lamas?= <angel.montero1@gmail.com>
Date: Sat, 14 Sep 2024 21:06:30 +0200
Subject: [PATCH] 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           |  7 +++++++
 modules/ui/layers.js | 13 ++++++++++---
 modules/ui/style.js  | 28 ++--------------------------
 3 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index b3bdc0aa..2f66509f 100644
--- a/index.html
+++ b/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">
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index fbcf57b4..ebdb599c 100644
--- a/modules/ui/layers.js
+++ b/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;
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 765d2fe5..41e92602 100644
--- a/modules/ui/style.js
+++ b/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 () {