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

Vignette layer (#1021)

Browse source 
* feat: vignette (non-editable yet)

* feat: vignette style control

* feat: vignette layer

* feat: vignette - save styles

* feat: vignette - style presets

* feat: vignette - style presets

* feat: vignette - style presets

---------

Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
Azgaar 2023-11-28 02:26:55 +04:00 • committed by GitHub
parent 537abf1223
commit 24ecd1dbf7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 396 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

102
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,81 @@ function fetchTextureURL(url) {
img.src = url;
}
const vignettePresets = {
default: `{ "#vignette": { "opacity": 0.3, "fill": "#000000", "filter": null }, "#vignette-rect": { "x": "0.3%", "y": "0.4%", "width": "99.6%", "height": "99.2%", "rx": "5%", "ry": "5%", "filter": "blur(20px)" } }`,
neon: `{ "#vignette": { "opacity": 0.5, "fill": "#7300ff", "filter": null }, "#vignette-rect": { "x": "0.3%", "y": "0.4%", "width": "99.6%", "height": "99.2%", "rx": "0%", "ry": "0%", "filter": "blur(15px)" } }`,
smoke: `{ "#vignette": { "opacity": 1, "fill": "#000000", "filter": "url(#splotch)" }, "#vignette-rect": { "x": "3%", "y": "5%", "width": "96%", "height": "90%", "rx": "10%", "ry": "10%", "filter": "blur(100px)" } }`,
wound: `{ "#vignette": { "opacity": 0.8, "fill": "#ff0000", "filter": "url(#paper)"}, "#vignette-rect": {"x": "0.5%", "y": "1%", "width": "99%", "height": "98%", "rx": "5%", "ry": "5%", "filter": "blur(50px)" } }`,
paper: `{ "#vignette": { "opacity": 1, "fill": "#000000", "filter": "url(#paper)" }, "#vignette-rect": { "x": "0.3%", "y": "0.4%", "width": "99.6%", "height": "99.2%", "rx": "20%", "ry": "20%", "filter": "blur(150px)" } }`,
granite: `{ "#vignette": { "opacity": 0.95, "fill": "#231b1b", "filter": "url(#crumpled)" }, "#vignette-rect": { "x": "3%", "y": "5%", "width": "94%", "height": "90%", "rx": "20%", "ry": "20%", "filter": "blur(150px)" } }`,
spotlight: `{ "#vignette": { "opacity": 0.96, "fill": "#000000", "filter": null }, "#vignette-rect": { "x": "20%", "y": "30%", "width": "24%", "height": "30%", "rx": "50%", "ry": "50%", "filter": "blur(30px) "} }`
};
Object.keys(vignettePresets).forEach(preset => {
styleVignettePreset.options.add(new Option(preset, preset, false, false));
});
styleVignettePreset.addEventListener("change", function () {
const attributes = JSON.parse(vignettePresets[this.value]);
for (const selector in attributes) {
const el = document.querySelector(selector);
if (!el) continue;
for (const attr in attributes[selector]) {
const value = attributes[selector][attr];
el.setAttribute(attr, value);
}
}
const vignette = byId("vignette");
if (vignette) {
styleOpacityInput.value = styleOpacityOutput.value = vignette.getAttribute("opacity");
styleFillInput.value = styleFillOutput.value = vignette.getAttribute("fill");
styleFilterInput.value = vignette.getAttribute("filter");
}
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"));
}
});
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 () {