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

fix some merge issues

Browse source
This commit is contained in:
Azgaar 2021-07-05 23:21:02 +03:00 • committed by Peter
parent f8bc33ba29
commit 1e227642c8
3 changed files with 499 additions and 501 deletions
Download patch file Download diff file Expand all files Collapse all files

488
main.js
View file

File diff suppressed because it is too large Load diff

158
modules/io/export.js
View file

@ -10,18 +10,18 @@ async function saveSVG() {
link.href = url; link.href = url;
link.click(); link.click();
tip(`${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`, true, "success", 5000); tip(`${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`, true, 'success', 5000);
TIME && console.timeEnd("saveSVG"); TIME && console.timeEnd('saveSVG');
} }
// download map as PNG // download map as PNG
async function savePNG() { async function savePNG() {
TIME && console.time("savePNG"); TIME && console.time('savePNG');
const url = await getMapURL("png"); const url = await getMapURL('png');
const link = document.createElement("a"); const link = document.createElement('a');
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext('2d');
canvas.width = svgWidth * pngResolutionInput.value; canvas.width = svgWidth * pngResolutionInput.value;
canvas.height = svgHeight * pngResolutionInput.value; canvas.height = svgHeight * pngResolutionInput.value;
const img = new Image(); const img = new Image();
@ -29,45 +29,45 @@ async function savePNG() {
img.onload = function () { img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
link.download = getFileName() + ".png"; link.download = getFileName() + '.png';
canvas.toBlob(function (blob) { canvas.toBlob(function (blob) {
link.href = window.URL.createObjectURL(blob); link.href = window.URL.createObjectURL(blob);
link.click(); link.click();
window.setTimeout(function () { window.setTimeout(function () {
canvas.remove(); canvas.remove();
window.URL.revokeObjectURL(link.href); window.URL.revokeObjectURL(link.href);
tip(`${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`, true, "success", 5000); tip(`${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`, true, 'success', 5000);
}, 1000); }, 1000);
}); });
}; };
TIME && console.timeEnd("savePNG"); TIME && console.timeEnd('savePNG');
} }
// download map as JPEG // download map as JPEG
async function saveJPEG() { async function saveJPEG() {
TIME && console.time("saveJPEG"); TIME && console.time('saveJPEG');
const url = await getMapURL("png"); const url = await getMapURL('png');
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
canvas.width = svgWidth * pngResolutionInput.value; canvas.width = svgWidth * pngResolutionInput.value;
canvas.height = svgHeight * pngResolutionInput.value; canvas.height = svgHeight * pngResolutionInput.value;
const img = new Image(); const img = new Image();
img.src = url; img.src = url;
img.onload = async function () { img.onload = async function () {
canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height); canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
const quality = Math.min(rn(1 - pngResolutionInput.value / 20, 2), 0.92); const quality = Math.min(rn(1 - pngResolutionInput.value / 20, 2), 0.92);
const URL = await canvas.toDataURL("image/jpeg", quality); const URL = await canvas.toDataURL('image/jpeg', quality);
const link = document.createElement("a"); const link = document.createElement('a');
link.download = getFileName() + ".jpeg"; link.download = getFileName() + '.jpeg';
link.href = URL; link.href = URL;
link.click(); link.click();
tip(`${link.download} is saved. Open "Downloads" screen (CTRL + J) to check`, true, "success", 7000); tip(`${link.download} is saved. Open "Downloads" screen (CTRL + J) to check`, true, 'success', 7000);
window.setTimeout(() => window.URL.revokeObjectURL(URL), 5000); window.setTimeout(() => window.URL.revokeObjectURL(URL), 5000);
}; };
TIME && console.timeEnd("saveJPEG"); TIME && console.timeEnd('saveJPEG');
} }
// download map as png tiles // download map as png tiles
@ -78,8 +78,8 @@ async function saveTiles() {
await import("../../libs/jszip.min.js"); await import("../../libs/jszip.min.js");
const zip = new window.JSZip(); const zip = new window.JSZip();
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext('2d');
canvas.width = graphWidth; canvas.width = graphWidth;
canvas.height = graphHeight; canvas.height = graphHeight;
@ -87,7 +87,7 @@ async function saveTiles() {
imgSchema.src = urlSchema; imgSchema.src = urlSchema;
imgSchema.onload = function () { imgSchema.onload = function () {
ctx.drawImage(imgSchema, 0, 0, canvas.width, canvas.height); ctx.drawImage(imgSchema, 0, 0, canvas.width, canvas.height);
canvas.toBlob(blob => zip.file(`fmg_tile_schema.png`, blob)); canvas.toBlob((blob) => zip.file(`fmg_tile_schema.png`, blob));
}; };
// download tiles // download tiles
@ -113,7 +113,7 @@ async function saveTiles() {
for (let x = 0; x + tileW <= graphWidth; x += tileW, i++) { for (let x = 0; x + tileW <= graphWidth; x += tileW, i++) {
ctx.drawImage(img, x, y, tileW, tileH, 0, 0, width, height); ctx.drawImage(img, x, y, tileW, tileH, 0, 0, width, height);
const name = `fmg_tile_${i}.png`; const name = `fmg_tile_${i}.png`;
canvas.toBlob(blob => { canvas.toBlob((blob) => {
zip.file(name, blob); zip.file(name, blob);
loaded += 1; loaded += 1;
if (loaded === tolesTotal) return downloadZip(); if (loaded === tolesTotal) return downloadZip();
@ -124,8 +124,8 @@ async function saveTiles() {
function downloadZip() { function downloadZip() {
const name = `${getFileName()}.zip`; const name = `${getFileName()}.zip`;
zip.generateAsync({type: "blob"}).then(blob => { zip.generateAsync({type: 'blob'}).then((blob) => {
const link = document.createElement("a"); const link = document.createElement('a');
link.href = URL.createObjectURL(blob); link.href = URL.createObjectURL(blob);
link.download = name; link.download = name;
link.click(); link.click();
@ -150,8 +150,8 @@ async function getMapURL(type, options = {}) {
const clone = d3.select(cloneEl); const clone = d3.select(cloneEl);
if (!debug) clone.select("#debug")?.remove(); if (!debug) clone.select("#debug")?.remove();
const cloneDefs = cloneEl.getElementsByTagName("defs")[0]; const cloneDefs = cloneEl.getElementsByTagName('defs')[0];
const svgDefs = document.getElementById("defElements"); const svgDefs = document.getElementById('defElements');
const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1; const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
if (isFirefox && type === "mesh") clone.select("#oceanPattern")?.remove(); if (isFirefox && type === "mesh") clone.select("#oceanPattern")?.remove();
@ -174,21 +174,21 @@ async function getMapURL(type, options = {}) {
drawScaleBar(scale); drawScaleBar(scale);
} }
if (type === "svg") removeUnusedElements(clone); if (type === 'svg') removeUnusedElements(clone);
if (customization && type === "mesh") updateMeshCells(clone); if (customization && type === 'mesh') updateMeshCells(clone);
inlineStyle(clone); inlineStyle(clone);
// remove unused filters // remove unused filters
const filters = cloneEl.querySelectorAll("filter"); const filters = cloneEl.querySelectorAll('filter');
for (let i = 0; i < filters.length; i++) { for (let i = 0; i < filters.length; i++) {
const id = filters[i].id; const id = filters[i].id;
if (cloneEl.querySelector("[filter='url(#" + id + ")']")) continue; if (cloneEl.querySelector("[filter='url(#" + id + ")']")) continue;
if (cloneEl.getAttribute("filter") === "url(#" + id + ")") continue; if (cloneEl.getAttribute('filter') === 'url(#' + id + ')') continue;
filters[i].remove(); filters[i].remove();
} }
// remove unused patterns // remove unused patterns
const patterns = cloneEl.querySelectorAll("pattern"); const patterns = cloneEl.querySelectorAll('pattern');
for (let i = 0; i < patterns.length; i++) { for (let i = 0; i < patterns.length; i++) {
const id = patterns[i].id; const id = patterns[i].id;
if (cloneEl.querySelector("[fill='url(#" + id + ")']")) continue; if (cloneEl.querySelector("[fill='url(#" + id + ")']")) continue;
@ -196,7 +196,7 @@ async function getMapURL(type, options = {}) {
} }
// remove unused symbols // remove unused symbols
const symbols = cloneEl.querySelectorAll("symbol"); const symbols = cloneEl.querySelectorAll('symbol');
for (let i = 0; i < symbols.length; i++) { for (let i = 0; i < symbols.length; i++) {
const id = symbols[i].id; const id = symbols[i].id;
if (cloneEl.querySelector("use[*|href='#" + id + "']")) continue; if (cloneEl.querySelector("use[*|href='#" + id + "']")) continue;
@ -204,20 +204,22 @@ async function getMapURL(type, options = {}) {
} }
// add displayed emblems // add displayed emblems
if (layerIsOn("toggleEmblems") && emblems.selectAll("use").size()) { if (layerIsOn('toggleEmblems') && emblems.selectAll('use').size()) {
cloneEl cloneEl
.getElementById("emblems") .getElementById('emblems')
?.querySelectorAll("use") ?.querySelectorAll('use')
.forEach(el => { .forEach((el) => {
const href = el.getAttribute("href") || el.getAttribute("xlink:href"); const href = el.getAttribute('href') || el.getAttribute('xlink:href');
if (!href) return; if (!href) return;
const emblem = document.getElementById(href.slice(1)); const emblem = document.getElementById(href.slice(1));
if (emblem) cloneDefs.append(emblem.cloneNode(true)); if (emblem) cloneDefs.append(emblem.cloneNode(true));
}); });
} else { } else {
cloneDefs.querySelector("#defs-emblems")?.remove(); cloneDefs.querySelector('#defs-emblems')?.remove();
} }
// add resources TODO
// replace ocean pattern href to base64 // replace ocean pattern href to base64
if (location.hostname && cloneEl.getElementById("oceanicPattern")) { if (location.hostname && cloneEl.getElementById("oceanicPattern")) {
const el = cloneEl.getElementById("oceanicPattern"); const el = cloneEl.getElementById("oceanicPattern");
@ -231,15 +233,15 @@ async function getMapURL(type, options = {}) {
} }
// add relief icons // add relief icons
if (cloneEl.getElementById("terrain")) { if (cloneEl.getElementById('terrain')) {
const uniqueElements = new Set(); const uniqueElements = new Set();
const terrainNodes = cloneEl.getElementById("terrain").childNodes; const terrainNodes = cloneEl.getElementById('terrain').childNodes;
for (let i = 0; i < terrainNodes.length; i++) { for (let i = 0; i < terrainNodes.length; i++) {
const href = terrainNodes[i].getAttribute("href") || terrainNodes[i].getAttribute("xlink:href"); const href = terrainNodes[i].getAttribute('href') || terrainNodes[i].getAttribute('xlink:href');
uniqueElements.add(href); uniqueElements.add(href);
} }
const defsRelief = svgDefs.getElementById("defs-relief"); const defsRelief = svgDefs.getElementById('defs-relief');
for (const terrain of [...uniqueElements]) { for (const terrain of [...uniqueElements]) {
const element = defsRelief.querySelector(terrain); const element = defsRelief.querySelector(terrain);
if (element) cloneDefs.appendChild(element.cloneNode(true)); if (element) cloneDefs.appendChild(element.cloneNode(true));
@ -247,21 +249,21 @@ async function getMapURL(type, options = {}) {
} }
// add wind rose // add wind rose
if (cloneEl.getElementById("compass")) { if (cloneEl.getElementById('compass')) {
const rose = svgDefs.getElementById("rose"); const rose = svgDefs.getElementById('rose');
if (rose) cloneDefs.appendChild(rose.cloneNode(true)); if (rose) cloneDefs.appendChild(rose.cloneNode(true));
} }
// add port icon // add port icon
if (cloneEl.getElementById("anchors")) { if (cloneEl.getElementById('anchors')) {
const anchor = svgDefs.getElementById("icon-anchor"); const anchor = svgDefs.getElementById('icon-anchor');
if (anchor) cloneDefs.appendChild(anchor.cloneNode(true)); if (anchor) cloneDefs.appendChild(anchor.cloneNode(true));
} }
// add grid pattern // add grid pattern
if (cloneEl.getElementById("gridOverlay")?.hasChildNodes()) { if (cloneEl.getElementById('gridOverlay')?.hasChildNodes()) {
const type = cloneEl.getElementById("gridOverlay").getAttribute("type"); const type = cloneEl.getElementById('gridOverlay').getAttribute('type');
const pattern = svgDefs.getElementById("pattern_" + type); const pattern = svgDefs.getElementById('pattern_' + type);
if (pattern) cloneDefs.appendChild(pattern.cloneNode(true)); if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
} }
@ -316,7 +318,7 @@ async function getMapURL(type, options = {}) {
clone.remove(); clone.remove();
const serialized = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>` + new XMLSerializer().serializeToString(cloneEl); const serialized = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>` + new XMLSerializer().serializeToString(cloneEl);
const blob = new Blob([serialized], {type: "image/svg+xml;charset=utf-8"}); const blob = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'});
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
window.setTimeout(() => window.URL.revokeObjectURL(url), 5000); window.setTimeout(() => window.URL.revokeObjectURL(url), 5000);
return url; return url;
@ -328,12 +330,12 @@ function removeUnusedElements(clone) {
for (let empty = 1; empty; ) { for (let empty = 1; empty; ) {
empty = 0; empty = 0;
clone.selectAll("g").each(function () { clone.selectAll('g').each(function () {
if (!this.hasChildNodes() || this.style.display === "none" || this.classList.contains("hidden")) { if (!this.hasChildNodes() || this.style.display === 'none' || this.classList.contains('hidden')) {
empty++; empty++;
this.remove(); this.remove();
} }
if (this.hasAttribute("display") && this.style.display === "inline") this.removeAttribute("display"); if (this.hasAttribute('display') && this.style.display === 'inline') this.removeAttribute('display');
}); });
} }
} }
@ -343,65 +345,65 @@ function updateMeshCells(clone) {
const scheme = getColorScheme(terrs.attr("scheme")); const scheme = getColorScheme(terrs.attr("scheme"));
clone.select("#heights").attr("filter", "url(#blur1)"); clone.select("#heights").attr("filter", "url(#blur1)");
clone clone
.select("#heights") .select('#heights')
.selectAll("polygon") .selectAll('polygon')
.data(data) .data(data)
.join("polygon") .join('polygon')
.attr("points", d => getGridPolygon(d)) .attr('points', (d) => getGridPolygon(d))
.attr("id", d => "cell" + d) .attr('id', (d) => 'cell' + d)
.attr("stroke", d => getColor(grid.cells.h[d], scheme)); .attr('stroke', (d) => getColor(grid.cells.h[d], scheme));
} }
// for each g element get inline style // for each g element get inline style
function inlineStyle(clone) { function inlineStyle(clone) {
const emptyG = clone.append("g").node(); const emptyG = clone.append('g').node();
const defaultStyles = window.getComputedStyle(emptyG); const defaultStyles = window.getComputedStyle(emptyG);
clone.selectAll("g, #ruler *, #scaleBar > text").each(function () { clone.selectAll('g, #ruler *, #scaleBar > text').each(function () {
const compStyle = window.getComputedStyle(this); const compStyle = window.getComputedStyle(this);
let style = ""; let style = '';
for (let i = 0; i < compStyle.length; i++) { for (let i = 0; i < compStyle.length; i++) {
const key = compStyle[i]; const key = compStyle[i];
const value = compStyle.getPropertyValue(key); const value = compStyle.getPropertyValue(key);
// Firefox mask hack // Firefox mask hack
if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) { if (key === 'mask-image' && value !== defaultStyles.getPropertyValue(key)) {
style += "mask-image: url('#land');"; style += "mask-image: url('#land');";
continue; continue;
} }
if (key === "cursor") continue; // cursor should be default if (key === 'cursor') continue; // cursor should be default
if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute
if (value === defaultStyles.getPropertyValue(key)) continue; if (value === defaultStyles.getPropertyValue(key)) continue;
style += key + ":" + value + ";"; style += key + ':' + value + ';';
} }
for (const key in compStyle) { for (const key in compStyle) {
const value = compStyle.getPropertyValue(key); const value = compStyle.getPropertyValue(key);
if (key === "cursor") continue; // cursor should be default if (key === 'cursor') continue; // cursor should be default
if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute
if (value === defaultStyles.getPropertyValue(key)) continue; if (value === defaultStyles.getPropertyValue(key)) continue;
style += key + ":" + value + ";"; style += key + ':' + value + ';';
} }
if (style != "") this.setAttribute("style", style); if (style != '') this.setAttribute('style', style);
}); });
emptyG.remove(); emptyG.remove();
} }
function saveGeoJSON_Cells() { function saveGeoJSON_Cells() {
const json = {type: "FeatureCollection", features: []}; const json = {type: 'FeatureCollection', features: []};
const cells = pack.cells; const cells = pack.cells;
const getPopulation = i => { const getPopulation = (i) => {
const [r, u] = getCellPopulation(i); const [r, u] = getCellPopulation(i);
return rn(r + u); return rn(r + u);
}; };
const getHeight = i => parseInt(getFriendlyHeight([cells.p[i][0], cells.p[i][1]])); const getHeight = (i) => parseInt(getFriendlyHeight([cells.p[i][0], cells.p[i][1]]));
cells.i.forEach(i => { cells.i.forEach((i) => {
const coordinates = getCellCoordinates(cells.v[i]); const coordinates = getCellCoordinates(cells.v[i]);
const height = getHeight(i); const height = getHeight(i);
const biome = cells.biome[i]; const biome = cells.biome[i];
@ -414,7 +416,7 @@ function saveGeoJSON_Cells() {
const neighbors = cells.c[i]; const neighbors = cells.c[i];
const properties = {id: i, height, biome, type, population, state, province, culture, religion, neighbors}; const properties = {id: i, height, biome, type, population, state, province, culture, religion, neighbors};
const feature = {type: "Feature", geometry: {type: "Polygon", coordinates}, properties}; const feature = {type: 'Feature', geometry: {type: 'Polygon', coordinates}, properties};
json.features.push(feature); json.features.push(feature);
}); });
@ -423,14 +425,14 @@ function saveGeoJSON_Cells() {
} }
function saveGeoJSON_Routes() { function saveGeoJSON_Routes() {
const json = {type: "FeatureCollection", features: []}; const json = {type: 'FeatureCollection', features: []};
routes.selectAll("g > path").each(function () { routes.selectAll('g > path').each(function () {
const coordinates = getRoutePoints(this); const coordinates = getRoutePoints(this);
const id = this.id; const id = this.id;
const type = this.parentElement.id; const type = this.parentElement.id;
const feature = {type: "Feature", geometry: {type: "LineString", coordinates}, properties: {id, type}}; const feature = {type: 'Feature', geometry: {type: 'LineString', coordinates}, properties: {id, type}};
json.features.push(feature); json.features.push(feature);
}); });
@ -439,7 +441,7 @@ function saveGeoJSON_Routes() {
} }
function saveGeoJSON_Rivers() { function saveGeoJSON_Rivers() {
const json = {type: "FeatureCollection", features: []}; const json = {type: 'FeatureCollection', features: []};
rivers.selectAll("path").each(function () { rivers.selectAll("path").each(function () {
const river = pack.rivers.find(r => r.i === +this.id.slice(5)); const river = pack.rivers.find(r => r.i === +this.id.slice(5));

354
modules/ui/style.js
View file

@ -17,7 +17,7 @@
} }
// store some style inputs as options // store some style inputs as options
styleElements.addEventListener("change", function (ev) { styleElements.addEventListener('change', function (ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored); if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
}); });
@ -41,7 +41,7 @@ function editStyle(element, group) {
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
@ -102,13 +102,13 @@ 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') {
@ -186,29 +186,29 @@ function selectStyleElement() {
styleFontSize.value = el.attr("data-size"); styleFontSize.value = el.attr("data-size");
} }
if (sel == "burgIcons") { if (sel == 'burgIcons') {
styleFill.style.display = "block"; styleFill.style.display = 'block';
styleStroke.style.display = "block"; styleStroke.style.display = 'block';
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = 'block';
styleStrokeDash.style.display = "block"; styleStrokeDash.style.display = 'block';
styleRadius.style.display = "block"; styleRadius.style.display = 'block';
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff"; styleFillInput.value = styleFillOutput.value = el.attr('fill') || '#ffffff';
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b"; styleStrokeInput.value = styleStrokeOutput.value = el.attr('stroke') || '#3e3e4b';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 0.24;
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';
styleRadiusInput.value = el.attr("size") || 1; styleRadiusInput.value = el.attr('size') || 1;
} }
if (sel == "anchors") { if (sel == 'anchors') {
styleFill.style.display = "block"; styleFill.style.display = 'block';
styleStroke.style.display = "block"; styleStroke.style.display = 'block';
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = 'block';
styleIconSize.style.display = "block"; styleIconSize.style.display = 'block';
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff"; styleFillInput.value = styleFillOutput.value = el.attr('fill') || '#ffffff';
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b"; styleStrokeInput.value = styleStrokeOutput.value = el.attr('stroke') || '#3e3e4b';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 0.24;
styleIconSizeInput.value = el.attr("size") || 2; styleIconSizeInput.value = el.attr('size') || 2;
} }
if (sel === "legend") { if (sel === "legend") {
@ -229,21 +229,21 @@ function selectStyleElement() {
styleFontSize.value = el.attr("data-size"); styleFontSize.value = el.attr("data-size");
} }
if (sel === "ocean") { if (sel === 'ocean') {
styleOcean.style.display = "block"; styleOcean.style.display = 'block';
styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill"); styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select('#oceanBase').attr('fill');
styleOceanPattern.value = document.getElementById("oceanicPattern")?.getAttribute("href"); styleOceanPattern.value = document.getElementById('oceanicPattern')?.getAttribute('href');
styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value = document.getElementById("oceanicPattern").getAttribute("opacity") || 1; styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value = document.getElementById('oceanicPattern').getAttribute('opacity') || 1;
outlineLayers.value = oceanLayers.attr("layers"); outlineLayers.value = oceanLayers.attr('layers');
} }
if (sel === "temperature") { if (sel === 'temperature') {
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = 'block';
styleTemperature.style.display = "block"; styleTemperature.style.display = 'block';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || ""; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || '';
styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || 0.1; styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr('fill-opacity') || 0.1;
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000"; styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr('fill') || '#000';
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px"; styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr('font-size') || '8px';
} }
if (sel === 'coordinates') { if (sel === 'coordinates') {
@ -286,10 +286,10 @@ function selectStyleElement() {
styleGroup.style.display = "none"; styleGroup.style.display = "none";
} }
if (sel === "coastline" && styleGroupSelect.value === "sea_island") { if (sel === 'coastline' && styleGroupSelect.value === 'sea_island') {
styleCoastline.style.display = "block"; styleCoastline.style.display = 'block';
const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter")); const auto = (styleCoastlineAuto.checked = coastline.select('#sea_island').attr('auto-filter'));
if (auto) styleFilter.style.display = "none"; if (auto) styleFilter.style.display = 'none';
} }
} }
@ -303,36 +303,36 @@ function getEl() {
else return svg.select("#" + el).select("#" + g); else return svg.select("#" + el).select("#" + g);
} }
styleFillInput.addEventListener("input", function () { styleFillInput.addEventListener('input', function () {
styleFillOutput.value = this.value; styleFillOutput.value = this.value;
getEl().attr("fill", this.value); getEl().attr('fill', this.value);
}); });
styleStrokeInput.addEventListener("input", function () { styleStrokeInput.addEventListener('input', function () {
styleStrokeOutput.value = this.value; styleStrokeOutput.value = this.value;
getEl().attr("stroke", this.value); getEl().attr('stroke', this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === 'gridOverlay' && layerIsOn('toggleGrid')) drawGrid();
}); });
styleStrokeWidthInput.addEventListener("input", function () { styleStrokeWidthInput.addEventListener('input', function () {
styleStrokeWidthOutput.value = this.value; styleStrokeWidthOutput.value = this.value;
getEl().attr("stroke-width", +this.value); getEl().attr('stroke-width', +this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === 'gridOverlay' && layerIsOn('toggleGrid')) drawGrid();
}); });
styleStrokeDasharrayInput.addEventListener("input", function () { styleStrokeDasharrayInput.addEventListener('input', function () {
getEl().attr("stroke-dasharray", this.value); getEl().attr('stroke-dasharray', this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === 'gridOverlay' && layerIsOn('toggleGrid')) drawGrid();
}); });
styleStrokeLinecapInput.addEventListener("change", function () { styleStrokeLinecapInput.addEventListener('change', function () {
getEl().attr("stroke-linecap", this.value); getEl().attr('stroke-linecap', this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid(); if (styleElementSelect.value === 'gridOverlay' && layerIsOn('toggleGrid')) drawGrid();
}); });
styleOpacityInput.addEventListener("input", function () { styleOpacityInput.addEventListener('input', function () {
styleOpacityOutput.value = this.value; styleOpacityOutput.value = this.value;
getEl().attr("opacity", this.value); getEl().attr('opacity', this.value);
}); });
styleFilterInput.addEventListener("change", function () { styleFilterInput.addEventListener("change", function () {
@ -345,33 +345,33 @@ styleTextureInput.addEventListener("change", function () {
else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64)); else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
}); });
styleTextureShiftX.addEventListener("input", function () { styleTextureShiftX.addEventListener('input', function () {
texture texture
.select("image") .select('image')
.attr("x", this.value) .attr('x', this.value)
.attr("width", graphWidth - this.valueAsNumber); .attr('width', graphWidth - this.valueAsNumber);
}); });
styleTextureShiftY.addEventListener("input", function () { styleTextureShiftY.addEventListener('input', function () {
texture texture
.select("image") .select('image')
.attr("y", this.value) .attr('y', this.value)
.attr("height", graphHeight - this.valueAsNumber); .attr('height', graphHeight - this.valueAsNumber);
}); });
styleClippingInput.addEventListener("change", function () { styleClippingInput.addEventListener('change', function () {
getEl().attr("mask", this.value); getEl().attr('mask', this.value);
}); });
styleGridType.addEventListener("change", function () { styleGridType.addEventListener('change', function () {
getEl().attr("type", this.value); getEl().attr('type', this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn('toggleGrid')) drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
}); });
styleGridScale.addEventListener("input", function () { styleGridScale.addEventListener('input', function () {
getEl().attr("scale", this.value); getEl().attr('scale', this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn('toggleGrid')) drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
}); });
@ -381,14 +381,14 @@ function calculateFriendlyGridSize() {
styleGridSizeFriendly.value = friendly; styleGridSizeFriendly.value = friendly;
} }
styleGridShiftX.addEventListener("input", function () { styleGridShiftX.addEventListener('input', function () {
getEl().attr("dx", this.value); getEl().attr('dx', this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn('toggleGrid')) drawGrid();
}); });
styleGridShiftY.addEventListener("input", function () { styleGridShiftY.addEventListener('input', function () {
getEl().attr("dy", this.value); getEl().attr('dy', this.value);
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn('toggleGrid')) drawGrid();
}); });
styleShiftX.addEventListener('input', shiftElement); styleShiftX.addEventListener('input', shiftElement);
@ -400,64 +400,64 @@ function shiftElement() {
getEl().attr('transform', `translate(${x},${y})`); getEl().attr('transform', `translate(${x},${y})`);
} }
styleRescaleMarkers.addEventListener("change", function () { styleRescaleMarkers.addEventListener('change', function () {
markers.attr("rescale", +this.checked); markers.attr('rescale', +this.checked);
invokeActiveZooming(); invokeActiveZooming();
}); });
styleCoastlineAuto.addEventListener("change", function () { styleCoastlineAuto.addEventListener('change', function () {
coastline.select("#sea_island").attr("auto-filter", +this.checked); coastline.select('#sea_island').attr('auto-filter', +this.checked);
styleFilter.style.display = this.checked ? "none" : "block"; styleFilter.style.display = this.checked ? 'none' : 'block';
invokeActiveZooming(); invokeActiveZooming();
}); });
styleOceanFill.addEventListener("input", function () { styleOceanFill.addEventListener('input', function () {
oceanLayers.select("rect").attr("fill", this.value); oceanLayers.select('rect').attr('fill', this.value);
styleOceanFillOutput.value = this.value; styleOceanFillOutput.value = this.value;
}); });
styleOceanPattern.addEventListener("change", function () { styleOceanPattern.addEventListener('change', function () {
document.getElementById("oceanicPattern")?.setAttribute("href", this.value); document.getElementById('oceanicPattern')?.setAttribute('href', this.value);
}); });
styleOceanPatternOpacity.addEventListener("input", function () { styleOceanPatternOpacity.addEventListener('input', function () {
document.getElementById("oceanicPattern").setAttribute("opacity", this.value); document.getElementById('oceanicPattern').setAttribute('opacity', this.value);
styleOceanPatternOpacityOutput.value = this.value; styleOceanPatternOpacityOutput.value = this.value;
}); });
outlineLayers.addEventListener("change", function () { outlineLayers.addEventListener('change', function () {
oceanLayers.selectAll("path").remove(); oceanLayers.selectAll('path').remove();
oceanLayers.attr("layers", this.value); oceanLayers.attr('layers', this.value);
OceanLayers(); OceanLayers();
}); });
styleHeightmapScheme.addEventListener("change", function () { styleHeightmapScheme.addEventListener('change', function () {
terrs.attr("scheme", this.value); terrs.attr('scheme', this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapTerracingInput.addEventListener("input", function () { styleHeightmapTerracingInput.addEventListener('input', function () {
terrs.attr("terracing", this.value); terrs.attr('terracing', this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSkipInput.addEventListener("input", function () { styleHeightmapSkipInput.addEventListener('input', function () {
terrs.attr("skip", this.value); terrs.attr('skip', this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapSimplificationInput.addEventListener("input", function () { styleHeightmapSimplificationInput.addEventListener('input', function () {
terrs.attr("relax", this.value); terrs.attr('relax', this.value);
drawHeightmap(); drawHeightmap();
}); });
styleHeightmapCurve.addEventListener("change", function () { styleHeightmapCurve.addEventListener('change', function () {
terrs.attr("curve", this.value); terrs.attr('curve', this.value);
drawHeightmap(); drawHeightmap();
}); });
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();
}); });
@ -476,32 +476,32 @@ styleReliefDensityInput.addEventListener("change", function () {
if (!layerIsOn('toggleRelief')) toggleRelief(); if (!layerIsOn('toggleRelief')) toggleRelief();
}); });
styleTemperatureFillOpacityInput.addEventListener("input", function () { styleTemperatureFillOpacityInput.addEventListener('input', function () {
temperature.attr("fill-opacity", this.value); temperature.attr('fill-opacity', this.value);
styleTemperatureFillOpacityOutput.value = this.value; styleTemperatureFillOpacityOutput.value = this.value;
}); });
styleTemperatureFontSizeInput.addEventListener("input", function () { styleTemperatureFontSizeInput.addEventListener('input', function () {
temperature.attr("font-size", this.value + "px"); temperature.attr('font-size', this.value + 'px');
styleTemperatureFontSizeOutput.value = this.value + "px"; styleTemperatureFontSizeOutput.value = this.value + 'px';
}); });
styleTemperatureFillInput.addEventListener("input", function () { styleTemperatureFillInput.addEventListener('input', function () {
temperature.attr("fill", this.value); temperature.attr('fill', this.value);
styleTemperatureFillOutput.value = this.value; styleTemperatureFillOutput.value = this.value;
}); });
stylePopulationRuralStrokeInput.addEventListener("input", function () { stylePopulationRuralStrokeInput.addEventListener('input', function () {
population.select("#rural").attr("stroke", this.value); population.select('#rural').attr('stroke', this.value);
stylePopulationRuralStrokeOutput.value = this.value; stylePopulationRuralStrokeOutput.value = this.value;
}); });
stylePopulationUrbanStrokeInput.addEventListener("input", function () { stylePopulationUrbanStrokeInput.addEventListener('input', function () {
population.select("#urban").attr("stroke", this.value); population.select('#urban').attr('stroke', this.value);
stylePopulationUrbanStrokeOutput.value = this.value; stylePopulationUrbanStrokeOutput.value = this.value;
}); });
styleCompassSizeInput.addEventListener("input", function () { styleCompassSizeInput.addEventListener('input', function () {
styleCompassSizeOutput.value = this.value; styleCompassSizeOutput.value = this.value;
shiftCompass(); shiftCompass();
}); });
@ -514,18 +514,18 @@ function shiftCompass() {
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);
}); });
@ -538,8 +538,8 @@ function changeFont() {
if (styleElementSelect.value === "legend") redrawLegend(); if (styleElementSelect.value === "legend") redrawLegend();
} }
styleShadowInput.addEventListener("input", function () { styleShadowInput.addEventListener('input', function () {
getEl().style("text-shadow", this.value); getEl().style('text-shadow', this.value);
}); });
styleFontAdd.addEventListener("click", function () { styleFontAdd.addEventListener("click", function () {
@ -612,48 +612,48 @@ function changeFontSize(el, size) {
if (styleElementSelect.value === "legend") redrawLegend(); if (styleElementSelect.value === "legend") redrawLegend();
} }
styleRadiusInput.addEventListener("change", function () { styleRadiusInput.addEventListener('change', function () {
changeRadius(+this.value); changeRadius(+this.value);
}); });
styleRadiusPlus.addEventListener("click", function () { styleRadiusPlus.addEventListener('click', function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); const size = Math.max(rn(getEl().attr('size') * 1.1, 2), 0.2);
changeRadius(size); changeRadius(size);
}); });
styleRadiusMinus.addEventListener("click", function () { styleRadiusMinus.addEventListener('click', function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); const size = Math.max(rn(getEl().attr('size') * 0.9, 2), 0.2);
changeRadius(size); changeRadius(size);
}); });
function changeRadius(size, group) { function changeRadius(size, group) {
const el = group ? burgIcons.select("#" + group) : getEl(); const el = group ? burgIcons.select('#' + group) : getEl();
const g = el.attr("id"); const g = el.attr('id');
el.attr("size", size); el.attr('size', size);
el.selectAll("circle").each(function () { el.selectAll('circle').each(function () {
this.setAttribute("r", size); this.setAttribute('r', size);
}); });
styleRadiusInput.value = size; styleRadiusInput.value = size;
burgLabels burgLabels
.select("g#" + g) .select('g#' + g)
.selectAll("text") .selectAll('text')
.each(function () { .each(function () {
this.setAttribute("dy", `${size * -1.5}px`); this.setAttribute('dy', `${size * -1.5}px`);
}); });
changeIconSize(size * 2, g); // change also anchor icons changeIconSize(size * 2, g); // change also anchor icons
} }
styleIconSizeInput.addEventListener("change", function () { styleIconSizeInput.addEventListener('change', function () {
changeIconSize(+this.value); changeIconSize(+this.value);
}); });
styleIconSizePlus.addEventListener("click", function () { styleIconSizePlus.addEventListener('click', function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); const size = Math.max(rn(getEl().attr('size') * 1.1, 2), 0.2);
changeIconSize(size); changeIconSize(size);
}); });
styleIconSizeMinus.addEventListener("click", function () { styleIconSizeMinus.addEventListener('click', function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); const size = Math.max(rn(getEl().attr('size') * 0.9, 2), 0.2);
changeIconSize(size); changeIconSize(size);
}); });
@ -665,14 +665,14 @@ function changeIconSize(size, group) {
} }
const oldSize = +el.attr("size"); const oldSize = +el.attr("size");
const shift = (size - oldSize) / 2; const shift = (size - oldSize) / 2;
el.attr("size", size); el.attr('size', size);
el.selectAll("use").each(function () { el.selectAll('use').each(function () {
const x = +this.getAttribute("x"); const x = +this.getAttribute('x');
const y = +this.getAttribute("y"); const y = +this.getAttribute('y');
this.setAttribute("x", x - shift); this.setAttribute('x', x - shift);
this.setAttribute("y", y - shift); this.setAttribute('y', y - shift);
this.setAttribute("width", size); this.setAttribute('width', size);
this.setAttribute("height", size); this.setAttribute('height', size);
}); });
styleIconSizeInput.value = size; styleIconSizeInput.value = size;
} }
@ -691,7 +691,7 @@ styleStatesHaloWidth.addEventListener("input", function () {
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);
}); });
@ -707,8 +707,8 @@ styleArmiesFillOpacity.addEventListener("input", function () {
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) => {
@ -732,18 +732,18 @@ function textureProvideURL() {
alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture: alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture:
<input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" /> <input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" />
<canvas id="texturePreview" width="256px" height="144px"></canvas>`; <canvas id="texturePreview" width="256px" height="144px"></canvas>`;
$("#alert").dialog({ $('#alert').dialog({
resizable: false, resizable: false,
title: "Load custom texture", title: 'Load custom texture',
width: "26em", width: '26em',
buttons: { buttons: {
Apply: function () { Apply: function () {
const name = textureURL.value.split("/").pop(); const name = textureURL.value.split('/').pop();
if (!name || name === "") { if (!name || name === '') {
tip("Please provide a valid URL", false, "error"); tip('Please provide a valid URL', false, 'error');
return; return;
} }
const opt = document.createElement("option"); const opt = document.createElement('option');
opt.value = textureURL.value; opt.value = textureURL.value;
opt.text = name.slice(0, 20); opt.text = name.slice(0, 20);
styleTextureInput.add(opt); styleTextureInput.add(opt);
@ -753,7 +753,7 @@ function textureProvideURL() {
$(this).dialog('close'); $(this).dialog('close');
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog('close');
} }
} }
}); });
@ -776,31 +776,31 @@ function updateElements() {
burgIcons.selectAll("g").each(function () { burgIcons.selectAll("g").each(function () {
const size = +this.getAttribute("size"); const size = +this.getAttribute("size");
d3.select(this) d3.select(this)
.selectAll("circle") .selectAll('circle')
.each(function () { .each(function () {
this.setAttribute("r", size); this.setAttribute('r', size);
}); });
burgLabels burgLabels
.select("g#" + this.id) .select('g#' + this.id)
.selectAll("text") .selectAll('text')
.each(function () { .each(function () {
this.setAttribute("dy", `${size * -1.5}px`); this.setAttribute('dy', `${size * -1.5}px`);
}); });
}); });
// anchor icons to desired size // anchor icons to desired size
anchors.selectAll("g").each(function (d) { anchors.selectAll('g').each(function (d) {
const size = +this.getAttribute("size"); const size = +this.getAttribute('size');
d3.select(this) d3.select(this)
.selectAll("use") .selectAll('use')
.each(function () { .each(function () {
const id = +this.dataset.id; const id = +this.dataset.id;
const x = pack.burgs[id].x, const x = pack.burgs[id].x,
y = pack.burgs[id].y; y = pack.burgs[id].y;
this.setAttribute("x", rn(x - size * 0.47, 2)); this.setAttribute('x', rn(x - size * 0.47, 2));
this.setAttribute("y", rn(y - size * 0.47, 2)); this.setAttribute('y', rn(y - size * 0.47, 2));
this.setAttribute("width", size); this.setAttribute('width', size);
this.setAttribute("height", size); this.setAttribute('height', size);
}); });
}); });