refactoring style selectors

This commit is contained in:
Azgaar 2021-04-05 20:56:31 +03:00
parent ab2ca5a3dc
commit 735ad204e4

View file

@ -37,7 +37,7 @@ function selectStyleElement() {
// active group element // active group element
const group = styleGroupSelect.value; const group = styleGroupSelect.value;
if (sel == "routes" || sel == "labels" || sel === "coastline" || sel == "lakes" || sel == "anchors" || sel == "burgIcons" || sel == "borders") { if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
el = d3.select("#"+sel).select("g#"+group).size() el = d3.select("#"+sel).select("g#"+group).size()
? d3.select("#"+sel).select("g#"+group) ? d3.select("#"+sel).select("g#"+group)
: d3.select("#"+sel).select("g"); : d3.select("#"+sel).select("g");
@ -56,13 +56,13 @@ function selectStyleElement() {
} }
// fill // fill
if (sel === "rivers" || sel === "lakes" || sel === "landmass" || sel === "prec" || sel === "ice" || sel === "fogging") { if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) {
styleFill.style.display = "block"; styleFill.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill"); styleFillInput.value = styleFillOutput.value = el.attr("fill");
} }
// stroke color and width // stroke color and width
if (sel === "armies" ||sel === "routes" || sel === "lakes" || sel === "borders" || sel === "cults" || sel === "relig" || sel === "cells" || sel === "gridOverlay" || sel === "coastline" || sel === "prec" || sel === "ice" || sel === "icons" || sel === "coordinates"|| sel === "zones") { if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "gridOverlay", "coastline", "prec", "ice", "icons", "coordinates", "zones"].includes(sel)) {
styleStroke.style.display = "block"; styleStroke.style.display = "block";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke"); styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = "block";
@ -70,14 +70,14 @@ function selectStyleElement() {
} }
// stroke dash // stroke dash
if (sel === "routes" || sel === "borders" || sel === "gridOverlay" || sel === "temperature" || sel === "legend" || sel === "population" || sel === "coordinates"|| sel === "zones") { if (["routes", "borders", "gridOverlay", "temperature", "legend", "population", "coordinates", "zones"].includes(sel)) {
styleStrokeDash.style.display = "block"; styleStrokeDash.style.display = "block";
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || ""; styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit"; styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
} }
// clipping // clipping
if (sel === "cells" || sel === "gridOverlay" || sel === "coordinates" || sel === "compass" || sel === "terrain" || sel === "temperature" || sel === "routes" || sel === "texture" || sel === "biomes"|| sel === "zones") { if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) {
styleClipping.style.display = "block"; styleClipping.style.display = "block";
styleClippingInput.value = el.attr("mask") || ""; styleClippingInput.value = el.attr("mask") || "";
} }
@ -85,7 +85,7 @@ function selectStyleElement() {
// show specific sections // show specific sections
if (sel === "gridOverlay") styleGrid.style.display = "block"; if (sel === "gridOverlay") styleGrid.style.display = "block";
if (sel === "texture") styleTexture.style.display = "block"; if (sel === "texture") styleTexture.style.display = "block";
if (sel === "routes" || sel === "labels" || sel == "anchors" || sel == "burgIcons" || sel === "coastline" || sel === "lakes" || sel === "borders") styleGroup.style.display = "block"; if (sel === "routes", "labels" || sel == "anchors" || sel == "burgIcons", "coastline", "lakes", "borders") styleGroup.style.display = "block";
if (sel === "terrs") { if (sel === "terrs") {
styleHeightmap.style.display = "block"; styleHeightmap.style.display = "block";
@ -250,7 +250,7 @@ function selectStyleElement() {
// update group options // update group options
styleGroupSelect.options.length = 0; // remove all options styleGroupSelect.options.length = 0; // remove all options
if (sel === "routes" || sel === "labels" || sel === "coastline" || sel === "lakes" || sel === "anchors" || sel === "burgIcons" || sel === "borders") { if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
document.getElementById(sel).querySelectorAll("g").forEach(el => { document.getElementById(sel).querySelectorAll("g").forEach(el => {
if (el.id === "burgLabels") return; if (el.id === "burgLabels") return;
const count = el.childElementCount; const count = el.childElementCount;