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

feat: vignette style control

Browse source
This commit is contained in:
Azgaar 2023-11-23 04:22:37 +04:00
parent 8aa38d9ace
commit 4e7b07e3e3
4 changed files with 112 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

56
modules/ui/style.js
View file

@ -100,7 +100,7 @@ function selectStyleElement() {
}
// fill
if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(styleElement)) {
if (["rivers", "lakes", "landmass", "prec", "ice", "fogging", "vignette"].includes(styleElement)) {
styleFill.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill");
}
@ -355,6 +355,22 @@ function selectStyleElement() {
const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter"));
if (auto) styleFilter.style.display = "none";
}
if (styleElement === "vignette") {
styleVignette.style.display = "block";
const maskRect = byId("vignette-rect");
if (maskRect) {
const digit = str => str.replace(/[^\d.]/g, "");
styleVignetteX.value = digit(maskRect.getAttribute("x"));
styleVignetteY.value = digit(maskRect.getAttribute("y"));
styleVignetteWidth.value = digit(maskRect.getAttribute("width"));
styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
}
}
}
// Handle style inputs change
@ -471,15 +487,6 @@ styleGridShiftY.addEventListener("input", function () {
if (layerIsOn("toggleGrid")) drawGrid();
});
styleShiftX.addEventListener("input", shiftElement);
styleShiftY.addEventListener("input", shiftElement);
function shiftElement() {
const x = styleShiftX.value || 0;
const y = styleShiftY.value || 0;
getEl().attr("transform", `translate(${x},${y})`);
}
styleRescaleMarkers.addEventListener("change", function () {
markers.attr("rescale", +this.checked);
invokeActiveZooming();
@ -961,6 +968,35 @@ function fetchTextureURL(url) {
img.src = url;
}
styleVignetteX.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("x", `${this.value}%`);
});
styleVignetteWidth.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("width", `${this.value}%`);
});
styleVignetteY.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("y", `${this.value}%`);
});
styleVignetteHeight.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("height", `${this.value}%`);
});
styleVignetteRx.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("rx", `${this.value}%`);
});
styleVignetteRy.addEventListener("input", function () {
byId("vignette-rect")?.setAttribute("ry", `${this.value}%`);
});
styleVignetteBlur.addEventListener("input", function () {
styleVignetteBlurOutput.value = this.value;
byId("vignette-rect")?.setAttribute("filter", `blur(${this.value}px)`);
});
function updateElements() {
// burgIcons to desired size
burgIcons.selectAll("g").each(function () {