mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 17:51:24 +01:00
v1.5.78 - river editor update
This commit is contained in:
Azgaar
parent
12fd553b0d
commit
41d03e8039
7 changed files with 160 additions and 143 deletions
|
|
@ -9,8 +9,8 @@ function editRiver(id) {
|
|||
elSelected = d3.select(node).on("click", addInterimControlPoint);
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
|
||||
updateRiverData();
|
||||
drawControlPoints(node);
|
||||
updateRiverName(node);
|
||||
|
||||
$("#riverEditor").dialog({
|
||||
title: "Edit River", resizable: false,
|
||||
|
|
@ -22,21 +22,18 @@ function editRiver(id) {
|
|||
modules.editRiver = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riverNameShow").addEventListener("click", showRiverName);
|
||||
document.getElementById("riverNameHide").addEventListener("click", hideRiverName);
|
||||
document.getElementById("riverName").addEventListener("input", changeName);
|
||||
document.getElementById("riverType").addEventListener("input", changeType);
|
||||
document.getElementById("riverNameCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("riverNameRandom").addEventListener("click", generateNameRandom);
|
||||
document.getElementById("riverMainstem").addEventListener("change", changeParent);
|
||||
|
||||
document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth);
|
||||
document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
|
||||
|
||||
document.getElementById("riverWidthShow").addEventListener("click", showRiverWidth);
|
||||
document.getElementById("riverWidthHide").addEventListener("click", hideRiverWidth);
|
||||
document.getElementById("riverWidthInput").addEventListener("input", changeWidth);
|
||||
document.getElementById("riverIncrement").addEventListener("input", changeIncrement);
|
||||
document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile);
|
||||
|
||||
document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
|
||||
document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
|
||||
document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
|
||||
document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile);
|
||||
document.getElementById("riverLegend").addEventListener("click", editRiverLegend);
|
||||
document.getElementById("riverRemove").addEventListener("click", removeRiver);
|
||||
|
||||
|
|
@ -46,23 +43,48 @@ function editRiver(id) {
|
|||
if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point");
|
||||
}
|
||||
|
||||
function updateRiverName(node) {
|
||||
const river = +node.id.slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
riverName.value = r.name;
|
||||
riverType.value = r.type;
|
||||
function getRiver() {
|
||||
const riverId = +node.id.slice(5);
|
||||
const river = pack.rivers.find(r => r.i === riverId);
|
||||
return river;
|
||||
}
|
||||
|
||||
function updateRiverData() {
|
||||
const r = getRiver();
|
||||
|
||||
document.getElementById("riverName").value = r.name;
|
||||
document.getElementById("riverType").value = r.type;
|
||||
|
||||
const parentSelect = document.getElementById("riverMainstem");
|
||||
parentSelect.options.length = 0;
|
||||
const parent = r.parent || r.i;
|
||||
const sortedRivers = pack.rivers.slice().sort((a, b) => a.name > b.name ? 1 : -1);
|
||||
sortedRivers.forEach(river => {
|
||||
const opt = new Option(river.name, river.i, false, river.i === parent);
|
||||
parentSelect.options.add(opt);
|
||||
});
|
||||
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
|
||||
document.getElementById("riverDischarge").value = r.discharge + " m³/s";
|
||||
r.length = elSelected.node().getTotalLength() / 2;
|
||||
const length = rn(r.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverLength").value = length;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverWidth").value = width;
|
||||
|
||||
document.getElementById("riverSourceWidth").value = r.sourceWidth;
|
||||
document.getElementById("riverWidthFactor").value = r.widthFactor;
|
||||
}
|
||||
|
||||
function drawControlPoints(node) {
|
||||
const l = node.getTotalLength() / 2;
|
||||
const segments = Math.ceil(l / 4);
|
||||
const increment = rn(l / segments * 1e5);
|
||||
const length = getRiver().length;
|
||||
const segments = Math.ceil(length / 5);
|
||||
const increment = rn(length / segments * 1e5);
|
||||
for (let i=increment*segments, c=i; i >= 0; i -= increment, c += increment) {
|
||||
const p1 = node.getPointAtLength(i / 1e5);
|
||||
const p2 = node.getPointAtLength(c / 1e5);
|
||||
addControlPoint([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]);
|
||||
}
|
||||
updateRiverLength(l);
|
||||
}
|
||||
|
||||
function addControlPoint(point) {
|
||||
|
|
@ -94,22 +116,13 @@ function editRiver(id) {
|
|||
}
|
||||
const [d, length] = Rivers.getPath(points, +riverWidthInput.value, +riverIncrement.value);
|
||||
elSelected.attr("d", d);
|
||||
updateRiverLength(length);
|
||||
//updateRiverLength(length);
|
||||
|
||||
if (modules.elevation) {
|
||||
showEPForRiver(elSelected.node());
|
||||
}
|
||||
}
|
||||
|
||||
function updateRiverLength(l = elSelected.node().getTotalLength() / 2) {
|
||||
const tr = parseTransform(elSelected.attr("transform"));
|
||||
const length = l * tr[5];
|
||||
riverLength.innerHTML = rn(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
if (r) r.length = length;
|
||||
}
|
||||
|
||||
function clickControlPoint() {
|
||||
this.remove();
|
||||
redrawRiver();
|
||||
|
|
@ -142,72 +155,47 @@ function editRiver(id) {
|
|||
redrawRiver();
|
||||
}
|
||||
|
||||
function showRiverName() {
|
||||
document.querySelectorAll("#riverEditor > button").forEach(el => el.style.display = "none");
|
||||
document.getElementById("riverNameSection").style.display = "inline-block";
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
if (!r) return;
|
||||
document.getElementById("riverName").value = r.name;
|
||||
document.getElementById("riverType").value = r.type;
|
||||
}
|
||||
|
||||
function hideRiverName() {
|
||||
document.querySelectorAll("#riverEditor > button").forEach(el => el.style.display = "inline-block");
|
||||
document.getElementById("riverNameSection").style.display = "none";
|
||||
}
|
||||
|
||||
function changeName() {
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
if (r) r.name = this.value;
|
||||
getRiver().name = this.value;
|
||||
}
|
||||
|
||||
function changeType() {
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
if (r) r.type = this.value;
|
||||
getRiver().type = this.value;
|
||||
}
|
||||
|
||||
function generateNameCulture() {
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
if (r) r.name = riverName.value = Rivers.getName(r.mouth);
|
||||
const r = getRiver();
|
||||
r.name = riverName.value = Rivers.getName(r.mouth);
|
||||
}
|
||||
|
||||
function generateNameRandom() {
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
const r = getRiver();
|
||||
if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length-1));
|
||||
}
|
||||
|
||||
function changeParent() {
|
||||
const r = getRiver();
|
||||
r.parent = +this.value;
|
||||
r.basin = pack.rivers.find(river => river.i === r.parent).basin;
|
||||
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
}
|
||||
|
||||
function changeSourceWidth() {
|
||||
getRiver().sourceWidth = this.value;
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function changeWidthFactor() {
|
||||
getRiver().widthFactor = this.value;
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
|
||||
function showElevationProfile() {
|
||||
modules.elevation = true;
|
||||
showEPForRiver(elSelected.node());
|
||||
}
|
||||
|
||||
function showRiverWidth() {
|
||||
document.querySelectorAll("#riverEditor > button").forEach(el => el.style.display = "none");
|
||||
document.getElementById("riverWidthSection").style.display = "inline-block";
|
||||
document.getElementById("riverWidthInput").value = elSelected.attr("data-width");
|
||||
document.getElementById("riverIncrement").value = elSelected.attr("data-increment");
|
||||
}
|
||||
|
||||
function hideRiverWidth() {
|
||||
document.querySelectorAll("#riverEditor > button").forEach(el => el.style.display = "inline-block");
|
||||
document.getElementById("riverWidthSection").style.display = "none";
|
||||
}
|
||||
|
||||
function changeWidth() {
|
||||
elSelected.attr("data-width", this.value);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function changeIncrement() {
|
||||
elSelected.attr("data-increment", this.value);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function toggleRiverCreationMode() {
|
||||
if (document.getElementById("riverNew").classList.contains("pressed")) exitRiverCreationMode();
|
||||
else {
|
||||
|
|
@ -232,7 +220,6 @@ function editRiver(id) {
|
|||
redrawRiver();
|
||||
}
|
||||
|
||||
|
||||
function editRiverLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
editNotes(id, id);
|
||||
|
|
|
|||
|
|
@ -29,14 +29,18 @@ function overviewRivers() {
|
|||
let lines = "";
|
||||
|
||||
for (const r of pack.rivers) {
|
||||
const discharge = r.discharge + " m³/s";
|
||||
const length = rn(r.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
const basin = pack.rivers.find(river => river.i === r.basin).name;
|
||||
|
||||
lines += `<div class="states" data-id=${r.i} data-name="${r.name}" data-type="${r.type}" data-length="${r.length}" data-basin="${basin}">
|
||||
lines += `<div class="states" data-id=${r.i} data-name="${r.name}" data-type="${r.type}" data-discharge="${r.discharge}" data-length="${r.length}" data-width="${r.width}" data-basin="${basin}">
|
||||
<span data-tip="Click to focus on river" class="icon-dot-circled pointer"></span>
|
||||
<input data-tip="River proper name. Click to change. Ctrl + click to regenerate" class="riverName" value="${r.name}" autocorrect="off" spellcheck="false">
|
||||
<input data-tip="River type name. Click to change" class="riverType" value="${r.type}">
|
||||
<div data-tip="River length" class="biomeArea">${length}</div>
|
||||
<div data-tip="River discharge (flux power)" class="biomeArea">${discharge}</div>
|
||||
<div data-tip="River length from source to mouth" class="biomeArea">${length}</div>
|
||||
<div data-tip="River mouth width" class="biomeArea">${width}</div>
|
||||
<input data-tip="River basin (name of the main stem)" class="stateName" value="${basin}" disabled>
|
||||
<span data-tip="Edit river" class="icon-pencil"></span>
|
||||
<span data-tip="Remove river" class="icon-trash-empty"></span>
|
||||
|
|
@ -106,26 +110,27 @@ function overviewRivers() {
|
|||
rivers.attr("data-basin", null);
|
||||
} else {
|
||||
rivers.attr("data-basin", "hightlighted");
|
||||
const basins = [...(new Set(pack.rivers.map(r=>r.basin)))];
|
||||
const colors = getColors(basins.length);
|
||||
|
||||
basins.forEach((b,i) => {
|
||||
const basins = [...new Set(pack.rivers.map(r => r.basin))];
|
||||
const colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
|
||||
|
||||
basins.forEach((b, i) => {
|
||||
const color = colors[i % colors.length];
|
||||
pack.rivers.filter(r => r.basin === b).forEach(r => {
|
||||
rivers.select("#river"+r.i).attr("fill", colors[i]);
|
||||
rivers.select("#river"+r.i).attr("fill", color);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function downloadRiversData() {
|
||||
let data = "Id,River,Type,Length,Basin\n"; // headers
|
||||
let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.type + ",";
|
||||
data += el.querySelector(".biomeArea").innerHTML + ",";
|
||||
data += el.dataset.basin + "\n";
|
||||
const d = el.dataset;
|
||||
const discharge = d.discharge + " m³/s"
|
||||
const length = rn(d.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
const width = rn(d.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
|
||||
});
|
||||
|
||||
const name = getFileName("Rivers") + ".csv";
|
||||
|
|
|
|||
|
|
@ -534,7 +534,7 @@ function addRiverOnClick() {
|
|||
r.length = length;
|
||||
} else {
|
||||
const parent = dataRiver[0].parent || 0;
|
||||
const basin = Rivers.getBasin(river, parent);
|
||||
const basin = Rivers.getBasin(river);
|
||||
const source = dataRiver[0].cell;
|
||||
const mouth = last(dataRiver).cell;
|
||||
const name = Rivers.getName(mouth);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue