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

feat: letter-spacing - improve UI, refactor

Browse source
This commit is contained in:
Azgaar 2024-09-01 14:14:06 +02:00
parent 2fea87344b
commit 4f066c6dc1
3 changed files with 141 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -2694,14 +2694,15 @@
data-tip="Hide the letter spacing section"
class="icon-text-width"
></button>
<input
<slider-input
id="labelLetterSpacingSize"
data-tip="Set the letter spacing size for the particular label"
type="range"
style="display: inline-block"
data-tip="Set the letter spacing size for this label"
min="0"
max="80"
style="width: 8em"
/>
max="20"
step=".01"
value="0"
></slider-input>
</div>
<button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>

112
modules/ui/labels-editor.js
View file

@ -26,32 +26,32 @@ function editLabel() {
modules.editLabel = true;
// add listeners
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
byId("labelGroupShow").on("click", showGroupSection);
byId("labelGroupHide").on("click", hideGroupSection);
byId("labelGroupSelect").on("click", changeGroup);
byId("labelGroupInput").on("change", createNewGroup);
byId("labelGroupNew").on("click", toggleNewGroupInput);
byId("labelGroupRemove").on("click", removeLabelsGroup);
document.getElementById("labelTextShow").addEventListener("click", showTextSection);
document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
document.getElementById("labelText").addEventListener("input", changeText);
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
byId("labelTextShow").on("click", showTextSection);
byId("labelTextHide").on("click", hideTextSection);
byId("labelText").on("input", changeText);
byId("labelTextRandom").on("click", generateRandomName);
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
byId("labelEditStyle").on("click", editGroupStyle);
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
byId("labelSizeShow").on("click", showSizeSection);
byId("labelSizeHide").on("click", hideSizeSection);
byId("labelStartOffset").on("input", changeStartOffset);
byId("labelRelativeSize").on("input", changeRelativeSize);
document.getElementById("labelLetterSpacingShow").addEventListener("click", showLetterSpacingSection);
document.getElementById("labelLetterSpacingHide").addEventListener("click", hideLetterSpacingSection);
document.getElementById("labelLetterSpacingSize").addEventListener("input", changeLetterSpacingSize);
byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
byId("labelAlign").on("click", editLabelAlign);
byId("labelLegend").on("click", editLabelLegend);
byId("labelRemoveSingle").on("click", removeLabel);
function showEditorTips() {
showMainTip();
@ -66,12 +66,12 @@ function editLabel() {
const group = text.parentNode.id;
if (group === "states" || group === "burgLabels") {
document.getElementById("labelGroupShow").style.display = "none";
byId("labelGroupShow").style.display = "none";
return;
}
hideGroupSection();
const select = document.getElementById("labelGroupSelect");
const select = byId("labelGroupSelect");
select.options.length = 0; // remove all options
labels.selectAll(":scope > g").each(function () {
@ -82,19 +82,17 @@ function editLabel() {
}
function updateValues(textPath) {
document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
.map(tspan => tspan.textContent)
.join("|");
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
let letterSpacingSize = (textPath.getAttribute("letter-spacing")) ? textPath.getAttribute("letter-spacing") : 0;
document.getElementById("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
}
function drawControlPointsAndLine() {
debug.select("#controlPoints").remove();
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
const path = document.getElementById("textPath_" + elSelected.attr("id"));
const path = byId("textPath_" + elSelected.attr("id"));
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
const l = path.getTotalLength();
if (!l) return;
@ -123,7 +121,7 @@ function editLabel() {
}
function redrawLabelPath() {
const path = document.getElementById("textPath_" + elSelected.attr("id"));
const path = byId("textPath_" + elSelected.attr("id"));
lineGen.curve(d3.curveBundle.beta(1));
const points = [];
debug
@ -194,19 +192,19 @@ function editLabel() {
function showGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelGroupSection").style.display = "inline-block";
byId("labelGroupSection").style.display = "inline-block";
}
function hideGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelGroupSection").style.display = "none";
document.getElementById("labelGroupInput").style.display = "none";
document.getElementById("labelGroupInput").value = "";
document.getElementById("labelGroupSelect").style.display = "inline-block";
byId("labelGroupSection").style.display = "none";
byId("labelGroupInput").style.display = "none";
byId("labelGroupInput").value = "";
byId("labelGroupSelect").style.display = "inline-block";
}
function changeGroup() {
document.getElementById(this.value).appendChild(elSelected.node());
byId(this.value).appendChild(elSelected.node());
}
function toggleNewGroupInput() {
@ -230,7 +228,7 @@ function editLabel() {
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) {
if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
@ -243,22 +241,22 @@ function editLabel() {
// just rename if only 1 element left
const oldGroup = elSelected.node().parentNode;
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
document.getElementById("labelGroupSelect").selectedOptions[0].remove();
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
byId("labelGroupSelect").selectedOptions[0].remove();
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
oldGroup.id = group;
toggleNewGroupInput();
document.getElementById("labelGroupInput").value = "";
byId("labelGroupInput").value = "";
return;
}
const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("labels").appendChild(newGroup);
byId("labels").appendChild(newGroup);
newGroup.id = group;
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node());
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
byId(group).appendChild(elSelected.node());
toggleNewGroupInput();
document.getElementById("labelGroupInput").value = "";
byId("labelGroupInput").value = "";
}
function removeLabelsGroup() {
@ -281,7 +279,7 @@ function editLabel() {
.select("#" + group)
.selectAll("text")
.each(function () {
document.getElementById("textPath_" + this.id).remove();
byId("textPath_" + this.id).remove();
this.remove();
});
if (!basic) labels.select("#" + group).remove();
@ -295,16 +293,16 @@ function editLabel() {
function showTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelTextSection").style.display = "inline-block";
byId("labelTextSection").style.display = "inline-block";
}
function hideTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelTextSection").style.display = "none";
byId("labelTextSection").style.display = "none";
}
function changeText() {
const input = document.getElementById("labelText").value;
const input = byId("labelText").value;
const el = elSelected.select("textPath").node();
const lines = input.split("|");
@ -329,7 +327,7 @@ function editLabel() {
const culture = pack.cells.culture[cell];
name = Names.getCulture(culture);
}
document.getElementById("labelText").value = name;
byId("labelText").value = name;
changeText();
}
@ -340,22 +338,22 @@ function editLabel() {
function showSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelSizeSection").style.display = "inline-block";
byId("labelSizeSection").style.display = "inline-block";
}
function hideSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelSizeSection").style.display = "none";
byId("labelSizeSection").style.display = "none";
}
function showLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelLetterSpacingSection").style.display = "inline-block";
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
byId("labelLetterSpacingSection").style.display = "inline-block";
}
function hideLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelLetterSpacingSection").style.display = "none";
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
byId("labelLetterSpacingSection").style.display = "none";
}
function changeStartOffset() {

158
modules/ui/style.js
View file

@ -18,7 +18,7 @@
}
// store some style inputs as options
styleElements.addEventListener("change", function (ev) {
styleElements.on("change", function (ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
});
@ -71,7 +71,7 @@ function getColorScheme(scheme = "bright") {
}
// Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement);
styleElementSelect.on("change", selectStyleElement);
function selectStyleElement() {
const styleElement = styleElementSelect.value;
@ -409,7 +409,7 @@ function selectStyleElement() {
}
// Handle style inputs change
styleGroupSelect.addEventListener("change", selectStyleElement);
styleGroupSelect.on("change", selectStyleElement);
function getEl() {
const el = styleElementSelect.value;
@ -418,46 +418,46 @@ function getEl() {
else return svg.select("#" + el).select("#" + g);
}
styleFillInput.addEventListener("input", function () {
styleFillInput.on("input", function () {
styleFillOutput.value = this.value;
getEl().attr("fill", this.value);
});
styleStrokeInput.addEventListener("input", function () {
styleStrokeInput.on("input", function () {
styleStrokeOutput.value = this.value;
getEl().attr("stroke", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleStrokeWidthInput.addEventListener("input", e => {
styleStrokeWidthInput.on("input", e => {
getEl().attr("stroke-width", e.target.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleLetterSpacingInput.addEventListener("input", e => {
styleLetterSpacingInput.on("input", e => {
getEl().attr("letter-spacing", e.target.value);
});
styleStrokeDasharrayInput.addEventListener("input", function () {
styleStrokeDasharrayInput.on("input", function () {
getEl().attr("stroke-dasharray", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleStrokeLinecapInput.addEventListener("change", function () {
styleStrokeLinecapInput.on("change", function () {
getEl().attr("stroke-linecap", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleOpacityInput.addEventListener("input", e => {
styleOpacityInput.on("input", e => {
getEl().attr("opacity", e.target.value);
});
styleFilterInput.addEventListener("change", function () {
styleFilterInput.on("change", function () {
if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
getEl().attr("filter", this.value);
});
styleTextureInput.addEventListener("change", function () {
styleTextureInput.on("change", function () {
changeTexture(this.value);
});
@ -476,7 +476,7 @@ function updateTextureSelectValue(href) {
}
}
styleTextureShiftX.addEventListener("input", function () {
styleTextureShiftX.on("input", function () {
texture.attr("data-x", this.value);
texture
.select("image")
@ -484,7 +484,7 @@ styleTextureShiftX.addEventListener("input", function () {
.attr("width", graphWidth - this.valueAsNumber);
});
styleTextureShiftY.addEventListener("input", function () {
styleTextureShiftY.on("input", function () {
texture.attr("data-y", this.value);
texture
.select("image")
@ -492,17 +492,17 @@ styleTextureShiftY.addEventListener("input", function () {
.attr("height", graphHeight - this.valueAsNumber);
});
styleClippingInput.addEventListener("change", function () {
styleClippingInput.on("change", function () {
getEl().attr("mask", this.value);
});
styleGridType.addEventListener("change", function () {
styleGridType.on("change", function () {
getEl().attr("type", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize();
});
styleGridScale.addEventListener("input", function () {
styleGridScale.on("input", function () {
getEl().attr("scale", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
calculateFriendlyGridSize();
@ -514,52 +514,52 @@ function calculateFriendlyGridSize() {
styleGridSizeFriendly.value = friendly;
}
styleGridShiftX.addEventListener("input", function () {
styleGridShiftX.on("input", function () {
getEl().attr("dx", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
});
styleGridShiftY.addEventListener("input", function () {
styleGridShiftY.on("input", function () {
getEl().attr("dy", this.value);
if (layerIsOn("toggleGrid")) drawGrid();
});
styleRescaleMarkers.addEventListener("change", function () {
styleRescaleMarkers.on("change", function () {
markers.attr("rescale", +this.checked);
invokeActiveZooming();
});
styleCoastlineAuto.addEventListener("change", function () {
styleCoastlineAuto.on("change", function () {
coastline.select("#sea_island").attr("auto-filter", +this.checked);
styleFilter.style.display = this.checked ? "none" : "block";
invokeActiveZooming();
});
styleOceanFill.addEventListener("input", function () {
styleOceanFill.on("input", function () {
oceanLayers.select("rect").attr("fill", this.value);
styleOceanFillOutput.value = this.value;
});
styleOceanPattern.addEventListener("change", function () {
styleOceanPattern.on("change", function () {
byId("oceanicPattern")?.setAttribute("href", this.value);
});
styleOceanPatternOpacity.addEventListener("input", e => {
styleOceanPatternOpacity.on("input", e => {
byId("oceanicPattern").setAttribute("opacity", e.target.value);
});
outlineLayers.addEventListener("change", function () {
outlineLayers.on("change", function () {
oceanLayers.selectAll("path").remove();
oceanLayers.attr("layers", this.value);
OceanLayers();
});
styleHeightmapScheme.addEventListener("change", function () {
styleHeightmapScheme.on("change", function () {
getEl().attr("scheme", this.value);
drawHeightmap();
});
openCreateHeightmapSchemeButton.addEventListener("click", function () {
openCreateHeightmapSchemeButton.on("click", function () {
// start with current scheme
const scheme = getEl().attr("scheme");
this.dataset.stops = scheme.startsWith("#")
@ -678,97 +678,97 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
});
});
styleHeightmapRenderOcean.addEventListener("change", e => {
styleHeightmapRenderOcean.on("change", e => {
const checked = +e.target.checked;
getEl().attr("data-render", checked);
drawHeightmap();
});
styleHeightmapTerracing.addEventListener("input", e => {
styleHeightmapTerracing.on("input", e => {
getEl().attr("terracing", e.target.value);
drawHeightmap();
});
styleHeightmapSkip.addEventListener("input", e => {
styleHeightmapSkip.on("input", e => {
getEl().attr("skip", e.target.value);
drawHeightmap();
});
styleHeightmapSimplification.addEventListener("input", e => {
styleHeightmapSimplification.on("input", e => {
getEl().attr("relax", e.target.value);
drawHeightmap();
});
styleHeightmapCurve.addEventListener("change", e => {
styleHeightmapCurve.on("change", e => {
getEl().attr("curve", e.target.value);
drawHeightmap();
});
styleReliefSet.addEventListener("change", e => {
styleReliefSet.on("change", e => {
terrain.attr("set", e.target.value);
ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief();
});
styleReliefSize.addEventListener("change", e => {
styleReliefSize.on("change", e => {
terrain.attr("size", e.target.value);
ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief();
});
styleReliefDensity.addEventListener("change", e => {
styleReliefDensity.on("change", e => {
terrain.attr("density", e.target.value);
ReliefIcons.draw();
if (!layerIsOn("toggleRelief")) toggleRelief();
});
styleTemperatureFillOpacityInput.addEventListener("input", e => {
styleTemperatureFillOpacityInput.on("input", e => {
temperature.attr("fill-opacity", e.target.value);
});
styleTemperatureFontSizeInput.addEventListener("input", e => {
styleTemperatureFontSizeInput.on("input", e => {
temperature.attr("font-size", e.target.value + "px");
});
styleTemperatureFillInput.addEventListener("input", e => {
styleTemperatureFillInput.on("input", e => {
temperature.attr("fill", e.target.value);
styleTemperatureFillOutput.value = e.target.value;
});
stylePopulationRuralStrokeInput.addEventListener("input", e => {
stylePopulationRuralStrokeInput.on("input", e => {
population.select("#rural").attr("stroke", e.target.value);
stylePopulationRuralStrokeOutput.value = e.target.value;
});
stylePopulationUrbanStrokeInput.addEventListener("input", e => {
stylePopulationUrbanStrokeInput.on("input", e => {
population.select("#urban").attr("stroke", e.target.value);
stylePopulationUrbanStrokeOutput.value = e.target.value;
});
styleCompassSizeInput.addEventListener("input", shiftCompass);
styleCompassShiftX.addEventListener("input", shiftCompass);
styleCompassShiftY.addEventListener("input", shiftCompass);
styleCompassSizeInput.on("input", shiftCompass);
styleCompassShiftX.on("input", shiftCompass);
styleCompassShiftY.on("input", shiftCompass);
function shiftCompass() {
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
compass.select("use").attr("transform", tr);
}
styleLegendColItems.addEventListener("input", e => {
styleLegendColItems.on("input", e => {
legend.select("#legendBox").attr("data-columns", e.target.value);
redrawLegend();
});
styleLegendBack.addEventListener("input", e => {
styleLegendBack.on("input", e => {
styleLegendBackOutput.value = e.target.value;
legend.select("#legendBox").attr("fill", e.target.value);
});
styleLegendOpacity.addEventListener("input", e => {
styleLegendOpacity.on("input", e => {
legend.select("#legendBox").attr("fill-opacity", e.target.value);
});
styleSelectFont.addEventListener("change", changeFont);
styleSelectFont.on("change", changeFont);
function changeFont() {
const family = styleSelectFont.value;
getEl().attr("font-family", family);
@ -776,11 +776,11 @@ function changeFont() {
if (styleElementSelect.value === "legend") redrawLegend();
}
styleShadowInput.addEventListener("input", function () {
styleShadowInput.on("input", function () {
getEl().style("text-shadow", this.value);
});
styleFontAdd.addEventListener("click", function () {
styleFontAdd.on("click", function () {
addFontNameInput.value = "";
addFontURLInput.value = "";
@ -817,20 +817,20 @@ styleFontAdd.addEventListener("click", function () {
});
});
addFontMethod.addEventListener("change", function () {
addFontMethod.on("change", function () {
addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
});
styleFontSize.addEventListener("change", function () {
styleFontSize.on("change", function () {
changeFontSize(getEl(), +this.value);
});
styleFontPlus.addEventListener("click", function () {
styleFontPlus.on("click", function () {
const current = +styleFontSize.value || 12;
changeFontSize(getEl(), Math.min(current + 1, 999));
});
styleFontMinus.addEventListener("click", function () {
styleFontMinus.on("click", function () {
const current = +styleFontSize.value || 12;
changeFontSize(getEl(), Math.max(current - 1, 1));
});
@ -853,16 +853,16 @@ function changeFontSize(el, size) {
if (styleElementSelect.value === "legend") redrawLegend();
}
styleRadiusInput.addEventListener("change", function () {
styleRadiusInput.on("change", function () {
changeRadius(+this.value);
});
styleRadiusPlus.addEventListener("click", function () {
styleRadiusPlus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeRadius(size);
});
styleRadiusMinus.addEventListener("click", function () {
styleRadiusMinus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeRadius(size);
});
@ -884,16 +884,16 @@ function changeRadius(size, group) {
changeIconSize(size * 2, g); // change also anchor icons
}
styleIconSizeInput.addEventListener("change", function () {
styleIconSizeInput.on("change", function () {
changeIconSize(+this.value);
});
styleIconSizePlus.addEventListener("click", function () {
styleIconSizePlus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
changeIconSize(size);
});
styleIconSizeMinus.addEventListener("click", function () {
styleIconSizeMinus.on("click", function () {
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
changeIconSize(size);
});
@ -918,34 +918,34 @@ function changeIconSize(size, group) {
styleIconSizeInput.value = size;
}
styleStatesBodyOpacity.addEventListener("input", e => {
styleStatesBodyOpacity.on("input", e => {
statesBody.attr("opacity", e.target.value);
});
styleStatesBodyFilter.addEventListener("change", function () {
styleStatesBodyFilter.on("change", function () {
statesBody.attr("filter", this.value);
});
styleStatesHaloWidth.addEventListener("input", e => {
styleStatesHaloWidth.on("input", e => {
const value = e.target.value;
statesHalo.attr("data-width", value).attr("stroke-width", value);
});
styleStatesHaloOpacity.addEventListener("input", e => {
styleStatesHaloOpacity.on("input", e => {
statesHalo.attr("opacity", e.target.value);
});
styleStatesHaloBlur.addEventListener("input", e => {
styleStatesHaloBlur.on("input", e => {
const value = Number(e.target.value);
const blur = value > 0 ? `blur(${value}px)` : null;
statesHalo.attr("filter", blur);
});
styleArmiesFillOpacity.addEventListener("input", e => {
styleArmiesFillOpacity.on("input", e => {
armies.attr("fill-opacity", e.target.value);
});
styleArmiesSize.addEventListener("input", e => {
styleArmiesSize.on("input", e => {
const value = Number(e.target.value);
armies.attr("box-size", value).attr("font-size", value * 2);
@ -956,17 +956,17 @@ styleArmiesSize.addEventListener("input", e => {
});
});
emblemsStateSizeInput.addEventListener("change", e => {
emblemsStateSizeInput.on("change", e => {
emblems.select("#stateEmblems").attr("data-size", e.target.value);
drawEmblems();
});
emblemsProvinceSizeInput.addEventListener("change", e => {
emblemsProvinceSizeInput.on("change", e => {
emblems.select("#provinceEmblems").attr("data-size", e.target.value);
drawEmblems();
});
emblemsBurgSizeInput.addEventListener("change", e => {
emblemsBurgSizeInput.on("change", e => {
emblems.select("#burgEmblems").attr("data-size", e.target.value);
drawEmblems();
});
@ -1021,7 +1021,7 @@ Object.keys(vignettePresets).forEach(preset => {
styleVignettePreset.options.add(new Option(preset, preset, false, false));
});
styleVignettePreset.addEventListener("change", function () {
styleVignettePreset.on("change", function () {
const attributes = JSON.parse(vignettePresets[this.value]);
for (const selector in attributes) {
@ -1053,35 +1053,35 @@ styleVignettePreset.addEventListener("change", function () {
}
});
styleVignetteX.addEventListener("input", e => {
styleVignetteX.on("input", e => {
byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
});
styleVignetteWidth.addEventListener("input", e => {
styleVignetteWidth.on("input", e => {
byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
});
styleVignetteY.addEventListener("input", e => {
styleVignetteY.on("input", e => {
byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
});
styleVignetteHeight.addEventListener("input", e => {
styleVignetteHeight.on("input", e => {
byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
});
styleVignetteRx.addEventListener("input", e => {
styleVignetteRx.on("input", e => {
byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
});
styleVignetteRy.addEventListener("input", e => {
styleVignetteRy.on("input", e => {
byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
});
styleVignetteBlur.addEventListener("input", e => {
styleVignetteBlur.on("input", e => {
byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
});
styleScaleBar.addEventListener("input", function (event) {
styleScaleBar.on("input", function (event) {
const scaleBarBack = scaleBar.select("#scaleBarBack");
if (!scaleBarBack.size()) return;
@ -1161,7 +1161,7 @@ function updateElements() {
}
// GLOBAL FILTERS
mapFilters.addEventListener("click", applyMapFilter);
mapFilters.on("click", applyMapFilter);
function applyMapFilter(event) {
if (event.target.tagName !== "BUTTON") return;
const button = event.target;