From 3c850d8d46c8af2d07f35481d5dae2d8380026b8 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 9 Jul 2022 23:38:19 +0300 Subject: [PATCH] refactor: population utils --- src/dialogs/dialogs/biomes-editor.js | 13 +- src/dialogs/dialogs/burg-editor.js | 6 +- src/dialogs/dialogs/burgs-overview.js | 32 ++-- src/dialogs/dialogs/charts-overview.js | 42 ++-- src/dialogs/dialogs/coastline-editor.js | 6 +- src/dialogs/dialogs/cultures-editor.js | 33 ++-- .../dialogs/label-editor.js} | 113 +++++------ .../dialogs/lake-editor.js} | 83 ++++---- src/dialogs/dialogs/religions-editor.js | 34 ++-- src/dialogs/dialogs/states-editor.js | 58 +++--- src/dialogs/index.ts | 2 + src/modules/dynamic/export-json.js | 8 +- src/modules/markers-generator.js | 4 +- src/modules/ui/editors.js | 3 +- src/modules/ui/elevation-profile.js | 8 +- src/modules/ui/military-overview.js | 6 +- src/modules/ui/provinces-editor.js | 54 +++--- src/modules/ui/zones-editor.js | 37 ++-- src/scripts/{events.js => events.ts} | 179 +++++++++++------- src/types/note.d.ts | 2 +- src/types/pack.d.ts | 23 ++- src/utils/unitUtils.ts | 27 ++- 22 files changed, 443 insertions(+), 330 deletions(-) rename src/{modules/ui/labels-editor.js => dialogs/dialogs/label-editor.js} (72%) rename src/{modules/ui/lakes-editor.js => dialogs/dialogs/lake-editor.js} (68%) rename src/scripts/{events.js => events.ts} (57%) diff --git a/src/dialogs/dialogs/biomes-editor.js b/src/dialogs/dialogs/biomes-editor.js index f8858526..8d203e7d 100644 --- a/src/dialogs/dialogs/biomes-editor.js +++ b/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 */ ` diff --git a/src/dialogs/dialogs/burg-editor.js b/src/dialogs/dialogs/burg-editor.js index 3d9ef0b1..0ed74e1a 100644 --- a/src/dialogs/dialogs/burg-editor.js +++ b/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() { diff --git a/src/dialogs/dialogs/burgs-overview.js b/src/dialogs/dialogs/burgs-overview.js index da55a5b7..1e560c37 100644 --- a/src/dialogs/dialogs/burgs-overview.js +++ b/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); diff --git a/src/dialogs/dialogs/charts-overview.js b/src/dialogs/dialogs/charts-overview.js index 756e4708..c4e84597 100644 --- a/src/dialogs/dialogs/charts-overview.js +++ b/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), - 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, + quantize: cellId => d3.sum(getCellPopulation(cellId)), 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; diff --git a/src/dialogs/dialogs/coastline-editor.js b/src/dialogs/dialogs/coastline-editor.js index aa339dff..0181079b 100644 --- a/src/dialogs/dialogs/coastline-editor.js +++ b/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); - selectCoastlineGroup(node); + elSelected = d3.select(el); + selectCoastlineGroup(el); drawCoastlineVertices(); viewbox.on("touchmove mousemove", null); diff --git a/src/dialogs/dialogs/cultures-editor.js b/src/dialogs/dialogs/cultures-editor.js index 5d998e05..94035586 100644 --- a/src/dialogs/dialogs/cultures-editor.js +++ b/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 urban = rn(culture.urban * populationRate * urbanization); + const rural = getRuralPopulation(culture.rural); + 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 populationText = population > 0 ? si(rn(population)) + " people" : "Extinct"; + const population = getTotalPopulation(rural, urban); + const populationText = population > 0 ? si(population) + " people" : "Extinct"; return `${name} culture. ${type}. ${populationText}`; }; diff --git a/src/modules/ui/labels-editor.js b/src/dialogs/dialogs/label-editor.js similarity index 72% rename from src/modules/ui/labels-editor.js rename to src/dialogs/dialogs/label-editor.js index e2717463..791c6cd7 100644 --- a/src/modules/ui/labels-editor.js +++ b/src/dialogs/dialogs/label-editor.js @@ -1,17 +1,20 @@ -import {findCell} from "utils/graphUtils"; -import {tip, showMainTip} from "scripts/tooltips"; -import {round, parseTransform} from "utils/stringUtils"; +import * as d3 from "d3"; + 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() { - if (customization) return; +export function open({el}) { closeDialogs(); - if (!layerIsOn("toggleLabels")) toggleLabels(); + if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels"); - const tspan = d3.event.target; - const textPath = tspan.parentNode; + const textPath = el.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); - document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection); - document.getElementById("labelGroupSelect").addEventListener("click", changeGroup); - document.getElementById("labelGroupInput").addEventListener("change", createNewGroup); - document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput); - document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup); + byId("labelGroupShow")?.on("click", showGroupSection); + byId("labelGroupHide")?.on("click", hideGroupSection); + byId("labelGroupSelect")?.on("click", changeGroup); + byId("labelGroupInput")?.on("change", createNewGroup); + byId("labelGroupNew")?.on("click", toggleNewGroupInput); + byId("labelGroupRemove")?.on("click", removeLabelsGroup); - document.getElementById("labelTextShow").addEventListener("click", showTextSection); - document.getElementById("labelTextHide").addEventListener("click", hideTextSection); - document.getElementById("labelText").addEventListener("input", changeText); - document.getElementById("labelTextRandom").addEventListener("click", generateRandomName); + byId("labelTextShow")?.on("click", showTextSection); + byId("labelTextHide")?.on("click", hideTextSection); + byId("labelText")?.on("input", changeText); + byId("labelTextRandom")?.on("click", generateRandomName); - document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle); + byId("labelEditStyle")?.on("click", editGroupStyle); - document.getElementById("labelSizeShow").addEventListener("click", showSizeSection); - document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection); - document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset); - document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize); + byId("labelSizeShow")?.on("click", showSizeSection); + byId("labelSizeHide")?.on("click", hideSizeSection); + byId("labelStartOffset")?.on("input", changeStartOffset); + byId("labelRelativeSize")?.on("input", changeRelativeSize); - document.getElementById("labelAlign").addEventListener("click", editLabelAlign); - document.getElementById("labelLegend").addEventListener("click", editLabelLegend); - document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel); + byId("labelAlign")?.on("click", editLabelAlign); + byId("labelLegend")?.on("click", editLabelLegend); + 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")] - .map(tspan => tspan.textContent) - .join("|"); - document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset")); - document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size")); + byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|"); + byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset")); + byId("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"; - document.getElementById("labelGroupInput").style.display = "none"; - document.getElementById("labelGroupInput").value = ""; - document.getElementById("labelGroupSelect").style.display = "inline-block"; + byId("labelGroupSection").style.display = "none"; + byId("labelGroupInput").style.display = "none"; + byId("labelGroupInput").value = ""; + 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(); - document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true)); + byId("labelGroupSelect").selectedOptions[0].remove(); + 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)); - document.getElementById(group).appendChild(elSelected.node()); + byId("labelGroupSelect").options.add(new Option(group, group, false, true)); + 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() { diff --git a/src/modules/ui/lakes-editor.js b/src/dialogs/dialogs/lake-editor.js similarity index 68% rename from src/modules/ui/lakes-editor.js rename to src/dialogs/dialogs/lake-editor.js index e48733ff..71be417f 100644 --- a/src/modules/ui/lakes-editor.js +++ b/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() { - if (customization) return; +export function open({el}) { 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); - document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture); - document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom); + byId("lakeName")?.on("input", changeName); + byId("lakeNameCulture")?.on("click", generateNameCulture); + byId("lakeNameRandom")?.on("click", generateNameRandom); - document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup); - document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput); - document.getElementById("lakeGroupName").addEventListener("change", createNewGroup); - document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup); + byId("lakeGroup")?.on("change", changeLakeGroup); + byId("lakeGroupAdd")?.on("click", toggleNewGroupInput); + byId("lakeGroupName")?.on("change", createNewGroup); + byId("lakeGroupRemove")?.on("click", removeLakeGroup); - document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle); - document.getElementById("lakeLegend").addEventListener("click", editLakeLegend); + byId("lakeEditStyle")?.on("click", editGroupStyle); + 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; - document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit(); + byId("lakeName").value = l.name; + byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit(); const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v])); - document.getElementById("lakeShoreLength").value = - si(length * distanceScaleInput.value) + " " + distanceUnitInput.value; + byId("lakeShoreLength").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); - document.getElementById("lakeAvarageDepth").value = getHeight(d3.mean(heights), true); - document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), true); + byId("lakeElevation").value = getHeight(l.height); + byId("lakeAvarageDepth").value = getHeight(d3.mean(heights), true); + byId("lakeMaxDepth").value = getHeight(d3.min(heights), true); - document.getElementById("lakeFlux").value = l.flux; - document.getElementById("lakeEvaporation").value = l.evaporation; + byId("lakeFlux").value = l.flux; + 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"; - document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : ""; - document.getElementById("lakeOutlet").value = outlet; + byId("lakeInlets").value = inlets ? inlets.length : "no"; + byId("lakeInlets").title = inlets ? inlets.join(", ") : ""; + 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(); - document.getElementById("lakeGroup").options.add(new Option(group, group, false, true)); + byId("lakeGroup").selectedOptions[0].remove(); + 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)); - document.getElementById(group).appendChild(elSelected.node()); + byId("lakeGroup").options.add(new Option(group, group, false, true)); + 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 groupEl = document.getElementById(group); + const freshwater = byId("freshwater"); + const groupEl = byId(group); while (groupEl.childNodes.length) { freshwater.appendChild(groupEl.childNodes[0]); } groupEl.remove(); - document.getElementById("lakeGroup").selectedOptions[0].remove(); - document.getElementById("lakeGroup").value = "freshwater"; + byId("lakeGroup").selectedOptions[0].remove(); + byId("lakeGroup").value = "freshwater"; }, Cancel: function () { $(this).dialog("close"); diff --git a/src/dialogs/dialogs/religions-editor.js b/src/dialogs/dialogs/religions-editor.js index d6a7f75c..f82c79bd 100644 --- a/src/dialogs/dialogs/religions-editor.js +++ b/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 {applySortingByHeader} from "modules/ui/editors"; +import { + 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 urban = rn(religion.urban * populationRate * urbanization); + const rural = getRuralPopulation(religion.rural); + 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 populationText = population > 0 ? si(rn(population)) + " people" : "Extinct"; + const population = getTotalPopulation(rural, urban); + const populationText = population > 0 ? si(population) + " people" : "Extinct"; return `${name}${getTypeText()}${formText}. ${populationText}`; }; diff --git a/src/dialogs/dialogs/states-editor.js b/src/dialogs/dialogs/states-editor.js index b6e48c24..150a3990 100644 --- a/src/dialogs/dialogs/states-editor.js +++ b/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 urban = rn(state.urban * populationRate * urbanization); + const rural = getRuralPopulation(state.rural); + 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 urban = rn(d.data.urban * populationRate * urbanization); + const rural = getRuralPopulation(d.data.rural); + const urban = getBurgPopulation(d.data.urban); - const option = statesTreeType.value; - const value = - option === "area" - ? "Area: " + area - : option === "rural" - ? "Rural population: " + si(rural) - : option === "urban" - ? "Urban population: " + si(urban) - : option === "burgs" - ? "Burgs number: " + d.data.burgs - : "Population: " + si(rural + urban); + const optionToLabelMap = { + area: "Area: " + area, + rural: "Rural population: " + si(rural), + urban: "Urban population: " + si(urban), + burgs: "Burgs number: " + d.data.burgs, + population: "Population: " + si(rural + urban) + }; + const option = getInputValue("statesTreeType"); + const value = optionToLabelMap[option] || ""; 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 urbanPopulation = Math.round(urban * populationRate * urbanization); + const ruralPopulation = getRuralPopulation(rural); + const urbanPopulation = getBurgPopulation(urban); + return [ id, name, diff --git a/src/dialogs/index.ts b/src/dialogs/index.ts index 59ae8acb..6b6d61c8 100644 --- a/src/dialogs/index.ts +++ b/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" diff --git a/src/modules/dynamic/export-json.js b/src/modules/dynamic/export-json.js index 7c949077..215ba2dc 100644 --- a/src/modules/dynamic/export-json.js +++ b/src/modules/dynamic/export-json.js @@ -107,19 +107,19 @@ function getSettings() { barBackColor: barBackColor.value, barPosX: barPosX.value, barPosY: barPosY.value, - populationRate: populationRate, - urbanization: urbanization, + populationRate, + 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; diff --git a/src/modules/markers-generator.js b/src/modules/markers-generator.js index 621e23a5..b02db878 100644 --- a/src/modules/markers-generator.js +++ b/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}); } diff --git a/src/modules/ui/editors.js b/src/modules/ui/editors.js index 0e4e28b5..a7b5f01e 100644 --- a/src/modules/ui/editors.js +++ b/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); diff --git a/src/modules/ui/elevation-profile.js b/src/modules/ui/elevation-profile.js index 572ad2e1..b1b4a14f 100644 --- a/src/modules/ui/elevation-profile.js +++ b/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 = diff --git a/src/modules/ui/military-overview.js b/src/modules/ui/military-overview.js index 06ebbc93..42c8c264 100644 --- a/src/modules/ui/military-overview.js +++ b/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); diff --git a/src/modules/ui/provinces-editor.js b/src/modules/ui/provinces-editor.js index 4302fdac..cade03c3 100644 --- a/src/modules/ui/provinces-editor.js +++ b/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, - provinces = pack.provinces, - burgs = pack.burgs; + const {cells, provinces, burgs} = pack; 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( - rural - )}; Urban population: ${si(urban)}`; + const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change"; 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 urban = rn(p.urban * populationRate * urbanization); + const rural = getRuralPopulation(p.rural); + 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 urban = rn(d.data.urban * populationRate * urbanization); + const rural = getRuralPopulation(d.data.rural); + const urban = getBurgPopulation(d.data.urban); - const value = - provincesTreeType.value === "area" - ? "Area: " + area - : provincesTreeType.value === "rural" - ? "Rural population: " + si(rural) - : provincesTreeType.value === "urban" - ? "Urban population: " + si(urban) - : "Population: " + si(rural + urban); + const optionToLabelMap = { + area: "Area: " + area, + rural: "Rural population: " + si(rural), + urban: "Urban population: " + si(urban), + burgs: "Burgs number: " + d.data.burgs, + population: "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 += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`; + data += getRuralPopulation(provincePack.rural) + ","; + data += getBurgPopulation(provincePack.urban) + "\n"; }); const name = getFileName("Provinces") + ".csv"; diff --git a/src/modules/ui/zones-editor.js b/src/modules/ui/zones-editor.js index ce5abe19..e7cc9b5e 100644 --- a/src/modules/ui/zones-editor.js +++ b/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 = - d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization; + + const rural = getRuralPopulation(d3.sum(c.map(i => pack.cells.pop[i]))); + 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( - rural - )}; Urban population: ${si(urban)}. Click to change`; + const populationTip = getPopulationTip("Total", rural, 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) * - populationRate; + + const ruralPopulation = d3.sum(pack.cells.pop); + 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 urban = rn( - d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization - ); + const rural = getRuralPopulation(d3.sum(cells.map(i => pack.cells.pop[i]))); + const urban = getBurgPopulation(d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population))); 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)); } diff --git a/src/scripts/events.js b/src/scripts/events.ts similarity index 57% rename from src/scripts/events.js rename to src/scripts/events.ts index f7f6a650..9c443978 100644 --- a/src/scripts/events.js +++ b/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() { - const el = d3.event.target; - if (!el || !el.parentElement || !el.parentElement.parentElement) return; +function handleMapClick(this: d3.ContainerElement) { + const el: HTMLElement = d3.event.target; + if (!el?.parentElement?.parentElement?.parentElement) return; + const parent = el.parentElement; - const grand = parent.parentElement; - const great = grand.parentElement; + const grand = parent.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 (grand.id === "burgLabels" || grand.id === "burgIcons") openDialog("burgEditor", null, {id: +el.dataset.id}); + 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 || 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) { - const [g, type] = - parent.id === "burgEmblems" - ? [pack.burgs, "burg"] - : parent.id === "provinceEmblems" - ? [pack.provinces, "province"] - : [pack.states, "state"]; - return {type, id: type + "COA" + i, el: g[i]}; +function defineEmblemData(el: HTMLElement) { + const i = +(el.dataset?.i || 0); + + type TEmblemType = "state" | "burg" | "province"; + type TEmblemTypeArray = IPack[`${TEmblemType}s`]; + + const emblemTypeMap: Dict<[TEmblemTypeArray, TEmblemType]> = { + 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(); - else showMapTooltip(point, d3.event, i, gridCell); - if (cellInfo?.offsetParent) updateCellInfo(point, i, gridCell); + if (byId("tooltip")?.dataset.main) showMainTip(); + else showTooltipOnMapHover(point, d3.event, i, gridCell); + if (byId("cellInfo")?.offsetParent) updateCellInfo(point, i, gridCell); } // show note box on hover (if any) -function showNotes(event) { - if (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; - else if (event.target.parentNode.parentNode.id === "burgIcons") id = "burg" + event.target.dataset.id; +function showNotes(event: Event) { + if (byId("notesEditor")?.offsetParent) return; + + const el = event.target as SVGElement; + 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("notesHeader").innerHTML = note.name; - byId("notesBody").innerHTML = note.legend; - } else if (!options.pinNotes && !markerEditor?.offsetParent) { - byId("notes").style.display = "none"; - byId("notesHeader").innerHTML = ""; - byId("notesBody").innerHTML = ""; + byId("notes")!.style.display = "block"; + byId("notesHeader")!.innerHTML = note.name; + byId("notesBody")!.innerHTML = note.legend; + } else if (!options.pinNotes && !byId("markerEditor")?.offsetParent) { + byId("notes")!.style.display = "none"; + byId("notesHeader")!.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") { - const parent = event.target.parentNode; - 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(); + if (group === "emblems" && element.tagName === "use") { + d3.select(element).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 r = pack.rivers.find(r => r.i === river); - const name = r ? r.name + " " + r.type : ""; + const riverId = +element.id.slice(5); + const river = pack.rivers.find(r => r.i === riverId); + 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 b = pack.burgs[burg]; - const population = si(b.population * populationRate * urbanization); - tip(`${b.name}. Population: ${population}. Click to edit`); - if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000); + const burgId = +(path[path.length - 10].dataset.id || 0); + const burg = pack.burgs[burgId]; + + const population = si(getBurgPopulation(burg.population)); + 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 className = event.target.getAttribute("class"); + const tag = element.tagName; + 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("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId])); + else if (layerIsOn("togglePopulation")) { + 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) { - 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); +function highlightEditorLine($editor, id, timeout = 10000) { + 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); if (hovered) hovered.classList.add("hovered"); // add hovered class if (timeout) setTimeout(() => { diff --git a/src/types/note.d.ts b/src/types/note.d.ts index b07bfc9a..2d71b061 100644 --- a/src/types/note.d.ts +++ b/src/types/note.d.ts @@ -1,5 +1,5 @@ interface INote { - id: number; + id: string; name: string; legend: string; } diff --git a/src/types/pack.d.ts b/src/types/pack.d.ts index d1269144..3487d1e9 100644 --- a/src/types/pack.d.ts +++ b/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[]; +} diff --git a/src/utils/unitUtils.ts b/src/utils/unitUtils.ts index dfa4010b..3ab316dd 100644 --- a/src/utils/unitUtils.ts +++ b/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 burg = pack.cells.burg[cellId]; - const urban = burg ? pack.burgs[burg].population * populationRate * urbanization : 0; + const rural = getRuralPopulation(pack.cells.pop[cellId]); + const burgId = pack.cells.burg[cellId]; + 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) { - const [rural, urban] = getCellPopulation(cellId); - return `Cell population: ${si(rural + urban)}; Rural: ${si(rural)}; Urban: ${si(urban)}`; +export function getPopulationTip(type = "Cell", rural: number, urban: number) { + return `${type} population: ${si(rural + urban)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`; }