mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Refactor layers rendering (#1120)
* feat: render states - use global fn * feat: render states - separate pole detection from layer render * feat: render provinces * chore: unify drawFillWithGap * refactor: drawIce * refactor: drawBorders * refactor: drawHeightmap * refactor: drawTemperature * refactor: drawBiomes * refactor: drawPrec * refactor: drawPrecipitation * refactor: drawPopulation * refactor: drawCells * refactor: geColor * refactor: drawMarkers * refactor: drawScaleBar * refactor: drawScaleBar * refactor: drawMilitary * refactor: pump version to 1.104.00 * refactor: pump version to 1.104.00 * refactor: drawCoastline and createDefaultRuler * refactor: drawCoastline * refactor: Features module start * refactor: features - define distance fields * feat: drawFeatures * feat: drawIce don't hide * feat: detect coastline - fix issue with border feature * feat: separate labels rendering from generation process * feat: auto-update and restore layers * refactor - change layers * refactor - sort layers * fix: regenerate burgs to re-render layers * fix: getColor is not defined * fix: burgs overview - don't auto-show labels on hover * fix: redraw population on change * refactor: improve tooltip logic for burg labels and icons * chore: pump version to 1.104.0 * fefactor: edit coastline and lake * fix: minot fixes * fix: submap --------- Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
Azgaar
GitHub
parent
ec993d1a9b
commit
05de284e02
52 changed files with 2473 additions and 2713 deletions
|
|
@ -8,7 +8,7 @@ function editProvinces() {
|
|||
if (layerIsOn("toggleCultures")) toggleCultures();
|
||||
|
||||
provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true);
|
||||
const body = document.getElementById("provincesBodySection");
|
||||
const body = byId("provincesBodySection");
|
||||
refreshProvincesEditor();
|
||||
|
||||
if (modules.editProvinces) return;
|
||||
|
|
@ -23,22 +23,22 @@ function editProvinces() {
|
|||
});
|
||||
|
||||
// add listeners
|
||||
document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
|
||||
document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
|
||||
document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
|
||||
document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
|
||||
document.getElementById("provincesChart").addEventListener("click", showChart);
|
||||
document.getElementById("provincesToggleLabels").addEventListener("click", toggleLabels);
|
||||
document.getElementById("provincesExport").addEventListener("click", downloadProvincesData);
|
||||
document.getElementById("provincesRemoveAll").addEventListener("click", removeAllProvinces);
|
||||
document.getElementById("provincesManually").addEventListener("click", enterProvincesManualAssignent);
|
||||
document.getElementById("provincesManuallyApply").addEventListener("click", applyProvincesManualAssignent);
|
||||
document.getElementById("provincesManuallyCancel").addEventListener("click", () => exitProvincesManualAssignment());
|
||||
document.getElementById("provincesRelease").addEventListener("click", triggerProvincesRelease);
|
||||
document.getElementById("provincesAdd").addEventListener("click", enterAddProvinceMode);
|
||||
document.getElementById("provincesRecolor").addEventListener("click", recolorProvinces);
|
||||
byId("provincesEditorRefresh").on("click", refreshProvincesEditor);
|
||||
byId("provincesEditStyle").on("click", () => editStyle("provs"));
|
||||
byId("provincesFilterState").on("change", provincesEditorAddLines);
|
||||
byId("provincesPercentage").on("click", togglePercentageMode);
|
||||
byId("provincesChart").on("click", showChart);
|
||||
byId("provincesToggleLabels").on("click", toggleLabels);
|
||||
byId("provincesExport").on("click", downloadProvincesData);
|
||||
byId("provincesRemoveAll").on("click", removeAllProvinces);
|
||||
byId("provincesManually").on("click", enterProvincesManualAssignent);
|
||||
byId("provincesManuallyApply").on("click", applyProvincesManualAssignent);
|
||||
byId("provincesManuallyCancel").on("click", () => exitProvincesManualAssignment());
|
||||
byId("provincesRelease").on("click", triggerProvincesRelease);
|
||||
byId("provincesAdd").on("click", enterAddProvinceMode);
|
||||
byId("provincesRecolor").on("click", recolorProvinces);
|
||||
|
||||
body.addEventListener("click", function (ev) {
|
||||
body.on("click", function (ev) {
|
||||
if (customization) return;
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
|
|
@ -58,7 +58,7 @@ function editProvinces() {
|
|||
else if (cl.contains("icon-lock") || cl.contains("icon-lock-open")) updateLockStatus(p, cl);
|
||||
});
|
||||
|
||||
body.addEventListener("change", function (ev) {
|
||||
body.on("change", function (ev) {
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode,
|
||||
|
|
@ -100,7 +100,7 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function updateFilter() {
|
||||
const stateFilter = document.getElementById("provincesFilterState");
|
||||
const stateFilter = byId("provincesFilterState");
|
||||
const selectedState = stateFilter.value || 1;
|
||||
stateFilter.options.length = 0; // remove all options
|
||||
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
|
||||
|
|
@ -111,7 +111,7 @@ function editProvinces() {
|
|||
// add line for each province
|
||||
function provincesEditorAddLines() {
|
||||
const unit = " " + getAreaUnit();
|
||||
const selectedState = +document.getElementById("provincesFilterState").value;
|
||||
const selectedState = +byId("provincesFilterState").value;
|
||||
let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
|
||||
if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
|
||||
body.innerHTML = "";
|
||||
|
|
@ -194,9 +194,9 @@ function editProvinces() {
|
|||
byId("provincesFooterPopulation").dataset.population = totalPopulation;
|
||||
|
||||
body.querySelectorAll("div.states").forEach(el => {
|
||||
el.addEventListener("click", selectProvinceOnLineClick);
|
||||
el.addEventListener("mouseenter", ev => provinceHighlightOn(ev));
|
||||
el.addEventListener("mouseleave", ev => provinceHighlightOff(ev));
|
||||
el.on("click", selectProvinceOnLineClick);
|
||||
el.on("mouseenter", ev => provinceHighlightOn(ev));
|
||||
el.on("mouseleave", ev => provinceHighlightOff(ev));
|
||||
});
|
||||
|
||||
if (body.dataset.type === "percentage") {
|
||||
|
|
@ -306,7 +306,7 @@ function editProvinces() {
|
|||
const {cell: center, culture} = burgs[burgId];
|
||||
const color = getRandomColor();
|
||||
const coa = province.coa;
|
||||
const coaEl = document.getElementById("provinceCOA" + provinceId);
|
||||
const coaEl = byId("provinceCOA" + provinceId);
|
||||
if (coaEl) coaEl.id = "stateCOA" + newStateId;
|
||||
emblems.select(`#provinceEmblems > use[data-i='${provinceId}']`).remove();
|
||||
|
||||
|
|
@ -454,6 +454,7 @@ function editProvinces() {
|
|||
p.burgs.forEach(b => (pack.burgs[b].population = population));
|
||||
}
|
||||
|
||||
if (layerIsOn("togglePopulation")) drawPopulation();
|
||||
refreshProvincesEditor();
|
||||
}
|
||||
}
|
||||
|
|
@ -482,7 +483,7 @@ function editProvinces() {
|
|||
unfog("focusProvince" + p);
|
||||
|
||||
const coaId = "provinceCOA" + p;
|
||||
if (document.getElementById(coaId)) document.getElementById(coaId).remove();
|
||||
if (byId(coaId)) byId(coaId).remove();
|
||||
emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
|
||||
|
||||
pack.provinces[p] = {i: p, removed: true};
|
||||
|
|
@ -490,8 +491,7 @@ function editProvinces() {
|
|||
const g = provs.select("#provincesBody");
|
||||
g.select("#province" + p).remove();
|
||||
g.select("#province-gap" + p).remove();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (layerIsOn("toggleBorders")) drawBorders();
|
||||
refreshProvincesEditor();
|
||||
$(this).dialog("close");
|
||||
},
|
||||
|
|
@ -504,13 +504,13 @@ function editProvinces() {
|
|||
|
||||
function editProvinceName(province) {
|
||||
const p = pack.provinces[province];
|
||||
document.getElementById("provinceNameEditor").dataset.province = province;
|
||||
document.getElementById("provinceNameEditorShort").value = p.name;
|
||||
byId("provinceNameEditor").dataset.province = province;
|
||||
byId("provinceNameEditorShort").value = p.name;
|
||||
applyOption(provinceNameEditorSelectForm, p.formName);
|
||||
document.getElementById("provinceNameEditorFull").value = p.fullName;
|
||||
byId("provinceNameEditorFull").value = p.fullName;
|
||||
|
||||
const cultureId = pack.cells.culture[p.center];
|
||||
document.getElementById("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
|
||||
byId("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
|
||||
|
||||
$("#provinceNameEditor").dialog({
|
||||
resizable: false,
|
||||
|
|
@ -531,22 +531,22 @@ function editProvinces() {
|
|||
modules.editProvinceName = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCulture);
|
||||
document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
|
||||
document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm);
|
||||
document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
|
||||
byId("provinceNameEditorShortCulture").on("click", regenerateShortNameCulture);
|
||||
byId("provinceNameEditorShortRandom").on("click", regenerateShortNameRandom);
|
||||
byId("provinceNameEditorAddForm").on("click", addCustomForm);
|
||||
byId("provinceNameEditorFullRegenerate").on("click", regenerateFullName);
|
||||
|
||||
function regenerateShortNameCulture() {
|
||||
const province = +provinceNameEditor.dataset.province;
|
||||
const culture = pack.cells.culture[pack.provinces[province].center];
|
||||
const name = Names.getState(Names.getCultureShort(culture), culture);
|
||||
document.getElementById("provinceNameEditorShort").value = name;
|
||||
byId("provinceNameEditorShort").value = name;
|
||||
}
|
||||
|
||||
function regenerateShortNameRandom() {
|
||||
const base = rand(nameBases.length - 1);
|
||||
const name = Names.getState(Names.getBase(base), undefined, base);
|
||||
document.getElementById("provinceNameEditorShort").value = name;
|
||||
byId("provinceNameEditorShort").value = name;
|
||||
}
|
||||
|
||||
function addCustomForm() {
|
||||
|
|
@ -558,9 +558,9 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function regenerateFullName() {
|
||||
const short = document.getElementById("provinceNameEditorShort").value;
|
||||
const form = document.getElementById("provinceNameEditorSelectForm").value;
|
||||
document.getElementById("provinceNameEditorFull").value = getFullName();
|
||||
const short = byId("provinceNameEditorShort").value;
|
||||
const form = byId("provinceNameEditorSelectForm").value;
|
||||
byId("provinceNameEditorFull").value = getFullName();
|
||||
|
||||
function getFullName() {
|
||||
if (!form) return short;
|
||||
|
|
@ -570,9 +570,9 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function applyNameChange(p) {
|
||||
p.name = document.getElementById("provinceNameEditorShort").value;
|
||||
p.formName = document.getElementById("provinceNameEditorSelectForm").value;
|
||||
p.fullName = document.getElementById("provinceNameEditorFull").value;
|
||||
p.name = byId("provinceNameEditorShort").value;
|
||||
p.formName = byId("provinceNameEditorSelectForm").value;
|
||||
p.fullName = byId("provinceNameEditorFull").value;
|
||||
provs.select("#provinceLabel" + p.i).text(p.name);
|
||||
refreshProvincesEditor();
|
||||
}
|
||||
|
|
@ -651,7 +651,7 @@ function editProvinces() {
|
|||
.attr("height", height)
|
||||
.attr("font-size", "10px");
|
||||
const graph = svg.append("g").attr("transform", `translate(10, 0)`);
|
||||
document.getElementById("provincesTreeType").addEventListener("change", updateChart);
|
||||
byId("provincesTreeType").on("change", updateChart);
|
||||
|
||||
treeLayout(root);
|
||||
|
||||
|
|
@ -688,7 +688,7 @@ function editProvinces() {
|
|||
|
||||
function hideInfo(ev) {
|
||||
provinceHighlightOff(ev);
|
||||
if (!document.getElementById("provinceInfo")) return;
|
||||
if (!byId("provinceInfo")) return;
|
||||
provinceInfo.innerHTML = "‍";
|
||||
d3.select(ev.target).select("rect").classed("selected", 0);
|
||||
}
|
||||
|
|
@ -816,7 +816,7 @@ function editProvinces() {
|
|||
stateBorders.select("path").attr("stroke", "#000").attr("stroke-width", 1.2);
|
||||
|
||||
customization = 11;
|
||||
provs.select("g#provincesBody").append("g").attr("id", "temp");
|
||||
provs.select("g#provincesBody").append("g").attr("id", "temp").attr("stroke-width", 0.3);
|
||||
provs
|
||||
.select("g#provincesBody")
|
||||
.append("g")
|
||||
|
|
@ -826,7 +826,7 @@ function editProvinces() {
|
|||
.attr("stroke-width", 1);
|
||||
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("provincesManuallyButtons").style.display = "inline-block";
|
||||
byId("provincesManuallyButtons").style.display = "inline-block";
|
||||
|
||||
provincesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
|
||||
provincesHeader.querySelector("div[data-sortby='state']").style.left = "7.7em";
|
||||
|
|
@ -950,10 +950,10 @@ function editProvinces() {
|
|||
pack.cells.province[i] = +this.dataset.province;
|
||||
});
|
||||
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
else drawProvinces();
|
||||
Provinces.getPoles();
|
||||
if (layerIsOn("toggleBorders")) drawBorders();
|
||||
if (layerIsOn("toggleProvinces")) drawProvinces();
|
||||
|
||||
exitProvincesManualAssignment();
|
||||
refreshProvincesEditor();
|
||||
}
|
||||
|
|
@ -970,7 +970,7 @@ function editProvinces() {
|
|||
debug.selectAll("path.selected").remove();
|
||||
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
|
||||
document.getElementById("provincesManuallyButtons").style.display = "none";
|
||||
byId("provincesManuallyButtons").style.display = "none";
|
||||
|
||||
provincesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
|
||||
provincesHeader.querySelector("div[data-sortby='state']").style.left = "22em";
|
||||
|
|
@ -1044,12 +1044,11 @@ function editProvinces() {
|
|||
cells.province[c] = province;
|
||||
});
|
||||
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
else drawProvinces();
|
||||
if (layerIsOn("toggleBorders")) drawBorders();
|
||||
if (layerIsOn("toggleProvinces")) drawProvinces();
|
||||
|
||||
collectStatistics();
|
||||
document.getElementById("provincesFilterState").value = state;
|
||||
byId("provincesFilterState").value = state;
|
||||
provincesEditorAddLines();
|
||||
}
|
||||
|
||||
|
|
@ -1062,7 +1061,7 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function recolorProvinces() {
|
||||
const state = +document.getElementById("provincesFilterState").value;
|
||||
const state = +byId("provincesFilterState").value;
|
||||
|
||||
pack.provinces.forEach(p => {
|
||||
if (!p || p.removed) return;
|
||||
|
|
@ -1120,8 +1119,7 @@ function editProvinces() {
|
|||
pack.states.forEach(s => (s.provinces = []));
|
||||
|
||||
unfog();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (layerIsOn("toggleBorders")) drawBorders();
|
||||
provs.select("#provincesBody").remove();
|
||||
turnButtonOff("toggleProvinces");
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue