backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-19 02:21:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: population utils

Browse source
This commit is contained in:
Azgaar 2022-07-09 23:38:19 +03:00
parent 3125366944
commit 3c850d8d46
22 changed files with 443 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/dialogs/dialogs/biomes-editor.js
View file

@ -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 */ `

6
src/dialogs/dialogs/burg-editor.js
View file

@ -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() {

32
src/dialogs/dialogs/burgs-overview.js
View file

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

42
src/dialogs/dialogs/charts-overview.js
View file

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

6
src/dialogs/dialogs/coastline-editor.js
View file

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

33
src/dialogs/dialogs/cultures-editor.js
View file

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

415
src/dialogs/dialogs/label-editor.js Normal file
View file

@ -0,0 +1,415 @@
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 open({el}) {
closeDialogs();
if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
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);
$("#labelEditor").dialog({
title: "Edit Label",
resizable: false,
width: "fit-content",
position: {my: "center top+10", at: "bottom", of: text, collision: "fit"},
close: closeLabelEditor
});
drawControlPointsAndLine();
selectLabelGroup(text);
updateValues(textPath);
if (isLoaded) return;
isLoaded = true;
// add listeners
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);
byId("labelTextShow")?.on("click", showTextSection);
byId("labelTextHide")?.on("click", hideTextSection);
byId("labelText")?.on("input", changeText);
byId("labelTextRandom")?.on("click", generateRandomName);
byId("labelEditStyle")?.on("click", editGroupStyle);
byId("labelSizeShow")?.on("click", showSizeSection);
byId("labelSizeHide")?.on("click", hideSizeSection);
byId("labelStartOffset")?.on("input", changeStartOffset);
byId("labelRelativeSize")?.on("input", changeRelativeSize);
byId("labelAlign")?.on("click", editLabelAlign);
byId("labelLegend")?.on("click", editLabelLegend);
byId("labelRemoveSingle")?.on("click", removeLabel);
function showEditorTips() {
showMainTip();
if (d3.event.target.parentNode.parentNode.id === elSelected.attr("id")) tip("Drag to shift the label");
else if (d3.event.target.parentNode.id === "controlPoints") {
if (d3.event.target.tagName === "circle") tip("Drag to move, click to delete the control point");
if (d3.event.target.tagName === "path") tip("Click to add a control point");
}
}
function selectLabelGroup(text) {
const group = text.parentNode.id;
if (group === "states" || group === "burgLabels") {
byId("labelGroupShow").style.display = "none";
return;
}
hideGroupSection();
const select = byId("labelGroupSelect");
select.options.length = 0; // remove all options
labels.selectAll(":scope > g").each(function () {
if (this.id === "states") return;
if (this.id === "burgLabels") return;
select.options.add(new Option(this.id, this.id, false, this.id === group));
});
}
function updateValues(textPath) {
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 = 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;
const increment = l / Math.max(Math.ceil(l / 200), 2);
for (let i = 0; i <= l; i += increment) {
addControlPoint(path.getPointAtLength(i));
}
}
function addControlPoint(point) {
debug
.select("#controlPoints")
.append("circle")
.attr("cx", point.x)
.attr("cy", point.y)
.attr("r", 2.5)
.attr("stroke-width", 0.8)
.call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint);
}
function dragControlPoint() {
this.setAttribute("cx", d3.event.x);
this.setAttribute("cy", d3.event.y);
redrawLabelPath();
}
const lineGen = d3.line().curve(d3.curveBundle.beta(1));
function redrawLabelPath() {
const path = byId("textPath_" + elSelected.attr("id"));
const points = [];
debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
});
const d = round(lineGen(points));
path.setAttribute("d", d);
debug.select("#controlPoints > path").attr("d", d);
}
function clickControlPoint() {
this.remove();
redrawLabelPath();
}
function addInterimControlPoint() {
const point = d3.mouse(this);
const dists = [];
debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
const x = +this.getAttribute("cx");
const y = +this.getAttribute("cy");
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
});
let index = dists.length;
if (dists.length > 1) {
const sorted = dists.slice(0).sort((a, b) => a - b);
const closest = dists.indexOf(sorted[0]);
const next = dists.indexOf(sorted[1]);
if (closest <= next) index = closest + 1;
else index = next + 1;
}
const before = ":nth-child(" + (index + 2) + ")";
debug
.select("#controlPoints")
.insert("circle", before)
.attr("cx", point[0])
.attr("cy", point[1])
.attr("r", 2.5)
.attr("stroke-width", 0.8)
.call(d3.drag().on("drag", dragControlPoint))
.on("click", clickControlPoint);
redrawLabelPath();
}
function dragLabel() {
const tr = parseTransform(elSelected.attr("transform"));
const dx = +tr[0] - d3.event.x,
dy = +tr[1] - d3.event.y;
d3.event.on("drag", function () {
const x = d3.event.x,
y = d3.event.y;
const transform = `translate(${dx + x},${dy + y})`;
elSelected.attr("transform", transform);
debug.select("#controlPoints").attr("transform", transform);
});
}
function showGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
byId("labelGroupSection").style.display = "inline-block";
}
function hideGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.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() {
byId(this.value).appendChild(elSelected.node());
}
function toggleNewGroupInput() {
if (labelGroupInput.style.display === "none") {
labelGroupInput.style.display = "inline-block";
labelGroupInput.focus();
labelGroupSelect.style.display = "none";
} else {
labelGroupInput.style.display = "none";
labelGroupSelect.style.display = "inline-block";
}
}
function createNewGroup() {
if (!this.value) {
tip("Please provide a valid group name");
return;
}
const group = this.value
.toLowerCase()
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error");
return;
}
// just rename if only 1 element left
const oldGroup = elSelected.node().parentNode;
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
byId("labelGroupSelect").selectedOptions[0].remove();
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
oldGroup.id = group;
toggleNewGroupInput();
byId("labelGroupInput").value = "";
return;
}
const newGroup = elSelected.node().parentNode.cloneNode(false);
byId("labels").appendChild(newGroup);
newGroup.id = group;
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
byId(group).appendChild(elSelected.node());
toggleNewGroupInput();
byId("labelGroupInput").value = "";
}
function removeLabelsGroup() {
const group = elSelected.node().parentNode.id;
const basic = group === "states" || group === "addedLabels";
const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
basic ? "all elements in the group" : "the entire label group"
}? <br /><br />Labels to be
removed: ${count}`;
$("#alert").dialog({
resizable: false,
title: "Remove route group",
buttons: {
Remove: function () {
$(this).dialog("close");
$("#labelEditor").dialog("close");
hideGroupSection();
labels
.select("#" + group)
.selectAll("text")
.each(function () {
byId("textPath_" + this.id).remove();
this.remove();
});
if (!basic) labels.select("#" + group).remove();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function showTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
byId("labelTextSection").style.display = "inline-block";
}
function hideTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
byId("labelTextSection").style.display = "none";
}
function changeText() {
const input = byId("labelText").value;
const el = elSelected.select("textPath").node();
const example = d3
.select(elSelected.node().parentNode)
.append("text")
.attr("x", 0)
.attr("x", 0)
.attr("font-size", el.getAttribute("font-size"))
.node();
const lines = input.split("|");
const top = (lines.length - 1) / -2; // y offset
const inner = lines
.map((l, d) => {
example.innerHTML = l;
const left = example.getBBox().width / -2; // x offset
return `<tspan x="${left}px" dy="${d ? 1 : top}em">${l}</tspan>`;
})
.join("");
el.innerHTML = inner;
example.remove();
if (elSelected.attr("id").slice(0, 10) === "stateLabel")
tip("Use States Editor to change an actual state name, not just a label", false, "warning");
}
function generateRandomName() {
let name = "";
if (elSelected.attr("id").slice(0, 10) === "stateLabel") {
const id = +elSelected.attr("id").slice(10);
const culture = pack.states[id].culture;
name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture);
} else {
const box = elSelected.node().getBBox();
const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2);
const culture = pack.cells.culture[cell];
name = Names.getCulture(culture);
}
byId("labelText").value = name;
changeText();
}
function editGroupStyle() {
const g = elSelected.node().parentNode.id;
editStyle("labels", g);
}
function showSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
byId("labelSizeSection").style.display = "inline-block";
}
function hideSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
byId("labelSizeSection").style.display = "none";
}
function changeStartOffset() {
elSelected.select("textPath").attr("startOffset", this.value + "%");
tip("Label offset: " + this.value + "%");
}
function changeRelativeSize() {
elSelected.select("textPath").attr("font-size", this.value + "%");
tip("Label relative size: " + this.value + "%");
changeText();
}
function editLabelAlign() {
const bbox = elSelected.node().getBBox();
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
const path = defs.select("#textPath_" + elSelected.attr("id"));
path.attr("d", `M${c[0] - bbox.width},${c[1]}h${bbox.width * 2}`);
drawControlPointsAndLine();
}
function editLabelLegend() {
const id = elSelected.attr("id");
const name = elSelected.text();
editNotes(id, name);
}
function removeLabel() {
alertMessage.innerHTML = "Are you sure you want to remove the label?";
$("#alert").dialog({
resizable: false,
title: "Remove label",
buttons: {
Remove: function () {
$(this).dialog("close");
defs.select("#textPath_" + elSelected.attr("id")).remove();
elSelected.remove();
$("#labelEditor").dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function closeLabelEditor() {
debug.select("#controlPoints").remove();
unselect();
}
}

266
src/dialogs/dialogs/lake-editor.js Normal file
View file

@ -0,0 +1,266 @@
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 open({el}) {
closeDialogs(".stable");
if (layerIsOn("toggleCells")) toggleLayer("toggleCells");
$("#lakeEditor").dialog({
title: "Edit Lake",
resizable: false,
position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
close: closeLakesEditor
});
debug.append("g").attr("id", "vertices");
elSelected = d3.select(el);
updateLakeValues();
selectLakeGroup(el);
drawLakeVertices();
viewbox.on("touchmove mousemove", null);
if (isLoaded) return;
isLoaded = true;
// add listeners
byId("lakeName")?.on("input", changeName);
byId("lakeNameCulture")?.on("click", generateNameCulture);
byId("lakeNameRandom")?.on("click", generateNameRandom);
byId("lakeGroup")?.on("change", changeLakeGroup);
byId("lakeGroupAdd")?.on("click", toggleNewGroupInput);
byId("lakeGroupName")?.on("change", createNewGroup);
byId("lakeGroupRemove")?.on("click", removeLakeGroup);
byId("lakeEditStyle")?.on("click", editGroupStyle);
byId("lakeLegend")?.on("click", editLakeLegend);
function getLake() {
const lakeId = +elSelected.attr("data-f");
return pack.features.find(feature => feature.i === lakeId);
}
function updateLakeValues() {
const cells = pack.cells;
const l = getLake();
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]));
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]);
byId("lakeElevation").value = getHeight(l.height);
byId("lakeAvarageDepth").value = getHeight(d3.mean(heights), true);
byId("lakeMaxDepth").value = getHeight(d3.min(heights), true);
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";
byId("lakeInlets").value = inlets ? inlets.length : "no";
byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
byId("lakeOutlet").value = outlet;
}
function drawLakeVertices() {
const v = getLake().vertices; // lake outer vertices
const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())];
debug
.select("#vertices")
.selectAll("polygon")
.data(c)
.enter()
.append("polygon")
.attr("points", d => getPackPolygon(d))
.attr("data-c", d => d);
debug
.select("#vertices")
.selectAll("circle")
.data(v)
.enter()
.append("circle")
.attr("cx", d => pack.vertices.p[d][0])
.attr("cy", d => pack.vertices.p[d][1])
.attr("r", 0.4)
.attr("data-v", d => d)
.call(d3.drag().on("drag", dragVertex))
.on("mousemove", () =>
tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")
);
}
function dragVertex() {
const x = rn(d3.event.x, 2),
y = rn(d3.event.y, 2);
this.setAttribute("cx", x);
this.setAttribute("cy", y);
const v = +this.dataset.v;
pack.vertices.p[v] = [x, y];
debug
.select("#vertices")
.selectAll("polygon")
.attr("points", d => getPackPolygon(d));
redrawLake();
}
const lineGen = d3.line().curve(d3.curveBasisClosed);
function redrawLake() {
const feature = getLake();
const points = feature.vertices.map(v => pack.vertices.p[v]);
const d = round(lineGen(points));
elSelected.attr("d", d);
defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
feature.area = Math.abs(d3.polygonArea(points));
byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
}
function changeName() {
getLake().name = this.value;
}
function generateNameCulture() {
const lake = getLake();
lake.name = lakeName.value = Lakes.getName(lake);
}
function generateNameRandom() {
const lake = getLake();
lake.name = lakeName.value = Names.getBase(rand(nameBases.length - 1));
}
function selectLakeGroup(node) {
const group = node.parentNode.id;
const select = byId("lakeGroup");
select.options.length = 0; // remove all options
lakes.selectAll("g").each(function () {
select.options.add(new Option(this.id, this.id, false, this.id === group));
});
}
function changeLakeGroup() {
byId(this.value).appendChild(elSelected.node());
getLake().group = this.value;
}
function toggleNewGroupInput() {
if (lakeGroupName.style.display === "none") {
lakeGroupName.style.display = "inline-block";
lakeGroupName.focus();
lakeGroup.style.display = "none";
} else {
lakeGroupName.style.display = "none";
lakeGroup.style.display = "inline-block";
}
}
function createNewGroup() {
if (!this.value) {
tip("Please provide a valid group name");
return;
}
const group = this.value
.toLowerCase()
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error");
return;
}
// just rename if only 1 element left
const oldGroup = elSelected.node().parentNode;
const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) {
byId("lakeGroup").selectedOptions[0].remove();
byId("lakeGroup").options.add(new Option(group, group, false, true));
oldGroup.id = group;
toggleNewGroupInput();
byId("lakeGroupName").value = "";
return;
}
// create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false);
byId("lakes").appendChild(newGroup);
newGroup.id = group;
byId("lakeGroup").options.add(new Option(group, group, false, true));
byId(group).appendChild(elSelected.node());
toggleNewGroupInput();
byId("lakeGroupName").value = "";
}
function removeLakeGroup() {
const group = elSelected.node().parentNode.id;
if (["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(group)) {
tip("This is one of the default groups, it cannot be removed", false, "error");
return;
}
const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All lakes of the group (${count}) will be turned into Freshwater`;
$("#alert").dialog({
resizable: false,
title: "Remove lake group",
width: "26em",
buttons: {
Remove: function () {
$(this).dialog("close");
const freshwater = byId("freshwater");
const groupEl = byId(group);
while (groupEl.childNodes.length) {
freshwater.appendChild(groupEl.childNodes[0]);
}
groupEl.remove();
byId("lakeGroup").selectedOptions[0].remove();
byId("lakeGroup").value = "freshwater";
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function editGroupStyle() {
const g = elSelected.node().parentNode.id;
editStyle("lakes", g);
}
function editLakeLegend() {
const id = elSelected.attr("id");
editNotes(id, getLake().name + " " + lakeGroup.value + " lake");
}
function closeLakesEditor() {
debug.select("#vertices").remove();
unselect();
}
}

34
src/dialogs/dialogs/religions-editor.js
View file

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

58
src/dialogs/dialogs/states-editor.js
View file

@ -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,

2
src/dialogs/index.ts
View file

@ -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"