refactor: population utils

src/dialogs/dialogs/biomes-editor.js

@@ -7,7 +7,7 @@ import {getRandomColor} from "utils/colorUtils";
 import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
 import {openURL} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {getArea, getAreaUnit, si, getRuralPopulation, getBurgPopulation, getPopulationTip} from "utils/unitUtils";
 
 let isLoaded = false;
 
@@ -96,13 +96,12 @@ export function open() {
     for (const i of b.i) {
       if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
       const area = getArea(b.area[i]);
-      const rural = b.rural[i] * populationRate;
-      const urban = b.urban[i] * populationRate * urbanization;
-      const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(
-        rural
-      )}; Urban population: ${si(urban)}`;
       totalArea += area;
+
+      const rural = getRuralPopulation(b.rural[i]);
+      const urban = getBurgPopulation(b.urban[i]);
+      const population = rn(rural + urban);
+      const populationTip = getPopulationTip("Total", rural, urban);
       totalPopulation += population;
 
       lines += /* html */ `

src/dialogs/dialogs/burg-editor.js

@@ -10,7 +10,7 @@ import {findCell} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {parseTransform} from "utils/stringUtils";
-import {convertTemperature, getHeight} from "utils/unitUtils";
+import {convertTemperature, getHeight, getBurgPopulation, getBurgPopulationPoints} from "utils/unitUtils";
 import {restoreDefaultEvents} from "scripts/events";
 
 let isLoaded = false;
@@ -80,7 +80,7 @@ export function open({id} = {}) {
 
     document.getElementById("burgName").value = b.name;
     document.getElementById("burgType").value = b.type || "Generic";
-    document.getElementById("burgPopulation").value = rn(b.population * populationRate * urbanization);
+    document.getElementById("burgPopulation").value = getBurgPopulation(b.population);
     document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
 
     // update list and select culture
@@ -361,7 +361,7 @@ export function open({id} = {}) {
 
   function changePopulation() {
     const id = +elSelected.attr("data-id");
-    pack.burgs[id].population = rn(burgPopulation.value / populationRate / urbanization, 4);
+    pack.burgs[id].population = getBurgPopulationPoints(burgPopulation.value);
   }
 
   function toggleFeature() {

src/dialogs/dialogs/burgs-overview.js

@@ -1,16 +1,21 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findCell} from "utils/graphUtils";
-import {tip, clearMainTip} from "scripts/tooltips";
-import {getCoordinates} from "utils/coordinateUtils";
-import {rn} from "utils/numberUtils";
-import {si, siToInteger} from "utils/unitUtils";
-import {getHeight} from "utils/unitUtils";
-import {closeDialogs} from "dialogs/utils";
 import {openDialog} from "dialogs";
+import {closeDialogs} from "dialogs/utils";
 import {layerIsOn, toggleLayer} from "layers";
 import {applySorting} from "modules/ui/editors";
+import {restoreDefaultEvents} from "scripts/events";
+import {clearMainTip, tip} from "scripts/tooltips";
+import {getCoordinates} from "utils/coordinateUtils";
+import {findCell} from "utils/graphUtils";
+import {
+  getBurgPopulation,
+  getHeight,
+  si,
+  siToInteger,
+  getBurgPopulation,
+  getBurgPopulationPoints
+} from "utils/unitUtils";
 
 let isLoaded = false;
 
@@ -89,7 +94,7 @@ export function open() {
       totalPopulation = 0;
 
     for (const b of filtered) {
-      const population = b.population * populationRate * urbanization;
+      const population = getBurgPopulation(b.population);
       totalPopulation += population;
       const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
       const state = pack.states[b.state].name;
@@ -204,10 +209,11 @@ export function open() {
     const burg = +this.parentNode.dataset.id;
     if (this.value == "" || isNaN(+this.value)) {
       tip("Please provide an integer number (like 10000, not 10K)", false, "error");
-      this.value = si(pack.burgs[burg].population * populationRate * urbanization);
+      this.value = si(getBurgPopulation(pack.burgs[burg].population));
       return;
     }
-    pack.burgs[burg].population = this.value / populationRate / urbanization;
+
+    pack.burgs[burg].population = getBurgPopulationPoints(this.value);
     this.parentNode.dataset.population = this.value;
     this.value = si(this.value);
 
@@ -395,7 +401,7 @@ export function open() {
       d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119");
       const name = d.data.name;
       const parent = d.parent.data.name;
-      const population = si(d.value * populationRate * urbanization);
+      const population = si(getBurgPopulation(d.value));
 
       burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`;
       burgHighlightOn(ev);
@@ -507,7 +513,7 @@ export function open() {
       data += pack.states[b.state].fullName + ",";
       data += pack.cultures[b.culture].name + ",";
       data += pack.religions[pack.cells.religion[b.cell]].name + ",";
-      data += rn(b.population * populationRate * urbanization) + ",";
+      data += getBurgPopulation(b.population) + ",";
 
       // add geography data
       const [lon, lat] = getCoordinates(b.x, b.y, 2);

src/dialogs/dialogs/charts-overview.js

@@ -7,7 +7,14 @@ import {isWater} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
 import {capitalize} from "utils/stringUtils";
-import {convertTemperature, getArea, getAreaUnit, getFriendlyPrecipitation, si} from "utils/unitUtils";
+import {
+  convertTemperature,
+  getArea,
+  getAreaUnit,
+  getFriendlyPrecipitation,
+  si,
+  getCellPopulation
+} from "utils/unitUtils";
 
 const entitiesMap = {
   states: {
@@ -50,16 +57,7 @@ const entitiesMap = {
 const quantizationMap = {
   total_population: {
     label: "Total population",
-    quantize: cellId => getUrbanPopulation(cellId) + getRuralPopulation(cellId),
+    quantize: cellId => d3.sum(getCellPopulation(cellId)),
-    aggregate: values => rn(d3.sum(values)),
-    formatTicks: value => si(value),
-    stringify: value => value.toLocaleString(),
-    stackable: true,
-    landOnly: true
-  },
-  urban_population: {
-    label: "Urban population",
-    quantize: getUrbanPopulation,
     aggregate: values => rn(d3.sum(values)),
     formatTicks: value => si(value),
     stringify: value => value.toLocaleString(),
@@ -68,7 +66,16 @@ const quantizationMap = {
   },
   rural_population: {
     label: "Rural population",
-    quantize: getRuralPopulation,
+    quantize: cellId => getCellPopulation(cellId)[0],
+    aggregate: values => rn(d3.sum(values)),
+    formatTicks: value => si(value),
+    stringify: value => value.toLocaleString(),
+    stackable: true,
+    landOnly: true
+  },
+  urban_population: {
+    label: "Urban population",
+    quantize: cellId => getCellPopulation(cellId)[1],
     aggregate: values => rn(d3.sum(values)),
     formatTicks: value => si(value),
     stringify: value => value.toLocaleString(),
@@ -667,17 +674,6 @@ function biomeColorsGetter() {
   return Object.fromEntries(biomesData.i.map(i => [biomesData.name[i], biomesData.color[i]]));
 }
 
-function getUrbanPopulation(cellId) {
-  const burgId = pack.cells.burg[cellId];
-  if (!burgId) return 0;
-  const populationPoints = pack.burgs[burgId].population;
-  return populationPoints * populationRate * urbanization;
-}
-
-function getRuralPopulation(cellId) {
-  return pack.cells.pop[cellId] * populationRate;
-}
-
 function sortData(data, sorting) {
   if (sorting === "natural") return data;
 

src/dialogs/dialogs/coastline-editor.js

@@ -11,7 +11,7 @@ import {getArea, getAreaUnit, si} from "utils/unitUtils";
 
 let isLoaded = false;
 
-export function open({node}) {
+export function open({el}) {
   if (customization) return;
   closeDialogs(".stable");
   if (layerIsOn("toggleCells")) toggleCells();
@@ -24,8 +24,8 @@ export function open({node}) {
   });
 
   debug.append("g").attr("id", "vertices");
-  elSelected = d3.select(node);
+  elSelected = d3.select(el);
-  selectCoastlineGroup(node);
+  selectCoastlineGroup(el);
   drawCoastlineVertices();
   viewbox.on("touchmove mousemove", null);
 

src/dialogs/dialogs/cultures-editor.js

@@ -10,7 +10,16 @@ import {abbreviate} from "utils/languageUtils";
 import {rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
 import {capitalize} from "utils/stringUtils";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {
+  getArea,
+  getAreaUnit,
+  si,
+  getRuralPopulation,
+  getBurgPopulation,
+  getTotalPopulation,
+  getBurgPopulationPoints,
+  getPopulationTip
+} from "utils/unitUtils";
 import {applySortingByHeader} from "modules/ui/editors";
 
 const $body = insertEditorHtml();
@@ -155,13 +164,12 @@ function culturesEditorAddLines() {
   for (const c of pack.cultures) {
     if (c.removed) continue;
     const area = getArea(c.area);
-    const rural = c.rural * populationRate;
-    const urban = c.urban * populationRate * urbanization;
-    const population = rn(rural + urban);
-    const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
-      urban
-    )}. Click to edit`;
     totalArea += area;
+
+    const rural = getRuralPopulation(c.rural);
+    const urban = getBurgPopulation(c.urban);
+    const population = rn(rural + urban);
+    const populationTip = getPopulationTip("Total", rural, urban) + ". Click to edit";
     totalPopulation += population;
 
     if (!c.i) {
@@ -444,8 +452,8 @@ function changePopulation() {
   const culture = pack.cultures[cultureId];
   if (!culture.cells) return tip("Culture does not have any cells, cannot change population", false, "error");
 
-  const rural = rn(culture.rural * populationRate);
+  const rural = getRuralPopulation(culture.rural);
-  const urban = rn(culture.urban * populationRate * urbanization);
+  const urban = getBurgPopulation(culture.urban);
   const total = rural + urban;
   const format = n => Number(n).toLocaleString();
   const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
@@ -507,8 +515,9 @@ function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture)
   if (isFinite(urbanChange) && urbanChange !== 1) {
     burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
   }
+
   if (!isFinite(urbanChange) && +newUrban > 0) {
-    const points = newUrban / populationRate / urbanization;
+    const points = getBurgPopulationPoints(newUrban);
     const population = rn(points / burgs.length, 4);
     burgs.forEach(b => (b.population = population));
   }
@@ -645,8 +654,8 @@ async function showHierarchy() {
   const getDescription = culture => {
     const {name, type, rural, urban} = culture;
 
-    const population = rural * populationRate + urban * populationRate * urbanization;
+    const population = getTotalPopulation(rural, urban);
-    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+    const populationText = population > 0 ? si(population) + " people" : "Extinct";
     return `${name} culture. ${type}. ${populationText}`;
   };
 

src/dialogs/dialogs/label-editor.js

@@ -1,17 +1,20 @@
-import {findCell} from "utils/graphUtils";
+import * as d3 from "d3";
-import {tip, showMainTip} from "scripts/tooltips";
+
-import {round, parseTransform} from "utils/stringUtils";
 import {closeDialogs} from "dialogs/utils";
+import {layerIsOn, toggleLayer} from "layers";
+import {unselect} from "modules/ui/editors";
+import {showMainTip, tip} from "scripts/tooltips";
+import {findCell} from "utils/graphUtils";
+import {byId} from "utils/shorthands";
+import {parseTransform, round} from "utils/stringUtils";
 
 let isLoaded = false;
 
-export function editLabel() {
+export function open({el}) {
-  if (customization) return;
   closeDialogs();
-  if (!layerIsOn("toggleLabels")) toggleLabels();
+  if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
 
-  const tspan = d3.event.target;
+  const textPath = el.parentNode;
-  const textPath = tspan.parentNode;
   const text = textPath.parentNode;
   elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true);
   viewbox.on("touchmove mousemove", showEditorTips);
@@ -32,28 +35,28 @@ export function editLabel() {
   isLoaded = true;
 
   // add listeners
-  document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
+  byId("labelGroupShow")?.on("click", showGroupSection);
-  document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
+  byId("labelGroupHide")?.on("click", hideGroupSection);
-  document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
+  byId("labelGroupSelect")?.on("click", changeGroup);
-  document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
+  byId("labelGroupInput")?.on("change", createNewGroup);
-  document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
+  byId("labelGroupNew")?.on("click", toggleNewGroupInput);
-  document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
+  byId("labelGroupRemove")?.on("click", removeLabelsGroup);
 
-  document.getElementById("labelTextShow").addEventListener("click", showTextSection);
+  byId("labelTextShow")?.on("click", showTextSection);
-  document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
+  byId("labelTextHide")?.on("click", hideTextSection);
-  document.getElementById("labelText").addEventListener("input", changeText);
+  byId("labelText")?.on("input", changeText);
-  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
+  byId("labelTextRandom")?.on("click", generateRandomName);
 
-  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
+  byId("labelEditStyle")?.on("click", editGroupStyle);
 
-  document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
+  byId("labelSizeShow")?.on("click", showSizeSection);
-  document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
+  byId("labelSizeHide")?.on("click", hideSizeSection);
-  document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
+  byId("labelStartOffset")?.on("input", changeStartOffset);
-  document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
+  byId("labelRelativeSize")?.on("input", changeRelativeSize);
 
-  document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
+  byId("labelAlign")?.on("click", editLabelAlign);
-  document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
+  byId("labelLegend")?.on("click", editLabelLegend);
-  document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
+  byId("labelRemoveSingle")?.on("click", removeLabel);
 
   function showEditorTips() {
     showMainTip();
@@ -68,12 +71,12 @@ export function editLabel() {
     const group = text.parentNode.id;
 
     if (group === "states" || group === "burgLabels") {
-      document.getElementById("labelGroupShow").style.display = "none";
+      byId("labelGroupShow").style.display = "none";
       return;
     }
 
     hideGroupSection();
-    const select = document.getElementById("labelGroupSelect");
+    const select = byId("labelGroupSelect");
     select.options.length = 0; // remove all options
 
     labels.selectAll(":scope > g").each(function () {
@@ -84,17 +87,15 @@ export function editLabel() {
   }
 
   function updateValues(textPath) {
-    document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
+    byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
-      .map(tspan => tspan.textContent)
+    byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-      .join("|");
+    byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
-    document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-    document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
   }
 
   function drawControlPointsAndLine() {
     debug.select("#controlPoints").remove();
     debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = byId("textPath_" + elSelected.attr("id"));
     debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
     const l = path.getTotalLength();
     if (!l) return;
@@ -125,7 +126,7 @@ export function editLabel() {
   const lineGen = d3.line().curve(d3.curveBundle.beta(1));
 
   function redrawLabelPath() {
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = byId("textPath_" + elSelected.attr("id"));
     const points = [];
     debug
       .select("#controlPoints")
@@ -195,19 +196,19 @@ export function editLabel() {
 
   function showGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelGroupSection").style.display = "inline-block";
+    byId("labelGroupSection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelGroupSection").style.display = "none";
+    byId("labelGroupSection").style.display = "none";
-    document.getElementById("labelGroupInput").style.display = "none";
+    byId("labelGroupInput").style.display = "none";
-    document.getElementById("labelGroupInput").value = "";
+    byId("labelGroupInput").value = "";
-    document.getElementById("labelGroupSelect").style.display = "inline-block";
+    byId("labelGroupSelect").style.display = "inline-block";
   }
 
   function changeGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -231,7 +232,7 @@ export function editLabel() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
+    if (byId(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -244,22 +245,22 @@ export function editLabel() {
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
-      document.getElementById("labelGroupSelect").selectedOptions[0].remove();
+      byId("labelGroupSelect").selectedOptions[0].remove();
-      document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+      byId("labelGroupSelect").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("labelGroupInput").value = "";
+      byId("labelGroupInput").value = "";
       return;
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("labels").appendChild(newGroup);
+    byId("labels").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+    byId("labelGroupSelect").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("labelGroupInput").value = "";
+    byId("labelGroupInput").value = "";
   }
 
   function removeLabelsGroup() {
@@ -282,7 +283,7 @@ export function editLabel() {
             .select("#" + group)
             .selectAll("text")
             .each(function () {
-              document.getElementById("textPath_" + this.id).remove();
+              byId("textPath_" + this.id).remove();
               this.remove();
             });
           if (!basic) labels.select("#" + group).remove();
@@ -296,16 +297,16 @@ export function editLabel() {
 
   function showTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelTextSection").style.display = "inline-block";
+    byId("labelTextSection").style.display = "inline-block";
   }
 
   function hideTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelTextSection").style.display = "none";
+    byId("labelTextSection").style.display = "none";
   }
 
   function changeText() {
-    const input = document.getElementById("labelText").value;
+    const input = byId("labelText").value;
     const el = elSelected.select("textPath").node();
     const example = d3
       .select(elSelected.node().parentNode)
@@ -344,7 +345,7 @@ export function editLabel() {
       const culture = pack.cells.culture[cell];
       name = Names.getCulture(culture);
     }
-    document.getElementById("labelText").value = name;
+    byId("labelText").value = name;
     changeText();
   }
 
@@ -355,12 +356,12 @@ export function editLabel() {
 
   function showSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelSizeSection").style.display = "inline-block";
+    byId("labelSizeSection").style.display = "inline-block";
   }
 
   function hideSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelSizeSection").style.display = "none";
+    byId("labelSizeSection").style.display = "none";
   }
 
   function changeStartOffset() {

src/dialogs/dialogs/lake-editor.js

@@ -1,19 +1,20 @@
 import * as d3 from "d3";
 
 import {closeDialogs} from "dialogs/utils";
+import {layerIsOn, toggleLayer} from "layers";
 import {tip} from "scripts/tooltips";
 import {getPackPolygon} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
 import {rand} from "utils/probabilityUtils";
 import {round} from "utils/stringUtils";
 import {getArea, getAreaUnit, getHeight, si} from "utils/unitUtils";
+import {unselect} from "modules/ui/editors";
 
 let isLoaded = false;
 
-export function editLake() {
+export function open({el}) {
-  if (customization) return;
   closeDialogs(".stable");
-  if (layerIsOn("toggleCells")) toggleCells();
+  if (layerIsOn("toggleCells")) toggleLayer("toggleCells");
 
   $("#lakeEditor").dialog({
     title: "Edit Lake",
@@ -22,11 +23,10 @@ export function editLake() {
     close: closeLakesEditor
   });
 
-  const node = d3.event.target;
   debug.append("g").attr("id", "vertices");
-  elSelected = d3.select(node);
+  elSelected = d3.select(el);
   updateLakeValues();
-  selectLakeGroup(node);
+  selectLakeGroup(el);
   drawLakeVertices();
   viewbox.on("touchmove mousemove", null);
 
@@ -34,17 +34,17 @@ export function editLake() {
   isLoaded = true;
 
   // add listeners
-  document.getElementById("lakeName").addEventListener("input", changeName);
+  byId("lakeName")?.on("input", changeName);
-  document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
+  byId("lakeNameCulture")?.on("click", generateNameCulture);
-  document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom);
+  byId("lakeNameRandom")?.on("click", generateNameRandom);
 
-  document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
+  byId("lakeGroup")?.on("change", changeLakeGroup);
-  document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
+  byId("lakeGroupAdd")?.on("click", toggleNewGroupInput);
-  document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
+  byId("lakeGroupName")?.on("change", createNewGroup);
-  document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
+  byId("lakeGroupRemove")?.on("click", removeLakeGroup);
 
-  document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
+  byId("lakeEditStyle")?.on("click", editGroupStyle);
-  document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
+  byId("lakeLegend")?.on("click", editLakeLegend);
 
   function getLake() {
     const lakeId = +elSelected.attr("data-f");
@@ -55,28 +55,27 @@ export function editLake() {
     const cells = pack.cells;
 
     const l = getLake();
-    document.getElementById("lakeName").value = l.name;
+    byId("lakeName").value = l.name;
-    document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
+    byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
 
     const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
-    document.getElementById("lakeShoreLength").value =
+    byId("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
-      si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
 
     const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
     const heights = lakeCells.map(i => cells.h[i]);
 
-    document.getElementById("lakeElevation").value = getHeight(l.height);
+    byId("lakeElevation").value = getHeight(l.height);
-    document.getElementById("lakeAvarageDepth").value = getHeight(d3.mean(heights), true);
+    byId("lakeAvarageDepth").value = getHeight(d3.mean(heights), true);
-    document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), true);
+    byId("lakeMaxDepth").value = getHeight(d3.min(heights), true);
 
-    document.getElementById("lakeFlux").value = l.flux;
+    byId("lakeFlux").value = l.flux;
-    document.getElementById("lakeEvaporation").value = l.evaporation;
+    byId("lakeEvaporation").value = l.evaporation;
 
     const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
     const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
-    document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
+    byId("lakeInlets").value = inlets ? inlets.length : "no";
-    document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
+    byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
-    document.getElementById("lakeOutlet").value = outlet;
+    byId("lakeOutlet").value = outlet;
   }
 
   function drawLakeVertices() {
@@ -132,7 +131,7 @@ export function editLake() {
     defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
 
     feature.area = Math.abs(d3.polygonArea(points));
-    document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
+    byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
   }
 
   function changeName() {
@@ -151,7 +150,7 @@ export function editLake() {
 
   function selectLakeGroup(node) {
     const group = node.parentNode.id;
-    const select = document.getElementById("lakeGroup");
+    const select = byId("lakeGroup");
     select.options.length = 0; // remove all options
 
     lakes.selectAll("g").each(function () {
@@ -160,7 +159,7 @@ export function editLake() {
   }
 
   function changeLakeGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
     getLake().group = this.value;
   }
 
@@ -185,7 +184,7 @@ export function editLake() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
+    if (byId(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -199,23 +198,23 @@ export function editLake() {
     const oldGroup = elSelected.node().parentNode;
     const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("lakeGroup").selectedOptions[0].remove();
+      byId("lakeGroup").selectedOptions[0].remove();
-      document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+      byId("lakeGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("lakeGroupName").value = "";
+      byId("lakeGroupName").value = "";
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("lakes").appendChild(newGroup);
+    byId("lakes").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+    byId("lakeGroup").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("lakeGroupName").value = "";
+    byId("lakeGroupName").value = "";
   }
 
   function removeLakeGroup() {
@@ -234,14 +233,14 @@ export function editLake() {
       buttons: {
         Remove: function () {
           $(this).dialog("close");
-          const freshwater = document.getElementById("freshwater");
+          const freshwater = byId("freshwater");
-          const groupEl = document.getElementById(group);
+          const groupEl = byId(group);
           while (groupEl.childNodes.length) {
             freshwater.appendChild(groupEl.childNodes[0]);
           }
           groupEl.remove();
-          document.getElementById("lakeGroup").selectedOptions[0].remove();
+          byId("lakeGroup").selectedOptions[0].remove();
-          document.getElementById("lakeGroup").value = "freshwater";
+          byId("lakeGroup").value = "freshwater";
         },
         Cancel: function () {
           $(this).dialog("close");

src/dialogs/dialogs/religions-editor.js

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 
 import {openDialog} from "dialogs";
 import {closeDialogs} from "dialogs/utils";
+import {applySortingByHeader} from "modules/ui/editors";
 import {restoreDefaultEvents} from "scripts/events";
 import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
 import {debounce} from "utils/functionUtils";
@@ -9,8 +10,16 @@ import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
 import {abbreviate} from "utils/languageUtils";
 import {rn} from "utils/numberUtils";
 import {byId} from "utils/shorthands";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {
-import {applySortingByHeader} from "modules/ui/editors";
+  getArea,
+  getAreaUnit,
+  getRuralPopulation,
+  getBurgPopulation,
+  getTotalPopulation,
+  getBurgPopulationPoints,
+  getPopulationTip,
+  si
+} from "utils/unitUtils";
 
 const $body = insertEditorHtml();
 addListeners();
@@ -159,13 +168,12 @@ function religionsEditorAddLines() {
     if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
 
     const area = getArea(r.area);
-    const rural = r.rural * populationRate;
-    const urban = r.urban * populationRate * urbanization;
-    const population = rn(rural + urban);
-    const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
-      urban
-    )}. Click to change`;
     totalArea += area;
+
+    const rural = getRuralPopulation(r.rural);
+    const urban = getBurgPopulation(r.urban);
+    const population = rn(rural + urban);
+    const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
     totalPopulation += population;
 
     if (!r.i) {
@@ -371,8 +379,8 @@ function changePopulation() {
   const religion = pack.religions[religionId];
   if (!religion.cells) return tip("Religion does not have any cells, cannot change population", false, "error");
 
-  const rural = rn(religion.rural * populationRate);
+  const rural = getRuralPopulation(religion.rural);
-  const urban = rn(religion.urban * populationRate * urbanization);
+  const urban = getBurgPopulation(religion.urban);
   const total = rural + urban;
   const format = n => Number(n).toLocaleString();
   const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religionId);
@@ -433,7 +441,7 @@ function changePopulation() {
       burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
     }
     if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-      const points = urbanPop.value / populationRate / urbanization;
+      const points = getBurgPopulationPoints(urbanPop.value);
       const population = rn(points / burgs.length, 4);
       burgs.forEach(b => (b.population = population));
     }
@@ -557,8 +565,8 @@ async function showHierarchy() {
     };
 
     const formText = form === type ? "" : ". " + form;
-    const population = rural * populationRate + urban * populationRate * urbanization;
+    const population = getTotalPopulation(rural, urban);
-    const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+    const populationText = population > 0 ? si(population) + " people" : "Extinct";
 
     return `${name}${getTypeText()}${formText}. ${populationText}`;
   };

src/dialogs/dialogs/states-editor.js

@@ -11,7 +11,15 @@ import {getAdjective} from "utils/languageUtils";
 import {rn} from "utils/numberUtils";
 import {P, rand} from "utils/probabilityUtils";
 import {byId} from "utils/shorthands";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {
+  getArea,
+  getAreaUnit,
+  si,
+  getRuralPopulation,
+  getBurgPopulation,
+  getBurgPopulationPoints,
+  getPopulationTip
+} from "utils/unitUtils";
 
 const $body = insertEditorHtml();
 addListeners();
@@ -207,15 +215,16 @@ function statesEditorAddLines() {
   for (const s of pack.states) {
     if (s.removed) continue;
     const area = getArea(s.area);
-    const rural = s.rural * populationRate;
-    const urban = s.urban * populationRate * urbanization;
-    const population = rn(rural + urban);
-    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
-      urban
-    )}. Click to change`;
     totalArea += area;
+
+    const rural = getRuralPopulation(s.rural);
+    const urban = getBurgPopulation(s.urban);
+    const population = rn(rural + urban);
+    const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
     totalPopulation += population;
+
     totalBurgs += s.burgs;
+
     const focused = defs.select("#fog #focusState" + s.i).size();
 
     if (!s.i) {
@@ -529,8 +538,8 @@ function changePopulation(stateId) {
   const state = pack.states[stateId];
   if (!state.cells) return tip("State does not have any cells, cannot change population", false, "error");
 
-  const rural = rn(state.rural * populationRate);
+  const rural = getRuralPopulation(state.rural);
-  const urban = rn(state.urban * populationRate * urbanization);
+  const urban = getBurgPopulation(state.urban);
   const total = rural + urban;
   const format = n => Number(n).toLocaleString();
 
@@ -590,7 +599,7 @@ function changePopulation(stateId) {
       burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
     }
     if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-      const points = urbanPop.value / populationRate / urbanization;
+      const points = getBurgPopulationPoints(urbanPop.value);
       const burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
       const population = rn(points / burgs.length, 4);
       burgs.forEach(b => (b.population = population));
@@ -805,20 +814,18 @@ function showStatesChart() {
     const state = d.data.fullName;
 
     const area = getArea(d.data.area) + " " + getAreaUnit();
-    const rural = rn(d.data.rural * populationRate);
+    const rural = getRuralPopulation(d.data.rural);
-    const urban = rn(d.data.urban * populationRate * urbanization);
+    const urban = getBurgPopulation(d.data.urban);
 
-    const option = statesTreeType.value;
+    const optionToLabelMap = {
-    const value =
+      area: "Area: " + area,
-      option === "area"
+      rural: "Rural population: " + si(rural),
-        ? "Area: " + area
+      urban: "Urban population: " + si(urban),
-        : option === "rural"
+      burgs: "Burgs number: " + d.data.burgs,
-        ? "Rural population: " + si(rural)
+      population: "Population: " + si(rural + urban)
-        : option === "urban"
+    };
-        ? "Urban population: " + si(urban)
+    const option = getInputValue("statesTreeType");
-        : option === "burgs"
+    const value = optionToLabelMap[option] || "";
-        ? "Burgs number: " + d.data.burgs
-        : "Population: " + si(rural + urban);
 
     statesInfo.innerHTML = /* html */ `${state}. ${value}`;
     stateHighlightOn(ev);
@@ -1355,8 +1362,9 @@ function downloadStatesCsv() {
   const data = lines.map($line => {
     const {id, name, form, color, capital, culture, type, expansionism, cells, burgs, area, population} = $line.dataset;
     const {fullName = "", rural, urban} = pack.states[+id];
-    const ruralPopulation = Math.round(rural * populationRate);
+    const ruralPopulation = getRuralPopulation(rural);
-    const urbanPopulation = Math.round(urban * populationRate * urbanization);
+    const urbanPopulation = getBurgPopulation(urban);
+
     return [
       id,
       name,

src/dialogs/index.ts

@@ -11,6 +11,8 @@ const dialogsMap = {
   heightmapSelection: "heightmap-selection",
   hierarchyTree: "hierarchy-tree",
   iceEditor: "ice-editor",
+  labelEditor: "label-editor",
+  lakeEditor: "lake-editor",
   religionsEditor: "religions-editor",
   statesEditor: "states-editor",
   unitsEditor: "units-editor"

src/modules/dynamic/export-json.js

@@ -107,19 +107,19 @@ function getSettings() {
     barBackColor: barBackColor.value,
     barPosX: barPosX.value,
     barPosY: barPosY.value,
-    populationRate: populationRate,
+    populationRate,
-    urbanization: urbanization,
+    urbanization,
     mapSize: mapSizeOutput.value,
     latitudeO: latitudeOutput.value,
     temperatureEquator: temperatureEquatorOutput.value,
     temperaturePole: temperaturePoleOutput.value,
     prec: precOutput.value,
-    options: options,
+    options,
     mapName: mapName.value,
     hideLabels: hideLabels.checked,
     stylePreset: stylePreset.value,
     rescaleLabels: rescaleLabels.checked,
-    urbanDensity: urbanDensity
+    urbanDensity
   };
 
   return settings;

src/modules/markers-generator.js

@@ -5,7 +5,7 @@ import {last} from "utils/arrayUtils";
 import {rn} from "utils/numberUtils";
 import {rand, P, gauss, ra, rw} from "utils/probabilityUtils";
 import {capitalize} from "utils/stringUtils";
-import {convertTemperature, getFriendlyHeight} from "utils/unitUtils";
+import {convertTemperature, getFriendlyHeight, getBurgPopulation} from "utils/unitUtils";
 import {getAdjective} from "utils/languageUtils";
 
 window.Markers = (function () {
@@ -200,7 +200,7 @@ window.Markers = (function () {
     const resource = rw(resources);
     const burg = pack.burgs[cells.burg[cell]];
     const name = `${burg.name} — ${resource} mining town`;
-    const population = rn(burg.population * populationRate * urbanization);
+    const population = getBurgPopulation(burg.population);
     const legend = `${burg.name} is a mining town of ${population} people just nearby the ${resource} mine`;
     notes.push({id, name, legend});
   }

src/modules/ui/editors.js

@@ -7,6 +7,7 @@ import {minmax, normalize, rn} from "utils/numberUtils";
 import {each} from "utils/probabilityUtils";
 import {byId} from "utils/shorthands";
 import {parseTransform} from "utils/stringUtils";
+import {getBurgPopulation} from "utils/unitUtils";
 
 // clear elSelected variable
 export function unselect() {
@@ -259,7 +260,7 @@ export function getMFCGlink(burg) {
 
   const sizeRaw = 2.13 * Math.pow((burgPopulation * populationRate) / urbanDensity, 0.385);
   const size = minmax(Math.ceil(sizeRaw), 6, 100);
-  const population = rn(burgPopulation * populationRate * urbanization);
+  const population = getBurgPopulation(burgPopulation);
 
   const river = cells.r[cell] ? 1 : 0;
   const coast = Number(burg.port > 0);

src/modules/ui/elevation-profile.js

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 import {findCell} from "utils/graphUtils";
 import {rn} from "utils/numberUtils";
 import {getColorScheme, getHeightColor} from "utils/colorUtils";
-import {getHeight} from "utils/unitUtils.ts";
+import {getHeight, getRuralPopulation, getBurgPopulation} from "utils/unitUtils.ts";
 
 export function showEPForRoute(node) {
   const points = [];
@@ -134,10 +134,10 @@ function showElevationProfile(data, routeLen, isRiver) {
       data += cell + ",";
       data += getHeight(h) + ",";
       data += h + ",";
-      data += rn(pop * populationRate) + ",";
+      data += getRuralPopulation(pop) + ",";
       if (burg) {
         data += pack.burgs[burg].name + ",";
-        data += pack.burgs[burg].population * populationRate * urbanization + ",";
+        data += getBurgPopulation(pack.burgs[burg].population) + ",";
       } else {
         data += ",0,";
       }
@@ -286,7 +286,7 @@ function showElevationProfile(data, routeLen, isRiver) {
         pop += pack.burgs[chartData.burg[k]].population * urbanization;
       }
 
-      const populationDesc = rn(pop * populationRate);
+      const populationDesc = getRuralPopulation(pop);
 
       const provinceDesc = province ? ", " + pack.provinces[province].name : "";
       const dataTip =

src/modules/ui/military-overview.js

@@ -4,7 +4,7 @@ import {tip} from "scripts/tooltips";
 import {wiki} from "utils/linkUtils";
 import {rn} from "utils/numberUtils";
 import {capitalize} from "utils/stringUtils";
-import {si} from "utils/unitUtils";
+import {si, getTotalPopulation} from "utils/unitUtils";
 import {closeDialogs} from "dialogs/utils";
 
 let isLoaded = false;
@@ -83,7 +83,7 @@ export function overviewMilitary() {
     const states = pack.states.filter(s => s.i && !s.removed);
 
     for (const s of states) {
-      const population = rn((s.rural + s.urban * urbanization) * populationRate);
+      const population = getTotalPopulation(s.rural, s.urban);
       const getForces = u => s.military.reduce((s, r) => s + (r.u[u.name] || 0), 0);
       const total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0);
       const rate = (total / population) * 100;
@@ -155,7 +155,7 @@ export function overviewMilitary() {
       u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u))
     );
 
-    const population = rn((s.rural + s.urban * urbanization) * populationRate);
+    const population = getTotalPopulation(s.rural, s.urban);
     const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
     const rate = (line.dataset.rate = (total / population) * 100);
     line.querySelector("div[data-type='total']").innerHTML = si(total);

src/modules/ui/provinces-editor.js

@@ -13,7 +13,15 @@ import {rn} from "utils/numberUtils";
 import {P, rand} from "utils/probabilityUtils";
 import {byId} from "utils/shorthands";
 import {parseTransform} from "utils/stringUtils";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {
+  getArea,
+  getAreaUnit,
+  si,
+  getRuralPopulation,
+  getBurgPopulation,
+  getBurgPopulationPoints,
+  getPopulationTip
+} from "utils/unitUtils";
 
 let isLoaded = false;
 
@@ -89,9 +97,7 @@ export function editProvinces() {
   }
 
   function collectStatistics() {
-    const cells = pack.cells,
+    const {cells, provinces, burgs} = pack;
-      provinces = pack.provinces,
-      burgs = pack.burgs;
     provinces.forEach(p => {
       if (!p.i || p.removed) return;
       p.area = p.rural = p.urban = 0;
@@ -139,12 +145,11 @@ export function editProvinces() {
     for (const p of filtered) {
       const area = getArea(p.area);
       totalArea += area;
-      const rural = p.rural * populationRate;
+
-      const urban = p.urban * populationRate * urbanization;
+      const rural = getRuralPopulation(p.rural);
+      const urban = getBurgPopulation(p.urban);
       const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(
+      const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
-        rural
-      )}; Urban population: ${si(urban)}`;
       totalPopulation += population;
 
       const stateName = pack.states[p.state].name;
@@ -403,8 +408,8 @@ export function editProvinces() {
       tip("Province does not have any cells, cannot change population", false, "error");
       return;
     }
-    const rural = rn(p.rural * populationRate);
+    const rural = getRuralPopulation(p.rural);
-    const urban = rn(p.urban * populationRate * urbanization);
+    const urban = getBurgPopulation(p.urban);
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
@@ -458,7 +463,7 @@ export function editProvinces() {
         p.burgs.forEach(b => (pack.burgs[b].population = rn(pack.burgs[b].population * urbanChange, 4)));
       }
       if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-        const points = urbanPop.value / populationRate / urbanization;
+        const points = getBurgPopulationPoints(urbanPop.value);
         const population = rn(points / burgs.length, 4);
         p.burgs.forEach(b => (pack.burgs[b].population = population));
       }
@@ -678,17 +683,18 @@ export function editProvinces() {
       const state = pack.states[d.data.state].fullName;
 
       const area = getArea(d.data.area) + " " + getAreaUnit();
-      const rural = rn(d.data.rural * populationRate);
+      const rural = getRuralPopulation(d.data.rural);
-      const urban = rn(d.data.urban * populationRate * urbanization);
+      const urban = getBurgPopulation(d.data.urban);
 
-      const value =
+      const optionToLabelMap = {
-        provincesTreeType.value === "area"
+        area: "Area: " + area,
-          ? "Area: " + area
+        rural: "Rural population: " + si(rural),
-          : provincesTreeType.value === "rural"
+        urban: "Urban population: " + si(urban),
-          ? "Rural population: " + si(rural)
+        burgs: "Burgs number: " + d.data.burgs,
-          : provincesTreeType.value === "urban"
+        population: "Population: " + si(rural + urban)
-          ? "Urban population: " + si(urban)
+      };
-          : "Population: " + si(rural + urban);
+      const option = getInputValue("provincesTreeType");
+      const value = optionToLabelMap[option] || "";
 
       provinceInfo.innerHTML = /* html */ `${name}. ${state}. ${value}`;
       provinceHighlightOn(ev);
@@ -1103,8 +1109,8 @@ export function editProvinces() {
       data += el.dataset.capital + ",";
       data += el.dataset.area + ",";
       data += el.dataset.population + ",";
-      data += `${Math.round(provincePack.rural * populationRate)},`;
+      data += getRuralPopulation(provincePack.rural) + ",";
-      data += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`;
+      data += getBurgPopulation(provincePack.urban) + "\n";
     });
 
     const name = getFileName("Provinces") + ".csv";

src/modules/ui/zones-editor.js

@@ -8,7 +8,15 @@ import {unique} from "utils/arrayUtils";
 import {findAll, findCell, getPackPolygon} from "utils/graphUtils";
 import {getNextId} from "utils/nodeUtils";
 import {rn} from "utils/numberUtils";
-import {getArea, getAreaUnit, si} from "utils/unitUtils";
+import {
+  getArea,
+  getAreaUnit,
+  si,
+  getRuralPopulation,
+  getBurgPopulation,
+  getBurgPopulationPoints,
+  getPopulationTip
+} from "utils/unitUtils";
 
 let isLoaded = false;
 
@@ -92,13 +100,12 @@ export function editZones() {
       const type = zoneEl.dataset.type;
       const fill = zoneEl.getAttribute("fill");
       const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
-      const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
+
-      const urban =
+      const rural = getRuralPopulation(d3.sum(c.map(i => pack.cells.pop[i])));
-        d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
+      const urban = getBurgPopulation(d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)));
       const population = rural + urban;
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(
+      const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
-        rural
+
-      )}; Urban population: ${si(urban)}. Click to change`;
       const inactive = zoneEl.style.display === "none";
       const focused = defs.select("#fog #focus" + zoneEl.id).size();
 
@@ -129,9 +136,11 @@ export function editZones() {
     // update footer
     const totalArea = getArea(graphWidth * graphHeight);
     zonesFooterArea.dataset.area = totalArea;
-    const totalPop =
+
-      (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) *
+    const ruralPopulation = d3.sum(pack.cells.pop);
-      populationRate;
+    const urbanPopulation = d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population));
+    const totalPop = getTotalPopulation(ruralPopulation, urbanPopulation);
+
     zonesFooterPopulation.dataset.population = totalPop;
     zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
@@ -450,10 +459,8 @@ export function editZones() {
     }
     const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell));
 
-    const rural = rn(d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate);
+    const rural = getRuralPopulation(d3.sum(cells.map(i => pack.cells.pop[i])));
-    const urban = rn(
+    const urban = getBurgPopulation(d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)));
-      d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
-    );
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
@@ -507,7 +514,7 @@ export function editZones() {
         burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
       }
       if (!isFinite(urbanChange) && +urbanPop.value > 0) {
-        const points = urbanPop.value / populationRate / urbanization;
+        const points = getBurgPopulationPoints(urbanPop.value);
         const population = rn(points / burgs.length, 4);
         burgs.forEach(b => (b.population = population));
       }

src/scripts/events.ts

@@ -2,16 +2,26 @@ import * as d3 from "d3";
 
 import {openDialog} from "dialogs";
 import {layerIsOn} from "layers";
+// @ts-expect-error js module
 import {clearLegend, dragLegendBox} from "modules/legend";
+// @ts-expect-error js module
 import {updateCellInfo} from "modules/ui/cell-info";
 import {debounce} from "utils/functionUtils";
-import {findCell, findGridCell} from "utils/graphUtils";
+import {findCell, findGridCell, isLand} from "utils/graphUtils";
 import {byId} from "utils/shorthands";
-import {convertTemperature, getCellIdPrecipitation, getFriendlyHeight, getPopulationTip, si} from "utils/unitUtils";
+import {
+  convertTemperature,
+  getBurgPopulation,
+  getCellIdPrecipitation,
+  getFriendlyHeight,
+  getCellPopulation,
+  getPopulationTip,
+  si
+} from "utils/unitUtils";
 import {showMainTip, tip} from "./tooltips";
 
 export function restoreDefaultEvents() {
-  Zoom.setZoomBehavior();
+  window.Zoom.setZoomBehavior();
   viewbox
     .style("cursor", "default")
     .on(".drag", null)
@@ -25,108 +35,132 @@ export function restoreDefaultEvents() {
 }
 
 // on viewbox click event - run function based on target
-function handleMapClick() {
+function handleMapClick(this: d3.ContainerElement) {
-  const el = d3.event.target;
+  const el: HTMLElement = d3.event.target;
-  if (!el || !el.parentElement || !el.parentElement.parentElement) return;
+  if (!el?.parentElement?.parentElement?.parentElement) return;
+
   const parent = el.parentElement;
-  const grand = parent.parentElement;
+  const grand = parent.parentElement!;
-  const great = grand.parentElement;
+  const great = grand.parentElement!;
+  const greatGreat = great.parentElement;
+
   const p = d3.mouse(this);
   const i = findCell(p[0], p[1]);
 
-  if (grand.id === "emblems") openDialog("emblemEditor", null, defineEmblemData(+el.dataset.i, parent));
+  if (grand.id === "emblems" && defineEmblemData(el)) openDialog("emblemEditor", null, defineEmblemData(el));
   else if (parent.id === "rivers") editRiver(el.id);
   else if (grand.id === "routes") editRoute();
-  else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
+  else if (el.tagName === "tspan" && greatGreat?.id === "labels") openDialog("labelEditor", null, {el});
-  else if (grand.id === "burgLabels" || grand.id === "burgIcons") openDialog("burgEditor", null, {id: +el.dataset.id});
+  else if (grand.id === "burgLabels" || grand.id === "burgIcons")
+    openDialog("burgEditor", null, {id: +(el.dataset.id || 0)});
   else if (parent.id === "ice") openDialog("iceEditor");
   else if (parent.id === "terrain") editReliefIcon();
   else if (grand.id === "markers" || great.id === "markers") editMarker();
-  else if (grand.id === "coastline") openDialog("coastlineEditor", null, {node: d3.event.target});
+  else if (grand.id === "coastline") openDialog("coastlineEditor", null, {el});
   else if (great.id === "armies") editRegiment();
   else if (pack.cells.t[i] === 1) {
     openDialog("coastlineEditor", null, {node: byId("island_" + pack.cells.f[i])});
-  } else if (grand.id === "lakes") editLake();
+  } else if (grand.id === "lakes") openDialog("lakeEditor", null, {el});
 }
 
-function defineEmblemData(i, parent) {
+function defineEmblemData(el: HTMLElement) {
-  const [g, type] =
+  const i = +(el.dataset?.i || 0);
-    parent.id === "burgEmblems"
+
-      ? [pack.burgs, "burg"]
+  type TEmblemType = "state" | "burg" | "province";
-      : parent.id === "provinceEmblems"
+  type TEmblemTypeArray = IPack[`${TEmblemType}s`];
-      ? [pack.provinces, "province"]
+
-      : [pack.states, "state"];
+  const emblemTypeMap: Dict<[TEmblemTypeArray, TEmblemType]> = {
-  return {type, id: type + "COA" + i, el: g[i]};
+    burgEmblems: [pack.burgs, "burg"],
+    provinceEmblems: [pack.provinces, "province"],
+    stateEmblems: [pack.states, "state"]
+  };
+
+  const emblemType = el.parentElement?.id;
+  if (emblemType && emblemType in emblemTypeMap) {
+    const [data, type] = emblemTypeMap[emblemType];
+    return {type, id: type + "COA" + i, el: data[i]};
+  }
+
+  return undefined;
 }
 
 const onMouseMove = debounce(handleMouseMove, 100);
-function handleMouseMove() {
+function handleMouseMove(this: d3.ContainerElement) {
   const point = d3.mouse(this);
   const i = findCell(point[0], point[1]); // pack cell id
   if (i === undefined) return;
 
   showNotes(d3.event);
   const gridCell = findGridCell(point[0], point[1], grid);
-  if (tooltip.dataset.main) showMainTip();
+  if (byId("tooltip")?.dataset.main) showMainTip();
-  else showMapTooltip(point, d3.event, i, gridCell);
+  else showTooltipOnMapHover(point, d3.event, i, gridCell);
-  if (cellInfo?.offsetParent) updateCellInfo(point, i, gridCell);
+  if (byId("cellInfo")?.offsetParent) updateCellInfo(point, i, gridCell);
 }
 
 // show note box on hover (if any)
-function showNotes(event) {
+function showNotes(event: Event) {
-  if (notesEditor?.offsetParent) return;
+  if (byId("notesEditor")?.offsetParent) return;
-  let id = event.target.id || event.target.parentNode.id || event.target.parentNode.parentNode.id;
+
-  if (event.target.parentNode.parentNode.id === "burgLabels") id = "burg" + event.target.dataset.id;
+  const el = event.target as SVGElement;
-  else if (event.target.parentNode.parentNode.id === "burgIcons") id = "burg" + event.target.dataset.id;
+  if (!el?.parentElement?.parentElement?.parentElement) return;
+
+  const parent = el.parentElement;
+  const grand = parent.parentElement!;
+
+  let id = el.id || parent.id || grand.id;
+  if (grand.id === "burgLabels") id = "burg" + el.dataset.id;
+  else if (grand.id === "burgIcons") id = "burg" + el.dataset.id;
 
   const note = notes.find(note => note.id === id);
   if (note !== undefined && note.legend !== "") {
-    byId("notes").style.display = "block";
+    byId("notes")!.style.display = "block";
-    byId("notesHeader").innerHTML = note.name;
+    byId("notesHeader")!.innerHTML = note.name;
-    byId("notesBody").innerHTML = note.legend;
+    byId("notesBody")!.innerHTML = note.legend;
-  } else if (!options.pinNotes && !markerEditor?.offsetParent) {
+  } else if (!options.pinNotes && !byId("markerEditor")?.offsetParent) {
-    byId("notes").style.display = "none";
+    byId("notes")!.style.display = "none";
-    byId("notesHeader").innerHTML = "";
+    byId("notesHeader")!.innerHTML = "";
-    byId("notesBody").innerHTML = "";
+    byId("notesBody")!.innerHTML = "";
   }
 }
 
 // show viewbox tooltip if main tooltip is blank
-function showMapTooltip(point, event, packCellId, gridCellId) {
+function showTooltipOnMapHover(point: TPoint, event: Event, packCellId: number, gridCellId: number) {
   tip(""); // clear tip
-  const path = event.composedPath();
+  const path = event.composedPath() as HTMLElement[];
   if (!path[path.length - 8]) return;
+
   const group = path[path.length - 7].id;
   const subgroup = path[path.length - 8].id;
-  const land = pack.cells.h[packCellId] >= 20;
+
+  const element = event.target as HTMLElement;
+  const parent = element.parentElement!;
+
+  const land = isLand(packCellId);
 
   // specific elements
-  if (group === "armies") return tip(event.target.parentNode.dataset.name + ". Click to edit");
+  if (group === "armies") return tip(parent.dataset.name + ". Click to edit");
 
-  if (group === "emblems" && event.target.tagName === "use") {
+  if (group === "emblems" && element.tagName === "use") {
-    const parent = event.target.parentNode;
+    d3.select(element).raise();
-    const [g, type] =
-      parent.id === "burgEmblems"
-        ? [pack.burgs, "burg"]
-        : parent.id === "provinceEmblems"
-        ? [pack.provinces, "province"]
-        : [pack.states, "state"];
-    const i = +event.target.dataset.i;
-
-    d3.select(event.target).raise();
     d3.select(parent).raise();
 
-    const name = g[i].fullName || g[i].name;
+    const emblemData = defineEmblemData(element);
+    if (!emblemData) return;
+
+    const {type, el} = emblemData;
+    const name = ("fullName" in el && el.fullName) || el.name;
     tip(`${name} ${type} emblem. Click to edit`);
     return;
   }
 
   if (group === "rivers") {
-    const river = +event.target.id.slice(5);
+    const riverId = +element.id.slice(5);
-    const r = pack.rivers.find(r => r.i === river);
+    const river = pack.rivers.find(r => r.i === riverId);
-    const name = r ? r.name + " " + r.type : "";
+    const name = river ? `${river.name} ${river.type}` : "";
     tip(name + ". Click to edit");
-    if (riversOverview?.offsetParent) highlightEditorLine(riversOverview, river, 5000);
+
+    const $riversOverview = byId("riversOverview")!;
+    if ($riversOverview?.offsetParent) highlightEditorLine($riversOverview, riverId, 5000);
     return;
   }
 
@@ -135,11 +169,14 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
   if (group === "terrain") return tip("Click to edit the Relief Icon");
 
   if (subgroup === "burgLabels" || subgroup === "burgIcons") {
-    const burg = +path[path.length - 10].dataset.id;
+    const burgId = +(path[path.length - 10].dataset.id || 0);
-    const b = pack.burgs[burg];
+    const burg = pack.burgs[burgId];
-    const population = si(b.population * populationRate * urbanization);
+
-    tip(`${b.name}. Population: ${population}. Click to edit`);
+    const population = si(getBurgPopulation(burg.population));
-    if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
+    tip(`${burg.name}. Population: ${population}. Click to edit`);
+
+    const $burgOverview = byId("burgOverview");
+    if ($burgOverview?.offsetParent) highlightEditorLine($burgOverview, burgId, 5000);
     return;
   }
   if (group === "labels") return tip("Click to edit the Label");
@@ -147,8 +184,8 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
   if (group === "markers") return tip("Click to edit the Marker and pin the marker note");
 
   if (group === "ruler") {
-    const tag = event.target.tagName;
+    const tag = element.tagName;
-    const className = event.target.getAttribute("class");
+    const className = element.getAttribute("class");
     if (tag === "circle" && className === "edge")
       return tip("Drag to adjust. Hold Ctrl and drag to add a point. Click to remove the point");
     if (tag === "circle" && className === "control")
@@ -164,7 +201,7 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
   if (subgroup === "burgLabels") return tip("Click to edit the Burg");
 
   if (group === "lakes" && !land) {
-    const lakeId = +event.target.dataset.f;
+    const lakeId = +element.dataset.f;
     const name = pack.features[lakeId]?.name;
     const fullName = subgroup === "freshwater" ? name : name + " " + subgroup;
     tip(`${fullName} lake. Click to edit`);
@@ -183,8 +220,10 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
 
   // covering elements
   if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getCellIdPrecipitation(packCellId));
-  else if (layerIsOn("togglePopulation")) tip(getPopulationTip(packCellId));
+  else if (layerIsOn("togglePopulation")) {
-  else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId]));
+    const [rural, urban] = getCellPopulation(packCellId);
+    tip(getPopulationTip("Cell population", rural, urban));
+  } else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId]));
   else if (layerIsOn("toggleBiomes") && pack.cells.biome[packCellId]) {
     const biome = pack.cells.biome[packCellId];
     tip("Biome: " + biomesData.name[biome]);
@@ -212,9 +251,9 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
   } else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
 }
 
-function highlightEditorLine(editor, id, timeout = 10000) {
+function highlightEditorLine($editor, id, timeout = 10000) {
-  Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
+  Array.from($editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
-  const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
+  const hovered = Array.from($editor.querySelectorAll("div")).find(el => el.dataset.id == id);
   if (hovered) hovered.classList.add("hovered"); // add hovered class
   if (timeout)
     setTimeout(() => {

src/types/note.d.ts

@@ -1,5 +1,5 @@
 interface INote {
-  id: number;
+  id: string;
   name: string;
   legend: string;
 }

src/types/pack.d.ts

@@ -1,5 +1,3 @@
-import {Numeric} from "d3";
-
 interface IPack {
   vertices: {
     p: TPoints;
@@ -23,16 +21,18 @@ interface IPack {
   cultures: ICulture[];
   provinces: IProvince[];
   burgs: IBurg[];
+  rivers: IRiver[];
   religions: IReligion[];
 }
 
 interface IFeature {
-  i: Numeric;
+  i: number;
 }
 
 interface IState {
   i: number;
   name: string;
+  fullName: string;
   removed?: boolean;
 }
 
@@ -45,6 +45,7 @@ interface ICulture {
 interface IProvince {
   i: number;
   name: string;
+  fullName: string;
   removed?: boolean;
 }
 
@@ -63,3 +64,19 @@ interface IReligion {
   name: string;
   removed?: boolean;
 }
+
+interface IRiver {
+  i: number;
+  name: string;
+  basin: number;
+  parent: number;
+  type: string;
+  source: number;
+  mouth: number;
+  sourceWidth: number;
+  width: number;
+  widthFactor: number;
+  length: number;
+  discharge: number;
+  cells: number[];
+}

src/utils/unitUtils.ts

@@ -113,10 +113,26 @@ export function getCellIdPrecipitation(gridCellId: number) {
 // Population
 // ***
 
+export function getRuralPopulation(cellPopulationPoints: number) {
+  return rn(cellPopulationPoints * populationRate);
+}
+
+export function getBurgPopulation(burgPopulationPoints: number) {
+  return rn(burgPopulationPoints * populationRate * urbanization);
+}
+
+export function getTotalPopulation(cellPopulationPoints: number, burgPopulationPoints: number) {
+  return rn((cellPopulationPoints + burgPopulationPoints * urbanization) * populationRate);
+}
+
+export function getBurgPopulationPoints(burgPopulationValue: number) {
+  return rn(burgPopulationValue / populationRate / urbanization, 4);
+}
+
 export function getCellPopulation(cellId: number) {
-  const rural = pack.cells.pop[cellId] * populationRate;
+  const rural = getRuralPopulation(pack.cells.pop[cellId]);
-  const burg = pack.cells.burg[cellId];
+  const burgId = pack.cells.burg[cellId];
-  const urban = burg ? pack.burgs[burg].population * populationRate * urbanization : 0;
+  const urban = burgId ? getBurgPopulation(pack.burgs[burgId].population) : 0;
   return [rural, urban];
 }
 
@@ -125,7 +141,6 @@ export function getFriendlyPopulation(cellId: number) {
   return `${si(rural + urban)} (${si(rural)} rural, urban ${si(urban)})`;
 }
 
-export function getPopulationTip(cellId: number) {
+export function getPopulationTip(type = "Cell", rural: number, urban: number) {
-  const [rural, urban] = getCellPopulation(cellId);
+  return `${type} population: ${si(rural + urban)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`;
-  return `Cell population: ${si(rural + urban)}; Rural: ${si(rural)}; Urban: ${si(urban)}`;
 }