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

merge module uis

Browse source
This commit is contained in:
Peter 2022-11-27 17:05:47 -05:00
parent 112e78f40a
commit a6a8acbd1e
9 changed files with 331 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

4
modules/ui/general.js
View file

@ -335,10 +335,6 @@ function getPrecipitation(prec) {
return prec * 100 + " mm"; return prec * 100 + " mm";
} }
function getPrecipitation(prec) {
return prec * 100 + " mm";
}
// get user-friendly (real-world) precipitation value from map data // get user-friendly (real-world) precipitation value from map data
function getFriendlyPrecipitation(i) { function getFriendlyPrecipitation(i) {
const prec = grid.cells.prec[pack.cells.g[i]]; const prec = grid.cells.prec[pack.cells.g[i]];

22
modules/ui/rivers-editor.js
View file

@ -1,4 +1,4 @@
'use strict'; "use strict";
function editRiver(id) { function editRiver(id) {
if (customization) return; if (customization) return;
if (elSelected && id === elSelected.attr("id")) return; if (elSelected && id === elSelected.attr("id")) return;
@ -47,18 +47,18 @@ function editRiver(id) {
document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
function getRiver() { function getRiver() {
const riverId = +elSelected.attr('id').slice(5); const riverId = +elSelected.attr("id").slice(5);
const river = pack.rivers.find((r) => r.i === riverId); const river = pack.rivers.find(r => r.i === riverId);
return river; return river;
} }
function updateRiverData() { function updateRiverData() {
const r = getRiver(); const r = getRiver();
document.getElementById('riverName').value = r.name; document.getElementById("riverName").value = r.name;
document.getElementById('riverType').value = r.type; document.getElementById("riverType").value = r.type;
const parentSelect = document.getElementById('riverMainstem'); const parentSelect = document.getElementById("riverMainstem");
parentSelect.options.length = 0; parentSelect.options.length = 0;
const parent = r.parent || r.i; const parent = r.parent || r.i;
const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1)); const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1));
@ -66,7 +66,7 @@ function editRiver(id) {
const opt = new Option(river.name, river.i, false, river.i === parent); const opt = new Option(river.name, river.i, false, river.i === parent);
parentSelect.options.add(opt); 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";
document.getElementById("riverSourceWidth").value = r.sourceWidth; document.getElementById("riverSourceWidth").value = r.sourceWidth;
@ -208,8 +208,8 @@ function editRiver(id) {
function changeParent() { function changeParent() {
const r = getRiver(); const r = getRiver();
r.parent = +this.value; r.parent = +this.value;
r.basin = pack.rivers.find((river) => river.i === r.parent).basin; r.basin = pack.rivers.find(river => river.i === r.parent).basin;
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;
} }
function changeSourceWidth() { function changeSourceWidth() {
@ -232,9 +232,9 @@ function editRiver(id) {
} }
function editRiverLegend() { function editRiverLegend() {
const id = elSelected.attr('id'); const id = elSelected.attr("id");
const river = getRiver(); const river = getRiver();
editNotes(id, river.name + ' ' + river.type); editNotes(id, river.name + " " + river.type);
} }
function removeRiver() { function removeRiver() {

46
modules/ui/rivers-overview.js
View file

@ -1,12 +1,12 @@
'use strict'; "use strict";
function overviewRivers() { function overviewRivers() {
if (customization) return; if (customization) return;
closeDialogs('#riversOverview, .stable'); closeDialogs("#riversOverview, .stable");
if (!layerIsOn('toggleRivers')) toggleRivers(); if (!layerIsOn("toggleRivers")) toggleRivers();
const body = document.getElementById('riversBody'); const body = document.getElementById("riversBody");
riversOverviewAddLines(); riversOverviewAddLines();
$('#riversOverview').dialog(); $("#riversOverview").dialog();
if (modules.overviewRivers) return; if (modules.overviewRivers) return;
modules.overviewRivers = true; modules.overviewRivers = true;
@ -28,15 +28,15 @@ function overviewRivers() {
// add line for each river // add line for each river
function riversOverviewAddLines() { function riversOverviewAddLines() {
body.innerHTML = ''; body.innerHTML = "";
let lines = ''; let lines = "";
const unit = distanceUnitInput.value; const unit = distanceUnitInput.value;
for (const r of pack.rivers) { for (const r of pack.rivers) {
const discharge = r.discharge + ' m³/s'; const discharge = r.discharge + " m³/s";
const length = rn(r.length * distanceScaleInput.value) + ' ' + unit; const length = rn(r.length * distanceScaleInput.value) + " " + unit;
const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + unit; const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit;
const basin = pack.rivers.find((river) => river.i === r.basin)?.name; const basin = pack.rivers.find(river => river.i === r.basin)?.name;
lines += /* html */ `<div lines += /* html */ `<div
class="states" class="states"
@ -59,7 +59,7 @@ function overviewRivers() {
<span data-tip="Remove river" class="icon-trash-empty"></span> <span data-tip="Remove river" class="icon-trash-empty"></span>
</div>`; </div>`;
} }
body.insertAdjacentHTML('beforeend', lines); body.insertAdjacentHTML("beforeend", lines);
// update footer // update footer
riversFooterNumber.innerHTML = pack.rivers.length; riversFooterNumber.innerHTML = pack.rivers.length;
@ -71,17 +71,17 @@ function overviewRivers() {
riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit; riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit;
// add listeners // add listeners
body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => riverHighlightOn(ev))); 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.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-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-pencil").forEach(el => el.addEventListener("click", openRiverEditor));
body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('click', triggerRiverRemove)); body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove));
applySorting(riversHeader); applySorting(riversHeader);
} }
function riverHighlightOn(event) { function riverHighlightOn(event) {
if (!layerIsOn('toggleRivers')) toggleRivers(); if (!layerIsOn("toggleRivers")) toggleRivers();
const r = +event.target.dataset.id; const r = +event.target.dataset.id;
rivers rivers
.select("#river" + r) .select("#river" + r)
@ -104,9 +104,9 @@ function overviewRivers() {
} }
function toggleBasinsHightlight() { function toggleBasinsHightlight() {
if (rivers.attr('data-basin') === 'hightlighted') { if (rivers.attr("data-basin") === "hightlighted") {
rivers.selectAll('*').attr('fill', null); rivers.selectAll("*").attr("fill", null);
rivers.attr('data-basin', null); rivers.attr("data-basin", null);
} else { } else {
rivers.attr("data-basin", "hightlighted"); rivers.attr("data-basin", "hightlighted");
const basins = [...new Set(pack.rivers.map(r => r.basin))]; const basins = [...new Set(pack.rivers.map(r => r.basin))];
@ -124,7 +124,7 @@ function overviewRivers() {
} }
function downloadRiversData() { 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 d = el.dataset;
@ -134,7 +134,7 @@ function overviewRivers() {
data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n"; 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); downloadFile(data, name);
} }

143
modules/ui/routes-editor.js
View file

@ -1,9 +1,9 @@
'use strict'; "use strict";
function editRoute(onClick) { function editRoute(onClick) {
if (customization) return; if (customization) return;
if (!onClick && elSelected && d3.event.target.id === elSelected.attr('id')) return; if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return;
closeDialogs('.stable'); closeDialogs(".stable");
if (!layerIsOn('toggleRoutes')) toggleRoutes(); if (!layerIsOn("toggleRoutes")) toggleRoutes();
$("#routeEditor").dialog({ $("#routeEditor").dialog({
title: "Edit Route", title: "Edit Route",
@ -12,32 +12,32 @@ function editRoute(onClick) {
close: closeRoutesEditor close: closeRoutesEditor
}); });
debug.append('g').attr('id', 'controlPoints'); debug.append("g").attr("id", "controlPoints");
const node = onClick ? elSelected.node() : d3.event.target; const node = onClick ? elSelected.node() : d3.event.target;
elSelected = d3.select(node).on('click', addInterimControlPoint); elSelected = d3.select(node).on("click", addInterimControlPoint);
drawControlPoints(node); drawControlPoints(node);
selectRouteGroup(node); selectRouteGroup(node);
viewbox.on('touchmove mousemove', showEditorTips); viewbox.on("touchmove mousemove", showEditorTips);
if (onClick) toggleRouteCreationMode(); if (onClick) toggleRouteCreationMode();
if (modules.editRoute) return; if (modules.editRoute) return;
modules.editRoute = true; modules.editRoute = true;
// add listeners // add listeners
document.getElementById('routeGroupsShow').addEventListener('click', showGroupSection); document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection);
document.getElementById('routeGroup').addEventListener('change', changeRouteGroup); document.getElementById("routeGroup").addEventListener("change", changeRouteGroup);
document.getElementById('routeGroupAdd').addEventListener('click', toggleNewGroupInput); document.getElementById("routeGroupAdd").addEventListener("click", toggleNewGroupInput);
document.getElementById('routeGroupName').addEventListener('change', createNewGroup); document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
document.getElementById('routeGroupRemove').addEventListener('click', removeRouteGroup); document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
document.getElementById('routeGroupsHide').addEventListener('click', hideGroupSection); document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
document.getElementById('routeElevationProfile').addEventListener('click', showElevationProfile); document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile);
document.getElementById('routeEditStyle').addEventListener('click', editGroupStyle); document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
document.getElementById('routeSplit').addEventListener('click', toggleRouteSplitMode); document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
document.getElementById('routeLegend').addEventListener('click', editRouteLegend); document.getElementById("routeLegend").addEventListener("click", editRouteLegend);
document.getElementById('routeNew').addEventListener('click', toggleRouteCreationMode); document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode);
document.getElementById('routeRemove').addEventListener('click', removeRoute); document.getElementById("routeRemove").addEventListener("click", removeRoute);
function showEditorTips() { function showEditorTips() {
showMainTip(); showMainTip();
@ -53,7 +53,7 @@ function editRoute(onClick) {
const point = node.getPointAtLength(i); const point = node.getPointAtLength(i);
addControlPoint([point.x, point.y]); addControlPoint([point.x, point.y]);
} }
routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value; routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
} }
function addControlPoint(point, before = null) { function addControlPoint(point, before = null) {
@ -69,8 +69,8 @@ function editRoute(onClick) {
function addInterimControlPoint() { function addInterimControlPoint() {
const point = d3.mouse(this); const point = d3.mouse(this);
const controls = document.getElementById('controlPoints').querySelectorAll('circle'); const controls = document.getElementById("controlPoints").querySelectorAll("circle");
const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]); const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
const index = getSegmentId(points, point, 2); const index = getSegmentId(points, point, 2);
addControlPoint(point, ":nth-child(" + (index + 1) + ")"); addControlPoint(point, ":nth-child(" + (index + 1) + ")");
@ -78,8 +78,8 @@ function editRoute(onClick) {
} }
function dragControlPoint() { function dragControlPoint() {
this.setAttribute('cx', d3.event.x); this.setAttribute("cx", d3.event.x);
this.setAttribute('cy', d3.event.y); this.setAttribute("cy", d3.event.y);
redrawRoute(); redrawRoute();
} }
@ -93,9 +93,9 @@ function editRoute(onClick) {
points.push([this.getAttribute("cx"), this.getAttribute("cy")]); points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
}); });
elSelected.attr('d', round(lineGen(points))); elSelected.attr("d", round(lineGen(points)));
const l = elSelected.node().getTotalLength(); const l = elSelected.node().getTotalLength();
routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value; routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
if (modules.elevation) showEPForRoute(elSelected.node()); if (modules.elevation) showEPForRoute(elSelected.node());
} }
@ -120,7 +120,7 @@ function editRoute(onClick) {
function selectRouteGroup(node) { function selectRouteGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById('routeGroup'); const select = document.getElementById("routeGroup");
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
routes.selectAll("g").each(function () { routes.selectAll("g").each(function () {
@ -133,10 +133,10 @@ function editRoute(onClick) {
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (routeGroupName.style.display === 'none') { if (routeGroupName.style.display === "none") {
routeGroupName.style.display = 'inline-block'; routeGroupName.style.display = "inline-block";
routeGroupName.focus(); routeGroupName.focus();
routeGroup.style.display = 'none'; routeGroup.style.display = "none";
} else { } else {
routeGroupName.style.display = "none"; routeGroupName.style.display = "none";
routeGroup.style.display = "inline-block"; routeGroup.style.display = "inline-block";
@ -154,17 +154,17 @@ function editRoute(onClick) {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(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;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip('Group name should start with a letter', false, 'error'); tip("Group name should start with a letter", false, "error");
return; 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 = ['roads', 'trails', 'searoutes'].includes(oldGroup.id); const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("routeGroup").selectedOptions[0].remove(); document.getElementById("routeGroup").selectedOptions[0].remove();
document.getElementById("routeGroup").options.add(new Option(group, group, false, true)); document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
@ -175,18 +175,18 @@ function editRoute(onClick) {
} }
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById('routes').appendChild(newGroup); document.getElementById("routes").appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById('routeGroup').options.add(new Option(group, group, false, true)); document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); document.getElementById(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById('routeGroupName').value = ''; document.getElementById("routeGroupName").value = "";
} }
function removeRouteGroup() { function removeRouteGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
const basic = ['roads', 'trails', 'searoutes'].includes(group); const basic = ["roads", "trails", "searoutes"].includes(group);
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${ alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
basic ? "all elements in the group" : "the entire route group" basic ? "all elements in the group" : "the entire route group"
@ -216,12 +216,12 @@ function editRoute(onClick) {
function editGroupStyle() { function editGroupStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle('routes', g); editStyle("routes", g);
} }
function toggleRouteSplitMode() { function toggleRouteSplitMode() {
document.getElementById('routeNew').classList.remove('pressed'); document.getElementById("routeNew").classList.remove("pressed");
this.classList.toggle('pressed'); this.classList.toggle("pressed");
} }
function clickControlPoint() { function clickControlPoint() {
@ -252,54 +252,34 @@ function editRoute(onClick) {
this.remove(); this.remove();
}); });
function splitRoute(clicked) { elSelected.attr("d", round(lineGen(points1)));
lineGen.curve(d3.curveCatmullRom.alpha(0.1)); const id = getNextId("route");
const group = d3.select(elSelected.node().parentNode); group.append("path").attr("id", id).attr("d", lineGen(points2));
routeSplit.classList.remove('pressed'); debug.select("#controlPoints").selectAll("circle").remove();
const points1 = [],
points2 = [];
let points = points1;
debug
.select('#controlPoints')
.selectAll('circle')
.each(function () {
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
if (this === clicked) {
points = points2;
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
}
this.remove();
});
elSelected.attr('d', round(lineGen(points1)));
const id = getNextId('route');
group.append('path').attr('id', id).attr('d', lineGen(points2));
debug.select('#controlPoints').selectAll('circle').remove();
drawControlPoints(elSelected.node()); drawControlPoints(elSelected.node());
} }
function toggleRouteCreationMode() { function toggleRouteCreationMode() {
document.getElementById('routeSplit').classList.remove('pressed'); document.getElementById("routeSplit").classList.remove("pressed");
document.getElementById('routeNew').classList.toggle('pressed'); document.getElementById("routeNew").classList.toggle("pressed");
if (document.getElementById('routeNew').classList.contains('pressed')) { if (document.getElementById("routeNew").classList.contains("pressed")) {
tip('Click on map to add control points', true); tip("Click on map to add control points", true);
viewbox.on('click', addPointOnClick).style('cursor', 'crosshair'); viewbox.on("click", addPointOnClick).style("cursor", "crosshair");
elSelected.on('click', null); elSelected.on("click", null);
} else { } else {
clearMainTip(); clearMainTip();
viewbox.on('click', clicked).style('cursor', 'default'); viewbox.on("click", clicked).style("cursor", "default");
elSelected.on('click', addInterimControlPoint).attr('data-new', null); elSelected.on("click", addInterimControlPoint).attr("data-new", null);
} }
} }
function addPointOnClick() { function addPointOnClick() {
// create new route // create new route
if (!elSelected.attr('data-new')) { if (!elSelected.attr("data-new")) {
debug.select('#controlPoints').selectAll('circle').remove(); debug.select("#controlPoints").selectAll("circle").remove();
const parent = elSelected.node().parentNode; const parent = elSelected.node().parentNode;
const id = getNextId('route'); const id = getNextId("route");
elSelected = d3.select(parent).append('path').attr('id', id).attr('data-new', 1); elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1);
} }
addControlPoint(d3.mouse(this)); addControlPoint(d3.mouse(this));
@ -307,7 +287,7 @@ function editRoute(onClick) {
} }
function editRouteLegend() { function editRouteLegend() {
const id = elSelected.attr('id'); const id = elSelected.attr("id");
editNotes(id, id); editNotes(id, id);
} }
@ -330,12 +310,11 @@ function editRoute(onClick) {
} }
function closeRoutesEditor() { function closeRoutesEditor() {
elSelected.attr('data-new', null).on('click', null); elSelected.attr("data-new", null).on("click", null);
clearMainTip(); clearMainTip();
routeSplit.classList.remove('pressed'); routeSplit.classList.remove("pressed");
routeNew.classList.remove('pressed'); routeNew.classList.remove("pressed");
debug.select('#controlPoints').remove(); debug.select("#controlPoints").remove();
unselect(); unselect();
} }
} }
}

315
modules/ui/style.js
View file

@ -1,16 +1,16 @@
// UI module to control the style // UI module to control the style
'use strict'; "use strict";
// add available filters to lists // add available filters to lists
{ {
const filters = Array.from(document.getElementById("filters").querySelectorAll("filter")); const filters = Array.from(document.getElementById("filters").querySelectorAll("filter"));
const emptyOption = '<option value="" selected>None</option>'; const emptyOption = '<option value="" selected>None</option>';
const options = filters.map((filter) => { const options = filters.map(filter => {
const id = filter.getAttribute('id'); const id = filter.getAttribute("id");
const name = filter.getAttribute('name'); const name = filter.getAttribute("name");
return `<option value="url(#${id})">${name}</option>`; return `<option value="url(#${id})">${name}</option>`;
}); });
const allOptions = emptyOption + options.join(''); const allOptions = emptyOption + options.join("");
document.getElementById("styleFilterInput").innerHTML = allOptions; document.getElementById("styleFilterInput").innerHTML = allOptions;
document.getElementById("styleStatesBodyFilter").innerHTML = allOptions; document.getElementById("styleStatesBodyFilter").innerHTML = allOptions;
@ -29,49 +29,49 @@ function editStyle(element, group) {
if (group) styleGroupSelect.options.add(new Option(group, group, true, true)); if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
selectStyleElement(); selectStyleElement();
styleElementSelect.classList.add('glow'); styleElementSelect.classList.add("glow");
if (group) styleGroupSelect.classList.add('glow'); if (group) styleGroupSelect.classList.add("glow");
setTimeout(() => { setTimeout(() => {
styleElementSelect.classList.remove('glow'); styleElementSelect.classList.remove("glow");
if (group) styleGroupSelect.classList.remove('glow'); if (group) styleGroupSelect.classList.remove("glow");
}, 1500); }, 1500);
} }
// Toggle style sections on element select // Toggle style sections on element select
styleElementSelect.addEventListener('change', selectStyleElement); styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() { function selectStyleElement() {
const sel = styleElementSelect.value; const sel = styleElementSelect.value;
let el = d3.select("#" + sel); let el = d3.select("#" + sel);
styleElements.querySelectorAll('tbody').forEach((e) => (e.style.display = 'none')); // hide all sections styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections
// show alert line if layer is not visible // show alert line if layer is not visible
const isLayerOff = sel !== 'ocean' && (el.style('display') === 'none' || !el.selectAll('*').size()); const isLayerOff = sel !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size());
styleIsOff.style.display = isLayerOff ? 'block' : 'none'; styleIsOff.style.display = isLayerOff ? "block" : "none";
// active group element // active group element
const group = styleGroupSelect.value; const group = styleGroupSelect.value;
if (['routes', 'labels', 'coastline', 'lakes', 'anchors', 'burgIcons', 'borders'].includes(sel)) { if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
const gEl = group && el.select('#' + group); const gEl = group && el.select("#" + group);
el = group && gEl.size() ? gEl : el.select('g'); el = group && gEl.size() ? gEl : el.select("g");
} }
// opacity // opacity
if (!['landmass', 'ocean', 'regions', 'legend'].includes(sel)) { if (!["landmass", "ocean", "regions", "legend"].includes(sel)) {
styleOpacity.style.display = 'block'; styleOpacity.style.display = "block";
styleOpacityInput.value = styleOpacityOutput.value = el.attr('opacity') || 1; styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
} }
// filter // filter
if (!['landmass', 'legend', 'regions'].includes(sel)) { if (!["landmass", "legend", "regions"].includes(sel)) {
styleFilter.style.display = 'block'; styleFilter.style.display = "block";
styleFilterInput.value = el.attr('filter') || ''; styleFilterInput.value = el.attr("filter") || "";
} }
// fill // fill
if (['rivers', 'lakes', 'landmass', 'prec', 'ice', 'fogging'].includes(sel)) { if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) {
styleFill.style.display = 'block'; styleFill.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr('fill'); styleFillInput.value = styleFillOutput.value = el.attr("fill");
} }
// stroke color and width // stroke color and width
@ -87,74 +87,74 @@ function selectStyleElement() {
} }
// stroke dash // stroke dash
if (['routes', 'borders', 'temperature', 'legend', 'population', 'coordinates', 'zones', 'gridOverlay'].includes(sel)) { if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) {
styleStrokeDash.style.display = 'block'; styleStrokeDash.style.display = "block";
styleStrokeDasharrayInput.value = el.attr('stroke-dasharray') || ''; styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
styleStrokeLinecapInput.value = el.attr('stroke-linecap') || 'inherit'; styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
} }
// clipping // clipping
if (['cells', 'gridOverlay', 'coordinates', 'compass', 'terrain', 'temperature', 'routes', 'texture', 'biomes', 'zones'].includes(sel)) { if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) {
styleClipping.style.display = 'block'; styleClipping.style.display = "block";
styleClippingInput.value = el.attr('mask') || ''; styleClippingInput.value = el.attr("mask") || "";
} }
// show specific sections // show specific sections
if (sel === 'texture') styleTexture.style.display = 'block'; if (sel === "texture") styleTexture.style.display = "block";
if (sel === 'terrs') { if (sel === "terrs") {
styleHeightmap.style.display = 'block'; styleHeightmap.style.display = "block";
styleHeightmapScheme.value = terrs.attr('scheme'); styleHeightmapScheme.value = terrs.attr("scheme");
styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr('terracing'); styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing");
styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr('skip'); styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr("skip");
styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr('relax'); styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr("relax");
styleHeightmapCurve.value = terrs.attr('curve'); styleHeightmapCurve.value = terrs.attr("curve");
} }
if (sel === 'markers') { if (sel === "markers") {
styleMarkers.style.display = 'block'; styleMarkers.style.display = "block";
styleRescaleMarkers.checked = +markers.attr('rescale'); styleRescaleMarkers.checked = +markers.attr("rescale");
} }
if (sel === 'gridOverlay') { if (sel === "gridOverlay") {
styleGrid.style.display = 'block'; styleGrid.style.display = "block";
styleGridType.value = el.attr('type'); styleGridType.value = el.attr("type");
styleGridScale.value = el.attr('scale') || 1; styleGridScale.value = el.attr("scale") || 1;
styleGridShiftX.value = el.attr('dx') || 0; styleGridShiftX.value = el.attr("dx") || 0;
styleGridShiftY.value = el.attr('dy') || 0; styleGridShiftY.value = el.attr("dy") || 0;
calculateFriendlyGridSize(); calculateFriendlyGridSize();
} }
if (sel === 'compass') { if (sel === "compass") {
styleCompass.style.display = 'block'; styleCompass.style.display = "block";
const tr = parseTransform(compass.select('use').attr('transform')); const tr = parseTransform(compass.select("use").attr("transform"));
styleCompassShiftX.value = tr[0]; styleCompassShiftX.value = tr[0];
styleCompassShiftY.value = tr[1]; styleCompassShiftY.value = tr[1];
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2]; styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
} }
if (sel === 'terrain') { if (sel === "terrain") {
styleRelief.style.display = 'block'; styleRelief.style.display = "block";
styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr('size'); styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr('density'); styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
styleReliefSet.value = terrain.attr('set'); styleReliefSet.value = terrain.attr("set");
} }
if (sel === 'population') { if (sel === "population") {
stylePopulation.style.display = 'block'; stylePopulation.style.display = "block";
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select('#rural').attr('stroke'); stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select('#urban').attr('stroke'); stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
styleStrokeWidth.style.display = 'block'; styleStrokeWidth.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || ''; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
} }
if (sel === 'regions') { if (sel === "regions") {
styleStates.style.display = 'block'; styleStates.style.display = "block";
styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr('opacity') || 1; styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
styleStatesBodyFilter.value = statesBody.attr('filter') || ''; styleStatesBodyFilter.value = statesBody.attr("filter") || "";
styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr('data-width') || 10; styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("data-width") || 10;
styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr('opacity') || 1; styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity") || 1;
const blur = parseFloat(statesHalo.attr('filter')?.match(/blur\(([^)]+)\)/)?.[1]) || 0; const blur = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur; styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
} }
@ -216,10 +216,10 @@ function selectStyleElement() {
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = "block";
styleSize.style.display = "block"; styleSize.style.display = "block";
styleLegend.style.display = 'block'; styleLegend.style.display = "block";
styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr('data-columns'); styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns");
styleLegendBackOutput.value = styleLegendBack.value = el.select('#legendBox').attr('fill'); styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill");
styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select('#legendBox').attr('fill-opacity'); styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity");
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
@ -246,28 +246,21 @@ function selectStyleElement() {
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px"; styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
} }
if (sel === 'coordinates') { if (sel === "coordinates") {
styleSize.style.display = 'block'; styleSize.style.display = "block";
styleFontSize.value = el.attr('data-size'); styleFontSize.value = el.attr("data-size");
} }
if (sel === 'armies') { if (sel === "armies") {
styleArmies.style.display = 'block'; styleArmies.style.display = "block";
styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr('fill-opacity'); styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr('box-size'); styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
} }
if (sel === 'emblems') { if (sel === "emblems") {
styleEmblems.style.display = 'block'; styleEmblems.style.display = "block";
styleStrokeWidth.style.display = 'block'; styleStrokeWidth.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 1; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
}
if (sel === 'goods') {
styleStrokeWidth.style.display = 'block';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || '';
styleResources.style.display = 'block';
styleResourcesCircle.checked = +el.attr('data-circle');
} }
if (sel === 'goods') { if (sel === 'goods') {
@ -279,18 +272,18 @@ function selectStyleElement() {
// update group options // update group options
styleGroupSelect.options.length = 0; // remove all options styleGroupSelect.options.length = 0; // remove all options
if (['routes', 'labels', 'coastline', 'lakes', 'anchors', 'burgIcons', 'borders'].includes(sel)) { if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
const groups = document.getElementById(sel).querySelectorAll('g'); const groups = document.getElementById(sel).querySelectorAll("g");
groups.forEach((el) => { groups.forEach(el => {
if (el.id === 'burgLabels') return; if (el.id === "burgLabels") return;
const option = new Option(`${el.id} (${el.childElementCount})`, el.id, false, false); const option = new Option(`${el.id} (${el.childElementCount})`, el.id, false, false);
styleGroupSelect.options.add(option); styleGroupSelect.options.add(option);
}); });
styleGroupSelect.value = el.attr('id'); styleGroupSelect.value = el.attr("id");
styleGroup.style.display = 'block'; styleGroup.style.display = "block";
} else { } else {
styleGroupSelect.options.add(new Option(sel, sel, false, true)); styleGroupSelect.options.add(new Option(sel, sel, false, true));
styleGroup.style.display = 'none'; styleGroup.style.display = "none";
} }
if (sel === "coastline" && styleGroupSelect.value === "sea_island") { if (sel === "coastline" && styleGroupSelect.value === "sea_island") {
@ -301,7 +294,7 @@ function selectStyleElement() {
} }
// Handle style inputs change // Handle style inputs change
styleGroupSelect.addEventListener('change', selectStyleElement); styleGroupSelect.addEventListener("change", selectStyleElement);
function getEl() { function getEl() {
const el = styleElementSelect.value; const el = styleElementSelect.value;
@ -342,9 +335,9 @@ styleOpacityInput.addEventListener("input", function () {
getEl().attr("opacity", this.value); getEl().attr("opacity", this.value);
}); });
styleFilterInput.addEventListener('change', function () { styleFilterInput.addEventListener("change", function () {
if (styleGroupSelect.value === 'ocean') return oceanLayers.attr('filter', this.value); if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
getEl().attr('filter', this.value); getEl().attr("filter", this.value);
}); });
styleTextureInput.addEventListener("change", function () { styleTextureInput.addEventListener("change", function () {
@ -398,13 +391,13 @@ styleGridShiftY.addEventListener("input", function () {
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
}); });
styleShiftX.addEventListener('input', shiftElement); styleShiftX.addEventListener("input", shiftElement);
styleShiftY.addEventListener('input', shiftElement); styleShiftY.addEventListener("input", shiftElement);
function shiftElement() { function shiftElement() {
const x = styleShiftX.value || 0; const x = styleShiftX.value || 0;
const y = styleShiftY.value || 0; const y = styleShiftY.value || 0;
getEl().attr('transform', `translate(${x},${y})`); getEl().attr("transform", `translate(${x},${y})`);
} }
styleRescaleMarkers.addEventListener("change", function () { styleRescaleMarkers.addEventListener("change", function () {
@ -466,21 +459,21 @@ styleHeightmapCurve.addEventListener("change", function () {
styleReliefSet.addEventListener("change", function () { styleReliefSet.addEventListener("change", function () {
terrain.attr("set", this.value); terrain.attr("set", this.value);
ReliefIcons(); ReliefIcons();
if (!layerIsOn('toggleRelief')) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleReliefSizeInput.addEventListener('change', function () { styleReliefSizeInput.addEventListener("change", function () {
terrain.attr('size', this.value); terrain.attr("size", this.value);
styleReliefSizeOutput.value = this.value; styleReliefSizeOutput.value = this.value;
ReliefIcons(); ReliefIcons();
if (!layerIsOn('toggleRelief')) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleReliefDensityInput.addEventListener('change', function () { styleReliefDensityInput.addEventListener("change", function () {
terrain.attr('density', this.value); terrain.attr("density", this.value);
styleReliefDensityOutput.value = this.value; styleReliefDensityOutput.value = this.value;
ReliefIcons(); ReliefIcons();
if (!layerIsOn('toggleRelief')) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
}); });
styleTemperatureFillOpacityInput.addEventListener("input", function () { styleTemperatureFillOpacityInput.addEventListener("input", function () {
@ -513,31 +506,31 @@ styleCompassSizeInput.addEventListener("input", function () {
shiftCompass(); shiftCompass();
}); });
styleCompassShiftX.addEventListener('input', shiftCompass); styleCompassShiftX.addEventListener("input", shiftCompass);
styleCompassShiftY.addEventListener('input', shiftCompass); styleCompassShiftY.addEventListener("input", shiftCompass);
function shiftCompass() { function shiftCompass() {
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`; const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
compass.select('use').attr('transform', tr); compass.select("use").attr("transform", tr);
} }
styleLegendColItems.addEventListener("input", function () { styleLegendColItems.addEventListener("input", function () {
styleLegendColItemsOutput.value = this.value; styleLegendColItemsOutput.value = this.value;
legend.select('#legendBox').attr('data-columns', this.value); legend.select("#legendBox").attr("data-columns", this.value);
redrawLegend(); redrawLegend();
}); });
styleLegendBack.addEventListener("input", function () { styleLegendBack.addEventListener("input", function () {
styleLegendBackOutput.value = this.value; styleLegendBackOutput.value = this.value;
legend.select('#legendBox').attr('fill', this.value); legend.select("#legendBox").attr("fill", this.value);
}); });
styleLegendOpacity.addEventListener("input", function () { styleLegendOpacity.addEventListener("input", function () {
styleLegendOpacityOutput.value = this.value; styleLegendOpacityOutput.value = this.value;
legend.select('#legendBox').attr('fill-opacity', this.value); legend.select("#legendBox").attr("fill-opacity", this.value);
}); });
styleSelectFont.addEventListener('change', changeFont); styleSelectFont.addEventListener("change", changeFont);
function changeFont() { function changeFont() {
const family = styleSelectFont.value; const family = styleSelectFont.value;
getEl().attr("font-family", family); getEl().attr("font-family", family);
@ -604,10 +597,10 @@ styleFontMinus.addEventListener("click", function () {
function changeFontSize(el, size) { function changeFontSize(el, size) {
styleFontSize.value = size; styleFontSize.value = size;
const getSizeOnScale = (element) => { const getSizeOnScale = element => {
// some labels are rescaled on zoom // some labels are rescaled on zoom
if (element === 'labels') return Math.max(rn((size + size / scale) / 2, 2), 1); if (element === "labels") return Math.max(rn((size + size / scale) / 2, 2), 1);
if (element === 'coordinates') return rn(size / scale ** 0.8, 2); if (element === "coordinates") return rn(size / scale ** 0.8, 2);
// other has the same size // other has the same size
return size; return size;
@ -616,7 +609,7 @@ function changeFontSize(el, size) {
const scaleSize = getSizeOnScale(styleElementSelect.value); const scaleSize = getSizeOnScale(styleElementSelect.value);
el.attr("data-size", size).attr("font-size", scaleSize); el.attr("data-size", size).attr("font-size", scaleSize);
if (styleElementSelect.value === 'legend') redrawLegend(); if (styleElementSelect.value === "legend") redrawLegend();
} }
styleRadiusInput.addEventListener("change", function () { styleRadiusInput.addEventListener("change", function () {
@ -684,59 +677,53 @@ function changeIconSize(size, group) {
styleIconSizeInput.value = size; styleIconSizeInput.value = size;
} }
styleStatesBodyOpacity.addEventListener('input', function () { styleStatesBodyOpacity.addEventListener("input", function () {
styleStatesBodyOpacityOutput.value = this.value; styleStatesBodyOpacityOutput.value = this.value;
statesBody.attr('opacity', this.value); statesBody.attr("opacity", this.value);
}); });
styleStatesBodyFilter.addEventListener('change', function () { styleStatesBodyFilter.addEventListener("change", function () {
statesBody.attr('filter', this.value); statesBody.attr("filter", this.value);
}); });
styleStatesHaloWidth.addEventListener('input', function () { styleStatesHaloWidth.addEventListener("input", function () {
styleStatesHaloWidthOutput.value = this.value; styleStatesHaloWidthOutput.value = this.value;
statesHalo.attr('data-width', this.value).attr('stroke-width', this.value); statesHalo.attr("data-width", this.value).attr("stroke-width", this.value);
}); });
styleStatesHaloOpacity.addEventListener("input", function () { styleStatesHaloOpacity.addEventListener("input", function () {
styleStatesHaloOpacityOutput.value = this.value; styleStatesHaloOpacityOutput.value = this.value;
statesHalo.attr('opacity', this.value); statesHalo.attr("opacity", this.value);
}); });
styleStatesHaloBlur.addEventListener('input', function () { styleStatesHaloBlur.addEventListener("input", function () {
styleStatesHaloBlurOutput.value = this.value; styleStatesHaloBlurOutput.value = this.value;
const blur = +this.value > 0 ? `blur(${this.value}px)` : null; const blur = +this.value > 0 ? `blur(${this.value}px)` : null;
statesHalo.attr('filter', blur); statesHalo.attr("filter", blur);
}); });
styleArmiesFillOpacity.addEventListener('input', function () { styleArmiesFillOpacity.addEventListener("input", function () {
armies.attr('fill-opacity', this.value); armies.attr("fill-opacity", this.value);
styleArmiesFillOpacityOutput.value = this.value; styleArmiesFillOpacityOutput.value = this.value;
}); });
styleArmiesSize.addEventListener("input", function () { styleArmiesSize.addEventListener("input", function () {
armies.attr("box-size", this.value).attr("font-size", this.value * 2); armies.attr("box-size", this.value).attr("font-size", this.value * 2);
styleArmiesSizeOutput.value = this.value; styleArmiesSizeOutput.value = this.value;
armies.selectAll('g').remove(); // clear armies layer armies.selectAll("g").remove(); // clear armies layer
pack.states.forEach((s) => { pack.states.forEach(s => {
if (!s.i || s.removed || !s.military.length) return; if (!s.i || s.removed || !s.military.length) return;
Military.drawRegiments(s.military, s.i); Military.drawRegiments(s.military, s.i);
}); });
}); });
emblemsStateSizeInput.addEventListener('change', drawEmblems); emblemsStateSizeInput.addEventListener("change", drawEmblems);
emblemsProvinceSizeInput.addEventListener('change', drawEmblems); emblemsProvinceSizeInput.addEventListener("change", drawEmblems);
emblemsBurgSizeInput.addEventListener('change', drawEmblems); emblemsBurgSizeInput.addEventListener("change", drawEmblems);
styleResourcesCircle.addEventListener('change', function () { styleResourcesCircle.addEventListener("change", function () {
goods.attr('data-circle', +this.checked); goods.attr("data-circle", +this.checked);
goods.selectAll('*').remove(); goods.selectAll("*").remove();
drawResources();
});
styleResourcesCircle.addEventListener('change', function () {
goods.attr('data-circle', +this.checked);
goods.selectAll('*').remove();
drawResources(); drawResources();
}); });
@ -761,9 +748,9 @@ function textureProvideURL() {
opt.text = name.slice(0, 20); opt.text = name.slice(0, 20);
styleTextureInput.add(opt); styleTextureInput.add(opt);
styleTextureInput.value = textureURL.value; styleTextureInput.value = textureURL.value;
getBase64(textureURL.value, (base64) => texture.select('image').attr('xlink:href', base64)); getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64));
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
$(this).dialog('close'); $(this).dialog("close");
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -773,11 +760,11 @@ function textureProvideURL() {
} }
function fetchTextureURL(url) { function fetchTextureURL(url) {
INFO && console.log('Provided URL is', url); INFO && console.log("Provided URL is", url);
const img = new Image(); const img = new Image();
img.onload = function () { img.onload = function () {
const canvas = document.getElementById('texturePreview'); const canvas = document.getElementById("texturePreview");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}; };
@ -818,22 +805,22 @@ function updateElements() {
}); });
// redraw elements // redraw elements
if (layerIsOn('toggleHeight')) drawHeightmap(); if (layerIsOn("toggleHeight")) drawHeightmap();
if (legend.selectAll('*').size() && window.redrawLegend) redrawLegend(); if (legend.selectAll("*").size() && window.redrawLegend) redrawLegend();
oceanLayers.selectAll('path').remove(); oceanLayers.selectAll("path").remove();
OceanLayers(); OceanLayers();
invokeActiveZooming(); invokeActiveZooming();
} }
// GLOBAL FILTERS // GLOBAL FILTERS
mapFilters.addEventListener('click', applyMapFilter); mapFilters.addEventListener("click", applyMapFilter);
function applyMapFilter(event) { function applyMapFilter(event) {
if (event.target.tagName !== 'BUTTON') return; if (event.target.tagName !== "BUTTON") return;
const button = event.target; const button = event.target;
svg.attr('data-filter', null).attr('filter', null); svg.attr("data-filter", null).attr("filter", null);
if (button.classList.contains('pressed')) return button.classList.remove('pressed'); if (button.classList.contains("pressed")) return button.classList.remove("pressed");
mapFilters.querySelectorAll('.pressed').forEach((button) => button.classList.remove('pressed')); mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
button.classList.add('pressed'); button.classList.add("pressed");
svg.attr('data-filter', button.id).attr('filter', 'url(#filter-' + button.id + ')'); svg.attr("data-filter", button.id).attr("filter", "url(#filter-" + button.id + ")");
} }

110
modules/ui/tools.js
View file

@ -1,36 +1,36 @@
"use strict";
// module to control the Tools options (click to edit, to re-geenerate, tp add) // module to control the Tools options (click to edit, to re-geenerate, tp add)
'use strict';
toolsContent.addEventListener("click", function (event) { toolsContent.addEventListener("click", function (event) {
if (customization) return tip("Please exit the customization mode first", false, "warning"); if (customization) return tip("Please exit the customization mode first", false, "warning");
if (!["BUTTON", "I"].includes(event.target.tagName)) return; if (!["BUTTON", "I"].includes(event.target.tagName)) return;
const button = event.target.id; const button = event.target.id;
// Click to open Editor buttons // click on open Editor buttons
if (button === 'editHeightmapButton') editHeightmap(); if (button === "editHeightmapButton") editHeightmap();
else if (button === 'editBiomesButton') editBiomes(); else if (button === "editBiomesButton") editBiomes();
else if (button === 'editStatesButton') editStates(); else if (button === "editStatesButton") editStates();
else if (button === 'editProvincesButton') editProvinces(); else if (button === "editProvincesButton") editProvinces();
else if (button === 'editDiplomacyButton') editDiplomacy(); else if (button === "editDiplomacyButton") editDiplomacy();
else if (button === 'editCulturesButton') editCultures(); else if (button === "editCulturesButton") editCultures();
else if (button === 'editReligions') editReligions(); else if (button === "editReligions") editReligions();
else if (button === 'editResources') editResources(); else if (button === 'editResources') editResources();
else if (button === 'editEmblemButton') openEmblemEditor(); else if (button === "editEmblemButton") openEmblemEditor();
else if (button === 'editNamesBaseButton') editNamesbase(); else if (button === "editNamesBaseButton") editNamesbase();
else if (button === 'editUnitsButton') editUnits(); else if (button === "editUnitsButton") editUnits();
else if (button === 'editNotesButton') editNotes(); else if (button === "editNotesButton") editNotes();
else if (button === 'editZonesButton') editZones(); else if (button === "editZonesButton") editZones();
else if (button === 'overviewBurgsButton') overviewBurgs(); else if (button === "overviewChartsButton") overviewCharts();
else if (button === 'overviewRiversButton') overviewRivers(); else if (button === "overviewBurgsButton") overviewBurgs();
else if (button === 'overviewMilitaryButton') overviewMilitary(); else if (button === "overviewRiversButton") overviewRivers();
else if (button === 'overviewCellsButton') viewCellDetails(); else if (button === "overviewMilitaryButton") overviewMilitary();
else if (button === "overviewMarkersButton") overviewMarkers();
else if (button === "overviewCellsButton") viewCellDetails();
// Click to Regenerate buttons // click on Regenerate buttons
if (event.target.parentNode.id === 'regenerateFeature') { if (event.target.parentNode.id === "regenerateFeature") {
if (sessionStorage.getItem('regenerateFeatureDontAsk')) { const dontAsk = sessionStorage.getItem("regenerateFeatureDontAsk");
processFeatureRegeneration(event, button); if (dontAsk) return processFeatureRegeneration(event, button);
return;
}
alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.<br /><br />Are you sure you want to proceed?`; alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.<br /><br />Are you sure you want to proceed?`;
$("#alert").dialog({ $("#alert").dialog({
@ -59,12 +59,18 @@ toolsContent.addEventListener("click", function (event) {
}); });
} }
// Click to Add buttons // click on Configure regenerate buttons
if (button === 'addLabel') toggleAddLabel(); if (button === "configRegenerateMarkers") configMarkersGeneration();
else if (button === 'addBurgTool') toggleAddBurg();
else if (button === 'addRiver') toggleAddRiver(); // click on Add buttons
else if (button === 'addRoute') toggleAddRoute(); if (button === "addLabel") toggleAddLabel();
else if (button === 'addMarker') toggleAddMarker(); else if (button === "addBurgTool") toggleAddBurg();
else if (button === "addRiver") toggleAddRiver();
else if (button === "addRoute") toggleAddRoute();
else if (button === "addMarker") toggleAddMarker();
// click to create a new map buttons
else if (button === "openSubmapMenu") UISubmap.openSubmapMenu();
else if (button === "openResampleMenu") UISubmap.openResampleMenu();
}); });
function processFeatureRegeneration(event, button) { function processFeatureRegeneration(event, button) {
@ -76,20 +82,20 @@ function processFeatureRegeneration(event, button) {
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn("toggleRelief")) toggleRelief();
} else if (button === "regenerateRoutes") { } else if (button === "regenerateRoutes") {
Routes.regenerate(); Routes.regenerate();
if (!layerIsOn('toggleRoutes')) toggleRoutes(); if (!layerIsOn("toggleRoutes")) toggleRoutes();
} else if (button === 'regenerateRivers') regenerateRivers(); } else if (button === "regenerateRivers") regenerateRivers();
else if (button === 'regeneratePopulation') recalculatePopulation(); else if (button === "regeneratePopulation") recalculatePopulation();
else if (button === 'regenerateStates') regenerateStates(); else if (button === "regenerateStates") regenerateStates();
else if (button === 'regenerateProvinces') regenerateProvinces(); else if (button === "regenerateProvinces") regenerateProvinces();
else if (button === 'regenerateBurgs') regenerateBurgs(); else if (button === "regenerateBurgs") regenerateBurgs();
else if (button === 'regenerateResources') regenerateResources(); else if (button === 'regenerateResources') regenerateResources();
else if (button === 'regenerateEmblems') regenerateEmblems(); else if (button === "regenerateEmblems") regenerateEmblems();
else if (button === 'regenerateReligions') regenerateReligions(); else if (button === "regenerateReligions") regenerateReligions();
else if (button === 'regenerateCultures') regenerateCultures(); else if (button === "regenerateCultures") regenerateCultures();
else if (button === 'regenerateMilitary') regenerateMilitary(); else if (button === "regenerateMilitary") regenerateMilitary();
else if (button === 'regenerateIce') regenerateIce(); else if (button === "regenerateIce") regenerateIce();
else if (button === 'regenerateMarkers') regenerateMarkers(event); else if (button === "regenerateMarkers") regenerateMarkers();
else if (button === 'regenerateZones') regenerateZones(event); else if (button === "regenerateZones") regenerateZones(event);
} }
async function openEmblemEditor() { async function openEmblemEditor() {
@ -430,23 +436,11 @@ function regenerateIce() {
drawIce(); drawIce();
} }
function regenerateMarkers(event) { function regenerateMarkers() {
if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v)); Markers.regenerate();
else addNumberOfMarkers();
function addNumberOfMarkers(multiplier) {
pack.markers = pack.markers.filter(marker => {
if (marker.lock) return true;
document.getElementById(`marker${marker.i}`)?.remove();
const index = notes.findIndex(note => note.id === marker.id);
if (index != -1) notes.splice(index, 1);
return false;
});
Markers.regenerate(multiplier);
turnButtonOn("toggleMarkers"); turnButtonOn("toggleMarkers");
drawMarkers(); drawMarkers();
} if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
} }
function regenerateZones(event) { function regenerateZones(event) {

58
modules/ui/units-editor.js
View file

@ -1,14 +1,14 @@
'use strict'; "use strict";
function editUnits() { function editUnits() {
closeDialogs('#unitsEditor, .stable'); closeDialogs("#unitsEditor, .stable");
$('#unitsEditor').dialog(); $("#unitsEditor").dialog();
if (modules.editUnits) return; if (modules.editUnits) return;
modules.editUnits = true; modules.editUnits = true;
$('#unitsEditor').dialog({ $("#unitsEditor").dialog({
title: 'Units Editor', title: "Units Editor",
position: {my: 'right top', at: 'right-10 top+10', of: 'svg', collision: 'fit'} position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
}); });
const drawBar = () => drawScaleBar(scale); const drawBar = () => drawScaleBar(scale);
@ -36,12 +36,12 @@ function editUnits() {
document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity); document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity); document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity);
document.getElementById('addLinearRuler').addEventListener('click', addRuler); document.getElementById("addLinearRuler").addEventListener("click", addRuler);
document.getElementById('addOpisometer').addEventListener('click', toggleOpisometerMode); document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
document.getElementById('addRouteOpisometer').addEventListener('click', toggleRouteOpisometerMode); document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
document.getElementById('addPlanimeter').addEventListener('click', togglePlanimeterMode); document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode);
document.getElementById('removeRulers').addEventListener('click', removeAllRulers); document.getElementById("removeRulers").addEventListener("click", removeAllRulers);
document.getElementById('unitsRestore').addEventListener('click', restoreDefaultUnits); document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits);
function changeDistanceUnit() { function changeDistanceUnit() {
if (this.value === "custom_name") { if (this.value === "custom_name") {
@ -109,21 +109,21 @@ function editUnits() {
unlock("distanceScale"); unlock("distanceScale");
// units // units
const US = navigator.language === 'en-US'; const US = navigator.language === "en-US";
const UK = navigator.language === 'en-GB'; const UK = navigator.language === "en-GB";
distanceUnitInput.value = US || UK ? 'mi' : 'km'; distanceUnitInput.value = US || UK ? "mi" : "km";
heightUnit.value = US || UK ? 'ft' : 'm'; heightUnit.value = US || UK ? "ft" : "m";
temperatureScale.value = US ? '°F' : '°C'; temperatureScale.value = US ? "°F" : "°C";
areaUnit.value = 'square'; areaUnit.value = "square";
localStorage.removeItem('distanceUnit'); localStorage.removeItem("distanceUnit");
localStorage.removeItem('heightUnit'); localStorage.removeItem("heightUnit");
localStorage.removeItem('temperatureScale'); localStorage.removeItem("temperatureScale");
localStorage.removeItem('areaUnit'); localStorage.removeItem("areaUnit");
calculateFriendlyGridSize(); calculateFriendlyGridSize();
// height exponent // height exponent
heightExponentInput.value = heightExponentOutput.value = 1.8; heightExponentInput.value = heightExponentOutput.value = 1.8;
localStorage.removeItem('heightExponent'); localStorage.removeItem("heightExponent");
calculateTemperatures(); calculateTemperatures();
// scale bar // scale bar
@ -163,10 +163,10 @@ function editUnits() {
} }
function toggleOpisometerMode() { function toggleOpisometerMode() {
if (this.classList.contains('pressed')) { if (this.classList.contains("pressed")) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove('pressed'); this.classList.remove("pressed");
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true);
@ -195,10 +195,10 @@ function editUnits() {
} }
function toggleRouteOpisometerMode() { function toggleRouteOpisometerMode() {
if (this.classList.contains('pressed')) { if (this.classList.contains("pressed")) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove('pressed'); this.classList.remove("pressed");
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true); tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true);
@ -244,10 +244,10 @@ function editUnits() {
} }
function togglePlanimeterMode() { function togglePlanimeterMode() {
if (this.classList.contains('pressed')) { if (this.classList.contains("pressed")) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove('pressed'); this.classList.remove("pressed");
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true);

2
modules/ui/zones-editor.js
View file

@ -127,8 +127,6 @@ function editZones() {
$("#zonesEditor").dialog({width: fitContent()}); $("#zonesEditor").dialog({width: fitContent()});
} }
function filterZonesByType() {}
function zoneHighlightOn(event) { function zoneHighlightOn(event) {
const zone = event.target.dataset.id; const zone = event.target.dataset.id;
zones.select("#" + zone).style("outline", "1px solid red"); zones.select("#" + zone).style("outline", "1px solid red");