v1.5.78 - river editor update

index.css

@@ -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 {
@@ -276,7 +266,6 @@ i.icon-lock {
 }
 
 #routeLength,
-#riverLength,
 #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 {

index.html

@@ -1564,32 +1564,65 @@
     </div>
 
     <div id="riverEditor" class="dialog" style="display: none">
-      <button id="riverNameShow" data-tip="Show river name section" class="icon-font"></button>
+      <div id="riverBody" style="padding-bottom: .3em">
-      <div id="riverNameSection" style="display: none">
+
-        <button id="riverNameHide" data-tip="Hide the river name section" class="icon-font"></button>
+        <div style="padding: .1em">
-        <input id="riverName" data-tip="Change river proper name" style="width: 8em">
+          <div class="label" style="width: 4.8em">Name:</div>
-        <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>
+          <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>
 
-      <button id="riverWidthShow" data-tip="Show river width and widening change section" class="icon-resize-full"></button>
+        <div style="padding: .1em" data-tip="Type to change river type (e.g. fork, creek, river, brook, stream)">
-      <div id="riverWidthSection" style="display: none">
+          <div class="label">Type:</div>
-        <button id="riverWidthHide" data-tip="Hide the river width and widening change section" class="icon-resize-full"></button>
+          <input id="riverType" autocorrect="off" spellcheck="false">
-        <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>
 
-      <button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
+        <div style="padding: .1em" data-tip="Select parent river">
-      <button id="riverLength" data-tip="River length in selected units">0</button>
+          <div class="label">Mainstem:</div>
-      <button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
+          <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>
+
+      <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>
+    </div>
 
     <div id="elevationProfile" class="dialog" style="display: none" width="100%">
       <div id="elevationGraph" data-tip="Elevation profile"></div>
@@ -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:1.7em" 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:7.9em" 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: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 basin" class="sortable alphabetically" data-sortby="basin">Basin&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>

modules/river-generator.js

@@ -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) {
+const getBasin = function(r) {
-  while (p && r !== p && r !== e) {
+    const parent = pack.rivers.find(river => river.i === r)?.parent;
-    const parent = pack.rivers.find(r => r.i === p);
+    if (!parent || r === parent) return r;
-    if (!parent) return r;
+    return getBasin(parent);
-    r = parent.i;
-    p = parent.parent;
-  }
-  return r;
 }
 
 return {generate, resolveDepressions, addMeandering, getPath, specify, getName, getBasin, remove};

modules/ui/rivers-editor.js

@@ -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("riverWidthShow").addEventListener("click", showRiverWidth);
+  document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth);
-  document.getElementById("riverWidthHide").addEventListener("click", hideRiverWidth);
+  document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
-  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) {
+  function getRiver() {
-    const river = +node.id.slice(5);
+    const riverId = +node.id.slice(5);
-    const r = pack.rivers.find(r => r.i === river);
+    const river = pack.rivers.find(r => r.i === riverId);
-    riverName.value = r.name;
+    return river;
-    riverType.value = r.type;
+  }
+
+  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 length = getRiver().length;
-    const segments = Math.ceil(l / 4);
+    const segments = Math.ceil(length / 5);
-    const increment = rn(l / segments * 1e5);
+    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);
+    getRiver().name = this.value;
-    const r = pack.rivers.find(r => r.i === river);
-    if (r) r.name = this.value;
   }
 
   function changeType() {
-    const river = +elSelected.attr("id").slice(5);
+    getRiver().type = this.value;
-    const r = pack.rivers.find(r => r.i === river);
-    if (r) r.type = this.value;
   }
 
   function generateNameCulture() {
-    const river = +elSelected.attr("id").slice(5);
+    const r = getRiver();
-    const r = pack.rivers.find(r => r.i === river);
+    r.name = riverName.value = Rivers.getName(r.mouth);
-    if (r) r.name = riverName.value = Rivers.getName(r.mouth);
   }
 
   function generateNameRandom() {
-    const river = +elSelected.attr("id").slice(5);
+    const r = getRiver();
-    const r = pack.rivers.find(r => r.i === river);
     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);

modules/ui/rivers-overview.js

@@ -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 basins = [...new Set(pack.rivers.map(r => r.basin))];
-      const colors = getColors(basins.length);
+      const colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
 
-      basins.forEach((b,i) => {
+      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 + ",";
+      const d = el.dataset;
-      data += el.dataset.name + ",";
+      const discharge = d.discharge + " m³/s"
-      data += el.dataset.type + ",";
+      const length = rn(d.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
-      data += el.querySelector(".biomeArea").innerHTML + ",";
+      const width = rn(d.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
-      data += el.dataset.basin + "\n";
+      data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
     });
 
     const name = getFileName("Rivers") + ".csv";

modules/ui/tools.js

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

modules/utils.js

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