hotfix: define color scheme on heightmap edit

index.html

@@ -1278,14 +1278,7 @@
               <tr data-tip="Select color scheme for the element">
                 <td>Color scheme</td>
                 <td>
-                  <select id="styleHeightmapScheme">
+                  <select id="styleHeightmapScheme"></select>
-                    <option value="bright" selected>Bright</option>
-                    <option value="light">Light</option>
-                    <option value="natural">Natural</option>
-                    <option value="green">Green</option>
-                    <option value="livid">Livid</option>
-                    <option value="monochrome">Monochrome</option>
-                  </select>
                 </td>
               </tr>
 
@@ -7975,7 +7968,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.91.02"></script>
+    <script src="modules/ocean-layers.js?v=1.93.07"></script>
     <script src="modules/river-generator.js?v=1.89.13"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/biomes.js"></script>
@@ -7995,14 +7988,14 @@
     <script src="modules/fonts.js?v=1.89.18"></script>
     <script src="modules/ui/layers.js?v=1.93.06"></script>
     <script src="modules/ui/measurers.js?v=1.87.02"></script>
-    <script src="modules/ui/stylePresets.js?v=1.93.06"></script>
+    <script src="modules/ui/stylePresets.js?v=1.93.07"></script>
 
     <script src="modules/ui/general.js?v=1.93.04"></script>
-    <script src="modules/ui/options.js?v=1.93.03"></script>
+    <script src="modules/ui/options.js?v=1.93.07"></script>
     <script src="main.js?v=1.93.02"></script>
 
     <script defer src="modules/relief-icons.js"></script>
-    <script defer src="modules/ui/style.js"></script>
+    <script defer src="modules/ui/style.js?v=1.93.07"></script>
     <script defer src="modules/ui/editors.js?v=1.92.00"></script>
     <script defer src="modules/ui/tools.js?v=1.92.00"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>

modules/dynamic/heightmap-selection.js

@@ -150,6 +150,10 @@ function appendStyleSheet() {
 }
 
 function insertHtml() {
+  const heightmapColorSchemeOptions = Object.keys(heightmapColorSchemes)
+    .map(scheme => `<option value="${scheme}">${scheme}</option>`)
+    .join("");
+
   const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
     <div class="heightmap-selection">
       <section data-tip="Select heightmap template – template provides unique, but similar-looking maps on generation">
@@ -174,14 +178,7 @@ function insertHtml() {
             </div>
             <div data-tip="Color scheme used for heightmap preview">
               Color scheme
-              <select id="heightmapSelectionColorScheme">
+              <select id="heightmapSelectionColorScheme">${heightmapColorSchemeOptions}</select>
-                <option value="bright" selected>Bright</option>
-                <option value="light">Light</option>
-                <option value="natural">Natural</option>
-                <option value="green">Green</option>
-                <option value="livid">Livid</option>
-                <option value="monochrome">Monochrome</option>
-              </select>
             </div>
           </div>
           <div>
@@ -276,8 +273,7 @@ function drawHeights(heights) {
   const ctx = canvas.getContext("2d");
   const imageData = ctx.createImageData(graph.cellsX, graph.cellsY);
 
-  const schemeId = byId("heightmapSelectionColorScheme").value;
+  const scheme = getColorScheme(byId("heightmapSelectionColorScheme").value);
-  const scheme = getColorScheme(schemeId);
   const renderOcean = byId("heightmapSelectionRenderOcean").checked;
   const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
 

modules/ui/layers.js

@@ -297,21 +297,12 @@ function drawHeightmap() {
   TIME && console.timeEnd("drawHeightmap");
 }
 
-const colorSchemes = {
+function getColorScheme(scheme = "bright") {
-  bright: d3.scaleSequential(d3.interpolateSpectral),
+  if (scheme in heightmapColorSchemes) return heightmapColorSchemes[scheme];
-  light: d3.scaleSequential(d3.interpolateRdYlGn),
-  natural: d3.scaleSequential(d3.interpolateRgbBasis(["white", "#EEEECC", "tan", "green", "teal"])),
-  green: d3.scaleSequential(d3.interpolateGreens),
-  livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
-  monochrome: d3.scaleSequential(d3.interpolateGreys)
-};
-
-function getColorScheme(scheme) {
-  if (scheme in colorSchemes) return colorSchemes[scheme];
   throw new Error(`Unsupported color scheme: ${scheme}`);
 }
 
-function getColor(value, scheme = getColorScheme()) {
+function getColor(value, scheme = getColorScheme("bright")) {
   return scheme(1 - (value < 20 ? value - 5 : value) / 100);
 }
 

modules/ui/options.js

@@ -702,7 +702,7 @@ function changeEra() {
 }
 
 async function openTemplateSelectionDialog() {
-  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.93.06");
+  const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.93.07");
   HeightmapSelectionDialog.open();
 }
 

modules/ui/style.js

@@ -37,6 +37,20 @@ function editStyle(element, group) {
   }, 1500);
 }
 
+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),
+  livid: d3.scaleSequential(d3.interpolateRgbBasis(["#BBBBDD", "#2A3440", "#17343B", "#0A1E24"])),
+  monochrome: d3.scaleSequential(d3.interpolateGreys)
+};
+
+// add color schemes to the lists
+document.getElementById("styleHeightmapScheme").innerHTML = Object.keys(heightmapColorSchemes)
+  .map(scheme => `<option value="${scheme}">${scheme}</option>`)
+  .join("");
+
 // Toggle style sections on element select
 styleElementSelect.addEventListener("change", selectStyleElement);
 function selectStyleElement() {

modules/ui/stylePresets.js

@@ -94,6 +94,13 @@ function applyStyle(style) {
       if (layerIsOn("toggleTexture") && selector === "#textureImage" && attribute === "src") {
         el.setAttribute("href", value);
       }
+
+      // add custom heightmap color scheme
+      if (selector === "#terrs" && attribute === "scheme" && !(value in heightmapColorSchemes)) {
+        const colors = value.split(",");
+        heightmapColorSchemes[value] = d3.scaleSequential(d3.interpolateRgbBasis(colors));
+        document.getElementById("styleHeightmapScheme").options.add(new Option(value, value));
+      }
     }
   }
 }

versioning.js

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