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,20 +1,21 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
function editRiver(id) {
|
||||
if (customization) return;
|
||||
if (elSelected && d3.event && d3.event.target.id === elSelected.attr("id")) return;
|
||||
closeDialogs(".stable");
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
if (elSelected && d3.event && d3.event.target.id === elSelected.attr('id')) return;
|
||||
closeDialogs('.stable');
|
||||
if (!layerIsOn('toggleRivers')) toggleRivers();
|
||||
|
||||
const node = id ? document.getElementById(id) : d3.event.target;
|
||||
elSelected = d3.select(node).on("click", addInterimControlPoint);
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
|
||||
elSelected = d3.select(node).on('click', addInterimControlPoint);
|
||||
viewbox.on('touchmove mousemove', showEditorTips);
|
||||
debug.append('g').attr('id', 'controlPoints').attr('transform', elSelected.attr('transform'));
|
||||
updateRiverData();
|
||||
drawControlPoints(node);
|
||||
|
||||
$("#riverEditor").dialog({
|
||||
title: "Edit River", resizable: false,
|
||||
position: {my: "center top+80", at: "top", of: node, collision: "fit"},
|
||||
$('#riverEditor').dialog({
|
||||
title: 'Edit River',
|
||||
resizable: false,
|
||||
position: {my: 'center top+80', at: 'top', of: node, collision: 'fit'},
|
||||
close: closeRiverEditor
|
||||
});
|
||||
|
||||
|
|
@ -22,64 +23,64 @@ function editRiver(id) {
|
|||
modules.editRiver = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riverName").addEventListener("input", changeName);
|
||||
document.getElementById("riverType").addEventListener("input", changeType);
|
||||
document.getElementById("riverNameCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("riverNameRandom").addEventListener("click", generateNameRandom);
|
||||
document.getElementById("riverMainstem").addEventListener("change", changeParent);
|
||||
document.getElementById('riverName').addEventListener('input', changeName);
|
||||
document.getElementById('riverType').addEventListener('input', changeType);
|
||||
document.getElementById('riverNameCulture').addEventListener('click', generateNameCulture);
|
||||
document.getElementById('riverNameRandom').addEventListener('click', generateNameRandom);
|
||||
document.getElementById('riverMainstem').addEventListener('change', changeParent);
|
||||
|
||||
document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth);
|
||||
document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
|
||||
document.getElementById('riverSourceWidth').addEventListener('input', changeSourceWidth);
|
||||
document.getElementById('riverWidthFactor').addEventListener('input', changeWidthFactor);
|
||||
|
||||
document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
|
||||
document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
|
||||
document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile);
|
||||
document.getElementById("riverLegend").addEventListener("click", editRiverLegend);
|
||||
document.getElementById("riverRemove").addEventListener("click", removeRiver);
|
||||
document.getElementById('riverNew').addEventListener('click', toggleRiverCreationMode);
|
||||
document.getElementById('riverEditStyle').addEventListener('click', () => editStyle('rivers'));
|
||||
document.getElementById('riverElevationProfile').addEventListener('click', showElevationProfile);
|
||||
document.getElementById('riverLegend').addEventListener('click', editRiverLegend);
|
||||
document.getElementById('riverRemove').addEventListener('click', removeRiver);
|
||||
|
||||
function showEditorTips() {
|
||||
showMainTip();
|
||||
if (d3.event.target.parentNode.id === elSelected.attr("id")) tip("Drag to move, click to add a control point"); else
|
||||
if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point");
|
||||
if (d3.event.target.parentNode.id === elSelected.attr('id')) tip('Drag to move, click to add a control point');
|
||||
else if (d3.event.target.parentNode.id === 'controlPoints') tip('Drag to move, click to delete the control point');
|
||||
}
|
||||
|
||||
function getRiver() {
|
||||
const riverId = +elSelected.attr("id").slice(5);
|
||||
const river = pack.rivers.find(r => r.i === riverId);
|
||||
const riverId = +elSelected.attr('id').slice(5);
|
||||
const river = pack.rivers.find((r) => r.i === riverId);
|
||||
return river;
|
||||
}
|
||||
|
||||
function updateRiverData() {
|
||||
const r = getRiver();
|
||||
|
||||
document.getElementById("riverName").value = r.name;
|
||||
document.getElementById("riverType").value = r.type;
|
||||
document.getElementById('riverName').value = r.name;
|
||||
document.getElementById('riverType').value = r.type;
|
||||
|
||||
const parentSelect = document.getElementById("riverMainstem");
|
||||
const parentSelect = document.getElementById('riverMainstem');
|
||||
parentSelect.options.length = 0;
|
||||
const parent = r.parent || r.i;
|
||||
const sortedRivers = pack.rivers.slice().sort((a, b) => a.name > b.name ? 1 : -1);
|
||||
sortedRivers.forEach(river => {
|
||||
const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
sortedRivers.forEach((river) => {
|
||||
const opt = new Option(river.name, river.i, false, river.i === parent);
|
||||
parentSelect.options.add(opt);
|
||||
});
|
||||
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
|
||||
|
||||
document.getElementById("riverDischarge").value = r.discharge + " m³/s";
|
||||
document.getElementById('riverDischarge').value = r.discharge + ' m³/s';
|
||||
r.length = elSelected.node().getTotalLength() / 2;
|
||||
const length = rn(r.length * distanceScaleInput.value) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverLength").value = length;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value;
|
||||
document.getElementById("riverWidth").value = width;
|
||||
const length = rn(r.length * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
|
||||
document.getElementById('riverLength').value = length;
|
||||
const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + distanceUnitInput.value;
|
||||
document.getElementById('riverWidth').value = width;
|
||||
|
||||
document.getElementById("riverSourceWidth").value = r.sourceWidth;
|
||||
document.getElementById("riverWidthFactor").value = r.widthFactor;
|
||||
document.getElementById('riverSourceWidth').value = r.sourceWidth;
|
||||
document.getElementById('riverWidthFactor').value = r.widthFactor;
|
||||
}
|
||||
|
||||
function drawControlPoints(node) {
|
||||
const length = getRiver().length;
|
||||
const segments = Math.ceil(length / 4);
|
||||
const increment = rn(length / segments * 1e5);
|
||||
const increment = rn((length / segments) * 1e5);
|
||||
for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) {
|
||||
const p1 = node.getPointAtLength(i / 1e5);
|
||||
const p2 = node.getPointAtLength(c / 1e5);
|
||||
|
|
@ -88,37 +89,39 @@ function editRiver(id) {
|
|||
}
|
||||
|
||||
function addControlPoint(point, before = null) {
|
||||
debug.select("#controlPoints").insert("circle", before)
|
||||
.attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
|
||||
.call(d3.drag().on("drag", dragControlPoint))
|
||||
.on("click", clickControlPoint);
|
||||
debug.select('#controlPoints').insert('circle', before).attr('cx', point[0]).attr('cy', point[1]).attr('r', 0.6).call(d3.drag().on('drag', dragControlPoint)).on('click', clickControlPoint);
|
||||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
this.setAttribute("cx", d3.event.x);
|
||||
this.setAttribute("cy", d3.event.y);
|
||||
this.setAttribute('cx', d3.event.x);
|
||||
this.setAttribute('cy', d3.event.y);
|
||||
redrawRiver();
|
||||
}
|
||||
|
||||
function redrawRiver() {
|
||||
const points = [];
|
||||
debug.select("#controlPoints").selectAll("circle").each(function() {
|
||||
points.push([+this.getAttribute("cx"), +this.getAttribute("cy")]);
|
||||
});
|
||||
debug
|
||||
.select('#controlPoints')
|
||||
.selectAll('circle')
|
||||
.each(function () {
|
||||
points.push([+this.getAttribute('cx'), +this.getAttribute('cy')]);
|
||||
});
|
||||
|
||||
if (points.length < 2) return;
|
||||
if (points.length === 2) {
|
||||
const p0 = points[0], p1 = points[1];
|
||||
const p0 = points[0],
|
||||
p1 = points[1];
|
||||
const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
|
||||
const sin = Math.sin(angle), cos = Math.cos(angle);
|
||||
elSelected.attr("d", `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin/2},${cos/2} Z`);
|
||||
const sin = Math.sin(angle),
|
||||
cos = Math.cos(angle);
|
||||
elSelected.attr('d', `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin / 2},${cos / 2} Z`);
|
||||
return;
|
||||
}
|
||||
|
||||
const widthFactor = +document.getElementById("riverWidthFactor").value;
|
||||
const sourceWidth = +document.getElementById("riverSourceWidth").value;
|
||||
const widthFactor = +document.getElementById('riverWidthFactor').value;
|
||||
const sourceWidth = +document.getElementById('riverSourceWidth').value;
|
||||
const [path, length, offset] = Rivers.getPath(points, widthFactor, sourceWidth);
|
||||
elSelected.attr("d", path);
|
||||
elSelected.attr('d', path);
|
||||
|
||||
const r = getRiver();
|
||||
if (r) {
|
||||
|
|
@ -137,10 +140,10 @@ function editRiver(id) {
|
|||
|
||||
function addInterimControlPoint() {
|
||||
const point = d3.mouse(this);
|
||||
const controls = document.getElementById("controlPoints").querySelectorAll("circle");
|
||||
const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
|
||||
const controls = document.getElementById('controlPoints').querySelectorAll('circle');
|
||||
const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]);
|
||||
const index = getSegmentId(points, point, 2);
|
||||
addControlPoint(point, ":nth-child(" + (index+1) + ")");
|
||||
addControlPoint(point, ':nth-child(' + (index + 1) + ')');
|
||||
|
||||
redrawRiver();
|
||||
}
|
||||
|
|
@ -160,14 +163,14 @@ function editRiver(id) {
|
|||
|
||||
function generateNameRandom() {
|
||||
const r = getRiver();
|
||||
if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length-1));
|
||||
if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length - 1));
|
||||
}
|
||||
|
||||
function changeParent() {
|
||||
const r = getRiver();
|
||||
r.parent = +this.value;
|
||||
r.basin = pack.rivers.find(river => river.i === r.parent).basin;
|
||||
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
r.basin = pack.rivers.find((river) => river.i === r.parent).basin;
|
||||
document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
|
||||
}
|
||||
|
||||
function changeSourceWidth() {
|
||||
|
|
@ -186,26 +189,26 @@ function editRiver(id) {
|
|||
}
|
||||
|
||||
function editRiverLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
const id = elSelected.attr('id');
|
||||
const river = getRiver();
|
||||
editNotes(id, river.name + " " + river.type);
|
||||
editNotes(id, river.name + ' ' + river.type);
|
||||
}
|
||||
|
||||
function toggleRiverCreationMode() {
|
||||
if (document.getElementById("riverNew").classList.contains("pressed")) exitRiverCreationMode();
|
||||
if (document.getElementById('riverNew').classList.contains('pressed')) exitRiverCreationMode();
|
||||
else {
|
||||
document.getElementById("riverNew").classList.add("pressed");
|
||||
tip("Click on map to add control points", true, "warn");
|
||||
viewbox.on("click", addPointOnClick).style("cursor", "crosshair");
|
||||
elSelected.on("click", null);
|
||||
document.getElementById('riverNew').classList.add('pressed');
|
||||
tip('Click on map to add control points', true, 'warn');
|
||||
viewbox.on('click', addPointOnClick).style('cursor', 'crosshair');
|
||||
elSelected.on('click', null);
|
||||
}
|
||||
}
|
||||
|
||||
function addPointOnClick() {
|
||||
if (!elSelected.attr("data-new")) {
|
||||
debug.select("#controlPoints").selectAll("circle").remove();
|
||||
const id = getNextId("river");
|
||||
elSelected = d3.select(elSelected.node().parentNode).append("path").attr("id", id).attr("data-new", 1);
|
||||
if (!elSelected.attr('data-new')) {
|
||||
debug.select('#controlPoints').selectAll('circle').remove();
|
||||
const id = getNextId('river');
|
||||
elSelected = d3.select(elSelected.node().parentNode).append('path').attr('id', id).attr('data-new', 1);
|
||||
}
|
||||
|
||||
// add control point
|
||||
|
|
@ -215,20 +218,22 @@ function editRiver(id) {
|
|||
}
|
||||
|
||||
function exitRiverCreationMode() {
|
||||
riverNew.classList.remove("pressed");
|
||||
riverNew.classList.remove('pressed');
|
||||
clearMainTip();
|
||||
viewbox.on("click", clicked).style("cursor", "default");
|
||||
elSelected.on("click", addInterimControlPoint);
|
||||
viewbox.on('click', clicked).style('cursor', 'default');
|
||||
elSelected.on('click', addInterimControlPoint);
|
||||
|
||||
if (!elSelected.attr("data-new")) return; // no need to create a new river
|
||||
elSelected.attr("data-new", null);
|
||||
if (!elSelected.attr('data-new')) return; // no need to create a new river
|
||||
elSelected.attr('data-new', null);
|
||||
|
||||
// add a river
|
||||
const r = +elSelected.attr("id").slice(5);
|
||||
const node = elSelected.node(), length = node.getTotalLength() / 2;
|
||||
const r = +elSelected.attr('id').slice(5);
|
||||
const node = elSelected.node(),
|
||||
length = node.getTotalLength() / 2;
|
||||
|
||||
const cells = [];
|
||||
const segments = Math.ceil(length / 4), increment = rn(length / segments * 1e5);
|
||||
const segments = Math.ceil(length / 4),
|
||||
increment = rn((length / segments) * 1e5);
|
||||
for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) {
|
||||
const p = node.getPointAtLength(i / 1e5);
|
||||
const cell = findCell(p.x, p.y);
|
||||
|
|
@ -236,38 +241,34 @@ function editRiver(id) {
|
|||
cells.push(cell);
|
||||
}
|
||||
|
||||
const source = cells[0], mouth = last(cells);
|
||||
const source = cells[0],
|
||||
mouth = last(cells);
|
||||
const name = Rivers.getName(mouth);
|
||||
const smallLength = pack.rivers.map(r => r.length||0).sort((a,b) => a-b)[Math.ceil(pack.rivers.length * .15)];
|
||||
const type = length < smallLength ? rw({"Creek":9, "River":3, "Brook":3, "Stream":1}) : "River";
|
||||
const smallLength = pack.rivers.map((r) => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)];
|
||||
const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : 'River';
|
||||
|
||||
const discharge = rn(cells.length * 20 * Math.random());
|
||||
const widthFactor = +document.getElementById("riverWidthFactor").value;
|
||||
const sourceWidth = +document.getElementById("riverSourceWidth").value;
|
||||
const widthFactor = +document.getElementById('riverWidthFactor').value;
|
||||
const sourceWidth = +document.getElementById('riverSourceWidth').value;
|
||||
|
||||
pack.rivers.push({i:r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent:0, name, type, basin:r});
|
||||
pack.rivers.push({i: r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent: 0, name, type, basin: r});
|
||||
}
|
||||
|
||||
function removeRiver() {
|
||||
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() {
|
||||
$(this).dialog("close");
|
||||
const river = +elSelected.attr("id").slice(5);
|
||||
Rivers.remove(river);
|
||||
elSelected.remove(); // keep if river if missed in pack.rivers
|
||||
$("#riverEditor").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 = () => {
|
||||
const river = +elSelected.attr('id').slice(5);
|
||||
Rivers.remove(river);
|
||||
elSelected.remove(); // if river if missed in pack.rivers
|
||||
$('#riverEditor').dialog('close');
|
||||
};
|
||||
confirmationDialog({title: 'Remove river', message, confirm: 'Remove', onConfirm});
|
||||
}
|
||||
|
||||
function closeRiverEditor() {
|
||||
exitRiverCreationMode();
|
||||
elSelected.on("click", null);
|
||||
debug.select("#controlPoints").remove();
|
||||
elSelected.on('click', null);
|
||||
debug.select('#controlPoints').remove();
|
||||
unselect();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue