backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-19 10:31:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

ruler style polyline color added

Browse source
This commit is contained in:
Ángel Montero Lamas 2024-08-28 14:57:28 +02:00
parent 8b4dcec79d
commit f50b077f84
6 changed files with 93 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/io/load.js
View file

@ -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 => {

6
modules/io/save.js
View file

@ -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()));

4
modules/ui/measurers.js
View file

@ -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")

59
modules/ui/style.js
View file

@ -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);

62
modules/ui/units-editor.js
View file

@ -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() {