backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-18 18:11:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fefactor: edit coastline and lake

Browse source
This commit is contained in:
Azgaar 2024-09-13 17:18:19 +02:00
parent 0f86a08012
commit 2744d32ca0
5 changed files with 164 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/features.js
View file

@ -82,7 +82,7 @@ window.Features = (function () {
TIME && console.time("markupPack"); TIME && console.time("markupPack");
const {cells, vertices} = pack; const {cells, vertices} = pack;
const {h: heights, c: neighbors, b: borderCells, i} = cells; const {c: neighbors, b: borderCells, i} = cells;
const packCellsNumber = i.length; const packCellsNumber = i.length;
if (!packCellsNumber) return; // no cells -> there is nothing to do if (!packCellsNumber) return; // no cells -> there is nothing to do
@ -191,7 +191,7 @@ window.Features = (function () {
const startingVertex = cells.v[firstCell].find(v => vertices.c[v].some(ofDifferentType)); const startingVertex = cells.v[firstCell].find(v => vertices.c[v].some(ofDifferentType));
if (startingVertex === undefined) throw new Error(`Markup: startingVertex for cell ${firstCell} is not found`); if (startingVertex === undefined) throw new Error(`Markup: startingVertex for cell ${firstCell} is not found`);
return connectVertices({vertices, startingVertex, ofSameType, closeRing: true}); return connectVertices({vertices, startingVertex, ofSameType, closeRing: false});
} }
} }
} }

23
modules/renderers/draw-features.js
View file

