refactor(es modules): remove gloval var lineGen

src/main.js

@@ -62,7 +62,6 @@ biomesData = Biomes.getDefault();
 nameBases = Names.getNameBases(); // cultures-related data
 
 // color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
-// lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
 
 // voronoi graph extension, cannot be changed after generation
 graphWidth = +byId("mapWidthInput").value;
@@ -364,6 +363,8 @@ async function generate(options) {
     applyMapSize();
     randomizeOptions();
 
+    debugger;
+
     if (shouldRegenerateGrid(grid)) grid = precreatedGraph || generateGrid();
     else delete grid.cells.h;
     grid.cells.h = await HeightmapGenerator.generate(grid);
@@ -954,7 +955,7 @@ function drawCoastline() {
   );
   const landMask = defs.select("#land");
   const waterMask = defs.select("#water");
-  lineGen.curve(d3.curveBasisClosed);
+  const lineGen = d3.line().curve(d3.curveBasis);
 
   for (const i of cells.i) {
     const startFromEdge = !i && cells.h[i] >= 20;

src/modules/burgs-and-states.js

@@ -503,7 +503,8 @@ window.BurgsAndStates = (function () {
     TIME && console.time("drawStateLabels");
     const {cells, features, states} = pack;
     const paths = []; // text paths
-    lineGen.curve(d3.curveBundle.beta(1));
+
+    const lineGen = d3.line().curve(d3.curveBundle.beta(1));
     const mode = options.stateLabelsMode || "auto";
 
     for (const s of states) {

src/modules/define-globals.js

@@ -15,9 +15,6 @@ let rulers;
 let biomesData;
 let nameBases;
 
-let color;
-let lineGen;
-
 // defined in main.js
 let graphWidth;
 let graphHeight;

src/modules/heightmap-generator.js

@@ -1,8 +1,10 @@
+import {ERROR} from "../config/logging";
+import {lim, minmax} from "../utils/numberUtils";
 import {TIME} from "/src/config/logging";
 import {createTypedArray} from "/src/utils/arrayUtils";
 import {findGridCell} from "/src/utils/graphUtils";
+import {getNumberInRange, P, rand} from "/src/utils/probabilityUtils";
 import {byId} from "/src/utils/shorthands";
-import {rand, P, getNumberInRange} from "/src/utils/probabilityUtils";
 
 window.HeightmapGenerator = (function () {
   let grid = null;

src/modules/measurers.js

@@ -332,7 +332,7 @@ export class Opisometer extends Measurer {
   }
 
   updateCurve() {
-    lineGen.curve(d3.curveCatmullRom.alpha(0.5));
+    const lineGen = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
     const path = round(lineGen(this.points));
     this.el.selectAll("path").attr("d", path);
 
@@ -470,7 +470,7 @@ export class RouteOpisometer extends Measurer {
   }
 
   updateCurve() {
-    lineGen.curve(d3.curveCatmullRom.alpha(0.5));
+    const lineGen = d3.line().curve(d3.curveCatmullRomClosed.alpha(0.5));
     const path = round(lineGen(this.points));
     this.el.selectAll("path").attr("d", path);
 
@@ -525,7 +525,7 @@ export class Planimeter extends Measurer {
   }
 
   updateCurve() {
-    lineGen.curve(d3.curveCatmullRomClosed.alpha(0.5));
+    const lineGen = d3.line().curve(d3.curveCatmullRomClosed.alpha(0.5));
     const path = round(lineGen(this.points));
     this.el.selectAll("path").attr("d", path);
   }

src/modules/ocean-layers.js

@@ -12,7 +12,7 @@ window.OceanLayers = (function () {
     if (outline === "none") return;
     TIME && console.time("drawOceanLayers");
 
-    lineGen.curve(d3.curveBasisClosed);
+    const lineGen = d3.line().curve(d3.curveBasisClosed);
     (cells = grid.cells), (pointsN = grid.cells.i.length), (vertices = grid.vertices);
     const limits = outline === "random" ? randomizeOutline() : outline.split(",").map(s => +s);
 

src/modules/river-generator.js

@@ -401,6 +401,8 @@ window.Rivers = (function () {
     return widthFactor * (lengthWidth + fluxWidth) + startingWidth;
   };
 
+  const lineGen = d3.line().curve(d3.curveBasis);
+
   // build polygon from a list of points and calculated offset (width)
   const getRiverPath = function (points, widthFactor, startingWidth = 0) {
     const riverPointsLeft = [];

src/modules/routes-generator.js

@@ -131,6 +131,8 @@ window.Routes = (function () {
     return paths;
   };
 
+  const lineGen = d3.line().curve(d3.curveBasis);
+
   const draw = function (main, small, water) {
     TIME && console.time("drawRoutes");
     const {cells, burgs} = pack;

src/modules/ui/coastline-editor.js

@@ -83,8 +83,9 @@ export function editCoastline(node = d3.event.target) {
     redrawCoastline();
   }
 
+  const lineGen = d3.line().curve(d3.curveBasisClosed);
+
   function redrawCoastline() {
-    lineGen.curve(d3.curveBasisClosed);
     const f = +elSelected.attr("data-f");
     const vertices = pack.features[f].vertices;
     const points = clipPoly(

src/modules/ui/labels-editor.js

@@ -119,9 +119,10 @@ export function editLabel() {
     redrawLabelPath();
   }
 
+  const lineGen = d3.line().curve(d3.curveBundle.beta(1));
+
   function redrawLabelPath() {
     const path = document.getElementById("textPath_" + elSelected.attr("id"));
-    lineGen.curve(d3.curveBundle.beta(1));
     const points = [];
     debug
       .select("#controlPoints")

src/modules/ui/lakes-editor.js

@@ -117,8 +117,9 @@ export function editLake() {
     redrawLake();
   }
 
+  const lineGen = d3.line().curve(d3.curveBasisClosed);
+
   function redrawLake() {
-    lineGen.curve(d3.curveBasisClosed);
     const feature = getLake();
     const points = feature.vertices.map(v => pack.vertices.p[v]);
     const d = round(lineGen(points));

src/modules/ui/layers.js

@@ -270,6 +270,7 @@ function drawHeightmap() {
   const skip = +terrs.attr("skip") + 1;
   const simplification = +terrs.attr("relax");
 
+  const lineGen = d3.line().curve(d3.curveBasis);
   switch (+terrs.attr("curve")) {
     case 0:
       lineGen.curve(d3.curveBasisClosed);
@@ -383,7 +384,8 @@ function toggleTemp(event) {
 function drawTemp() {
   TIME && console.time("drawTemp");
   temperature.selectAll("*").remove();
-  lineGen.curve(d3.curveBasisClosed);
+
+  const lineGen = d3.line().curve(d3.curveBasisClosed);
   const scheme = d3.scaleSequential(d3.interpolateSpectral);
   const tMax = +temperatureEquatorOutput.max,
     tMin = +temperatureEquatorOutput.min,
@@ -1615,7 +1617,6 @@ export function drawRivers() {
   rivers.selectAll("*").remove();
 
   const {addMeandering, getRiverPath} = Rivers;
-  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
 
   const riverPaths = pack.rivers.map(({cells, points, i, widthFactor, sourceWidth}) => {
     if (!cells || cells.length < 2) return;

src/modules/ui/rivers-creator.js

@@ -123,7 +123,6 @@ export function createRiver() {
     const id = "river" + riverId;
 
     // render river
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     viewbox
       .select("#rivers")
       .append("path")

src/modules/ui/rivers-editor.js

@@ -166,7 +166,6 @@ export function editRiver(id) {
     const {widthFactor, sourceWidth} = river;
     const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
 
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
     elSelected.attr("d", path);
 

src/modules/ui/routes-editor.js

@@ -88,8 +88,9 @@ export function editRoute(onClick) {
     redrawRoute();
   }
 
+  const lineGen = d3.line().curve(d3.curveCatmullRom.alpha(0.1));
+
   function redrawRoute() {
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     const points = [];
     debug
       .select("#controlPoints")

src/modules/ui/tools.js

@@ -691,7 +691,6 @@ function addRiverOnClick() {
   }
 
   // render river
-  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
   const path = getRiverPath(meanderedPoints, widthFactor);
   const id = "river" + riverId;
   const riversG = viewbox.select("#rivers");

src/utils/graphUtils.ts

@@ -6,8 +6,6 @@ import {byId} from "./shorthands";
 import {Voronoi} from "/src/modules/voronoi";
 
 const Delaunator = window.Delaunator;
-const graphWidth = window.graphWidth;
-const graphHeight = window.graphHeight;
 
 // check if new grid graph should be generated or we can use the existing one
 export function shouldRegenerateGrid(grid) {