feat: toggle off States Halo if rendering is optimized

index.html

@@ -1316,6 +1316,12 @@
                 <td><select id="styleStatesBodyFilter" /></td>
               </tr>
 
+              <tr style="margin-top: 0.8em">
+                <td style="font-style: italic">
+                  Halo is only rendered if "Rendering" option is set to "Best quality"!
+                </td>
+              </tr>
+
               <tr data-tip="Set states halo effect width">
                 <td>Halo width</td>
                 <td>
@@ -8087,7 +8093,7 @@
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=1.88.00"></script>
-    <script src="modules/ocean-layers.js?v=1.98.00"></script>
+    <script src="modules/ocean-layers.js?v=1.98.04"></script>
     <script src="modules/river-generator.js?v=1.89.13"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/biomes.js"></script>
@@ -8110,7 +8116,7 @@
     <script src="modules/ui/stylePresets.js?v=1.96.00"></script>
 
     <script src="modules/ui/general.js?v=1.98.01"></script>
-    <script src="modules/ui/options.js?v=1.98.03"></script>
+    <script src="modules/ui/options.js?v=1.98.04"></script>
     <script src="main.js?v=1.98.01"></script>
 
     <script defer src="modules/relief-icons.js"></script>

modules/ui/layers.js

@@ -1070,27 +1070,29 @@ function drawStates() {
 
   const bodyData = body.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
   const gapData = gap.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
-  const haloData = halo.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
 
   const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join("");
   const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join("");
-  const clipString = bodyData
-    .map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`)
-    .join("");
-  const haloString = haloData
-    .map(
-      d =>
-        `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${
-          d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666"
-        }"/>`
-    )
-    .join("");
-
   statesBody.html(bodyString + gapString);
-  defs.select("#statePaths").html(clipString);
-  statesHalo.html(haloString);
 
-  // connect vertices to chain
+  const isOptimized = shapeRendering.value === "optimizeSpeed";
+  if (!isOptimized) {
+    const haloData = halo.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
+
+    const haloString = haloData
+      .map(d => {
+        const stroke = d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666";
+        return `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${stroke}"/>`;
+      })
+      .join("");
+    statesHalo.html(haloString);
+
+    const clipString = bodyData
+      .map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`)
+      .join("");
+    defs.select("#statePaths").html(clipString);
+  }
+
   function connectVertices(start, state) {
     const chain = []; // vertices chain to form a path
     const getType = c => {

modules/ui/options.js

@@ -644,17 +644,16 @@ function randomizeCultureSet() {
 function setRendering(value) {
   viewbox.attr("shape-rendering", value);
 
-  // if (value === "optimizeSpeed") {
+  if (value === "optimizeSpeed") {
-  //   // block some styles
+    // block some styles
-  //   coastline.select("#sea_island").style("filter", "none");
+    coastline.select("#sea_island").style("filter", "none");
-  //   statesHalo.style("display", "none");
+    statesHalo.style("display", "none");
-  //   emblems.style("opacity", 1);
+  } else {
-  // } else {
+    // remove style block
-  //   // remove style block
+    coastline.select("#sea_island").style("filter", null);
-  //   coastline.select("#sea_island").style("filter", null);
+    statesHalo.style("display", null);
-  //   statesHalo.style("display", null);
+    if (pack.cells && statesHalo.selectAll("*").size() === 0) drawStates();
-  //   emblems.style("opacity", null);
+  }
-  // }
 }
 
 // generate current year and era name

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.98.03"; // generator version, update each time
+const version = "1.98.04"; // generator version, update each time
 
 {
   document.title += " v" + version;