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

v1.5.78 - river editor update

Browse source
This commit is contained in:
Azgaar 2021-02-28 20:20:11 +03:00
parent 12fd553b0d
commit 41d03e8039
7 changed files with 160 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

20
index.css
View file

@ -200,16 +200,6 @@ i.icon-lock {
cursor: pointer;
}
#riverAngle, #riverWidthInput, #riverIncrement {
width: 7em;
}
.editButtonS {
display: none;
cursor: pointer;
}
#riverEditor > *,
#routeEditor > *,
#labelEditor div,
#markerEditor div {
@ -275,8 +265,7 @@ i.icon-lock {
text-anchor: middle;
}
#routeLength,
#riverLength,
#routeLength,
#lakeArea,
#coastlineArea {
background-color: #eeeeee;
@ -1446,6 +1435,13 @@ div.states > .coaIcon > use {
width: 6em;
}
#riverBody div.label,
#riverBody input,
#riverBody select {
display: inline-block;
width: 7em;
}
#stateNameEditor div.label,
#provinceNameEditor div.label,
#regimentBody div.label {

87
index.html
View file

@ -1564,31 +1564,64 @@
</div>
<div id="riverEditor" class="dialog" style="display: none">
<button id="riverNameShow" data-tip="Show river name section" class="icon-font"></button>
<div id="riverNameSection" style="display: none">
<button id="riverNameHide" data-tip="Hide the river name section" class="icon-font"></button>
<input id="riverName" data-tip="Change river proper name" style="width: 8em">
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
<input id="riverType" data-tip="Change river type name" style="width: 6em">
<span id="riverNameCulture" data-tip="Generate culture-specific name for the river" class="icon-book pointer"></span>
<span id="riverNameRandom" data-tip="Generate random name for the river" class="icon-globe pointer"></span>
<div id="riverBody" style="padding-bottom: .3em">
<div style="padding: .1em">
<div class="label" style="width: 4.8em">Name:</div>
<span id="riverNameCulture" data-tip="Generate culture-specific name for the river" class="icon-book pointer"></span>
<span id="riverNameRandom" data-tip="Generate random name for the river" class="icon-globe pointer"></span>
<input id="riverName" data-tip="Type to rename the river" autocorrect="off" spellcheck="false">
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
</div>
<div style="padding: .1em" data-tip="Type to change river type (e.g. fork, creek, river, brook, stream)">
<div class="label">Type:</div>
<input id="riverType" autocorrect="off" spellcheck="false">
</div>
<div style="padding: .1em" data-tip="Select parent river">
<div class="label">Mainstem:</div>
<select id="riverMainstem"></select>
</div>
<div style="padding: .1em" data-tip="River drainage basin (watershed)">
<div class="label">Basin:</div>
<input id="riverBasin" disabled/>
</div>
<div style="padding: .1em" data-tip="River discharge (flux power)">
<div class="label">Discharge:</div>
<input id="riverDischarge" disabled/>
</div>
<div style="padding: .1em" data-tip="River length in selected units">
<div class="label">Length:</div>
<input id="riverLength" disabled/>
</div>
<div style="padding: .1em" data-tip="River mouth width in selected units">
<div class="label">Mouse width:</div>
<input id="riverWidth" disabled/>
</div>
<div style="padding: .1em" data-tip="River source width in pixels">
<div class="label">Source width:</div>
<input id="riverSourceWidth" type="number" min=0 max=3 step=.1 />
</div>
<div style="padding: .1em" data-tip="River width multiplier">
<div class="label">Width modifier:</div>
<input id="riverWidthFactor" type="number" min=.2 max=4 step=.1 />
</div>
</div>
<button id="riverWidthShow" data-tip="Show river width and widening change section" class="icon-resize-full"></button>
<div id="riverWidthSection" style="display: none">
<button id="riverWidthHide" data-tip="Hide the river width and widening change section" class="icon-resize-full"></button>
<i id="riverWidthIcon" class="icon-w"></i>
<input id="riverWidthInput" data-tip="Change river width" value="1" type="range" min=.2 max=10 step=.1>
<i id="riverIncrementIcon" class="icon-i"></i>
<input id="riverIncrement" data-tip="Change river bed increment (widening speed)" type="range" min=.01 max=3 step=.01>
<div id="riverBottom">
<button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button>
<button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
<button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
<button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
<button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash fastDelete"></button>
</div>
<button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
<button id="riverLength" data-tip="River length in selected units">0</button>
<button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
<button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button>
<button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
<button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash fastDelete"></button>
</div>
<div id="elevationProfile" class="dialog" style="display: none" width="100%">
@ -3055,10 +3088,12 @@
<div id="riversOverview" class="dialog stable" style="display: none">
<div id="riversHeader" class="header">
<div style="left:1.8em" data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
<div style="left:7.7em" data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
<div style="left:12.9em" data-tip="Click to sort by river length" class="sortable icon-sort-number-down" data-sortby="length">Length&nbsp;</div>
<div style="left:18.2em" data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
<div style="left:1.7em" data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
<div style="left:7.9em" data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
<div style="left:11.9em" data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">Discharge&nbsp;</div>
<div style="left:18.2em" data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length&nbsp;</div>
<div style="left:23.4em" data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width&nbsp;</div>
<div style="left:29em" data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
</div>
<div id="riversBody" class="burgs-table"></div>

18
modules/river-generator.js
View file

@ -173,7 +173,7 @@ const generate = function(changeHeights = true) {
} else {
// propagate flux and add next river segment
cells.fl[toCell] += fromFlux;
riversData.push({river, cell: toCell, x: p[toCell][0], y: p[toCell][1], flux: cells.fl[toCell]});
riversData.push({river, cell: toCell, x: p[toCell][0], y: p[toCell][1], flux: fromFlux});
}
}
@ -363,7 +363,7 @@ const specify = function() {
const smallType = {"Creek":9, "River":3, "Brook":3, "Stream":1}; // weighted small river types
for (const r of rivers) {
r.basin = getBasin(r.i, r.parent);
r.basin = getBasin(r.i);
r.name = getName(r.mouth);
const small = r.length < smallLength;
r.type = r.parent && !(r.i%6) ? small ? "Branch" : "Fork" : small ? rw(smallType) : "River";
@ -377,7 +377,7 @@ const getName = function(cell) {
// remove river and all its tributaries
const remove = function(id) {
const cells = pack.cells;
const riversToRemove = pack.rivers.filter(r => r.i === id || getBasin(r.i, r.parent, id) === id).map(r => r.i);
const riversToRemove = pack.rivers.filter(r => r.basin === id).map(r => r.i);
riversToRemove.forEach(r => rivers.select("#river"+r).remove());
cells.r.forEach((r, i) => {
if (!r || !riversToRemove.includes(r)) return;
@ -388,14 +388,10 @@ const remove = function(id) {
pack.rivers = pack.rivers.filter(r => !riversToRemove.includes(r.i));
}
const getBasin = function(r, p, e) {
while (p && r !== p && r !== e) {
const parent = pack.rivers.find(r => r.i === p);
if (!parent) return r;
r = parent.i;
p = parent.parent;
}
return r;
const getBasin = function(r) {
const parent = pack.rivers.find(river => river.i === r)?.parent;
if (!parent || r === parent) return r;
return getBasin(parent);
}
return {generate, resolveDepressions, addMeandering, getPath, specify, getName, getBasin, remove};

143
modules/ui/rivers-editor.js
View file

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

31
modules/ui/rivers-overview.js
View file

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

2
modules/ui/tools.js
View file

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

2
modules/utils.js
View file

@ -182,11 +182,9 @@ function toHEX(rgb){
// return array of standard shuffled colors
function getColors(number) {
// const c12 = d3.scaleOrdinal(d3.schemeSet3);
const c12 = ["#dababf","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#c6b9c1","#bc80bd","#ccebc5","#ffed6f","#8dd3c7","#eb8de7"];
const cRB = d3.scaleSequential(d3.interpolateRainbow);
const colors = d3.shuffle(d3.range(number).map(i => i < 12 ? c12[i] : d3.color(cRB((i-12)/(number-12))).hex()));
//debug.selectAll("circle").data(colors).enter().append("circle").attr("r", 15).attr("cx", (d,i) => 60 + i * 40).attr("cy", 20).attr("fill", d => d);
return colors;
}