@ -2,24 +2,16 @@
function drawFeatures() { function drawFeatures() {
TIME && console.time("drawFeatures"); TIME && console.time("drawFeatures");
const {vertices, features} = pack;
const featurePaths = defs.select("#featurePaths"); const featurePaths = defs.select("#featurePaths");
const landMask = defs.select("#land"); const landMask = defs.select("#land");
const waterMask = defs.select("#water"); const waterMask = defs.select("#water");
const lineGen = d3.line().curve(d3.curveBasisClosed);
for (const feature of features) { for (const feature of pack.features) {
if (!feature || feature.type === "ocean") continue; if (!feature || feature.type === "ocean") continue;
const points = feature.vertices.map(vertex => vertices.p[vertex]);
const simplifiedPoints = simplify(points, 0.3);
const clippedPoints = clipPoly(simplifiedPoints, 1);
const path = round(lineGen(clippedPoints));
featurePaths featurePaths
.append("path") .append("path")
.attr("d", path) .attr("d", getFeaturePath(feature))
.attr("id", "feature_" + feature.i) .attr("id", "feature_" + feature.i)
.attr("data-f", feature.i); .attr("data-f", feature.i);
@ -56,3 +48,14 @@ function drawFeatures() {
TIME && console.timeEnd("drawFeatures"); TIME && console.timeEnd("drawFeatures");
} }
function getFeaturePath(feature) {
const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
const simplifiedPoints = simplify(points, 0.3);
const clippedPoints = clipPoly(simplifiedPoints, 1);
const lineGen = d3.line().curve(d3.curveBasisClosed);
const path = round(lineGen(clippedPoints));
return path;
}

147
modules/ui/coastline-editor.js
View file

@ -1,6 +1,6 @@
"use strict"; "use strict";
function editCoastline(node = d3.event.target) { function editCoastline() {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs(".stable");
if (layerIsOn("toggleCells")) toggleCells(); if (layerIsOn("toggleCells")) toggleCells();
@ -13,6 +13,7 @@ function editCoastline(node = d3.event.target) {
}); });
debug.append("g").attr("id", "vertices"); debug.append("g").attr("id", "vertices");
const node = d3.event.target;
elSelected = d3.select(node); elSelected = d3.select(node);
selectCoastlineGroup(node); selectCoastlineGroup(node);
drawCoastlineVertices(); drawCoastlineVertices();
@ -22,96 +23,98 @@ function editCoastline(node = d3.event.target) {
modules.editCoastline = true; modules.editCoastline = true;
// add listeners // add listeners
document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection); byId("coastlineGroupsShow").on("click", showGroupSection);
document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup); byId("coastlineGroup").on("change", changeCoastlineGroup);
document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput); byId("coastlineGroupAdd").on("click", toggleNewGroupInput);
document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup); byId("coastlineGroupName").on("change", createNewGroup);
document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup); byId("coastlineGroupRemove").on("click", removeCoastlineGroup);
document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection); byId("coastlineGroupsHide").on("click", hideGroupSection);
document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle); byId("coastlineEditStyle").on("click", editGroupStyle);
function drawCoastlineVertices() { function drawCoastlineVertices() {
const f = +elSelected.attr("data-f"); // feature id const featureId = +elSelected.attr("data-f");
const v = pack.features[f].vertices; // coastline outer vertices const {vertices, area} = pack.features[featureId];
const l = pack.cells.i.length; const cellsNumber = pack.cells.i.length;
const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l); const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat()).filter(cellId => cellId < cellsNumber);
debug debug
.select("#vertices") .select("#vertices")
.selectAll("polygon") .selectAll("polygon")
.data(c) .data(neibCells)
.enter() .enter()
.append("polygon") .append("polygon")
.attr("points", d => getPackPolygon(d)) .attr("points", getPackPolygon)
.attr("data-c", d => d); .attr("data-c", d => d);
debug debug
.select("#vertices") .select("#vertices")
.selectAll("circle") .selectAll("circle")
.data(v) .data(vertices)
.enter() .enter()
.append("circle") .append("circle")
.attr("cx", d => pack.vertices.p[d][0]) .attr("cx", d => pack.vertices.p[d][0])
.attr("cy", d => pack.vertices.p[d][1]) .attr("cy", d => pack.vertices.p[d][1])
.attr("r", 0.4) .attr("r", 0.4)
.attr("data-v", d => d) .attr("data-v", d => d)
.call(d3.drag().on("drag", dragVertex)) .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
.on("mousemove", () => .on("mousemove", () =>
tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights") tip("Drag to move the vertex. Please use for fine-tuning only. Edit heightmap to change actual cell heights!")
); );
const area = pack.features[f].area;
coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit(); coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
} }
function dragVertex() { function handleVertexDrag() {
const x = rn(d3.event.x, 2), const {vertices, features} = pack;
y = rn(d3.event.y, 2);
const x = rn(d3.event.x, 2);
const y = rn(d3.event.y, 2);
this.setAttribute("cx", x); this.setAttribute("cx", x);
this.setAttribute("cy", y); this.setAttribute("cy", y);
const v = +this.dataset.v;
pack.vertices.p[v] = [x, y];
debug
.select("#vertices")
.selectAll("polygon")
.attr("points", d => getPackPolygon(d));
redrawCoastline(); const vertexId = d3.select(this).datum();
vertices.p[vertexId] = [x, y];
const featureId = +elSelected.attr("data-f");
const feature = features[featureId];
// change coastline path
defs.select("#featurePaths > path#feature_" + featureId).attr("d", getFeaturePath(feature));
// update area
const points = feature.vertices.map(vertex => vertices.p[vertex]);
feature.area = Math.abs(d3.polygonArea(points));
coastlineArea.innerHTML = si(getArea(feature.area)) + " " + getAreaUnit();
// update cell
debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
} }
function redrawCoastline() { function handleVertexDragEnd() {
lineGen.curve(d3.curveBasisClosed); if (layerIsOn("toggleStates")) drawStates();
const f = +elSelected.attr("data-f"); if (layerIsOn("toggleProvinces")) drawProvinces();
const vertices = pack.features[f].vertices; if (layerIsOn("toggleBorders")) drawBorders();
const points = clipPoly( if (layerIsOn("toggleBiomes")) drawBiomes();
vertices.map(v => pack.vertices.p[v]), if (layerIsOn("toggleReligions")) drawReligions();
1 if (layerIsOn("toggleCultures")) drawCultures();
);
const d = round(lineGen(points));
elSelected.attr("d", d);
defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
const area = Math.abs(d3.polygonArea(points));
coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
} }
function showGroupSection() { function showGroupSection() {
document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "none")); document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("coastlineGroupsSelection").style.display = "inline-block"; byId("coastlineGroupsSelection").style.display = "inline-block";
} }
function hideGroupSection() { function hideGroupSection() {
document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "inline-block")); document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("coastlineGroupsSelection").style.display = "none"; byId("coastlineGroupsSelection").style.display = "none";
document.getElementById("coastlineGroupName").style.display = "none"; byId("coastlineGroupName").style.display = "none";
document.getElementById("coastlineGroupName").value = ""; byId("coastlineGroupName").value = "";
document.getElementById("coastlineGroup").style.display = "inline-block"; byId("coastlineGroup").style.display = "inline-block";
} }
function selectCoastlineGroup(node) { function selectCoastlineGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById("coastlineGroup"); const select = byId("coastlineGroup");
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
coastline.selectAll("g").each(function () { coastline.selectAll("g").each(function () {
@ -120,7 +123,7 @@ function editCoastline(node = d3.event.target) {
} }
function changeCoastlineGroup() { function changeCoastlineGroup() {
document.getElementById(this.value).appendChild(elSelected.node()); byId(this.value).appendChild(elSelected.node());
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
@ -135,54 +138,44 @@ function editCoastline(node = d3.event.target) {
} }
function createNewGroup() { function createNewGroup() {
if (!this.value) { if (!this.value) return tip("Please provide a valid group name");
tip("Please provide a valid group name");
return;
}
const group = this.value const group = this.value
.toLowerCase() .toLowerCase()
.replace(/ /g, "_") .replace(/ /g, "_")
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (byId(group)) return tip("Element with this id already exists. Please provide a unique name", false, "error");
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) return tip("Group name should start with a letter", false, "error");
tip("Group name should start with a letter", false, "error");
return;
}
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
const basic = ["sea_island", "lake_island"].includes(oldGroup.id); const basic = ["sea_island", "lake_island"].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("coastlineGroup").selectedOptions[0].remove(); byId("coastlineGroup").selectedOptions[0].remove();
document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true)); byId("coastlineGroup").options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("coastlineGroupName").value = ""; byId("coastlineGroupName").value = "";
return; return;
} }
// create a new group // create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("coastline").appendChild(newGroup); byId("coastline").appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true)); byId("coastlineGroup").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); byId(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("coastlineGroupName").value = ""; byId("coastlineGroupName").value = "";
} }
function removeCoastlineGroup() { function removeCoastlineGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
if (["sea_island", "lake_island"].includes(group)) { if (["sea_island", "lake_island"].includes(group))
tip("This is one of the default groups, it cannot be removed", false, "error"); return tip("This is one of the default groups, it cannot be removed", false, "error");
return;
}
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All coastline elements of the group (${count}) will be moved under alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All coastline elements of the group (${count}) will be moved under
@ -194,14 +187,14 @@ function editCoastline(node = d3.event.target) {
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
const sea = document.getElementById("sea_island"); const sea = byId("sea_island");
const groupEl = document.getElementById(group); const groupEl = byId(group);
while (groupEl.childNodes.length) { while (groupEl.childNodes.length) {
sea.appendChild(groupEl.childNodes[0]); sea.appendChild(groupEl.childNodes[0]);
} }
groupEl.remove(); groupEl.remove();
document.getElementById("coastlineGroup").selectedOptions[0].remove(); byId("coastlineGroup").selectedOptions[0].remove();
document.getElementById("coastlineGroup").value = "sea_island"; byId("coastlineGroup").value = "sea_island";
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");

20
modules/ui/editors.js
View file

@ -10,31 +10,27 @@ function restoreDefaultEvents() {
legend.call(d3.drag().on("start", dragLegendBox)); legend.call(d3.drag().on("start", dragLegendBox));
} }
// on viewbox click event - run function based on target // handle viewbox click
function clicked() { function clicked() {
const el = d3.event.target; const el = d3.event.target;
if (!el || !el.parentElement || !el.parentElement.parentElement) return; const parent = el?.parentElement;
const parent = el.parentElement; const grand = parent?.parentElement;
const grand = parent.parentElement; const great = grand?.parentElement;
const great = grand.parentElement; const ancestor = great?.parentElement;
const p = d3.mouse(this); if (!ancestor) return;
const i = findCell(p[0], p[1]);
if (grand.id === "emblems") editEmblem(); if (grand.id === "emblems") editEmblem();
else if (parent.id === "rivers") editRiver(el.id); else if (parent.id === "rivers") editRiver(el.id);
else if (grand.id === "routes") editRoute(el.id); else if (grand.id === "routes") editRoute(el.id);
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel(); else if (ancestor.id === "labels" && el.tagName === "tspan") editLabel();
else if (grand.id === "burgLabels") editBurg(); else if (grand.id === "burgLabels") editBurg();
else if (grand.id === "burgIcons") editBurg(); else if (grand.id === "burgIcons") editBurg();
else if (parent.id === "ice") editIce(); else if (parent.id === "ice") editIce();
else if (parent.id === "terrain") editReliefIcon(); else if (parent.id === "terrain") editReliefIcon();
else if (grand.id === "markers" || great.id === "markers") editMarker(); else if (grand.id === "markers" || great.id === "markers") editMarker();
else if (grand.id === "coastline") editCoastline(); else if (grand.id === "coastline") editCoastline();
else if (grand.id === "lakes") editLake();
else if (great.id === "armies") editRegiment(); else if (great.id === "armies") editRegiment();
else if (pack.cells.t[i] === 1) {
const node = byId("island_" + pack.cells.f[i]);
editCoastline(node);
} else if (grand.id === "lakes") editLake();
} }
// clear elSelected variable // clear elSelected variable

138
modules/ui/lakes-editor.js
View file

@ -23,17 +23,15 @@ function editLake() {
modules.editLake = true; modules.editLake = true;
// add listeners // add listeners
document.getElementById("lakeName").addEventListener("input", changeName); byId("lakeName").on("input", changeName);
document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture); byId("lakeNameCulture").on("click", generateNameCulture);
document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom); byId("lakeNameRandom").on("click", generateNameRandom);
byId("lakeGroup").on("change", changeLakeGroup);
document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup); byId("lakeGroupAdd").on("click", toggleNewGroupInput);
document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput); byId("lakeGroupName").on("change", createNewGroup);
document.getElementById("lakeGroupName").addEventListener("change", createNewGroup); byId("lakeGroupRemove").on("click", removeLakeGroup);
document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup); byId("lakeEditStyle").on("click", editGroupStyle);
byId("lakeLegend").on("click", editLakeLegend);
document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
function getLake() { function getLake() {
const lakeId = +elSelected.attr("data-f"); const lakeId = +elSelected.attr("data-f");
@ -41,85 +39,91 @@ function editLake() {
} }
function updateLakeValues() { function updateLakeValues() {
const cells = pack.cells; const {cells, vertices, rivers} = pack;
const l = getLake(); const l = getLake();
document.getElementById("lakeName").value = l.name; byId("lakeName").value = l.name;
document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit(); byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v])); const length = d3.polygonLength(l.vertices.map(v => vertices.p[v]));
document.getElementById("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value; byId("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value;
const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i)); const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
const heights = lakeCells.map(i => cells.h[i]); const heights = lakeCells.map(i => cells.h[i]);
document.getElementById("lakeElevation").value = getHeight(l.height); byId("lakeElevation").value = getHeight(l.height);
document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs"); byId("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs"); byId("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
document.getElementById("lakeFlux").value = l.flux; byId("lakeFlux").value = l.flux;
document.getElementById("lakeEvaporation").value = l.evaporation; byId("lakeEvaporation").value = l.evaporation;
const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name); const inlets = l.inlets && l.inlets.map(inlet => rivers.find(river => river.i === inlet)?.name);
const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no"; const outlet = l.outlet ? rivers.find(river => river.i === l.outlet)?.name : "no";
document.getElementById("lakeInlets").value = inlets ? inlets.length : "no"; byId("lakeInlets").value = inlets ? inlets.length : "no";
document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : ""; byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
document.getElementById("lakeOutlet").value = outlet; byId("lakeOutlet").value = outlet;
} }
function drawLakeVertices() { function drawLakeVertices() {
const v = getLake().vertices; // lake outer vertices const vertices = getLake().vertices;
const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())]; const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat());
debug debug
.select("#vertices") .select("#vertices")
.selectAll("polygon") .selectAll("polygon")
.data(c) .data(neibCells)
.enter() .enter()
.append("polygon") .append("polygon")
.attr("points", d => getPackPolygon(d)) .attr("points", getPackPolygon)
.attr("data-c", d => d); .attr("data-c", d => d);
debug debug
.select("#vertices") .select("#vertices")
.selectAll("circle") .selectAll("circle")
.data(v) .data(vertices)
.enter() .enter()
.append("circle") .append("circle")
.attr("cx", d => pack.vertices.p[d][0]) .attr("cx", d => pack.vertices.p[d][0])
.attr("cy", d => pack.vertices.p[d][1]) .attr("cy", d => pack.vertices.p[d][1])
.attr("r", 0.4) .attr("r", 0.4)
.attr("data-v", d => d) .attr("data-v", d => d)
.call(d3.drag().on("drag", dragVertex)) .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
.on("mousemove", () => .on("mousemove", () =>
tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights") tip("Drag to move the vertex. Please use for fine-tuning only! Edit heightmap to change actual cell heights")
); );
} }
function dragVertex() { function handleVertexDrag() {
const x = rn(d3.event.x, 2), const x = rn(d3.event.x, 2);
y = rn(d3.event.y, 2); const y = rn(d3.event.y, 2);
this.setAttribute("cx", x); this.setAttribute("cx", x);
this.setAttribute("cy", y); this.setAttribute("cy", y);
const v = +this.dataset.v;
pack.vertices.p[v] = [x, y]; const vertexId = d3.select(this).datum();
debug pack.vertices.p[vertexId] = [x, y];
.select("#vertices")
.selectAll("polygon") const feature = getLake();
.attr("points", d => getPackPolygon(d));
redrawLake(); // update lake path
defs.select("#featurePaths > path#feature_" + feature.i).attr("d", getFeaturePath(feature));
// update area
const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
feature.area = Math.abs(d3.polygonArea(points));
byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
// update cell
debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
} }
function redrawLake() { function handleVertexDragEnd() {
lineGen.curve(d3.curveBasisClosed); if (layerIsOn("toggleStates")) drawStates();
const feature = getLake(); if (layerIsOn("toggleProvinces")) drawProvinces();
const points = feature.vertices.map(v => pack.vertices.p[v]); if (layerIsOn("toggleBorders")) drawBorders();
const d = round(lineGen(points)); if (layerIsOn("toggleBiomes")) drawBiomes();
elSelected.attr("d", d); if (layerIsOn("toggleReligions")) drawReligions();
defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask if (layerIsOn("toggleCultures")) drawCultures();
feature.area = Math.abs(d3.polygonArea(points));
document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
} }
function changeName() { function changeName() {
@ -138,7 +142,7 @@ function editLake() {
function selectLakeGroup(node) { function selectLakeGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById("lakeGroup"); const select = byId("lakeGroup");
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
lakes.selectAll("g").each(function () { lakes.selectAll("g").each(function () {
@ -147,7 +151,7 @@ function editLake() {
} }
function changeLakeGroup() { function changeLakeGroup() {
document.getElementById(this.value).appendChild(elSelected.node()); byId(this.value).appendChild(elSelected.node());
getLake().group = this.value; getLake().group = this.value;
} }
@ -172,7 +176,7 @@ function editLake() {
.replace(/ /g, "_") .replace(/ /g, "_")
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip("Element with this id already exists. Please provide a unique name", false, "error");
return; return;
} }
@ -186,23 +190,23 @@ function editLake() {
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id); const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("lakeGroup").selectedOptions[0].remove(); byId("lakeGroup").selectedOptions[0].remove();
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true)); byId("lakeGroup").options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("lakeGroupName").value = ""; byId("lakeGroupName").value = "";
return; return;
} }
// create a new group // create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("lakes").appendChild(newGroup); byId("lakes").appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true)); byId("lakeGroup").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); byId(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("lakeGroupName").value = ""; byId("lakeGroupName").value = "";
} }
function removeLakeGroup() { function removeLakeGroup() {
@ -221,14 +225,14 @@ function editLake() {
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
const freshwater = document.getElementById("freshwater"); const freshwater = byId("freshwater");
const groupEl = document.getElementById(group); const groupEl = byId(group);
while (groupEl.childNodes.length) { while (groupEl.childNodes.length) {
freshwater.appendChild(groupEl.childNodes[0]); freshwater.appendChild(groupEl.childNodes[0]);
} }
groupEl.remove(); groupEl.remove();
document.getElementById("lakeGroup").selectedOptions[0].remove(); byId("lakeGroup").selectedOptions[0].remove();
document.getElementById("lakeGroup").value = "freshwater"; byId("lakeGroup").value = "freshwater";
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");