Vignette layer (#1021)

* 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>

modules/ui/hotkeys.js

@@ -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);

modules/ui/layers.js

@@ -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;

modules/ui/style.js

@@ -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 () {

modules/ui/stylePresets.js

@@ -299,7 +299,9 @@ function addStylePreset() {
         "font-family",
         "filter"
       ],
-      "#fogging": ["opacity", "fill", "filter"]
+      "#fogging": ["opacity", "fill", "filter"],
+      "#vignette": ["opacity", "fill", "filter"],
+      "#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"]
     };
 
     for (const selector in attributes) {