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

fix merge conflicts

Browse source
This commit is contained in:
Azgaar 2021-08-05 00:13:49 +03:00
parent 1180a3c67b
commit ee68f2ed73
3 changed files with 249 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

59
main.js
View file

@ -1,9 +1,9 @@
// Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2021. MIT License // Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2021. MIT License
// https://github.com/Azgaar/Fantasy-Map-Generator // https://github.com/Azgaar/Fantasy-Map-Generator
"use strict"; 'use strict';
const version = "1.652"; // generator version const version = '1.652'; // generator version
document.title += " v" + version; document.title += ' v' + version;
// Logging constants // Logging constants
const PRODUCTION = window.location.host; const PRODUCTION = window.location.host;
@ -123,7 +123,7 @@ let customization = 0; // 0 - no; 1 = heightmap draw; 2 - states draw; 3 - add s
let biomesData = applyDefaultBiomesSystem(); let biomesData = applyDefaultBiomesSystem();
let nameBases = Names.getNameBases(); // cultures-related data let nameBases = Names.getNameBases(); // cultures-related data
const fonts = ["Almendra+SC", "Georgia", "Arial", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"]; // default fonts const fonts = ['Almendra+SC', 'Georgia', 'Arial', 'Times+New+Roman', 'Comic+Sans+MS', 'Lucida+Sans+Unicode', 'Courier+New', 'Verdana', 'Arial', 'Impact']; // default fonts
let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
@ -146,7 +146,7 @@ function zoomed() {
zoomThrottled(isScaleChanged, isPositionChanged); zoomThrottled(isScaleChanged, isPositionChanged);
} }
const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed); const zoom = d3.zoom().scaleExtent([1, 20]).on('zoom', zoomed);
// default options // default options
let options = {pinNotes: false}; // options object let options = {pinNotes: false}; // options object
@ -413,10 +413,10 @@ function applyDefaultBiomesSystem() {
} }
function showWelcomeMessage() { function showWelcomeMessage() {
const changelog = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "previous version"); const changelog = link('https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog', 'previous version');
const reddit = link("https://www.reddit.com/r/FantasyMapGenerator", "Reddit community"); const reddit = link('https://www.reddit.com/r/FantasyMapGenerator', 'Reddit community');
const discord = link("https://discordapp.com/invite/X7E84HU", "Discord server"); const discord = link('https://discordapp.com/invite/X7E84HU', 'Discord server');
const patreon = link("https://www.patreon.com/azgaar", "Patreon"); const patreon = link('https://www.patreon.com/azgaar', 'Patreon');
alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>. alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <b>${version}</b>.
This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated. This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
@ -444,7 +444,7 @@ function showWelcomeMessage() {
} }
function doWorkOnZoom(isScaleChanged, isPositionChanged) { function doWorkOnZoom(isScaleChanged, isPositionChanged) {
viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`); viewbox.attr('transform', `translate(${viewX} ${viewY}) scale(${scale})`);
if (isPositionChanged) drawCoordinates(); if (isPositionChanged) drawCoordinates();
@ -455,13 +455,13 @@ function doWorkOnZoom(isScaleChanged, isPositionChanged) {
// zoom image converter overlay // zoom image converter overlay
if (customization === 1) { if (customization === 1) {
const canvas = document.getElementById("canvas"); const canvas = document.getElementById('canvas');
if (!canvas || canvas.style.opacity === "0") return; if (!canvas || canvas.style.opacity === '0') return;
const img = document.getElementById("imageToConvert"); const img = document.getElementById('imageToConvert');
if (!img) return; if (!img) return;
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.setTransform(scale, 0, 0, scale, viewX, viewY); ctx.setTransform(scale, 0, 0, scale, viewX, viewY);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
@ -498,16 +498,16 @@ function invokeActiveZooming() {
} }
// rescale lables on zoom // rescale lables on zoom
if (labels.style("display") !== "none") { if (labels.style('display') !== 'none') {
labels.selectAll("g").each(function () { labels.selectAll('g').each(function () {
if (this.id === "burgLabels") return; if (this.id === 'burgLabels') return;
const desired = +this.dataset.size; const desired = +this.dataset.size;
const relative = Math.max(rn((desired + desired / scale) / 2, 2), 1); const relative = Math.max(rn((desired + desired / scale) / 2, 2), 1);
if (rescaleLabels.checked) this.setAttribute("font-size", relative); if (rescaleLabels.checked) this.setAttribute('font-size', relative);
const hidden = hideLabels.checked && (relative * scale < 6 || relative * scale > 60); const hidden = hideLabels.checked && (relative * scale < 6 || relative * scale > 60);
if (hidden) this.classList.add("hidden"); if (hidden) this.classList.add('hidden');
else this.classList.remove("hidden"); else this.classList.remove('hidden');
}); });
} }
@ -530,14 +530,14 @@ function invokeActiveZooming() {
// change states halo width // change states halo width
if (!customization) { if (!customization) {
const desired = +statesHalo.attr("data-width"); const desired = +statesHalo.attr('data-width');
const haloSize = rn(desired / scale ** 0.8, 2); const haloSize = rn(desired / scale ** 0.8, 2);
statesHalo.attr("stroke-width", haloSize).style("display", haloSize > 0.1 ? "block" : "none"); statesHalo.attr('stroke-width', haloSize).style('display', haloSize > 0.1 ? 'block' : 'none');
} }
// rescale map markers // rescale map markers
if (+markers.attr("rescale") && markers.style("display") !== "none") { if (+markers.attr('rescale') && markers.style('display') !== 'none') {
markers.selectAll("use").each(function () { markers.selectAll('use').each(function () {
const x = +this.dataset.x, const x = +this.dataset.x,
y = +this.dataset.y, y = +this.dataset.y,
desired = +this.dataset.size; desired = +this.dataset.size;
@ -1318,9 +1318,9 @@ function reMarkFeatures() {
cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell); cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell);
cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells); cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells);
const defineHaven = i => { const defineHaven = (i) => {
const water = cells.c[i].filter(c => cells.h[c] < 20); const water = cells.c[i].filter((c) => cells.h[c] < 20);
const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2); const dist2 = water.map((c) => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))]; const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];
cells.haven[i] = closest; cells.haven[i] = closest;
@ -2156,13 +2156,8 @@ const regenerateMap = debounce(function () {
generate(); generate();
restoreLayers(); restoreLayers();
if (ThreeD.options.isOn) ThreeD.redraw(); if (ThreeD.options.isOn) ThreeD.redraw();
<<<<<<< HEAD
if ($('#worldConfigurator').is(':visible')) editWorld(); if ($('#worldConfigurator').is(':visible')) editWorld();
}, 500);
=======
if ($("#worldConfigurator").is(":visible")) editWorld();
}, 1000); }, 1000);
>>>>>>> 597f9ae038fbcc149315df9b1618e64744fb929d
// clear the map // clear the map
function undraw() { function undraw() {

13
modules/ui/states-editor.js
View file

@ -852,15 +852,9 @@ function editStates() {
const {cells, provinces, states} = pack; const {cells, provinces, states} = pack;
const form = {Zone: 1, Area: 1, Territory: 2, Province: 1}; const form = {Zone: 1, Area: 1, Territory: 2, Province: 1};
<<<<<<< HEAD
affectedProvinces.forEach((p) => { affectedProvinces.forEach((p) => {
// do nothing if neutral lands are captured
if (!p) return;
=======
affectedProvinces.forEach(p => {
if (!p) return; // do nothing if neutral lands are captured if (!p) return; // do nothing if neutral lands are captured
const old = provinces[p].state; const old = provinces[p].state;
>>>>>>> 597f9ae038fbcc149315df9b1618e64744fb929d
// remove province from state provinces list // remove province from state provinces list
if (states[old]?.provinces?.includes(p)) states[old].provinces.splice(states[old].provinces.indexOf(p), 1); if (states[old]?.provinces?.includes(p)) states[old].provinces.splice(states[old].provinces.indexOf(p), 1);
@ -874,13 +868,8 @@ function editStates() {
if (owner) { if (owner) {
const name = provinces[p].name; const name = provinces[p].name;
<<<<<<< HEAD
// if province is historical part of abouther state province, unite with old province
const part = states[owner].provinces.find((n) => name.includes(provinces[n].name));
=======
// if province is a historical part of another state's province, unite with old province // if province is a historical part of another state's province, unite with old province
const part = states[owner].provinces.find(n => name.includes(provinces[n].name)); const part = states[owner].provinces.find((n) => name.includes(provinces[n].name));
>>>>>>> 597f9ae038fbcc149315df9b1618e64744fb929d
if (part) { if (part) {
provinces[p].removed = true; provinces[p].removed = true;
provCells.filter((i) => cells.state[i] === owner).forEach((i) => (cells.province[i] = part)); provCells.filter((i) => cells.state[i] === owner).forEach((i) => (cells.province[i] = part));

437
modules/ui/style.js
View file

@ -3,17 +3,17 @@
// add available filters to lists // add available filters to lists
void (function addFilters() { void (function addFilters() {
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;
})(); })();
// store some style inputs as options // store some style inputs as options
@ -43,29 +43,29 @@ 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
@ -96,15 +96,15 @@ function selectStyleElement() {
} }
// 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') {
@ -144,13 +144,13 @@ function selectStyleElement() {
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;
} }
@ -273,18 +273,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') {
@ -300,8 +300,8 @@ styleGroupSelect.addEventListener('change', selectStyleElement);
function getEl() { function getEl() {
const el = styleElementSelect.value; const el = styleElementSelect.value;
const g = styleGroupSelect.value; const g = styleGroupSelect.value;
if (g === el) return svg.select("#" + el); if (g === el) return svg.select('#' + el);
else return svg.select("#" + el).select("#" + g); else return svg.select('#' + el).select('#' + g);
} }
styleFillInput.addEventListener('input', function () { styleFillInput.addEventListener('input', function () {
@ -336,9 +336,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 () {
@ -464,15 +464,15 @@ styleReliefSet.addEventListener('change', function () {
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();
@ -574,32 +574,32 @@ styleFontSize.addEventListener('change', function () {
changeFontSize(+this.value); changeFontSize(+this.value);
}); });
styleFontPlus.addEventListener("click", function () { styleFontPlus.addEventListener('click', function () {
const size = +getEl().attr("data-size") + 1; const size = +getEl().attr('data-size') + 1;
changeFontSize(Math.min(size, 999)); changeFontSize(Math.min(size, 999));
}); });
styleFontMinus.addEventListener("click", function () { styleFontMinus.addEventListener('click', function () {
const size = +getEl().attr("data-size") - 1; const size = +getEl().attr('data-size') - 1;
changeFontSize(Math.max(size, 1)); changeFontSize(Math.max(size, 1));
}); });
function changeFontSize(size) { function changeFontSize(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;
}; };
const scaleSize = getSizeOnScale(styleElementSelect.value); const scaleSize = getSizeOnScale(styleElementSelect.value);
getEl().attr("data-size", size).attr("font-size", scaleSize); getEl().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 () {
@ -663,16 +663,16 @@ 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);
}); });
@ -682,14 +682,14 @@ styleStatesHaloOpacity.addEventListener('input', function () {
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;
}); });
@ -703,9 +703,9 @@ styleArmiesSize.addEventListener('input', function () {
}); });
}); });
emblemsStateSizeInput.addEventListener("change", drawEmblems); emblemsStateSizeInput.addEventListener('change', drawEmblems);
emblemsProvinceSizeInput.addEventListener("change", drawEmblems); emblemsProvinceSizeInput.addEventListener('change', drawEmblems);
emblemsBurgSizeInput.addEventListener("change", drawEmblems); emblemsBurgSizeInput.addEventListener('change', drawEmblems);
// request a URL to image to be used as a texture // request a URL to image to be used as a texture
function textureProvideURL() { function textureProvideURL() {
@ -781,56 +781,74 @@ function applyStyleOnLoad() {
// set default style // set default style
function applyDefaultStyle() { function applyDefaultStyle() {
armies.attr("opacity", 1).attr("fill-opacity", 1).attr("font-size", 6).attr("box-size", 3).attr("stroke", "#000").attr("stroke-width", 0.3); armies.attr('opacity', 1).attr('fill-opacity', 1).attr('font-size', 6).attr('box-size', 3).attr('stroke', '#000').attr('stroke-width', 0.3);
biomes.attr("opacity", null).attr("filter", null).attr("mask", null); biomes.attr('opacity', null).attr('filter', null).attr('mask', null);
ice.attr("opacity", 0.9).attr("fill", "#e8f0f6").attr("stroke", "#e8f0f6").attr("stroke-width", 1).attr("filter", "url(#dropShadow05)"); ice.attr('opacity', 0.9).attr('fill', '#e8f0f6').attr('stroke', '#e8f0f6').attr('stroke-width', 1).attr('filter', 'url(#dropShadow05)');
stateBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 1).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null); stateBorders.attr('opacity', 0.8).attr('stroke', '#56566d').attr('stroke-width', 1).attr('stroke-dasharray', '2').attr('stroke-linecap', 'butt').attr('filter', null);
provinceBorders.attr("opacity", 0.8).attr("stroke", "#56566d").attr("stroke-width", 0.5).attr("stroke-dasharray", "0 2").attr("stroke-linecap", "round").attr("filter", null); provinceBorders.attr('opacity', 0.8).attr('stroke', '#56566d').attr('stroke-width', 0.5).attr('stroke-dasharray', '0 2').attr('stroke-linecap', 'round').attr('filter', null);
cells.attr("opacity", null).attr("stroke", "#808080").attr("stroke-width", 0.1).attr("filter", null).attr("mask", null); cells.attr('opacity', null).attr('stroke', '#808080').attr('stroke-width', 0.1).attr('filter', null).attr('mask', null);
gridOverlay.attr("opacity", 0.8).attr("type", "pointyHex").attr("scale", 1).attr("dx", 0).attr("dy", 0).attr("stroke", "#777777").attr("stroke-width", 0.5).attr("stroke-dasharray", null).attr("filter", null).attr("mask", null); gridOverlay
coordinates.attr("opacity", 1).attr("data-size", 12).attr("font-size", 12).attr("stroke", "#d4d4d4").attr("stroke-width", 1).attr("stroke-dasharray", 5).attr("filter", null).attr("mask", null); .attr('opacity', 0.8)
compass.attr("opacity", 0.8).attr("transform", null).attr("filter", null).attr("mask", "url(#water)").attr("shape-rendering", "optimizespeed"); .attr('type', 'pointyHex')
if (!d3.select("#initial").size()) d3.select("#rose").attr("transform", "translate(80 80) scale(.25)"); .attr('scale', 1)
.attr('dx', 0)
.attr('dy', 0)
.attr('stroke', '#777777')
.attr('stroke-width', 0.5)
.attr('stroke-dasharray', null)
.attr('filter', null)
.attr('mask', null);
coordinates.attr('opacity', 1).attr('data-size', 12).attr('font-size', 12).attr('stroke', '#d4d4d4').attr('stroke-width', 1).attr('stroke-dasharray', 5).attr('filter', null).attr('mask', null);
compass.attr('opacity', 0.8).attr('transform', null).attr('filter', null).attr('mask', 'url(#water)').attr('shape-rendering', 'optimizespeed');
if (!d3.select('#initial').size()) d3.select('#rose').attr('transform', 'translate(80 80) scale(.25)');
relig.attr("opacity", 0.7).attr("stroke", "#777777").attr("stroke-width", 0).attr("filter", null); relig.attr('opacity', 0.7).attr('stroke', '#777777').attr('stroke-width', 0).attr('filter', null);
cults.attr("opacity", 0.6).attr("stroke", "#777777").attr("stroke-width", 0.5).attr("filter", null); cults.attr('opacity', 0.6).attr('stroke', '#777777').attr('stroke-width', 0.5).attr('filter', null);
landmass.attr("opacity", 1).attr("fill", "#eef6fb").attr("filter", null); landmass.attr('opacity', 1).attr('fill', '#eef6fb').attr('filter', null);
markers.attr("opacity", null).attr("rescale", 1).attr("filter", "url(#dropShadow01)"); markers.attr('opacity', null).attr('rescale', 1).attr('filter', 'url(#dropShadow01)');
prec.attr("opacity", null).attr("stroke", "#000000").attr("stroke-width", 0.1).attr("fill", "#003dff").attr("filter", null); prec.attr('opacity', null).attr('stroke', '#000000').attr('stroke-width', 0.1).attr('fill', '#003dff').attr('filter', null);
population.attr("opacity", null).attr("stroke-width", 1.6).attr("stroke-dasharray", null).attr("stroke-linecap", "butt").attr("filter", null); population.attr('opacity', null).attr('stroke-width', 1.6).attr('stroke-dasharray', null).attr('stroke-linecap', 'butt').attr('filter', null);
population.select("#rural").attr("stroke", "#0000ff"); population.select('#rural').attr('stroke', '#0000ff');
population.select("#urban").attr("stroke", "#ff0000"); population.select('#urban').attr('stroke', '#ff0000');
lakes.select("#freshwater").attr("opacity", 0.5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", 0.7).attr("filter", null); lakes.select('#freshwater').attr('opacity', 0.5).attr('fill', '#a6c1fd').attr('stroke', '#5f799d').attr('stroke-width', 0.7).attr('filter', null);
lakes.select("#salt").attr("opacity", 0.5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", 0.7).attr("filter", null); lakes.select('#salt').attr('opacity', 0.5).attr('fill', '#409b8a').attr('stroke', '#388985').attr('stroke-width', 0.7).attr('filter', null);
lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", 0.7).attr("filter", null); lakes.select('#sinkhole').attr('opacity', 1).attr('fill', '#5bc9fd').attr('stroke', '#53a3b0').attr('stroke-width', 0.7).attr('filter', null);
lakes.select("#frozen").attr("opacity", 0.95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null); lakes.select('#frozen').attr('opacity', 0.95).attr('fill', '#cdd4e7').attr('stroke', '#cfe0eb').attr('stroke-width', 0).attr('filter', null);
lakes.select("#lava").attr("opacity", 0.7).attr("fill", "#90270d").attr("stroke", "#f93e0c").attr("stroke-width", 2).attr("filter", "url(#crumpled)"); lakes.select('#lava').attr('opacity', 0.7).attr('fill', '#90270d').attr('stroke', '#f93e0c').attr('stroke-width', 2).attr('filter', 'url(#crumpled)');
lakes.select("#dry").attr("opacity", 1).attr("fill", "#c9bfa7").attr("stroke", "#8e816f").attr("stroke-width", 0.7).attr("filter", null); lakes.select('#dry').attr('opacity', 1).attr('fill', '#c9bfa7').attr('stroke', '#8e816f').attr('stroke-width', 0.7).attr('filter', null);
coastline.select("#sea_island").attr("opacity", 0.5).attr("stroke", "#1f3846").attr("stroke-width", 0.7).attr("auto-filter", 1).attr("filter", "url(#dropShadow)"); coastline.select('#sea_island').attr('opacity', 0.5).attr('stroke', '#1f3846').attr('stroke-width', 0.7).attr('auto-filter', 1).attr('filter', 'url(#dropShadow)');
coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", 0.35).attr("filter", null); coastline.select('#lake_island').attr('opacity', 1).attr('stroke', '#7c8eaf').attr('stroke-width', 0.35).attr('filter', null);
terrain.attr("opacity", null).attr("set", "simple").attr("size", 1).attr("density", 0.4).attr("filter", null).attr("mask", null); terrain.attr('opacity', null).attr('set', 'simple').attr('size', 1).attr('density', 0.4).attr('filter', null).attr('mask', null);
rivers.attr("opacity", null).attr("fill", "#5d97bb").attr("filter", null); rivers.attr('opacity', null).attr('fill', '#5d97bb').attr('filter', null);
ruler.attr("opacity", null).attr("filter", null); ruler.attr('opacity', null).attr('filter', null);
roads.attr("opacity", 0.9).attr("stroke", "#d06324").attr("stroke-width", 0.7).attr("stroke-dasharray", "2").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null); roads.attr('opacity', 0.9).attr('stroke', '#d06324').attr('stroke-width', 0.7).attr('stroke-dasharray', '2').attr('stroke-linecap', 'butt').attr('filter', null).attr('mask', null);
trails.attr("opacity", 0.9).attr("stroke", "#d06324").attr("stroke-width", 0.25).attr("stroke-dasharray", ".8 1.6").attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null); trails.attr('opacity', 0.9).attr('stroke', '#d06324').attr('stroke-width', 0.25).attr('stroke-dasharray', '.8 1.6').attr('stroke-linecap', 'butt').attr('filter', null).attr('mask', null);
searoutes.attr("opacity", 0.8).attr("stroke", "#ffffff").attr("stroke-width", 0.45).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round").attr("filter", null).attr("mask", null); searoutes.attr('opacity', 0.8).attr('stroke', '#ffffff').attr('stroke-width', 0.45).attr('stroke-dasharray', '1 2').attr('stroke-linecap', 'round').attr('filter', null).attr('mask', null);
statesBody.attr("opacity", 0.4).attr("filter", null); statesBody.attr('opacity', 0.4).attr('filter', null);
statesHalo.attr("data-width", 10).attr("stroke-width", 10).attr("opacity", 0.4).attr("filter", "blur(5px)"); statesHalo.attr('data-width', 10).attr('stroke-width', 10).attr('opacity', 0.4).attr('filter', 'blur(5px)');
provs.attr("opacity", 0.7).attr("fill", "#000000").attr("font-family", "Georgia").attr("data-font", "Georgia").attr("data-size", 10).attr("font-size", 10).attr("filter", null); provs.attr('opacity', 0.7).attr('fill', '#000000').attr('font-family', 'Georgia').attr('data-font', 'Georgia').attr('data-size', 10).attr('font-size', 10).attr('filter', null);
temperature.attr("opacity", null).attr("fill", "#000000").attr("stroke-width", 1.8).attr("fill-opacity", 0.3).attr("font-size", "8px").attr("stroke-dasharray", null).attr("filter", null).attr("mask", null); temperature
texture.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)"); .attr('opacity', null)
texture.select("#textureImage").attr("x", 0).attr("y", 0); .attr('fill', '#000000')
zones.attr("opacity", 0.6).attr("stroke", "#333333").attr("stroke-width", 0).attr("stroke-dasharray", null).attr("stroke-linecap", "butt").attr("filter", null).attr("mask", null); .attr('stroke-width', 1.8)
.attr('fill-opacity', 0.3)
.attr('font-size', '8px')
.attr('stroke-dasharray', null)
.attr('filter', null)
.attr('mask', null);
texture.attr('opacity', null).attr('filter', null).attr('mask', 'url(#land)');
texture.select('#textureImage').attr('x', 0).attr('y', 0);
zones.attr('opacity', 0.6).attr('stroke', '#333333').attr('stroke-width', 0).attr('stroke-dasharray', null).attr('stroke-linecap', 'butt').attr('filter', null).attr('mask', null);
// ocean and svg default style // ocean and svg default style
svg.attr('background-color', '#000000').attr('data-filter', null).attr('filter', null); svg.attr('background-color', '#000000').attr('data-filter', null).attr('filter', null);
@ -955,49 +973,40 @@ function applyStyle(style) {
// change current style preset to another saved one // change current style preset to another saved one
function changeStylePreset(preset) { function changeStylePreset(preset) {
if (customization) return tip("Please exit the customization mode first", false, "error"); if (customization) return tip('Please exit the customization mode first', false, 'error');
alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost"; alertMessage.innerHTML = 'Are you sure you want to change the style preset? All unsaved style changes will be lost';
$("#alert").dialog({ $('#alert').dialog({
resizable: false, resizable: false,
title: "Change style preset", title: 'Change style preset',
width: "23em", width: '23em',
buttons: { buttons: {
Change: function () { Change: function () {
const customPreset = localStorage.getItem(preset); const customPreset = localStorage.getItem(preset);
if (customPreset) { if (customPreset) {
if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset)); if (JSON.isValid(customPreset)) applyStyle(JSON.parse(customPreset));
else { else {
tip("Cannot parse stored style JSON. Default style applied", false, "error", 5000); tip('Cannot parse stored style JSON. Default style applied', false, 'error', 5000);
applyDefaultStyle(); applyDefaultStyle();
} }
} else if (defaultStyles[preset]) applyStyle(JSON.parse(defaultStyles[preset])); } else if (defaultStyles[preset]) applyStyle(JSON.parse(defaultStyles[preset]));
else applyDefaultStyle(); else applyDefaultStyle();
loadUsedFonts(); loadUsedFonts();
removeStyleButton.style.display = stylePreset.selectedOptions[0].dataset.system ? "none" : "inline-block";
updateElements(); // change elements
selectStyleElement(); // re-select element to trigger values update
updateMapFilter();
localStorage.setItem("presetStyle", preset); // save preset to use it onload
stylePreset.dataset.old = stylePreset.value; // save current value
$(this).dialog("close");
},
Cancel: function () {
stylePreset.value = stylePreset.dataset.old;
$(this).dialog("close");
}
} else if (defaultStyles[preset]) applyStyle(JSON.parse(defaultStyles[preset]));
else applyDefaultStyle();
removeStyleButton.style.display = stylePreset.selectedOptions[0].dataset.system ? 'none' : 'inline-block'; removeStyleButton.style.display = stylePreset.selectedOptions[0].dataset.system ? 'none' : 'inline-block';
updateElements(); // change elements updateElements(); // change elements
selectStyleElement(); // re-select element to trigger values update selectStyleElement(); // re-select element to trigger values update
updateMapFilter(); updateMapFilter();
localStorage.setItem('presetStyle', preset); // save preset to use it onload localStorage.setItem('presetStyle', preset); // save preset to use it onload
stylePreset.dataset.old = stylePreset.value; // save current value stylePreset.dataset.old = stylePreset.value; // save current value
}; $(this).dialog('close');
confirmationDialog({title: 'Change style preset', message, confirm: 'Change', onConfirm}); },
Cancel: function () {
stylePreset.value = stylePreset.dataset.old;
$(this).dialog('close');
}
}
});
} }
function updateElements() { function updateElements() {
@ -1048,8 +1057,8 @@ function addStylePreset() {
position: {my: 'center', at: 'center', of: 'svg'} position: {my: 'center', at: 'center', of: 'svg'}
}); });
const currentStyle = document.getElementById("stylePreset").selectedOptions[0].text; const currentStyle = document.getElementById('stylePreset').selectedOptions[0].text;
document.getElementById("styleSaverName").value = currentStyle; document.getElementById('styleSaverName').value = currentStyle;
styleSaverJSON.value = JSON.stringify(getStyle(), null, 2); styleSaverJSON.value = JSON.stringify(getStyle(), null, 2);
checkName(); checkName();
@ -1068,62 +1077,62 @@ function addStylePreset() {
function getStyle() { function getStyle() {
const style = {}; const style = {};
const attributes = { const attributes = {
"#map": ["background-color", "filter", "data-filter"], '#map': ['background-color', 'filter', 'data-filter'],
"#armies": ["font-size", "box-size", "stroke", "stroke-width", "fill-opacity", "filter"], '#armies': ['font-size', 'box-size', 'stroke', 'stroke-width', 'fill-opacity', 'filter'],
"#biomes": ["opacity", "filter", "mask"], '#biomes': ['opacity', 'filter', 'mask'],
"#stateBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], '#stateBorders': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter'],
"#provinceBorders": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], '#provinceBorders': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter'],
"#cells": ["opacity", "stroke", "stroke-width", "filter", "mask"], '#cells': ['opacity', 'stroke', 'stroke-width', 'filter', 'mask'],
"#gridOverlay": ["opacity", "scale", "dx", "dy", "type", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "transform", "filter", "mask"], '#gridOverlay': ['opacity', 'scale', 'dx', 'dy', 'type', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'transform', 'filter', 'mask'],
"#coordinates": ["opacity", "data-size", "font-size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], '#coordinates': ['opacity', 'data-size', 'font-size', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter', 'mask'],
"#compass": ["opacity", "transform", "filter", "mask", "shape-rendering"], '#compass': ['opacity', 'transform', 'filter', 'mask', 'shape-rendering'],
"#rose": ["transform"], '#rose': ['transform'],
"#relig": ["opacity", "stroke", "stroke-width", "filter"], '#relig': ['opacity', 'stroke', 'stroke-width', 'filter'],
"#cults": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], '#cults': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter'],
"#landmass": ["opacity", "fill", "filter"], '#landmass': ['opacity', 'fill', 'filter'],
"#markers": ["opacity", "rescale", "filter"], '#markers': ['opacity', 'rescale', 'filter'],
"#prec": ["opacity", "stroke", "stroke-width", "fill", "filter"], '#prec': ['opacity', 'stroke', 'stroke-width', 'fill', 'filter'],
"#population": ["opacity", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], '#population': ['opacity', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter'],
"#rural": ["stroke"], '#rural': ['stroke'],
"#urban": ["stroke"], '#urban': ['stroke'],
"#freshwater": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#freshwater': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#salt": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#salt': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#sinkhole": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#sinkhole': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#frozen": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#frozen': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#lava": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#lava': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#dry": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#dry': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#sea_island": ["opacity", "stroke", "stroke-width", "filter", "auto-filter"], '#sea_island': ['opacity', 'stroke', 'stroke-width', 'filter', 'auto-filter'],
"#lake_island": ["opacity", "stroke", "stroke-width", "filter"], '#lake_island': ['opacity', 'stroke', 'stroke-width', 'filter'],
"#terrain": ["opacity", "set", "size", "density", "filter", "mask"], '#terrain': ['opacity', 'set', 'size', 'density', 'filter', 'mask'],
"#rivers": ["opacity", "filter", "fill"], '#rivers': ['opacity', 'filter', 'fill'],
"#ruler": ["opacity", "filter"], '#ruler': ['opacity', 'filter'],
"#roads": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], '#roads': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter', 'mask'],
"#trails": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], '#trails': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter', 'mask'],
"#searoutes": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], '#searoutes': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter', 'mask'],
"#statesBody": ["opacity", "filter"], '#statesBody': ['opacity', 'filter'],
"#statesHalo": ["opacity", "data-width", "stroke-width", "filter"], '#statesHalo': ['opacity', 'data-width', 'stroke-width', 'filter'],
"#provs": ["opacity", "fill", "font-size", "data-font", "font-family", "filter"], '#provs': ['opacity', 'fill', 'font-size', 'data-font', 'font-family', 'filter'],
"#temperature": ["opacity", "font-size", "fill", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"], '#temperature': ['opacity', 'font-size', 'fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter'],
"#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"], '#ice': ['opacity', 'fill', 'stroke', 'stroke-width', 'filter'],
"#emblems": ["opacity", "stroke-width", "filter"], '#emblems': ['opacity', 'stroke-width', 'filter'],
"#texture": ["opacity", "filter", "mask"], '#texture': ['opacity', 'filter', 'mask'],
"#textureImage": ["x", "y"], '#textureImage': ['x', 'y'],
"#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"], '#zones': ['opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'filter', 'mask'],
"#oceanLayers": ["filter", "layers"], '#oceanLayers': ['filter', 'layers'],
"#oceanBase": ["fill"], '#oceanBase': ['fill'],
"#oceanicPattern": ["href", "opacity"], '#oceanicPattern': ['href', 'opacity'],
"#terrs": ["opacity", "scheme", "terracing", "skip", "relax", "curve", "filter", "mask"], '#terrs': ['opacity', 'scheme', 'terracing', 'skip', 'relax', 'curve', 'filter', 'mask'],
"#legend": ["data-size", "font-size", "data-font", "font-family", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "data-x", "data-y", "data-columns"], '#legend': ['data-size', 'font-size', 'data-font', 'font-family', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'data-x', 'data-y', 'data-columns'],
"#legendBox": ["fill", "fill-opacity"], '#legendBox': ['fill', 'fill-opacity'],
"#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "data-font", "font-family"], '#burgLabels > #cities': ['opacity', 'fill', 'text-shadow', 'data-size', 'font-size', 'data-font', 'font-family'],
"#burgIcons > #cities": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], '#burgIcons > #cities': ['opacity', 'fill', 'fill-opacity', 'size', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap'],
"#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"], '#anchors > #cities': ['opacity', 'fill', 'size', 'stroke', 'stroke-width'],
"#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "data-font", "font-family"], '#burgLabels > #towns': ['opacity', 'fill', 'text-shadow', 'data-size', 'font-size', 'data-font', 'font-family'],
"#burgIcons > #towns": ["opacity", "fill", "fill-opacity", "size", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap"], '#burgIcons > #towns': ['opacity', 'fill', 'fill-opacity', 'size', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap'],
"#anchors > #towns": ["opacity", "fill", "size", "stroke", "stroke-width"], '#anchors > #towns': ['opacity', 'fill', 'size', 'stroke', 'stroke-width'],
"#labels > #states": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "data-font", "font-family", "filter"], '#labels > #states': ['opacity', 'fill', 'stroke', 'stroke-width', 'text-shadow', 'data-size', 'font-size', 'data-font', 'font-family', 'filter'],
"#labels > #addedLabels": ["opacity", "fill", "stroke", "stroke-width", "text-shadow", "data-size", "font-size", "data-font", "font-family", "filter"], '#labels > #addedLabels': ['opacity', 'fill', 'stroke', 'stroke-width', 'text-shadow', 'data-size', 'font-size', 'data-font', 'font-family', 'filter'],
"#fogging": ["opacity", "fill", "filter"] '#fogging': ['opacity', 'fill', 'filter']
}; };
for (const selector in attributes) { for (const selector in attributes) {
@ -1133,7 +1142,7 @@ function addStylePreset() {
style[selector] = {}; style[selector] = {};
for (const attr of attributes[selector]) { for (const attr of attributes[selector]) {
let value = el.style[attr] || el.getAttribute(attr); let value = el.style[attr] || el.getAttribute(attr);
if (attr === "font-size" && el.hasAttribute("data-size")) value = el.getAttribute("data-size"); if (attr === 'font-size' && el.hasAttribute('data-size')) value = el.getAttribute('data-size');
style[selector][attr] = parseValue(value); style[selector][attr] = parseValue(value);
} }
} }
@ -1160,41 +1169,41 @@ function addStylePreset() {
} }
function saveStyle() { function saveStyle() {
if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); if (!styleSaverJSON.value) return tip('Please provide a style JSON', false, 'error');
if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); if (!JSON.isValid(styleSaverJSON.value)) return tip('JSON string is not valid, please check the format', false, 'error');
if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); if (!styleSaverName.value) return tip('Please provide a preset name', false, 'error');
if (styleSaverTip.innerHTML === "default") return tip("You cannot overwrite default preset, please change the name", false, "error"); if (styleSaverTip.innerHTML === 'default') return tip('You cannot overwrite default preset, please change the name', false, 'error');
const preset = "style" + styleSaverName.value; const preset = 'style' + styleSaverName.value;
applyOption(stylePreset, preset, styleSaverName.value); // add option applyOption(stylePreset, preset, styleSaverName.value); // add option
localStorage.setItem('presetStyle', preset); // mark preset as default localStorage.setItem('presetStyle', preset); // mark preset as default
localStorage.setItem(preset, styleSaverJSON.value); // save preset localStorage.setItem(preset, styleSaverJSON.value); // save preset
$("#styleSaver").dialog("close"); $('#styleSaver').dialog('close');
removeStyleButton.style.display = "inline-block"; removeStyleButton.style.display = 'inline-block';
tip("Style preset is saved", false, "success", 4000); tip('Style preset is saved', false, 'success', 4000);
} }
function styleDownload() { function styleDownload() {
if (!styleSaverJSON.value) return tip("Please provide a style JSON", false, "error"); if (!styleSaverJSON.value) return tip('Please provide a style JSON', false, 'error');
if (!JSON.isValid(styleSaverJSON.value)) return tip("JSON string is not valid, please check the format", false, "error"); if (!JSON.isValid(styleSaverJSON.value)) return tip('JSON string is not valid, please check the format', false, 'error');
if (!styleSaverName.value) return tip("Please provide a preset name", false, "error"); if (!styleSaverName.value) return tip('Please provide a preset name', false, 'error');
const data = styleSaverJSON.value; const data = styleSaverJSON.value;
if (!data) return tip("Please provide a style JSON", false, "error"); if (!data) return tip('Please provide a style JSON', false, 'error');
downloadFile(data, "style" + styleSaverName.value + ".json", "application/json"); downloadFile(data, 'style' + styleSaverName.value + '.json', 'application/json');
} }
function styleUpload(dataLoaded) { function styleUpload(dataLoaded) {
if (!dataLoaded) return tip("Cannot load the file. Please check the data format", false, "error"); if (!dataLoaded) return tip('Cannot load the file. Please check the data format', false, 'error');
const data = JSON.stringify(JSON.parse(dataLoaded), null, 2); const data = JSON.stringify(JSON.parse(dataLoaded), null, 2);
styleSaverJSON.value = data; styleSaverJSON.value = data;
} }
} }
function removeStylePreset() { function removeStylePreset() {
if (stylePreset.selectedOptions[0].dataset.system) return tip("Cannot remove system preset", false, "error"); if (stylePreset.selectedOptions[0].dataset.system) return tip('Cannot remove system preset', false, 'error');
localStorage.removeItem("presetStyle"); localStorage.removeItem('presetStyle');
localStorage.removeItem(stylePreset.value); localStorage.removeItem(stylePreset.value);
stylePreset.selectedOptions[0].remove(); stylePreset.selectedOptions[0].remove();
removeStyleButton.style.display = 'none'; removeStyleButton.style.display = 'none';
@ -1205,12 +1214,12 @@ 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 + ')');
} }
function updateMapFilter() { function updateMapFilter() {