feat: custom heightmap color scheme - add shceme on load

modules/io/load.js

@@ -454,12 +454,20 @@ async function parseLoadedData(data) {
     })();
 
     {
-      // dynamically import and run auto-udpdate script
+      // dynamically import and run auto-update script
       const versionNumber = parseFloat(params[0]);
       const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.93.00");
       resolveVersionConflicts(versionNumber);
     }
 
+    {
+      // add custom heightmap color scheme if any
+      const scheme = terrs.attr("scheme");
+      if (!(scheme in heightmapColorSchemes)) {
+        addCustomColorScheme(scheme);
+      }
+    }
+
     void (function checkDataIntegrity() {
       const cells = pack.cells;
 

modules/ui/layers.js

@@ -297,11 +297,6 @@ function drawHeightmap() {
   TIME && console.timeEnd("drawHeightmap");
 }
 
-function getColorScheme(scheme = "bright") {
-  if (scheme in heightmapColorSchemes) return heightmapColorSchemes[scheme];
-  throw new Error(`Unsupported color scheme: ${scheme}`);
-}
-
 function getColor(value, scheme = getColorScheme("bright")) {
   return scheme(1 - (value < 20 ? value - 5 : value) / 100);
 }

modules/ui/style.js

@@ -37,20 +37,37 @@ function editStyle(element, group) {
   }, 1500);
 }
 
+// Color schemes
 const heightmapColorSchemes = {
   bright: d3.scaleSequential(d3.interpolateSpectral),
   light: d3.scaleSequential(d3.interpolateRdYlGn),
   natural: d3.scaleSequential(d3.interpolateRgbBasis(["white", "#EEEECC", "tan", "green", "teal"])),
   green: d3.scaleSequential(d3.interpolateGreens),
+  olive: d3.scaleSequential(d3.interpolateRgbBasis(["#ffffff", "#cea48d", "#d5b085", "#0c2c19", "#151320"])),
   livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
   monochrome: d3.scaleSequential(d3.interpolateGreys)
 };
 
-// add color schemes to the lists
+// add default color schemes to the list of options
 byId("styleHeightmapScheme").innerHTML = Object.keys(heightmapColorSchemes)
   .map(scheme => `<option value="${scheme}">${scheme}</option>`)
   .join("");
 
+function addCustomColorScheme(scheme) {
+  const stops = scheme.split(",");
+  heightmapColorSchemes[scheme] = d3.scaleSequential(d3.interpolateRgbBasis(stops));
+  byId("styleHeightmapScheme").options.add(new Option(scheme, scheme, false, true));
+}
+
+function getColorScheme(scheme = "bright") {
+  if (!(scheme in heightmapColorSchemes)) {
+    const colors = scheme.split(",");
+    heightmapColorSchemes[scheme] = d3.scaleSequential(d3.interpolateRgbBasis(colors));
+  }
+
+  return heightmapColorSchemes[scheme];
+}
+
 // Toggle style sections on element select
 styleElementSelect.addEventListener("change", selectStyleElement);
 function selectStyleElement() {
@@ -575,9 +592,7 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
     const stops = openCreateHeightmapSchemeButton.dataset.stops;
     if (stops in heightmapColorSchemes) return tip("This scheme already exists", false, "error");
 
-    heightmapColorSchemes[stops] = d3.scaleSequential(d3.interpolateRgbBasis(stops.split(",")));
+    addCustomColorScheme(stops);
-    byId("styleHeightmapScheme").options.add(new Option(stops, stops, false, true));
-
     terrs.attr("scheme", stops);
     drawHeightmap();
 

modules/ui/stylePresets.js

@@ -97,9 +97,7 @@ function applyStyle(style) {
 
       // add custom heightmap color scheme
       if (selector === "#terrs" && attribute === "scheme" && !(value in heightmapColorSchemes)) {
-        const colors = value.split(",");
+        addCustomColorScheme(value);
-        heightmapColorSchemes[value] = d3.scaleSequential(d3.interpolateRgbBasis(colors));
-        document.getElementById("styleHeightmapScheme").options.add(new Option(value, value));
       }
     }
   }