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

EDIT style text label stroke color

Browse source
This commit is contained in:
Ángel Montero Lamas 2024-09-14 21:55:40 +02:00
parent a2e1004734
commit 7ff5d1053f
3 changed files with 26 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -1121,6 +1121,13 @@
<label for="gridCellNumbers" class="checkbox-label">Show cell numbers</label>
</td>
</tr>
<tr data-tip="Set the color of grid cell numbers">
<td>Cell num color</td>
<td>
<input id="gridCellNumbersStrokeColor" type="color" value="#000000" />
</td>
</tr>
</tbody>
<tbody id="styleCompass">

7
modules/ui/layers.js
View file

@ -1447,14 +1447,11 @@ function drawGrid() {
.attr("fill", "url(" + pattern + ")")
.attr("stroke", "none");
// 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;
@ -1471,6 +1468,8 @@ function drawCellNumbers() {
const columns = Math.ceil(maxWidth / patternWidth);
const rows = Math.ceil(maxHeight / patternHeight);
const labelStyle = gridOverlay.attr("data-label-style") || "stroke: #000000;";
for (let row = 0; row < rows; row++) {
for (let col = 0; col < columns; col++) {
const x = col * patternWidth + dx;
@ -1484,6 +1483,8 @@ function drawCellNumbers() {
.attr("text-anchor", "middle")
.attr("dominant-baseline", "central")
.attr("font-size", Math.min(patternWidth, patternHeight) / 4)
.attr("fill", "none") // Set fill to none so only stroke is visible
.attr("style", labelStyle)
.text(cellNumber);
}
}

16
modules/ui/style.js
View file

@ -201,6 +201,8 @@ function selectStyleElement() {
if (gridCellNumbers) {
gridCellNumbers.checked = el.attr("cell-numbers") === "true";
styleStroke.style.display = "block";
styleStrokeInput.value = styleStrokeOutput.value = gridOverlay.attr("data-label-style")?.match(/stroke: ([^;]+)/)?.[1] || "#000000";
gridCellNumbers.addEventListener("change", function() {
el.attr("cell-numbers", this.checked);
drawGrid();
@ -208,6 +210,7 @@ function selectStyleElement() {
} else {
console.warn("gridCellNumbers element not found");
}
}
if (styleElement === "compass") {
@ -542,10 +545,21 @@ styleGridNumbers.on("change", function () {
byId("gridCellNumbers")?.addEventListener("change", function() {
gridOverlay.attr("cell-numbers", this.checked);
// drawGrid(); // without condition of if layerIsOn.
updateGridCellNumbersStyle();
if (layerIsOn("toggleGrid")) drawGrid();
});
document.getElementById("gridCellNumbersColor").addEventListener("input", updateGridCellNumbersStyle);
function updateGridCellNumbersStyle() {
const color = document.getElementById("gridCellNumbersColor").value;
const style = `stroke: ${color};`;
gridOverlay.attr("data-label-style", style);
if (layerIsOn("toggleGrid")) drawGrid();
}
styleRescaleMarkers.on("change", function () {
markers.attr("rescale", +this.checked);
invokeActiveZooming();