refactor(styles): update burg styles for presets

This commit is contained in:
Azgaar 2025-03-29 23:29:34 +01:00
parent 4a08f617bb
commit c16d292304
18 changed files with 230 additions and 1785 deletions

View file

@ -53,10 +53,8 @@ function drawBurgIcon(burg) {
}
function createIconGroups() {
const defaultIconStyle = style.burgIcons.town || Object.values(style.burgIcons)[0];
const defaultAnchorStyle = style.anchors.town || Object.values(style.anchors)[0];
// save existing styles and remove all groups
const defaultIconStyle = style.burgIcons.town || Object.values(style.burgIcons)[0];
document.querySelectorAll("g#burgIcons > g").forEach(group => {
const groupStyle = Object.keys(defaultIconStyle).reduce((acc, key) => {
acc[key] = group.getAttribute(key);
@ -66,6 +64,7 @@ function createIconGroups() {
group.remove();
});
const defaultAnchorStyle = style.anchors.town || Object.values(style.anchors)[0];
document.querySelectorAll("g#anchors > g").forEach(group => {
const groupStyle = Object.keys(defaultAnchorStyle).reduce((acc, key) => {
acc[key] = group.getAttribute(key);

View file

@ -129,29 +129,19 @@ function applySorting(headers) {
}
function moveBurgToGroup(id, g) {
const label = document.querySelector("#burgLabels [data-id='" + id + "']");
const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
const anchor = document.querySelector("#anchors [data-id='" + id + "']");
if (!label || !icon) {
ERROR && console.error(`Cannot find label or icon elements for id ${id}`);
return;
}
const label = document.querySelector(`#burgLabels [data-id='${id}']`);
const icon = document.querySelector(`#burgIcons [data-id='${id}']`);
const anchor = document.querySelector(`#anchors [data-id='${id}']`);
if (!label || !icon) return tip("Cannot find label or icon for burg " + id, false, "error");
document.querySelector("#burgLabels > #" + g).appendChild(label);
document.querySelector("#burgIcons > #" + g).appendChild(icon);
if (anchor) document.querySelector("#anchors > #" + g).appendChild(anchor);
const iconSize = icon.parentNode.getAttribute("size");
icon.setAttribute("r", iconSize);
label.setAttribute("dy", `${iconSize * -1.5}px`);
if (anchor) {
document.querySelector("#anchors > #" + g).appendChild(anchor);
const anchorSize = +anchor.parentNode.getAttribute("size");
anchor.setAttribute("width", anchorSize);
anchor.setAttribute("height", anchorSize);
anchor.setAttribute("x", rn(pack.burgs[id].x - anchorSize * 0.47, 2));
anchor.setAttribute("y", rn(pack.burgs[id].y - anchorSize * 0.47, 2));
}
icon.setAttribute("href", icon.parentElement.dataset.icon);
const {dx, dy} = label.parentElement.dataset;
dx ? label.setAttribute("dx", dx + "em") : label.removeAttribute("dx");
dy ? label.setAttribute("dy", dy + "em") : label.removeAttribute("dy");
}
function moveAllBurgsToGroup(fromGroup, toGroup) {

View file

@ -74,17 +74,17 @@ async function fetchSystemPreset(preset) {
function applyStyle(styleJSON) {
for (const selector in styleJSON) {
if (selector.startsWith("#burgLabels")) {
const group = selector.replace("#burgLabels > g#", "");
const group = selector.split("#").pop();
style.burgLabels[group] = styleJSON[selector];
}
if (selector.startsWith("#burgIcons")) {
const group = selector.replace("#burgIcons > g#", "");
const group = selector.split("#").pop();
style.burgIcons[group] = styleJSON[selector];
}
if (selector.startsWith("#anchors")) {
const group = selector.replace("#anchors > g#", "");
const group = selector.split("#").pop();
style.anchors[group] = styleJSON[selector];
}
@ -142,6 +142,10 @@ async function changeStyle(desiredPreset) {
localStorage.setItem("presetStyle", presetName);
applyStyleWithUiRefresh(style);
if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
if (layerIsOn("toggleLabels")) {
drawBurgLabels();
drawStateLabels();
}
}
function applyStyleWithUiRefresh(style) {

View file

@ -271,7 +271,7 @@ function selectStyleElement() {
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
styleShadowInput.value = el.style("text-shadow") || "";
styleFont.style.display = "block";
styleSelectFont.value = el.attr("font-family");
@ -769,10 +769,7 @@ stylePopulationUrbanStrokeInput.on("input", e => {
});
styleBurgIconsIcon.on("change", e => {
getEl()
.attr("data-icon", e.target.value)
.selectAll("use")
.attr("href", d => e.target.value);
getEl().attr("data-icon", e.target.value).selectAll("use").attr("href", e.target.value);
});
styleBurgIconsIconSize.on("input", e => {