diff --git a/index.html b/index.html index ea3b70d0..46baa5ce 100644 --- a/index.html +++ b/index.html @@ -954,6 +954,16 @@ #808080 + + + + + + + + + + diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js index a2019946..b1288274 100644 --- a/modules/ui/measurers.js +++ b/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") diff --git a/modules/ui/style.js b/modules/ui/style.js index 1102064b..d2ba7c84 100644 --- a/modules/ui/style.js +++ b/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 diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index 102c826e..3cc89753 100644 --- a/modules/ui/units-editor.js +++ b/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}%`); }