mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-21 19:41:23 +01:00
feat: edit routes - EP
This commit is contained in:
Azgaar
parent
68b4cfd370
commit
9b46e7b877
3 changed files with 69 additions and 82 deletions
|
|
@ -1,43 +1,14 @@
|
|||
"use strict";
|
||||
|
||||
function showEPForRoute(node) {
|
||||
const points = [];
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
|
||||
points.push(i);
|
||||
});
|
||||
|
||||
const routeLen = node.getTotalLength() * distanceScaleInput.value;
|
||||
showElevationProfile(points, routeLen, false);
|
||||
}
|
||||
|
||||
function showEPForRiver(node) {
|
||||
const points = [];
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
|
||||
points.push(i);
|
||||
});
|
||||
|
||||
const riverLen = (node.getTotalLength() / 2) * distanceScaleInput.value;
|
||||
showElevationProfile(points, riverLen, true);
|
||||
}
|
||||
|
||||
// data is an array of cell indexes, routeLen is the distance (in actual metres/feet), isRiver should be true for rivers, false otherwise
|
||||
function showElevationProfile(data, routeLen, isRiver) {
|
||||
// data is an array of cell indexes, routeLen is the distance (in actual metres/feet), isRiver should be true for rivers, false otherwise
|
||||
document.getElementById("epScaleRange").addEventListener("change", draw);
|
||||
document.getElementById("epCurve").addEventListener("change", draw);
|
||||
document.getElementById("epSave").addEventListener("click", downloadCSV);
|
||||
byId("epScaleRange").on("change", draw);
|
||||
byId("epCurve").on("change", draw);
|
||||
byId("epSave").on("click", downloadCSV);
|
||||
|
||||
$("#elevationProfile").dialog({
|
||||
title: "Elevation profile",
|
||||
resizable: false,
|
||||
width: window.width,
|
||||
close: closeElevationProfile,
|
||||
position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"}
|
||||
});
|
||||
|
|
@ -45,18 +16,20 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
// prevent river graphs from showing rivers as flowing uphill - remember the general slope
|
||||
let slope = 0;
|
||||
if (isRiver) {
|
||||
if (pack.cells.h[data[0]] < pack.cells.h[data[data.length - 1]]) {
|
||||
const firstCellHeight = pack.cells.h[data.at(0)];
|
||||
const lastCellHeight = pack.cells.h[data.at(-1)];
|
||||
if (firstCellHeight < lastCellHeight) {
|
||||
slope = 1; // up-hill
|
||||
} else if (pack.cells.h[data[0]] > pack.cells.h[data[data.length - 1]]) {
|
||||
} else if (firstCellHeight > lastCellHeight) {
|
||||
slope = -1; // down-hill
|
||||
}
|
||||
}
|
||||
|
||||
const chartWidth = window.innerWidth - 180,
|
||||
chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
|
||||
const xOffset = 80,
|
||||
yOffset = 80; // this is our drawing starting point from top-left (y = 0) of SVG
|
||||
const biomesHeight = 40;
|
||||
const chartWidth = window.innerWidth - 200;
|
||||
const chartHeight = 300;
|
||||
const xOffset = 80;
|
||||
const yOffset = 80;
|
||||
const biomesHeight = 10;
|
||||
|
||||
let lastBurgIndex = 0;
|
||||
let lastBurgCell = 0;
|
||||
|
|
@ -170,7 +143,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
|
||||
}
|
||||
|
||||
document.getElementById("elevationGraph").innerHTML = "";
|
||||
byId("elevationGraph").innerHTML = "";
|
||||
|
||||
const chart = d3
|
||||
.select("#elevationGraph")
|
||||
|
|
@ -309,7 +282,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
.attr("x", x)
|
||||
.attr("y", y)
|
||||
.attr("width", xscale(1))
|
||||
.attr("height", 15)
|
||||
.attr("height", biomesHeight)
|
||||
.attr("data-tip", dataTip);
|
||||
}
|
||||
|
||||
|
|
@ -387,7 +360,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
.attr("x", x1)
|
||||
.attr("y", y1)
|
||||
.attr("text-anchor", "middle");
|
||||
document.getElementById("ep" + b).innerHTML = pack.burgs[b].name;
|
||||
byId("ep" + b).innerHTML = pack.burgs[b].name;
|
||||
|
||||
// arrow from burg name to graph line
|
||||
g.append("path")
|
||||
|
|
@ -412,10 +385,10 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
}
|
||||
|
||||
function closeElevationProfile() {
|
||||
document.getElementById("epScaleRange").removeEventListener("change", draw);
|
||||
document.getElementById("epCurve").removeEventListener("change", draw);
|
||||
document.getElementById("epSave").removeEventListener("click", downloadCSV);
|
||||
document.getElementById("elevationGraph").innerHTML = "";
|
||||
byId("epScaleRange").removeEventListener("change", draw);
|
||||
byId("epCurve").removeEventListener("change", draw);
|
||||
byId("epSave").removeEventListener("click", downloadCSV);
|
||||
byId("elevationGraph").innerHTML = "";
|
||||
modules.elevation = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ function editRiver(id) {
|
|||
closeDialogs(".stable");
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
|
||||
document.getElementById("toggleCells").dataset.forced = +!layerIsOn("toggleCells");
|
||||
byId("toggleCells").dataset.forced = +!layerIsOn("toggleCells");
|
||||
if (!layerIsOn("toggleCells")) toggleCells();
|
||||
|
||||
elSelected = d3.select("#" + id).on("click", addControlPoint);
|
||||
|
|
@ -36,18 +36,18 @@ function editRiver(id) {
|
|||
modules.editRiver = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("riverCreateSelectingCells").addEventListener("click", createRiver);
|
||||
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("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);
|
||||
byId("riverCreateSelectingCells").on("click", createRiver);
|
||||
byId("riverEditStyle").on("click", () => editStyle("rivers"));
|
||||
byId("riverElevationProfile").on("click", showRiverElevationProfile);
|
||||
byId("riverLegend").on("click", editRiverLegend);
|
||||
byId("riverRemove").on("click", removeRiver);
|
||||
byId("riverName").on("input", changeName);
|
||||
byId("riverType").on("input", changeType);
|
||||
byId("riverNameCulture").on("click", generateNameCulture);
|
||||
byId("riverNameRandom").on("click", generateNameRandom);
|
||||
byId("riverMainstem").on("change", changeParent);
|
||||
byId("riverSourceWidth").on("input", changeSourceWidth);
|
||||
byId("riverWidthFactor").on("input", changeWidthFactor);
|
||||
|
||||
function getRiver() {
|
||||
const riverId = +elSelected.attr("id").slice(5);
|
||||
|
|
@ -58,10 +58,10 @@ function editRiver(id) {
|
|||
function updateRiverData() {
|
||||
const r = getRiver();
|
||||
|
||||
document.getElementById("riverName").value = r.name;
|
||||
document.getElementById("riverType").value = r.type;
|
||||
byId("riverName").value = r.name;
|
||||
byId("riverType").value = r.type;
|
||||
|
||||
const parentSelect = document.getElementById("riverMainstem");
|
||||
const parentSelect = byId("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));
|
||||
|
|
@ -69,11 +69,11 @@ function editRiver(id) {
|
|||
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;
|
||||
byId("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
|
||||
document.getElementById("riverDischarge").value = r.discharge + " m³/s";
|
||||
document.getElementById("riverSourceWidth").value = r.sourceWidth;
|
||||
document.getElementById("riverWidthFactor").value = r.widthFactor;
|
||||
byId("riverDischarge").value = r.discharge + " m³/s";
|
||||
byId("riverSourceWidth").value = r.sourceWidth;
|
||||
byId("riverWidthFactor").value = r.widthFactor;
|
||||
|
||||
updateRiverLength(r);
|
||||
updateRiverWidth(r);
|
||||
|
|
@ -82,7 +82,7 @@ function editRiver(id) {
|
|||
function updateRiverLength(river) {
|
||||
river.length = rn(elSelected.node().getTotalLength() / 2, 2);
|
||||
const lengthUI = `${rn(river.length * distanceScaleInput.value)} ${distanceUnitInput.value}`;
|
||||
document.getElementById("riverLength").value = lengthUI;
|
||||
byId("riverLength").value = lengthUI;
|
||||
}
|
||||
|
||||
function updateRiverWidth(river) {
|
||||
|
|
@ -92,7 +92,7 @@ function editRiver(id) {
|
|||
river.width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
|
||||
|
||||
const width = `${rn(river.width * distanceScaleInput.value, 3)} ${distanceUnitInput.value}`;
|
||||
document.getElementById("riverWidth").value = width;
|
||||
byId("riverWidth").value = width;
|
||||
}
|
||||
|
||||
function drawControlPoints(points) {
|
||||
|
|
@ -166,7 +166,7 @@ function editRiver(id) {
|
|||
elSelected.attr("d", path);
|
||||
|
||||
updateRiverLength(river);
|
||||
if (modules.elevation) showEPForRiver(elSelected.node());
|
||||
if (byId("elevationProfile").offsetParent) showRiverElevationProfile();
|
||||
}
|
||||
|
||||
function addControlPoint() {
|
||||
|
|
@ -212,7 +212,7 @@ function editRiver(id) {
|
|||
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;
|
||||
byId("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name;
|
||||
}
|
||||
|
||||
function changeSourceWidth() {
|
||||
|
|
@ -229,9 +229,14 @@ function editRiver(id) {
|
|||
redrawRiver();
|
||||
}
|
||||
|
||||
function showElevationProfile() {
|
||||
modules.elevation = true;
|
||||
showEPForRiver(elSelected.node());
|
||||
function showRiverElevationProfile() {
|
||||
const points = debug
|
||||
.selectAll("#controlPoints > *")
|
||||
.data()
|
||||
.map(([x, y]) => findCell(x, y));
|
||||
const river = getRiver();
|
||||
const riverLen = rn(river.length * distanceScaleInput.value);
|
||||
showElevationProfile(points, riverLen, true);
|
||||
}
|
||||
|
||||
function editRiverLegend() {
|
||||
|
|
@ -269,8 +274,8 @@ function editRiver(id) {
|
|||
unselect();
|
||||
clearMainTip();
|
||||
|
||||
const forced = +document.getElementById("toggleCells").dataset.forced;
|
||||
document.getElementById("toggleCells").dataset.forced = 0;
|
||||
const forced = +byId("toggleCells").dataset.forced;
|
||||
byId("toggleCells").dataset.forced = 0;
|
||||
if (forced && layerIsOn("toggleCells")) toggleCells();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ function editRoute(id) {
|
|||
|
||||
// add listeners
|
||||
byId("routeCreateSelectingCells").on("click", createRoute);
|
||||
byId("routeEditStyle").on("click", () => editStyle("routes"));
|
||||
byId("routeElevationProfile").on("click", showElevationProfile);
|
||||
byId("routeEditStyle").on("click", editRouteGroupStyle);
|
||||
byId("routeElevationProfile").on("click", showRouteElevationProfile);
|
||||
byId("routeLegend").on("click", editRouteLegend);
|
||||
byId("routeRemove").on("click", removeRoute);
|
||||
byId("routeName").on("input", changeName);
|
||||
|
|
@ -63,6 +63,9 @@ function editRoute(id) {
|
|||
});
|
||||
|
||||
updateRouteLength(route);
|
||||
|
||||
const isWater = route.cells.some(cell => pack.cells.h[cell] < 20);
|
||||
byId("routeElevationProfile").style.display = isWater ? "none" : "inline-block";
|
||||
}
|
||||
|
||||
function generateRouteName(route) {
|
||||
|
|
@ -153,7 +156,7 @@ function editRoute(id) {
|
|||
elSelected.attr("d", path);
|
||||
|
||||
updateRouteLength(route);
|
||||
if (modules.elevation) showEPForRoute(elSelected.node());
|
||||
if (byId("elevationProfile").offsetParent) showRouteElevationProfile();
|
||||
}
|
||||
|
||||
function addControlPoint() {
|
||||
|
|
@ -248,9 +251,10 @@ function editRoute(id) {
|
|||
route.name = routeName.value = Names.getBase(rand(nameBases.length - 1));
|
||||
}
|
||||
|
||||
function showElevationProfile() {
|
||||
modules.elevation = true;
|
||||
showEPForRoute(elSelected.node());
|
||||
function showRouteElevationProfile() {
|
||||
const route = getRoute();
|
||||
const routeLen = rn(route.length * distanceScaleInput.value);
|
||||
showElevationProfile(route.cells, routeLen, false);
|
||||
}
|
||||
|
||||
function editRouteLegend() {
|
||||
|
|
@ -259,6 +263,11 @@ function editRoute(id) {
|
|||
editNotes(id, route.name);
|
||||
}
|
||||
|
||||
function editRouteGroupStyle() {
|
||||
const {group} = getRoute();
|
||||
editStyle("routes", group);
|
||||
}
|
||||
|
||||
function createRoute() {
|
||||
// TODO: white the code :)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue