diff --git a/index.html b/index.html index 0b950397..ba837f20 100644 --- a/index.html +++ b/index.html @@ -1181,6 +1181,17 @@ + + + Stroke width + + + + + + + + Stroke dash @@ -1412,6 +1423,21 @@ + + + + + + + + + + + + + + + Size diff --git a/modules/io/load.js b/modules/io/load.js index 81786374..c9b75775 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -256,6 +256,10 @@ async function parseLoadedData(data, mapVersion) { if (data[2]) mapCoordinates = JSON.parse(data[2]); 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); 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 73e6845f..72380db5 100644 --- a/modules/io/save.js +++ b/modules/io/save.js @@ -73,6 +73,11 @@ function prepareMapData() { const coords = JSON.stringify(mapCoordinates); 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" + }); const rulersString = rulers.toString(); const fonts = JSON.stringify(getUsedFonts(svg.node())); @@ -148,6 +153,7 @@ function prepareMapData() { provinces, namesData, rivers, + rulerPreferences, rulersString, fonts, markers, diff --git a/modules/ui/style.js b/modules/ui/style.js index fb62a8e5..dc90be82 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -75,8 +75,15 @@ styleElementSelect.addEventListener("change", selectStyleElement); function selectStyleElement() { const styleElement = styleElementSelect.value; + console.log("Selecting style for element:", styleElement); let el = d3.select("#" + styleElement); + // if element not found, return + if (!el.node()) { + console.warn(`Element ${styleElement} not found`); + return; + } + styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections // show alert line if layer is not visible @@ -84,14 +91,14 @@ function selectStyleElement() { styleIsOff.style.display = isLayerOff ? "block" : "none"; // active group element - if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders", "terrs"].includes(styleElement)) { + if (["anchors", "borders", "burgIcons", "coastline", "labels", "lakes", "routes", "ruler", "terrs"].includes(styleElement)) { const group = styleGroupSelect.value; const defaultGroupSelector = styleElement === "terrs" ? "#landHeights" : "g"; el = group && el.select("#" + group).size() ? el.select("#" + group) : el.select(defaultGroupSelector); } // opacity - if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) { + if (!["landmass", "legend", "ocean", "regions"].includes(styleElement)) { styleOpacity.style.display = "block"; styleOpacityInput.value = el.attr("opacity") || 1; } @@ -103,7 +110,7 @@ function selectStyleElement() { } // fill - if (["rivers", "lakes", "landmass", "prec", "ice", "fogging", "scaleBar", "vignette"].includes(styleElement)) { + if (["fogging", "ice", "lakes", "landmass", "prec", "rivers", "scaleBar", "vignette"].includes(styleElement)) { styleFill.style.display = "block"; styleFillInput.value = styleFillOutput.value = el.attr("fill"); } @@ -112,19 +119,20 @@ function selectStyleElement() { if ( [ "armies", - "routes", - "lakes", "borders", - "cults", - "relig", "cells", "coastline", - "prec", + "coordinates", + "cults", + "gridOverlay", "ice", "icons", - "coordinates", + "lakes", + "prec", + "relig", + "routes", + "ruler", "zones", - "gridOverlay" ].includes(styleElement) ) { styleStroke.style.display = "block"; @@ -135,7 +143,7 @@ function selectStyleElement() { // stroke dash if ( - ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes( + ["borders", "coordinates", "gridOverlay", "legend", "population", "ruler", "routes", "temperature", "zones"].includes( styleElement ) ) { @@ -344,9 +352,52 @@ 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"; + 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") || ""; + 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 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"; + } + } + // update group options styleGroupSelect.options.length = 0; // remove all options - if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders", "terrs"].includes(styleElement)) { + if (["anchors", "borders", "burgIcons", "coastline", "labels", "lakes", "routes", "ruler", "terrs"].includes(styleElement)) { const groups = byId(styleElement).querySelectorAll("g"); groups.forEach(el => { if (el.id === "burgLabels") return; @@ -427,9 +478,36 @@ styleStrokeInput.addEventListener("input", function () { if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); }); -styleStrokeWidthInput.addEventListener("input", e => { +const styleStrokeWidthInput = document.getElementById('styleStrokeWidthInput'); +if (styleStrokeWidthInput && styleStrokeWidthInput.querySelector('input')) { + styleStrokeWidthInput.querySelector('input').addEventListener("input", e => { + getEl().attr("stroke-width", e.target.value); + if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); + }); +} else { + 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 () { @@ -1075,6 +1153,30 @@ styleVignetteBlur.addEventListener("input", e => { byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`); }); +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); + }); + } +}); + styleScaleBar.addEventListener("input", function (event) { const scaleBarBack = scaleBar.select("#scaleBarBack"); if (!scaleBarBack.size()) return; diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index 67562ada..b1d56b2f 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -122,12 +122,23 @@ function editUnits() { function addRuler() { if (!layerIsOn("toggleRulers")) toggleRulers(); const pt = byId("map").createSVGPoint(); - (pt.x = graphWidth / 2), (pt.y = graphHeight / 4); + + // 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; + + // Calculate coordinates based on percentages + pt.x = graphWidth * (initialX / 100); + pt.y = graphHeight * (initialY / 100); + + // const defaultvalue = (pt.x = graphWidth / 2), (pt.y = graphHeight / 4); const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse()); - const dx = graphWidth / 4 / scale; + const dx = (initialLength / 200) * graphWidth / scale; const dy = (rulers.data.length * 40) % (graphHeight / 2); - const from = [(p.x - dx) | 0, (p.y + dy) | 0]; - const to = [(p.x + dx) | 0, (p.y + dy) | 0]; + + const from = [(p.x - dx) | 0, p.y | 0]; + const to = [(p.x + dx) | 0, p.y | 0]; rulers.create(Ruler, [from, to]).draw(); }