mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
zone editor - restore init state + type display
This commit is contained in:
Azgaar
parent
8e7ccbd50d
commit
5acc3b156b
4 changed files with 39 additions and 186 deletions
|
|
@ -18,9 +18,8 @@ function editZones() {
|
|||
});
|
||||
|
||||
// add listeners
|
||||
document.getElementById("zonesFilterType").addEventListener("change", refreshZonesEditor);
|
||||
document.getElementById("zonesFilterButton").addEventListener("click", toggleFilterTable);
|
||||
document.getElementById("zonesEditorRefresh").addEventListener("click", refreshZonesEditor);
|
||||
document.getElementById("zonesFilterType").addEventListener("change", filterZonesByType);
|
||||
document.getElementById("zonesEditorRefresh").addEventListener("click", zonesEditorAddLines);
|
||||
document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
|
||||
document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
|
||||
document.getElementById("zonesPercentage").addEventListener("click", togglePercentageMode);
|
||||
|
|
@ -28,8 +27,6 @@ function editZones() {
|
|||
document.getElementById("zonesManuallyApply").addEventListener("click", applyZonesManualAssignent);
|
||||
document.getElementById("zonesManuallyCancel").addEventListener("click", cancelZonesManualAssignent);
|
||||
document.getElementById("zonesAdd").addEventListener("click", addZonesLayer);
|
||||
document.getElementById("zonesEditTypes").addEventListener("click", addZonesDialog);
|
||||
document.getElementById("zonesNewTypeButton").addEventListener("click", addZonesType);
|
||||
document.getElementById("zonesExport").addEventListener("click", downloadZonesData);
|
||||
document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode);
|
||||
|
||||
|
|
@ -51,68 +48,21 @@ function editZones() {
|
|||
zone = el.parentNode.dataset.id;
|
||||
if (el.classList.contains("religionName")) zones.select("#" + zone).attr("data-description", el.value);
|
||||
});
|
||||
|
||||
function refreshZonesEditor() {
|
||||
updateSVG();
|
||||
zonesEditorAddLines();
|
||||
}
|
||||
|
||||
function updateSVG() {
|
||||
const value = document.getElementById("zonesFilterType").value;
|
||||
|
||||
zones.selectAll("g").each(function () {
|
||||
if (value == "All" || this.dataset.type == value) {
|
||||
this.style.display = "block";
|
||||
} else {
|
||||
this.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getZoneTypesList(zoneId, currentType) {
|
||||
let res = `<select id="zoneTypeZoneId${zoneId}" class="zoneTypeList">`;
|
||||
|
||||
zoneTypes.forEach(function(z, i) {
|
||||
res += `<option ${z === currentType ? "selected" : ""} value="${z}">${z}</option>`;
|
||||
});
|
||||
|
||||
res += '</select>';
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
// add line for each zone
|
||||
// add line for each zone
|
||||
function zonesEditorAddLines() {
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
let lines = "";
|
||||
|
||||
// make sure all zone types are loaded from the SVG
|
||||
zones.selectAll("g").each(function () {
|
||||
const zoneType = this.dataset.type;
|
||||
if (!zoneTypes.includes(zoneType)) { zoneTypes.push(zoneType); }
|
||||
});
|
||||
|
||||
const selectedType = zonesFilterType.value || "All";
|
||||
zonesFilterType.options.length=0;
|
||||
zonesFilterType.options.add(new Option("All", "All", false, selectedType=="All"));
|
||||
zoneTypes.forEach(function(z, i) {
|
||||
zonesFilterType.options.add(new Option(z, z, false, selectedType==z));
|
||||
});
|
||||
|
||||
let zoneCount=0;
|
||||
zones.selectAll("g").each(function () {
|
||||
zoneCount++;
|
||||
const zoneType = this.dataset.type;
|
||||
if (selectedType !== "All" && (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType)) return;
|
||||
|
||||
const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : [];
|
||||
const description = this.dataset.description;
|
||||
const type = this.dataset.type;
|
||||
const fill = this.getAttribute("fill");
|
||||
const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
|
||||
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 population = rural + urban;
|
||||
const zoneTypeList = getZoneTypesList(this.id, this.dataset.type);
|
||||
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
|
||||
const inactive = this.style.display === "none";
|
||||
const focused = defs.select("#fog #focus" + this.id).size();
|
||||
|
|
@ -121,13 +71,13 @@ function editZones() {
|
|||
data-cells=${c.length} data-area=${area} data-population=${population}>
|
||||
<fill-box fill="${fill}"></fill-box>
|
||||
<input data-tip="Zone description. Click and type to change" class="religionName" value="${description}" autocorrect="off" spellcheck="false">
|
||||
<input data-tip="Zone type. Click and type to change" value="${type}">
|
||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||
<div data-tip="Cells count" class="stateCells hide">${c.length}</div>
|
||||
<span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
|
||||
${zoneTypeList}
|
||||
<span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
|
||||
<span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${c.length ? "" : " placeholder"}"></span>
|
||||
<span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${c.length ? "" : " placeholder"}"></span>
|
||||
|
|
@ -136,15 +86,6 @@ function editZones() {
|
|||
});
|
||||
|
||||
body.innerHTML = lines;
|
||||
if (body.innerHTML === "") { body.innerHTML = `<div class="states"><span>Zero entries for this type. To see entries again, select "All" or disable the filter button</span>
|
||||
</div>`; }
|
||||
|
||||
for (let i=0; i<zoneCount; i++) {
|
||||
let d = document.getElementById("zoneTypeZoneIdzone" + i);
|
||||
if (d) {
|
||||
d.addEventListener("change", function() { updateZoneType("zone" + i, this.options[this.selectedIndex].value); });
|
||||
}
|
||||
}
|
||||
|
||||
// update footer
|
||||
const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
|
||||
|
|
@ -166,6 +107,8 @@ function editZones() {
|
|||
$("#zonesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function filterZonesByType() {}
|
||||
|
||||
function zoneHighlightOn(event) {
|
||||
const zone = event.target.dataset.id;
|
||||
zones.select("#" + zone).style("outline", "1px solid red");
|
||||
|
|
@ -389,11 +332,6 @@ function editZones() {
|
|||
zonesEditorAddLines();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFilterTable() {
|
||||
this.classList.toggle("pressed");
|
||||
zonesEditorAddLines();
|
||||
}
|
||||
|
||||
function addZonesLayer() {
|
||||
const id = getNextId("zone");
|
||||
|
|
@ -517,66 +455,6 @@ function editZones() {
|
|||
}
|
||||
}
|
||||
|
||||
function zonesTypesAddLines() {
|
||||
const zoneTypeListBody = document.getElementById("zonesTypesBodySection");
|
||||
|
||||
let lines = "";
|
||||
zoneTypes.forEach(function(z, i) {
|
||||
let count=0; // Amount of zones per type
|
||||
zones.selectAll("g").each(function() { if (this.dataset.type === z) count++; });
|
||||
|
||||
lines += `<div class="states"><span class="religionDeity">${z}</span><span class="statePopulation">${count}</span>`;
|
||||
if (i > 5) {
|
||||
let id="removeZoneType" + i;
|
||||
lines += `<span data-tip="Remove zone type" class="icon-trash-empty" id="${id}"></span>`;
|
||||
}
|
||||
lines += '</div>';
|
||||
});
|
||||
zoneTypeListBody.innerHTML = lines;
|
||||
zonesTypesFooterNumber.innerHTML = zoneTypes.length;
|
||||
|
||||
for (let i=0; i<zoneTypes.length; i++) {
|
||||
let d = document.getElementById("removeZoneType" + i);
|
||||
if (d) {
|
||||
d.addEventListener("click", function() { removeZoneType(zoneTypes[i]); });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addZonesDialog() {
|
||||
$("#zonesTypes").dialog({
|
||||
title: "Add zones and types",
|
||||
width: fitContent(),
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
});
|
||||
zonesTypesAddLines();
|
||||
}
|
||||
|
||||
function addZonesType() {
|
||||
let zoneType = zonesNewTypeInput.value;
|
||||
if (!zoneTypes.includes(zoneType)) { zoneTypes.push(zoneType); }
|
||||
zonesNewTypeInput.value = "";
|
||||
zonesTypesAddLines();
|
||||
zonesTypesFooterNumber.innerHTML = zoneTypes.length;
|
||||
zonesEditorAddLines();
|
||||
}
|
||||
|
||||
function removeZoneType(zoneType) {
|
||||
zones.selectAll("g").each(function () {
|
||||
if (this.dataset.type === zoneType) {
|
||||
this.dataset.type = zoneTypes[0];
|
||||
}
|
||||
});
|
||||
|
||||
for (let i=0; i<zoneTypes.length; i++) {
|
||||
if (zoneTypes[i] === zoneType) {
|
||||
zoneTypes.splice(i, 1);
|
||||
zonesTypesAddLines();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function zoneRemove(zone) {
|
||||
zones.select("#" + zone).remove();
|
||||
unfog("focusZone" + zone);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue