diff --git a/index.css b/index.css index eb1e82fc..64a2fa2c 100644 --- a/index.css +++ b/index.css @@ -1907,6 +1907,12 @@ div.editorLine { stroke: #737373; } +#rulerShowText { + display: inline-block; + vertical-align: middle; + margin-right: 5px; +} + #militaryOptionsTable select { border: 1px solid #d4d4d4; } diff --git a/index.html b/index.html index 46baa5ce..26f19dbe 100644 --- a/index.html +++ b/index.html @@ -938,6 +938,13 @@ + + + + + + + White line color @@ -955,19 +962,17 @@ - + - + - - Image diff --git a/modules/io/load.js b/modules/io/load.js index 1494249c..303786d9 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -260,6 +260,9 @@ async function parseLoadedData(data, mapVersion) { localStorage.setItem("rulerInitialLength", rulerPreferences.initialLength); localStorage.setItem("rulerWhiteLineColor", rulerPreferences.whiteColor); localStorage.setItem("rulerGrayLineColor", rulerPreferences.grayColor); + localStorage.setItem("rulerWhiteLineWidth", rulerPreferences.whiteWidth); + localStorage.setItem("rulerGrayLineWidth", rulerPreferences.grayWidth); + localStorage.setItem("rulerShowText", rulerPreferences.showText); if (data[34]) { const usedFonts = JSON.parse(data[34]); usedFonts.forEach(usedFont => { diff --git a/modules/io/save.js b/modules/io/save.js index eb817cf2..37f0e833 100644 --- a/modules/io/save.js +++ b/modules/io/save.js @@ -76,7 +76,10 @@ function prepareMapData() { const rulerPreferences = JSON.stringify({ initialLength: localStorage.getItem("rulerInitialLength") || "100", whiteColor: localStorage.getItem("rulerWhiteLineColor") || "#ffffff", - grayColor: localStorage.getItem("rulerGrayLineColor") || "#808080", + grayColor: localStorage.getItem("rulerGrayLineColor") || "#3d3d3d", + whiteWidth: parseFloat(localStorage.getItem("rulerWhiteLineWidth")) || 1, + grayWidth: parseFloat(localStorage.getItem("rulerGrayLineWidth")) || 1.2, + showText: localStorage.getItem("rulerShowText") || true }); const rulersString = rulers.toString(); const fonts = JSON.stringify(getUsedFonts(svg.node())); diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js index b1288274..4c22ae86 100644 --- a/modules/ui/measurers.js +++ b/modules/ui/measurers.js @@ -145,6 +145,8 @@ class Ruler extends Measurer { const grayColor = localStorage.getItem("rulerGrayLineColor") || "#808080"; const whiteWidth = parseFloat(localStorage.getItem("rulerWhiteLineWidth")) || 1; const grayWidth = parseFloat(localStorage.getItem("rulerGrayLineWidth")) || 1.2; + const showText = localStorage.getItem("rulerShowText") !== "false"; // by default, show the text + const el = (this.el = ruler .append("g") @@ -170,6 +172,7 @@ class Ruler extends Measurer { el.append("text") .attr("dx", ".35em") .attr("dy", "-.45em") + .style("display", showText ? "inline" : "none") .on("click", () => rulers.remove(this.id)); this.drawPoints(el); this.updateLabel(); diff --git a/modules/ui/style.js b/modules/ui/style.js index d2ba7c84..9826321b 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -354,16 +354,11 @@ function selectStyleElement() { if (styleElement === "ruler") { styleRuler.style.display = "block"; styleStrokeDash.style.display = "block"; - styleFont.style.display = "block"; const rulerEl = el.select("polyline"); styleStrokeDasharrayInput.value = rulerEl.attr("stroke-dasharray") || ""; styleStrokeLinecapInput.value = rulerEl.attr("stroke-linecap") || "inherit"; - const textEl = el.select("text"); - styleSelectFont.value = textEl.attr("font-family") || "inherit"; - styleFontSize.value = textEl.attr("font-size") || "10px"; - // Ruler preferences const rulerInitialLength = byId("rulerInitialLength"); if (rulerInitialLength) { @@ -386,6 +381,13 @@ function selectStyleElement() { const grayColorOutput = byId("rulerGrayLineColorOutput"); if (whiteColorOutput) whiteColorOutput.value = whiteLineColor; if (grayColorOutput) grayColorOutput.value = grayLineColor; + + // Text visibility control + const rulerShowText = byId("rulerShowText"); + if (rulerShowText) { + rulerShowText.checked = localStorage.getItem("rulerShowText") !== "false"; + rulerShowText.addEventListener("change", toggleRulerText); + } } // update group options @@ -1134,6 +1136,18 @@ document.addEventListener('DOMContentLoaded', function() { } }); +function toggleRulerText() { + const checkbox = byId("rulerShowText"); + const showText = checkbox.checked; + + // Update visibility for existing rulers + d3.selectAll("g.ruler text").style("display", showText ? "inline" : "none"); + console.log(`toggleRulerText called with showText: ${showText}`); + + // Save the preference for future rulers + localStorage.setItem("rulerShowText", showText); +} + styleScaleBar.addEventListener("input", function (event) { const scaleBarBack = scaleBar.select("#scaleBarBack"); if (!scaleBarBack.size()) return; diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index 3cc89753..eaa83c41 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -34,11 +34,12 @@ function editUnits() { byId("removeRulers").on("click", removeAllRulers); byId("unitsRestore").on("click", restoreDefaultUnits); - // Add listeners for the new color controls + // Add listeners for the new ruler controls byId("rulerWhiteLineColor").addEventListener("change", changeRulerLineColor); byId("rulerGrayLineColor").addEventListener("change", changeRulerLineColor); byId("rulerWhiteLineWidth").addEventListener("change", changeRulerLineWidth); byId("rulerGrayLineWidth").addEventListener("change", changeRulerLineWidth); + byId("rulerShowText").addEventListener("change", toggleRulerText); function changeDistanceUnit() { if (this.value === "custom_name") { @@ -123,6 +124,40 @@ function editUnits() { localStorage.removeItem("populationRate"); localStorage.removeItem("urbanization"); localStorage.removeItem("urbanDensity"); + + // Ruler defaults + localStorage.setItem("rulerShowText", "true"); + localStorage.setItem("rulerInitialLength", "10"); + localStorage.setItem("rulerWhiteLineColor", "#ffffff"); + localStorage.setItem("rulerGrayLineColor", "#3d3d3d"); + localStorage.setItem("rulerWhiteLineWidth", "1"); + localStorage.setItem("rulerGrayLineWidth", "1.2"); + + // Update UI elements + byId("rulerShowText").checked = true; + byId("rulerInitialLength").value = "10"; + byId("rulerWhiteLineColor").value = "#ffffff"; + byId("rulerGrayLineColor").value = "#3d3d3d"; + byId("rulerWhiteLineWidth").value = "1"; + byId("rulerGrayLineWidth").value = "1.2"; + + // Update color outputs if they exist + const whiteColorOutput = byId("rulerWhiteLineColorOutput"); + const grayColorOutput = byId("rulerGrayLineColorOutput"); + if (whiteColorOutput) whiteColorOutput.value = "#ffffff"; + if (grayColorOutput) grayColorOutput.value = "#3d3d3d"; + + // Apply changes to existing rulers + d3.selectAll("g.ruler").each(function() { + const ruler = d3.select(this); + ruler.select("text").style("display", "inline"); + ruler.select("polyline.white") + .style("stroke", "#ffffff") + .style("stroke-width", ruler.attr("font-size") / 10); + ruler.select("polyline.gray") + .style("stroke", "#3d3d3d") + .style("stroke-width", ruler.attr("font-size") / 10 * 1.2); + }); } function changeRulerLineColor() { @@ -195,9 +230,10 @@ function editUnits() { const to = [(p.x + dx) | 0, p.y | 0]; const whiteColor = localStorage.getItem("rulerWhiteLineColor") || "#ffffff"; - const grayColor = localStorage.getItem("rulerGrayLineColor") || "#808080"; + const grayColor = localStorage.getItem("rulerGrayLineColor") || "#3d3d3d"; const whiteWidth = parseFloat(localStorage.getItem("rulerWhiteLineWidth")) || 1; const grayWidth = parseFloat(localStorage.getItem("rulerGrayLineWidth")) || 1.2; + const showText = localStorage.getItem("rulerShowText") !== "false"; const ruler = rulers.create(Ruler, [from, to]); ruler.draw(); @@ -211,6 +247,10 @@ function editUnits() { .style("stroke", grayColor) .style("stroke-width", baseSize * grayWidth); + // Apply the text visibility preference to the new ruler + ruler.el.select("text").style("display", showText ? "inline" : "none"); + + console.log(`New ruler created at x: ${x.toFixed(2)}%, y: ${y.toFixed(2)}%, length: ${initialLength}%`); }