-
-
+
${r.name}
+
${r.type}
${discharge}
${length}
${width}
@@ -50,15 +51,16 @@ function overviewRivers() {
// update footer
riversFooterNumber.innerHTML = pack.rivers.length;
- const averageLength = rn(d3.sum(pack.rivers.map(r => r.length)) / pack.rivers.length);
- riversFooterLength.innerHTML = (averageLength * distanceScaleInput.value) + " " + distanceUnitInput.value;
+ const averageDischarge = rn(d3.mean(pack.rivers.map(r => r.discharge)));
+ riversFooterDischarge.innerHTML = averageDischarge + " m³/s";
+ const averageLength = rn(d3.mean(pack.rivers.map(r => r.length)) );
+ riversFooterLength.innerHTML = (averageLength * distanceScaleInput.value) + " " + unit;
+ const averageWidth = rn(d3.mean(pack.rivers.map(r => r.width)), 3);
+ riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit;
// add listeners
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev)));
- body.querySelectorAll("div > input.riverName").forEach(el => el.addEventListener("input", changeRiverName));
- body.querySelectorAll("div > input.riverName").forEach(el => el.addEventListener("click", regenerateRiverName));
- body.querySelectorAll("div > input.riverType").forEach(el => el.addEventListener("input", changeRiverType));
body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver));
body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor));
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove));
@@ -72,32 +74,11 @@ function overviewRivers() {
rivers.select("#river"+r).attr("stroke", "red").attr("stroke-width", 1);
}
- function riverHighlightOff() {
- const r = +event.target.dataset.id;
+ function riverHighlightOff(e) {
+ const r = +e.target.dataset.id;
rivers.select("#river"+r).attr("stroke", null).attr("stroke-width", null);
}
- function changeRiverName() {
- if (this.value == "") tip("Please provide a proper name", false, "error");
- const river = +this.parentNode.dataset.id;
- pack.rivers.find(r => r.i === river).name = this.value;
- this.parentNode.dataset.name = this.value;
- }
-
- function regenerateRiverName(event) {
- if (!isCtrlClick(event)) return;
- const river = +this.parentNode.dataset.id;
- const r = pack.rivers.find(r => r.i === river);
- r.name = this.value = this.parentNode.dataset.name = Rivers.getName(r.mouth);
- }
-
- function changeRiverType() {
- if (this.value == "") tip("Please provide a type name", false, "error");
- const river = +this.parentNode.dataset.id;
- pack.rivers.find(r => r.i === river).type = this.value;
- this.parentNode.dataset.type = this.value;
- }
-
function zoomToRiver() {
const r = +this.parentNode.dataset.id;
const river = rivers.select("#river"+r).node();
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 9c7d42a5..b57c22ab 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -522,25 +522,30 @@ function addRiverOnClick() {
}
const points = Rivers.addMeandering(dataRiver, 1, .5);
- const width = Math.random() * .5 + .9;
- const increment = Math.random() * .4 + .8;
- const [path, length] = Rivers.getPath(points, width, increment);
- rivers.append("path").attr("d", path).attr("id", "river"+river).attr("data-width", width).attr("data-increment", increment);
+ const widthFactor = rn(.8 + Math.random() * .4, 1); // river width modifier [.8, 1.2]
+ const sourceWidth = .1;
+ const [path, length, offset] = Rivers.getPath(points, widthFactor, sourceWidth);
+ rivers.append("path").attr("d", path).attr("id", "river"+river);
// add new river to data or change extended river attributes
const r = pack.rivers.find(r => r.i === river);
+ const mouth = last(dataRiver).cell;
+ const discharge = cells.fl[mouth]; // in m3/s
+
if (r) {
r.source = dataRiver[0].cell;
r.length = length;
+ r.discharge = discharge;
} else {
const parent = dataRiver[0].parent || 0;
const basin = Rivers.getBasin(river);
const source = dataRiver[0].cell;
- const mouth = last(dataRiver).cell;
+ const width = rn(offset ** 2, 2); // mounth width in km
const name = Rivers.getName(mouth);
const smallLength = pack.rivers.map(r => r.length||0).sort((a,b) => a-b)[Math.ceil(pack.rivers.length * .15)];
const type = length < smallLength ? rw({"Creek":9, "River":3, "Brook":3, "Stream":1}) : "River";
- pack.rivers.push({i:river, parent, length, source, mouth, basin, name, type});
+
+ pack.rivers.push({i:river, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, basin, name, type});
}
if (d3.event.shiftKey === false) {