ruler style polyline color added

index.html

@@ -933,6 +933,31 @@
               </tr>
             </tbody>
 
+            <tbody id="styleRuler">
+              <tr data-tip="Set ruler initial length. Percentage of screen width.">
+                <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="Set ruler white line color">
+                <td>White line color</td>
+                <td>
+                  <input id="rulerWhiteLineColor" type="color" value="#ffffff" />
+                  <output id="rulerWhiteLineColorOutput">#ffffff</output>
+                </td>
+              </tr>
+
+              <tr data-tip="Set ruler gray line color">
+                <td>Gray line color</td>
+                <td>
+                  <input id="rulerGrayLineColor" type="color" value="#808080" />
+                  <output id="rulerGrayLineColorOutput">#808080</output>
+                </td>
+              </tr>
+            </tbody>
+
+            
+
             <tbody id="styleTexture">
               <tr data-tip="Select texture image. Big textures can highly affect performance">
                 <td>Image</td>
@@ -1181,17 +1206,6 @@
               </tr>
             </tbody>
 
-            <tbody id="styleStrokeWidthRuler">
-              <tr data-tip="Set stroke width for ruler lines">
-                <td>Stroke width</td>
-                <td>
-                  <slider-input id="styleStrokeWidthInput" min="0" max="5" step=".01"></slider-input>
-                  <input id="styleStrokeWidthWhiteInput" type="number" min="0" max="5" step=".01"></slider-input>
-                  <input id="styleStrokeWidthGrayInput" type="number" min="0" max="5" step=".01"></slider-input>
-                </td>
-              </tr>
-            </tbody>
-
             <tbody id="styleStrokeDash">
               <tr data-tip="Set stroke dash array (e.g. 5 2) and linecap">
                 <td>Stroke dash</td>
@@ -1423,21 +1437,6 @@
               </tr>
             </tbody>
 
-            <tbody id="styleRuler">
-              <tr data-tip="Set ruler initial X position">
-                <td><label for="rulerInitialX">Initial X position (%):</label></td>
-                <td><input type="number" id="rulerInitialX" min="0" max="100" step="1"></td>
-              </tr>
-              <tr data-tip="Set ruler initial Y position">
-                <td><label for="rulerInitialY">Initial Y position (%):</label></td>
-                <td><input type="number" id="rulerInitialY" min="0" max="100" step="1"></td>
-              </tr>
-              <tr data-tip="Set ruler initial length">
-                <td><label for="rulerInitialLength">Initial Length (%):</label></td>
-                <td><input type="number" id="rulerInitialLength" min="1" max="100" step="1"></td>
-              </tr>
-            </tbody>
-
             <tbody id="styleScaleBar">
               <tr data-tip="Set bar and font size">
                 <td>Size</td>

modules/io/load.js

@@ -257,9 +257,9 @@ async function parseLoadedData(data, mapVersion) {
       if (data[4]) notes = JSON.parse(data[4]);
       if (data[33]) rulers.fromString(data[33]);
         const rulerPreferences = JSON.parse(data[33]);
-        localStorage.setItem("rulerInitialX", rulerPreferences.initialX);
-        localStorage.setItem("rulerInitialY", rulerPreferences.initialY);
         localStorage.setItem("rulerInitialLength", rulerPreferences.initialLength);
+        localStorage.setItem("rulerWhiteLineColor", rulerPreferences.whiteColor);
+        localStorage.setItem("rulerGrayLineColor", rulerPreferences.grayColor);
       if (data[34]) {
         const usedFonts = JSON.parse(data[34]);
         usedFonts.forEach(usedFont => {

modules/io/save.js

@@ -74,9 +74,9 @@ function prepareMapData() {
   const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
   const notesData = JSON.stringify(notes);
   const rulerPreferences = JSON.stringify({
-    initialX: localStorage.getItem("rulerInitialX") || "50",
+    initialLength: localStorage.getItem("rulerInitialLength") || "100",
-    initialY: localStorage.getItem("rulerInitialY") || "50",
+    whiteColor: localStorage.getItem("rulerWhiteLineColor") || "#ffffff",
-    initialLength: localStorage.getItem("rulerInitialLength") || "100"
+    grayColor: localStorage.getItem("rulerGrayLineColor") || "#808080",
   });
   const rulersString = rulers.toString();
   const fonts = JSON.stringify(getUsedFonts(svg.node()));

modules/ui/measurers.js

@@ -140,6 +140,8 @@ 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 el = (this.el = ruler
       .append("g")
@@ -149,11 +151,13 @@ class Ruler extends Measurer {
     el.append("polyline")
       .attr("points", points)
       .attr("class", "white")
+      .style("stroke", whiteColor)
       .attr("stroke-width", size)
       .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))
       .attr("stroke-dasharray", dash);
     el.append("g")

modules/ui/style.js

@@ -131,7 +131,6 @@ function selectStyleElement() {
       "prec",
       "relig",
       "routes",
-      "ruler",
       "zones",
     ].includes(styleElement)
   ) {
@@ -361,12 +360,6 @@ function selectStyleElement() {
 
   if (styleElement === "ruler") {
     styleRuler.style.display = "block";
-    styleStroke.style.display = "block";
-    styleStrokeInput.value = styleStrokeOutput.value = el.select("polyline").attr("stroke");
-    styleStrokeWidthRuler.style.display = "block";
-    styleStrokeWidthInput.value = el.select("polyline").attr("stroke-width") || 0;
-    styleStrokeWidthWhiteInput.value = el.select("polyline.white").attr("stroke-width") || 0;
-    styleStrokeWidthGrayInput.value = el.select("polyline.gray").attr("stroke-width") || 0;
 
     styleStrokeDash.style.display = "block";
     styleStrokeDasharrayInput.value = el.select("polyline").attr("stroke-dasharray") || "";
@@ -377,24 +370,20 @@ function selectStyleElement() {
     styleFontSize.value = el.select("text").attr("font-size") || "10px";
 
     // Mostrar los controles de preferencias del ruler
-    const styleRulerInitialX = document.getElementById("rulerInitialX");
-    const styleRulerInitialY = document.getElementById("rulerInitialY");
     const styleRulerInitialLength = document.getElementById("rulerInitialLength");
 
-    if (styleRulerInitialX) {
-      styleRulerInitialX.style.display = "block";
-      styleRulerInitialX.value = localStorage.getItem("rulerInitialX") || "50";
-    }
-    if (styleRulerInitialY) {
-      styleRulerInitialY.style.display = "block";
-      styleRulerInitialY.value = localStorage.getItem("rulerInitialY") || "50";
-    }
     if (styleRulerInitialLength) {
       styleRulerInitialLength.style.display = "block";
       styleRulerInitialLength.value = localStorage.getItem("rulerInitialLength") || "100";
     }
   }
 
+  if (styleElement === "ruler") {
+    styleRuler.style.display = "block";
+    styleRulerWhiteLineColor.value = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
+    styleRulerGrayLineColor.value = localStorage.getItem("rulerGrayLineColor") || "#808080";
+  }
+
   // update group options
   styleGroupSelect.options.length = 0; // remove all options
   if (["anchors", "borders", "burgIcons", "coastline", "labels", "lakes", "routes", "ruler", "terrs"].includes(styleElement)) {
@@ -488,28 +477,6 @@ if (styleStrokeWidthInput && styleStrokeWidthInput.querySelector('input')) {
   console.warn('styleStrokeWidthInput not found or does not contain an input element');
 }
 
-/* styleStrokeWidthInput.addEventListener("input", e => {
-  getEl().attr("stroke-width", e.target.value);
-  if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
-  if (styleElementSelect.value === "ruler") {
-    getEl().select("polyline").attr("stroke-width", e.target.value);
-  }
-}); */
-
-styleStrokeWidthWhiteInput.addEventListener("input", e => {
-  const el = getEl();
-  if (el) {
-    el.selectAll("polyline.white").attr("stroke-width", e.target.value);
-  }
-});
-
-styleStrokeWidthGrayInput.addEventListener("input", e => {
-  const el = getEl();
-  if (el) {
-    el.selectAll("polyline.gray").attr("stroke-width", e.target.value);
-  }
-});
-
 styleStrokeDasharrayInput.addEventListener("input", function () {
   getEl().attr("stroke-dasharray", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
@@ -1154,22 +1121,8 @@ styleVignetteBlur.addEventListener("input", e => {
 });
 
 document.addEventListener('DOMContentLoaded', function() {
-  const rulerInitialX = document.getElementById("rulerInitialX");
-  const rulerInitialY = document.getElementById("rulerInitialY");
   const rulerInitialLength = document.getElementById("rulerInitialLength");
 
-  if (rulerInitialX) {
-    rulerInitialX.addEventListener("change", e => {
-      localStorage.setItem("rulerInitialX", e.target.value);
-    });
-  }
-
-  if (rulerInitialY) {
-    rulerInitialY.addEventListener("change", e => {
-      localStorage.setItem("rulerInitialY", e.target.value);
-    });
-  }
-
   if (rulerInitialLength) {
     rulerInitialLength.addEventListener("change", e => {
       localStorage.setItem("rulerInitialLength", e.target.value);

modules/ui/units-editor.js

@@ -34,6 +34,10 @@ function editUnits() {
   byId("removeRulers").on("click", removeAllRulers);
   byId("unitsRestore").on("click", restoreDefaultUnits);
 
+  // Add listeners for the new color controls
+  byId("rulerWhiteLineColor").on("change", changeRulerLineColor);
+  byId("rulerGrayLineColor").on("change", changeRulerLineColor);
+
   function changeDistanceUnit() {
     if (this.value === "custom_name") {
       prompt("Provide a custom name for a distance unit", {default: ""}, custom => {
@@ -119,27 +123,67 @@ function editUnits() {
     localStorage.removeItem("urbanDensity");
   }
 
+  function changeRulerLineColor() {
+    const whiteColor = byId("rulerWhiteLineColor").value;
+    const grayColor = byId("rulerGrayLineColor").value;
+  
+    // Update the colors of existing lines
+    d3.selectAll("g.ruler > polyline.white").style("stroke", whiteColor);
+    d3.selectAll("g.ruler > polyline.gray").style("stroke", grayColor);
+  
+    // Save the colors for future rulers
+    localStorage.setItem("rulerWhiteLineColor", whiteColor);
+    localStorage.setItem("rulerGrayLineColor", grayColor);
+  }
+
   function addRuler() {
     if (!layerIsOn("toggleRulers")) toggleRulers();
     const pt = byId("map").createSVGPoint();
 
-    // Use saved values on localStorage, or default values if not exist
+    // Initial position in the center.
-    const initialX = parseFloat(localStorage.getItem("rulerInitialX")) || 50;
+    let x = 50;
-    const initialY = parseFloat(localStorage.getItem("rulerInitialY")) || 50;
+    let y = 50;
-    const initialLength = parseFloat(localStorage.getItem("rulerInitialLength")) || 100;
+
+    const existingRulers = rulers.data;
+    const yStep = 10; // Percentage step for the Y coordinate
+
+    // Search for the last Y position used (in percentage)
+    let lastY = existingRulers.length > 0 ? (existingRulers[existingRulers.length - 1].points[0][1] / graphHeight) * 100 : null;
+
+    if (lastY !== null) {
+      // If there are existing rulers, calculate the new Y position
+      y = (lastY + yStep) % 100;
+      
+      // If we return to the center and it was the last operation, move one step more
+      if (y === 50 && lastY !== 50) {
+        y = (y + yStep) % 100;
+      }
+    }
 
     // Calculate coordinates based on percentages
-    pt.x = graphWidth * (initialX / 100);
+    pt.x = graphWidth * (x / 100);
-    pt.y = graphHeight * (initialY / 100);
+    pt.y = graphHeight * (y / 100);
 
-    // const defaultvalue = (pt.x = graphWidth / 2), (pt.y = graphHeight / 4);
     const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse());
+
+    // Use the rulerInitialLength value from localStorage or the default value
+    const initialLength = parseFloat(localStorage.getItem("rulerInitialLength")) || 10;
     const dx = (initialLength / 200) * graphWidth / scale;
-    const dy = (rulers.data.length * 40) % (graphHeight / 2);
 
     const from = [(p.x - dx) | 0, p.y | 0];
     const to = [(p.x + dx) | 0, p.y | 0];
-    rulers.create(Ruler, [from, to]).draw();
+
+    const whiteColor = localStorage.getItem("rulerWhiteLineColor") || "#ffffff";
+    const grayColor = localStorage.getItem("rulerGrayLineColor") || "#808080";
+  
+    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);
+
+    console.log(`New ruler created at x: ${x.toFixed(2)}%, y: ${y.toFixed(2)}%, length: ${initialLength}%`);
   }
 
   function toggleOpisometerMode() {