backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-18 18:11:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

gridCellNumbers static HTML

Browse source 
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.
This commit is contained in:
Ángel Montero Lamas 2024-09-14 21:06:30 +02:00
parent b2ce493e40
commit a2e1004734
3 changed files with 19 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -1114,6 +1114,13 @@
<input id="styleGridShiftY" type="number" data-tip="Shift by y axis in pixels" /> <input id="styleGridShiftY" type="number" data-tip="Shift by y axis in pixels" />
</td> </td>
</tr> </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>
<tbody id="styleCompass"> <tbody id="styleCompass">

13
modules/ui/layers.js
View file

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

28
modules/ui/style.js
View file

@ -70,31 +70,6 @@ function getColorScheme(scheme = "bright") {
return heightmapColorSchemes[scheme]; 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 // Toggle style sections on element select
styleElementSelect.on("change", selectStyleElement); styleElementSelect.on("change", selectStyleElement);
@ -567,7 +542,8 @@ styleGridNumbers.on("change", function () {
byId("gridCellNumbers")?.addEventListener("change", function() { byId("gridCellNumbers")?.addEventListener("change", function() {
gridOverlay.attr("cell-numbers", this.checked); gridOverlay.attr("cell-numbers", this.checked);
drawGrid(); // drawGrid(); // without condition of if layerIsOn.
if (layerIsOn("toggleGrid")) drawGrid();
}); });
styleRescaleMarkers.on("change", function () { styleRescaleMarkers.on("change", function () {