diff --git a/index.html b/index.html index ba837f20..ea3b70d0 100644 --- a/index.html +++ b/index.html @@ -933,6 +933,31 @@ + + + + + + + + White line color + + + #ffffff + + + + + Gray line color + + + #808080 + + + + + + Image @@ -1181,17 +1206,6 @@ - - - Stroke width - - - - - - - - Stroke dash @@ -1423,21 +1437,6 @@ - - - - - - - - - - - - - - - Size diff --git a/modules/io/load.js b/modules/io/load.js index c9b75775..1494249c 100644 --- a/modules/io/load.js +++ b/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 => { diff --git a/modules/io/save.js b/modules/io/save.js index 72380db5..eb817cf2 100644 --- a/modules/io/save.js +++ b/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", - initialY: localStorage.getItem("rulerInitialY") || "50", - initialLength: localStorage.getItem("rulerInitialLength") || "100" + initialLength: localStorage.getItem("rulerInitialLength") || "100", + whiteColor: localStorage.getItem("rulerWhiteLineColor") || "#ffffff", + grayColor: localStorage.getItem("rulerGrayLineColor") || "#808080", }); const rulersString = rulers.toString(); const fonts = JSON.stringify(getUsedFonts(svg.node())); diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js index 1f51cd7d..a2019946 100644 --- a/modules/ui/measurers.js +++ b/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") diff --git a/modules/ui/style.js b/modules/ui/style.js index dc90be82..1102064b 100644 --- a/modules/ui/style.js +++ b/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); diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index b1d56b2f..102c826e 100644 --- a/modules/ui/units-editor.js +++ b/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 - const initialX = parseFloat(localStorage.getItem("rulerInitialX")) || 50; - const initialY = parseFloat(localStorage.getItem("rulerInitialY")) || 50; - const initialLength = parseFloat(localStorage.getItem("rulerInitialLength")) || 100; + // Initial position in the center. + let x = 50; + let y = 50; + + 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.y = graphHeight * (initialY / 100); + pt.x = graphWidth * (x / 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() {