delete rendered rivers on layer off

modules/river-generator.js

@@ -170,14 +170,13 @@
         const parent = riverParents[key] || 0;
 
         const widthFactor = !parent || parent === riverId ? 1.2 : 1;
-        const initStep = cells.h[source] >= 20 ? 1 : 10;
+        const riverMeandered = addMeandering(riverCells);
-        const riverMeandered = addMeandering(riverCells, initStep);
         const [path, length, offset] = getRiverPath(riverMeandered, widthFactor);
         riverPaths.push([path, riverId]);
 
         // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m,
         // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m
-        const width = rn((offset / 1.4) ** 2, 2); // mouth width in km
+        const width = rn((offset / 1.5) ** 1.8, 2); // mouth width in km
         const discharge = cells.fl[mouth]; // m3 in second
 
         pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells});
@@ -269,11 +268,12 @@
   };
 
   // add points at 1/3 and 2/3 of a line between adjacents river cells
-  const addMeandering = function (riverCells, step = 1, meandering = 0.5, riverPoints = null) {
+  const addMeandering = function (riverCells, meandering = 0.5, riverPoints = null) {
-    const {fl, conf} = pack.cells;
+    const {fl, conf, h} = pack.cells;
     const meandered = [];
     const lastStep = riverCells.length - 1;
     const points = getRiverPoints(riverCells, riverPoints);
+    let step = h[riverCells[0]] < 20 ? 1 : 10;
 
     let fluxPrev = 0;
     const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux);
@@ -348,9 +348,9 @@
 
   const fluxFactor = 500;
   const maxFluxWidth = 2;
-  const widthFactor = 200;
+  const lengthFactor = 200;
-  const stepWidth = 1 / widthFactor;
+  const stepWidth = 1 / lengthFactor;
-  const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / widthFactor);
+  const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / lengthFactor);
   const maxProgression = last(lengthProgression);
 
   // build polygon from a list of points and calculated offset (width)

modules/ui/layers.js

@@ -1444,18 +1444,26 @@ function toggleTexture(event) {
 function toggleRivers(event) {
   if (!layerIsOn("toggleRivers")) {
     turnButtonOn("toggleRivers");
-    $("#rivers").fadeIn();
+    drawRivers();
     if (event && isCtrlClick(event)) editStyle("rivers");
   } else {
-    if (event && isCtrlClick(event)) {
+    if (event && isCtrlClick(event)) return editStyle("rivers");
-      editStyle("rivers");
+    rivers.selectAll("*").remove();
-      return;
-    }
-    $("#rivers").fadeOut();
     turnButtonOff("toggleRivers");
   }
 }
 
+function drawRivers() {
+  const riverPaths = pack.rivers.map(river => {
+    const riverMeandered = Rivers.addMeandering(river.cells, 0.5, river.points);
+    const widthFactor = river.widthFactor || 1;
+    const startingWidth = river.startingWidth || 0;
+    const [path] = Rivers.getRiverPath(riverMeandered, widthFactor, startingWidth);
+    return [path, river.i];
+  });
+  rivers.html(riverPaths.map(d => `<path id="river${d[1]}" d="${d[0]}"/>`).join(""));
+}
+
 function toggleRoutes(event) {
   if (!layerIsOn("toggleRoutes")) {
     turnButtonOn("toggleRoutes");

modules/ui/tools.js

@@ -538,6 +538,7 @@ function addRiverOnClick() {
   if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error");
   if (cells.b[i]) return;
 
+  const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType} = Rivers;
   const riverCells = [];
   let riverId = last(rivers).id + 1;
   let parent = 0;
@@ -545,8 +546,8 @@ function addRiverOnClick() {
   const initialFlux = grid.cells.prec[cells.g[i]];
   cells.fl[i] = initialFlux;
 
-  const h = Rivers.alterHeights();
+  const h = alterHeights();
-  Rivers.resolveDepressions(h);
+  resolveDepressions(h);
 
   while (i) {
     cells.r[i] = riverId;
@@ -615,9 +616,9 @@ function addRiverOnClick() {
   const river = rivers.find(r => r.i === riverId);
   const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1);
 
-  const riverMeandered = Rivers.addMeandering(riverCells, 1);
+  const riverMeandered = addMeandering(riverCells);
   lineGen.curve(d3.curveCatmullRom.alpha(0.1));
-  const [path, length, offset] = Rivers.getRiverPath(riverMeandered, widthFactor);
+  const [path, length, offset] = getRiverPath(riverMeandered, widthFactor);
   viewbox
     .select("#rivers")
     .append("path")
@@ -637,9 +638,9 @@ function addRiverOnClick() {
     river.width = width;
     river.cells = riverCells;
   } else {
-    const basin = Rivers.getBasin(parent);
+    const basin = getBasin(parent);
-    const name = Rivers.getName(mouth);
+    const name = getName(mouth);
-    const type = Rivers.getType({i: riverId, length, parent});
+    const type = getType({i: riverId, length, parent});
 
     rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells, basin, name, type});
   }