mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
generic confirmationDialog for all files
This commit is contained in:
Azgaar
parent
5464e0a34b
commit
3359df0e02
25 changed files with 6727 additions and 5454 deletions
|
|
@ -1,39 +1,41 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
function overviewRivers() {
|
||||
if (customization) return;
|
||||
closeDialogs("#riversOverview, .stable");
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
closeDialogs('#riversOverview, .stable');
|
||||
if (!layerIsOn('toggleRivers')) toggleRivers();
|
||||
|
||||
const body = document.getElementById("riversBody");
|
||||
const body = document.getElementById('riversBody');
|
||||
riversOverviewAddLines();
|
||||
$("#riversOverview").dialog();
|
||||
$('#riversOverview').dialog();
|
||||
|
||||
if (modules.overviewRivers) return;
|
||||
modules.overviewRivers = true;
|
||||
|
||||
$("#riversOverview").dialog({
|
||||
title: "Rivers Overview", resizable: false, width: fitContent(),
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
$('#riversOverview').dialog({
|
||||
title: 'Rivers Overview',
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
position: {my: 'right top', at: 'right-10 top+10', of: 'svg', collision: 'fit'}
|
||||
});
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riversOverviewRefresh").addEventListener("click", riversOverviewAddLines);
|
||||
document.getElementById("addNewRiver").addEventListener("click", toggleAddRiver);
|
||||
document.getElementById("riversBasinHighlight").addEventListener("click", toggleBasinsHightlight);
|
||||
document.getElementById("riversExport").addEventListener("click", downloadRiversData);
|
||||
document.getElementById("riversRemoveAll").addEventListener("click", triggerAllRiversRemove);
|
||||
document.getElementById('riversOverviewRefresh').addEventListener('click', riversOverviewAddLines);
|
||||
document.getElementById('addNewRiver').addEventListener('click', toggleAddRiver);
|
||||
document.getElementById('riversBasinHighlight').addEventListener('click', toggleBasinsHightlight);
|
||||
document.getElementById('riversExport').addEventListener('click', downloadRiversData);
|
||||
document.getElementById('riversRemoveAll').addEventListener('click', triggerAllRiversRemove);
|
||||
|
||||
// add line for each river
|
||||
function riversOverviewAddLines() {
|
||||
body.innerHTML = "";
|
||||
let lines = "";
|
||||
body.innerHTML = '';
|
||||
let lines = '';
|
||||
const unit = distanceUnitInput.value;
|
||||
|
||||
for (const r of pack.rivers) {
|
||||
const discharge = r.discharge + " m³/s";
|
||||
const length = rn(r.length * distanceScaleInput.value) + " " + unit;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit;
|
||||
const basin = pack.rivers.find(river => river.i === r.basin)?.name;
|
||||
const discharge = r.discharge + ' m³/s';
|
||||
const length = rn(r.length * distanceScaleInput.value) + ' ' + unit;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + unit;
|
||||
const basin = pack.rivers.find((river) => river.i === r.basin)?.name;
|
||||
|
||||
lines += `<div class="states" data-id=${r.i} data-name="${r.name}" data-type="${r.type}" data-discharge="${r.discharge}" data-length="${r.length}" data-width="${r.width}" data-basin="${basin}">
|
||||
<span data-tip="Click to focus on river" class="icon-dot-circled pointer"></span>
|
||||
|
|
@ -47,115 +49,107 @@ function overviewRivers() {
|
|||
<span data-tip="Remove river" class="icon-trash-empty"></span>
|
||||
</div>`;
|
||||
}
|
||||
body.insertAdjacentHTML("beforeend", lines);
|
||||
body.insertAdjacentHTML('beforeend', lines);
|
||||
|
||||
// update footer
|
||||
riversFooterNumber.innerHTML = pack.rivers.length;
|
||||
const averageDischarge = rn(d3.mean(pack.rivers.map(r => r.discharge)));
|
||||
riversFooterDischarge.innerHTML = averageDischarge + " m³/s";
|
||||
const averageLength = rn(d3.mean(pack.rivers.map(r => r.length)) );
|
||||
riversFooterLength.innerHTML = (averageLength * distanceScaleInput.value) + " " + unit;
|
||||
const averageWidth = rn(d3.mean(pack.rivers.map(r => r.width)), 3);
|
||||
riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit;
|
||||
const averageDischarge = rn(d3.mean(pack.rivers.map((r) => r.discharge)));
|
||||
riversFooterDischarge.innerHTML = averageDischarge + ' m³/s';
|
||||
const averageLength = rn(d3.mean(pack.rivers.map((r) => r.length)));
|
||||
riversFooterLength.innerHTML = averageLength * distanceScaleInput.value + ' ' + unit;
|
||||
const averageWidth = rn(d3.mean(pack.rivers.map((r) => r.width)), 3);
|
||||
riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + ' ' + unit;
|
||||
|
||||
// add listeners
|
||||
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev)));
|
||||
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev)));
|
||||
body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver));
|
||||
body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor));
|
||||
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove));
|
||||
body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => riverHighlightOn(ev)));
|
||||
body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => riverHighlightOff(ev)));
|
||||
body.querySelectorAll('div > span.icon-dot-circled').forEach((el) => el.addEventListener('click', zoomToRiver));
|
||||
body.querySelectorAll('div > span.icon-pencil').forEach((el) => el.addEventListener('click', openRiverEditor));
|
||||
body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('click', triggerRiverRemove));
|
||||
|
||||
applySorting(riversHeader);
|
||||
}
|
||||
|
||||
function riverHighlightOn(event) {
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
if (!layerIsOn('toggleRivers')) toggleRivers();
|
||||
const r = +event.target.dataset.id;
|
||||
rivers.select("#river"+r).attr("stroke", "red").attr("stroke-width", 1);
|
||||
rivers
|
||||
.select('#river' + r)
|
||||
.attr('stroke', 'red')
|
||||
.attr('stroke-width', 1);
|
||||
}
|
||||
|
||||
function riverHighlightOff(e) {
|
||||
const r = +e.target.dataset.id;
|
||||
rivers.select("#river"+r).attr("stroke", null).attr("stroke-width", null);
|
||||
rivers
|
||||
.select('#river' + r)
|
||||
.attr('stroke', null)
|
||||
.attr('stroke-width', null);
|
||||
}
|
||||
|
||||
function zoomToRiver() {
|
||||
const r = +this.parentNode.dataset.id;
|
||||
const river = rivers.select("#river"+r).node();
|
||||
const river = rivers.select('#river' + r).node();
|
||||
highlightElement(river);
|
||||
}
|
||||
|
||||
function toggleBasinsHightlight() {
|
||||
if (rivers.attr("data-basin") === "hightlighted") {
|
||||
rivers.selectAll("*").attr("fill", null);
|
||||
rivers.attr("data-basin", null);
|
||||
if (rivers.attr('data-basin') === 'hightlighted') {
|
||||
rivers.selectAll('*').attr('fill', null);
|
||||
rivers.attr('data-basin', null);
|
||||
} else {
|
||||
rivers.attr("data-basin", "hightlighted");
|
||||
const basins = [...new Set(pack.rivers.map(r => r.basin))];
|
||||
const colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
|
||||
rivers.attr('data-basin', 'hightlighted');
|
||||
const basins = [...new Set(pack.rivers.map((r) => r.basin))];
|
||||
const colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
|
||||
|
||||
basins.forEach((b, i) => {
|
||||
const color = colors[i % colors.length];
|
||||
pack.rivers.filter(r => r.basin === b).forEach(r => {
|
||||
rivers.select("#river"+r.i).attr("fill", color);
|
||||
});
|
||||
pack.rivers
|
||||
.filter((r) => r.basin === b)
|
||||
.forEach((r) => {
|
||||
rivers.select('#river' + r.i).attr('fill', color);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function downloadRiversData() {
|
||||
let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers
|
||||
let data = 'Id,River,Type,Discharge,Length,Width,Basin\n'; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
body.querySelectorAll(':scope > div').forEach(function (el) {
|
||||
const d = el.dataset;
|
||||
const discharge = d.discharge + " m³/s"
|
||||
const length = rn(d.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
const width = rn(d.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
|
||||
const discharge = d.discharge + ' m³/s';
|
||||
const length = rn(d.length * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
|
||||
const width = rn(d.width * distanceScaleInput.value, 3) + ' ' + distanceUnitInput.value;
|
||||
data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(',') + '\n';
|
||||
});
|
||||
|
||||
const name = getFileName("Rivers") + ".csv";
|
||||
const name = getFileName('Rivers') + '.csv';
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function openRiverEditor() {
|
||||
editRiver("river"+this.parentNode.dataset.id);
|
||||
editRiver('river' + this.parentNode.dataset.id);
|
||||
}
|
||||
|
||||
function triggerRiverRemove() {
|
||||
const river = +this.parentNode.dataset.id;
|
||||
alertMessage.innerHTML = `Are you sure you want to remove the river?
|
||||
All tributaries will be auto-removed`;
|
||||
|
||||
$("#alert").dialog({resizable: false, width: "22em", title: "Remove river",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
Rivers.remove(river);
|
||||
riversOverviewAddLines();
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
const message = 'Are you sure you want to remove the river? <br>All tributaries will be auto-removed';
|
||||
const onConfirm = () => {
|
||||
Rivers.remove(river);
|
||||
riversOverviewAddLines();
|
||||
};
|
||||
confirmationDialog({title: 'Remove river', message, confirm: 'Remove', onConfirm});
|
||||
}
|
||||
|
||||
function triggerAllRiversRemove() {
|
||||
alertMessage.innerHTML = `Are you sure you want to remove all rivers?`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove all rivers",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
$(this).dialog("close");
|
||||
removeAllRivers();
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
const message = 'Are you sure you want to remove all rivers? <br>This action cannot be reverted';
|
||||
const onConfirm = () => {
|
||||
pack.rivers = [];
|
||||
rivers.selectAll('*').remove();
|
||||
riversOverviewAddLines();
|
||||
};
|
||||
confirmationDialog({title: 'Remove all rivers', message, confirm: 'Remove', onConfirm});
|
||||
}
|
||||
|
||||
function removeAllRivers() {
|
||||
pack.rivers = [];
|
||||
rivers.selectAll("*").remove();
|
||||
riversOverviewAddLines();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue