diff --git a/index.html b/index.html
index 1a109467..c7a156c7 100644
--- a/index.html
+++ b/index.html
@@ -1278,14 +1278,7 @@
| Color scheme |
-
+
|
@@ -7975,7 +7968,7 @@
-
+
@@ -7995,14 +7988,14 @@
-
+
-
+
-
+
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index e66ff44a..1fa65e5e 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -150,6 +150,10 @@ function appendStyleSheet() {
}
function insertHtml() {
+ const heightmapColorSchemeOptions = Object.keys(heightmapColorSchemes)
+ .map(scheme => ``)
+ .join("");
+
const heightmapSelectionHtml = /* html */ `
@@ -174,14 +178,7 @@ function insertHtml() {
Color scheme
-
+
@@ -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(schemeId);
+ const scheme = getColorScheme(byId("heightmapSelectionColorScheme").value);
const renderOcean = byId("heightmapSelectionRenderOcean").checked;
const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 05d1fbc3..09d7a66a 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -297,21 +297,12 @@ function drawHeightmap() {
TIME && console.timeEnd("drawHeightmap");
}
-const colorSchemes = {
- 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)
-};
-
-function getColorScheme(scheme) {
- if (scheme in colorSchemes) return colorSchemes[scheme];
+function getColorScheme(scheme = "bright") {
+ if (scheme in heightmapColorSchemes) return heightmapColorSchemes[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);
}
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 403bdef1..88dc380b 100644
--- a/modules/ui/options.js
+++ b/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();
}
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 94331a11..5217d9cb 100644
--- a/modules/ui/style.js
+++ b/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 => ``)
+ .join("");
+
// Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() {
diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index 5b5ad64c..0ba995d4 100644
--- a/modules/ui/stylePresets.js
+++ b/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));
+ }
}
}
}
diff --git a/versioning.js b/versioning.js
index 64e3523a..5977d37d 100644
--- a/versioning.js
+++ b/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;