feat: vignette style control

index.css

@@ -169,6 +169,7 @@ t,
 #temperature,
 #texture,
 #landmass,
+#vignette,
 #fogging {
   pointer-events: none;
 }

index.html

@@ -362,7 +362,18 @@
 
         <mask id="vignette-mask">
           <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
-          <rect x="0" y="0" width="100%" height="100%" fill="black" filter="blur(50px)" rx="5%" ry="5%"></rect>
+          <rect
+            id="vignette-rect"
+            transform="translate(25%, 25%)"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+            fill="black"
+            filter="blur(50px)"
+            rx="5%"
+            ry="5%"
+          ></rect>
         </mask>
       </defs>
       <g id="viewbox"></g>
@@ -793,6 +804,7 @@
             <option value="regions" selected>States</option>
             <option value="temperature">Temperature</option>
             <option value="texture">Texture</option>
+            <option value="vignette">Vignette</option>
             <option value="compass">Wind Rose</option>
             <option value="zones">Zones</option>
           </select>
@@ -917,6 +929,44 @@
               </tr>
             </tbody>
 
+            <tbody id="styleVignette">
+              <tr data-tip="Vignette rectangle position (in percents)">
+                <td>Position</td>
+                <td style="display: flex; flex-direction: column; gap: 2px">
+                  <div>
+                    <span>x </span>
+                    <input id="styleVignetteX" type="number" min="0" max="100" style="width: 5em" />
+                    <span>width&nbsp; </span>
+                    <input id="styleVignetteWidth" type="number" min="0" max="100" style="width: 5em" />
+                  </div>
+                  <div>
+                    <span>y </span>
+                    <input id="styleVignetteY" type="number" min="0" max="100" style="width: 5em" />
+                    <span>height </span>
+                    <input id="styleVignetteHeight" type="number" min="0" max="100" style="width: 5em" />
+                  </div>
+                </td>
+              </tr>
+
+              <tr data-tip="Set vignette X and Y radius (in percents)">
+                <td>Radius</td>
+                <td>
+                  <span>x </span>
+                  <input id="styleVignetteRx" type="number" min="0" max="50" style="width: 5em" />
+                  <span>y </span>
+                  <input id="styleVignetteRy" type="number" min="0" max="50" style="width: 5em" />
+                </td>
+              </tr>
+
+              <tr data-tip="Set vignette blue propagation (in pixels)">
+                <td>Blur</td>
+                <td>
+                  <input id="styleVignetteBlur" type="range" min="0" max="400" step="1" value="50" />
+                  <output id="styleVignetteBlurOutput">50</output>px
+                </td>
+              </tr>
+            </tbody>
+
             <tbody id="styleOcean">
               <tr data-tip="Select ocean pattern">
                 <td>Pattern</td>
@@ -998,16 +1048,6 @@
               </tr>
             </tbody>
 
-            <tbody id="styleShift">
-              <tr data-tip="Shift the element by axes">
-                <td>Shift by axes</td>
-                <td>
-                  <input id="styleShiftX" type="number" data-tip="Shift by x axis in pixels" />
-                  <input id="styleShiftY" type="number" data-tip="Shift by y axis in pixels" />
-                </td>
-              </tr>
-            </tbody>
-
             <tbody id="styleCompass">
               <tr data-tip="Set wind (compass) rose size">
                 <td>Size</td>

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

styles/default.json

@@ -384,5 +384,19 @@
     "opacity": 0.98,
     "fill": "#30426f",
     "filter": null
+  },
+  "#vignette": {
+    "opacity": 0.5,
+    "fill": "#000000",
+    "filter": null
+  },
+  "#vignette-rect": {
+    "x": "1%",
+    "y": "2%",
+    "width": "98%",
+    "height": "96%",
+    "rx": "10%",
+    "ry": "10%",
+    "filter": "blur(20px)"
   }
 }