mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 10:01:23 +01:00
refactor(styles): update burg styles for presets
This commit is contained in:
parent
4a08f617bb
commit
c16d292304
18 changed files with 230 additions and 1785 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue