hotfix: define color scheme on heightmap edit

This commit is contained in:
Azgaar 2023-11-06 00:04:53 +04:00
parent e654dbb8a5
commit 8101e75f3d
7 changed files with 37 additions and 36 deletions

View file

@ -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);
}

View file

@ -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();
}

View file

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

View file

@ -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));
}
}
}
}