mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-19 18:41:23 +01:00
ruler style polyline color added
This commit is contained in:
Ángel Montero Lamas
parent
8b4dcec79d
commit
f50b077f84
6 changed files with 93 additions and 93 deletions
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue