Ruler polyline width Style interface

for white line and gray line.

index.html

@@ -954,6 +954,16 @@
                   <output id="rulerGrayLineColorOutput">#808080</output>
                 </td>
               </tr>
+
+              <tr data-tip="Set ruler white line width multiplier">
+                <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">
+                <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>
 
             

modules/ui/measurers.js

@@ -140,8 +140,11 @@ class Ruler extends Measurer {
     const points = this.getPointsString();
     const size = this.getSize();
     const dash = this.getDash();
+
     const whiteColor = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
     const grayColor = localStorage.getItem("rulerGrayLineColor") || "#808080";
+    const whiteWidth = parseFloat(localStorage.getItem("rulerWhiteLineWidth")) || 1;
+    const grayWidth = parseFloat(localStorage.getItem("rulerGrayLineWidth")) || 1.2;
 
     const el = (this.el = ruler
       .append("g")
@@ -152,13 +155,13 @@ class Ruler extends Measurer {
       .attr("points", points)
       .attr("class", "white")
       .style("stroke", whiteColor)
-      .attr("stroke-width", size)
+      .style("stroke-width", size * whiteWidth)
       .call(d3.drag().on("start", () => this.addControl(this)));
     el.append("polyline")
       .attr("points", points)
       .attr("class", "gray")
       .style("stroke", grayColor)
-      .attr("stroke-width", rn(size * 1.2, 2))
+      .style("stroke-width", size * grayWidth)
       .attr("stroke-dasharray", dash);
     el.append("g")
       .attr("class", "rulerPoints")

modules/ui/style.js

@@ -351,37 +351,41 @@ function selectStyleElement() {
     emblemsBurgSizeInput.value = emblems.select("#burgEmblems").attr("data-size") || 1;
   }
 
-  /* if (styleElement === "ruler") {
-    // styleRulers.style.display = "block";
-    styleSelectFont.value = el.attr("font-family");
-    styleFontSize.value = el.attr("data-size");
-
-  } */
-
   if (styleElement === "ruler") {
     styleRuler.style.display = "block";
-
     styleStrokeDash.style.display = "block";
-    styleStrokeDasharrayInput.value = el.select("polyline").attr("stroke-dasharray") || "";
-    styleStrokeLinecapInput.value = el.select("polyline").attr("stroke-linecap") || "inherit";
-
     styleFont.style.display = "block";
-    styleSelectFont.value = el.select("text").attr("font-family") || "inherit";
-    styleFontSize.value = el.select("text").attr("font-size") || "10px";
 
-    // Mostrar los controles de preferencias del ruler
-    const styleRulerInitialLength = document.getElementById("rulerInitialLength");
+    const rulerEl = el.select("polyline");
+    styleStrokeDasharrayInput.value = rulerEl.attr("stroke-dasharray") || "";
+    styleStrokeLinecapInput.value = rulerEl.attr("stroke-linecap") || "inherit";
 
-    if (styleRulerInitialLength) {
-      styleRulerInitialLength.style.display = "block";
-      styleRulerInitialLength.value = localStorage.getItem("rulerInitialLength") || "100";
-    }
+    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) {
+      rulerInitialLength.value = localStorage.getItem("rulerInitialLength") || "10";
     }
 
-  if (styleElement === "ruler") {
-    styleRuler.style.display = "block";
-    styleRulerWhiteLineColor.value = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
-    styleRulerGrayLineColor.value = localStorage.getItem("rulerGrayLineColor") || "#808080";
+    // Color and width controls
+    const whiteLineColor = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
+    const grayLineColor = localStorage.getItem("rulerGrayLineColor") || "#808080";
+    const whiteLineWidth = localStorage.getItem("rulerWhiteLineWidth") || "1";
+    const grayLineWidth = localStorage.getItem("rulerGrayLineWidth") || "1.2";
+
+    byId("rulerWhiteLineColor").value = whiteLineColor;
+    byId("rulerGrayLineColor").value = grayLineColor;
+    byId("rulerWhiteLineWidth").value = whiteLineWidth;
+    byId("rulerGrayLineWidth").value = grayLineWidth;
+
+    // Update color outputs if they exist
+    const whiteColorOutput = byId("rulerWhiteLineColorOutput");
+    const grayColorOutput = byId("rulerGrayLineColorOutput");
+    if (whiteColorOutput) whiteColorOutput.value = whiteLineColor;
+    if (grayColorOutput) grayColorOutput.value = grayLineColor;
   }
 
   // update group options

modules/ui/units-editor.js

@@ -35,8 +35,10 @@ function editUnits() {
   byId("unitsRestore").on("click", restoreDefaultUnits);
 
   // Add listeners for the new color controls
-  byId("rulerWhiteLineColor").on("change", changeRulerLineColor);
-  byId("rulerGrayLineColor").on("change", changeRulerLineColor);
+  byId("rulerWhiteLineColor").addEventListener("change", changeRulerLineColor);
+  byId("rulerGrayLineColor").addEventListener("change", changeRulerLineColor);
+  byId("rulerWhiteLineWidth").addEventListener("change", changeRulerLineWidth);
+  byId("rulerGrayLineWidth").addEventListener("change", changeRulerLineWidth);
 
   function changeDistanceUnit() {
     if (this.value === "custom_name") {
@@ -136,6 +138,25 @@ function editUnits() {
     localStorage.setItem("rulerGrayLineColor", grayColor);
   }
 
+  function changeRulerLineWidth() {
+    const whiteWidth = parseFloat(byId("rulerWhiteLineWidth").value);
+    const grayWidth = parseFloat(byId("rulerGrayLineWidth").value);
+
+    // Update the widths of existing lines with absolute values
+    d3.selectAll("g.ruler > polyline.white").each(function() {
+      const baseSize = parseFloat(d3.select(this.parentNode).attr("font-size")) / 10;
+      d3.select(this).style("stroke-width", baseSize * whiteWidth);
+    });
+    d3.selectAll("g.ruler > polyline.gray").each(function() {
+      const baseSize = parseFloat(d3.select(this.parentNode).attr("font-size")) / 10;
+      d3.select(this).style("stroke-width", baseSize * grayWidth);
+    });
+
+    // Save the width values for future rulers
+    localStorage.setItem("rulerWhiteLineWidth", whiteWidth);
+    localStorage.setItem("rulerGrayLineWidth", grayWidth);
+  }
+
   function addRuler() {
     if (!layerIsOn("toggleRulers")) toggleRulers();
     const pt = byId("map").createSVGPoint();
@@ -175,13 +196,20 @@ function editUnits() {
 
     const whiteColor = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
     const grayColor = localStorage.getItem("rulerGrayLineColor") || "#808080";
+    const whiteWidth = parseFloat(localStorage.getItem("rulerWhiteLineWidth")) || 1;
+    const grayWidth = parseFloat(localStorage.getItem("rulerGrayLineWidth")) || 1.2;
   
     const ruler = rulers.create(Ruler, [from, to]);
     ruler.draw();
   
-    // Apply the custom colors to the new ruler
-    ruler.el.select("polyline.white").style("stroke", whiteColor);
-    ruler.el.select("polyline.gray").style("stroke", grayColor);
+    // Apply the custom colors and widths to the new ruler
+    const baseSize = ruler.getSize();
+    ruler.el.select("polyline.white")
+      .style("stroke", whiteColor)
+      .style("stroke-width", baseSize * whiteWidth);
+    ruler.el.select("polyline.gray")
+      .style("stroke", grayColor)
+      .style("stroke-width", baseSize * grayWidth);
 
     console.log(`New ruler created at x: ${x.toFixed(2)}%, y: ${y.toFixed(2)}%, length: ${initialLength}%`);
   }