Show/hide text of "ruler" class

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;
 }

index.html

@@ -938,6 +938,13 @@
                 <td><label for="rulerInitialLength">Initial Length (%):</label></td>
                 <td><input type="number" id="rulerInitialLength" min="1" max="100" step="1"></td>
               </tr>
+
+              <tr data-tip="Show or hide text for all rulers">
+                <td>
+                  <input id="rulerShowText" type="checkbox" class="checkbox" checked>
+                  <label for="rulerShowText">Show ruler text (click to toggle)</label>
+                </td>
+              </tr>
               
               <tr data-tip="Set ruler white line color">
                 <td>White line color</td>
@@ -955,19 +962,17 @@
                 </td>
               </tr>
 
-              <tr data-tip="Set ruler white line width multiplier">
+              <tr data-tip="Set ruler white line width value">
                 <td><label for="rulerWhiteLineWidth">White line width:</label></td>
                 <td><input type="number" id="rulerWhiteLineWidth" min="0.1" max="5" step="0.1" value="1"></td>
               </tr>
             
-              <tr data-tip="Set ruler gray line width multiplier">
+              <tr data-tip="Set ruler gray line width value">
                 <td><label for="rulerGrayLineWidth">Gray line width:</label></td>
                 <td><input type="number" id="rulerGrayLineWidth" min="0.1" max="5" step="0.1" value="1.2"></td>
               </tr>
             </tbody>
 
-            
-
             <tbody id="styleTexture">
               <tr data-tip="Select texture image. Big textures can highly affect performance">
                 <td>Image</td>

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 => {

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()));

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();

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;

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}%`);
   }