mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 12:01:23 +01:00
feat: vignette layer
This commit is contained in:
Azgaar
parent
425c2954c4
commit
7f60a4a12a
8 changed files with 106 additions and 64 deletions
|
|
@ -710,4 +710,30 @@ export function resolveVersionConflicts(version) {
|
|||
drawTexture();
|
||||
}
|
||||
}
|
||||
|
||||
if (version < 1.95) {
|
||||
// v1.95.00 added vignette visual layer
|
||||
const mask = defs.append("mask").attr("id", "vignette-mask");
|
||||
mask.append("rect").attr("fill", "white").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
|
||||
mask
|
||||
.append("rect")
|
||||
.attr("id", "vignette-rect")
|
||||
.attr("fill", "black")
|
||||
.attr("x", "0.3%")
|
||||
.attr("y", "0.4%")
|
||||
.attr("width", "99.4%")
|
||||
.attr("height", "99.2%")
|
||||
.attr("rx", "5%")
|
||||
.attr("ry", "5%")
|
||||
.attr("filter", "blur(20px)");
|
||||
|
||||
const vignette = svg
|
||||
.append("g")
|
||||
.attr("id", "vignette")
|
||||
.attr("mask", "url(#vignette-mask)")
|
||||
.attr("opacity", 0.3)
|
||||
.attr("fill", "#000000")
|
||||
.style("display", "none");
|
||||
vignette.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ async function quickLoad() {
|
|||
}
|
||||
|
||||
async function loadFromDropbox() {
|
||||
const mapPath = document.getElementById("loadFromDropboxSelect")?.value;
|
||||
const mapPath = byId("loadFromDropboxSelect")?.value;
|
||||
|
||||
DEBUG && console.log("Loading map from Dropbox:", mapPath);
|
||||
const blob = await Cloud.providers.dropbox.load(mapPath);
|
||||
|
|
@ -19,8 +19,8 @@ async function loadFromDropbox() {
|
|||
|
||||
async function createSharableDropboxLink() {
|
||||
const mapFile = document.querySelector("#loadFromDropbox select").value;
|
||||
const sharableLink = document.getElementById("sharableLink");
|
||||
const sharableLinkContainer = document.getElementById("sharableLinkContainer");
|
||||
const sharableLink = byId("sharableLink");
|
||||
const sharableLinkContainer = byId("sharableLinkContainer");
|
||||
|
||||
try {
|
||||
const previewLink = await Cloud.providers.dropbox.getLink(mapFile);
|
||||
|
|
@ -110,7 +110,7 @@ function uploadMap(file, callback) {
|
|||
const fileReader = new FileReader();
|
||||
fileReader.onloadend = async function (fileLoadedEvent) {
|
||||
if (callback) callback();
|
||||
document.getElementById("coas").innerHTML = ""; // remove auto-generated emblems
|
||||
byId("coas").innerHTML = ""; // remove auto-generated emblems
|
||||
const result = fileLoadedEvent.target.result;
|
||||
const [mapData, mapVersion] = await parseLoadedResult(result);
|
||||
|
||||
|
|
@ -408,15 +408,14 @@ async function parseLoadedData(data) {
|
|||
})();
|
||||
|
||||
void (function restoreLayersState() {
|
||||
// helper functions
|
||||
const notHidden = selection => selection.node() && selection.style("display") !== "none";
|
||||
const isVisible = selection => selection.node() && selection.style("display") !== "none";
|
||||
const isVisibleNode = node => node && node.style.display !== "none";
|
||||
const hasChildren = selection => selection.node()?.hasChildNodes();
|
||||
const hasChild = (selection, selector) => selection.node()?.querySelector(selector);
|
||||
const turnOn = el => document.getElementById(el).classList.remove("buttonoff");
|
||||
const turnOn = el => byId(el).classList.remove("buttonoff");
|
||||
|
||||
// turn all layers off
|
||||
document
|
||||
.getElementById("mapLayers")
|
||||
byId("mapLayers")
|
||||
.querySelectorAll("li")
|
||||
.forEach(el => el.classList.add("buttonoff"));
|
||||
|
||||
|
|
@ -427,27 +426,28 @@ async function parseLoadedData(data) {
|
|||
if (hasChildren(cells)) turnOn("toggleCells");
|
||||
if (hasChildren(gridOverlay)) turnOn("toggleGrid");
|
||||
if (hasChildren(coordinates)) turnOn("toggleCoordinates");
|
||||
if (notHidden(compass) && hasChild(compass, "use")) turnOn("toggleCompass");
|
||||
if (isVisible(compass) && hasChild(compass, "use")) turnOn("toggleCompass");
|
||||
if (hasChildren(rivers)) turnOn("toggleRivers");
|
||||
if (notHidden(terrain) && hasChildren(terrain)) turnOn("toggleRelief");
|
||||
if (isVisible(terrain) && hasChildren(terrain)) turnOn("toggleRelief");
|
||||
if (hasChildren(relig)) turnOn("toggleReligions");
|
||||
if (hasChildren(cults)) turnOn("toggleCultures");
|
||||
if (hasChildren(statesBody)) turnOn("toggleStates");
|
||||
if (hasChildren(provs)) turnOn("toggleProvinces");
|
||||
if (hasChildren(zones) && notHidden(zones)) turnOn("toggleZones");
|
||||
if (notHidden(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
|
||||
if (notHidden(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
|
||||
if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones");
|
||||
if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
|
||||
if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
|
||||
if (hasChildren(temperature)) turnOn("toggleTemp");
|
||||
if (hasChild(population, "line")) turnOn("togglePopulation");
|
||||
if (hasChildren(ice)) turnOn("toggleIce");
|
||||
if (hasChild(prec, "circle")) turnOn("togglePrec");
|
||||
if (notHidden(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
|
||||
if (notHidden(labels)) turnOn("toggleLabels");
|
||||
if (notHidden(icons)) turnOn("toggleIcons");
|
||||
if (hasChildren(armies) && notHidden(armies)) turnOn("toggleMilitary");
|
||||
if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
|
||||
if (isVisible(labels)) turnOn("toggleLabels");
|
||||
if (isVisible(icons)) turnOn("toggleIcons");
|
||||
if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
|
||||
if (hasChildren(markers)) turnOn("toggleMarkers");
|
||||
if (notHidden(ruler)) turnOn("toggleRulers");
|
||||
if (notHidden(scaleBar)) turnOn("toggleScaleBar");
|
||||
if (isVisible(ruler)) turnOn("toggleRulers");
|
||||
if (isVisible(scaleBar)) turnOn("toggleScaleBar");
|
||||
if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
|
||||
|
||||
getCurrentPreset();
|
||||
})();
|
||||
|
|
@ -462,7 +462,7 @@ async function parseLoadedData(data) {
|
|||
{
|
||||
// dynamically import and run auto-update script
|
||||
const versionNumber = parseFloat(params[0]);
|
||||
const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.94.00");
|
||||
const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.95.00");
|
||||
resolveVersionConflicts(versionNumber);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ function handleKeyup(event) {
|
|||
else if (code === "KeyK") toggleMarkers();
|
||||
else if (code === "Equal" && !customization) toggleRulers();
|
||||
else if (code === "Slash") toggleScaleBar();
|
||||
else if (code === "BracketLeft") toggleVignette();
|
||||
else if (code === "ArrowLeft") zoom.translateBy(svg, 10, 0);
|
||||
else if (code === "ArrowRight") zoom.translateBy(svg, -10, 0);
|
||||
else if (code === "ArrowUp") zoom.translateBy(svg, 0, 10);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ function getDefaultPresets() {
|
|||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar",
|
||||
"toggleStates"
|
||||
"toggleStates",
|
||||
"toggleVignette"
|
||||
],
|
||||
cultural: [
|
||||
"toggleBorders",
|
||||
|
|
@ -23,7 +24,8 @@ function getDefaultPresets() {
|
|||
"toggleLabels",
|
||||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar"
|
||||
"toggleScaleBar",
|
||||
"toggleVignette"
|
||||
],
|
||||
religions: [
|
||||
"toggleBorders",
|
||||
|
|
@ -32,12 +34,13 @@ function getDefaultPresets() {
|
|||
"toggleReligions",
|
||||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar"
|
||||
"toggleScaleBar",
|
||||
"toggleVignette"
|
||||
],
|
||||
provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar"],
|
||||
biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar"],
|
||||
heightmap: ["toggleHeight", "toggleRivers"],
|
||||
physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"],
|
||||
provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar", "toggleVignette"],
|
||||
biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
|
||||
heightmap: ["toggleHeight", "toggleRivers", "toggleVignette"],
|
||||
physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
|
||||
poi: [
|
||||
"toggleBorders",
|
||||
"toggleHeight",
|
||||
|
|
@ -46,7 +49,8 @@ function getDefaultPresets() {
|
|||
"toggleMarkers",
|
||||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar"
|
||||
"toggleScaleBar",
|
||||
"toggleVignette"
|
||||
],
|
||||
military: [
|
||||
"toggleBorders",
|
||||
|
|
@ -56,7 +60,8 @@ function getDefaultPresets() {
|
|||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar",
|
||||
"toggleStates"
|
||||
"toggleStates",
|
||||
"toggleVignette"
|
||||
],
|
||||
emblems: [
|
||||
"toggleBorders",
|
||||
|
|
@ -66,7 +71,8 @@ function getDefaultPresets() {
|
|||
"toggleRivers",
|
||||
"toggleRoutes",
|
||||
"toggleScaleBar",
|
||||
"toggleStates"
|
||||
"toggleStates",
|
||||
"toggleVignette"
|
||||
],
|
||||
landmass: ["toggleScaleBar"]
|
||||
};
|
||||
|
|
@ -1862,6 +1868,18 @@ function drawEmblems() {
|
|||
TIME && console.timeEnd("drawEmblems");
|
||||
}
|
||||
|
||||
function toggleVignette(event) {
|
||||
if (!layerIsOn("toggleVignette")) {
|
||||
turnButtonOn("toggleVignette");
|
||||
$("#vignette").fadeIn();
|
||||
if (event && isCtrlClick(event)) editStyle("vignette");
|
||||
} else {
|
||||
if (event && isCtrlClick(event)) return editStyle("vignette");
|
||||
$("#vignette").fadeOut();
|
||||
turnButtonOff("toggleVignette");
|
||||
}
|
||||
}
|
||||
|
||||
function layerIsOn(el) {
|
||||
const buttonoff = document.getElementById(el).classList.contains("buttonoff");
|
||||
return !buttonoff;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue