backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

hotfix: define color scheme on heightmap edit

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
modules/dynamic/heightmap-selection.js
View file

@ -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">
<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>
<select id="heightmapSelectionColorScheme">${heightmapColorSchemeOptions}</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(schemeId);
const scheme = getColorScheme(byId("heightmapSelectionColorScheme").value);
const renderOcean = byId("heightmapSelectionRenderOcean").checked;
const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);

15
modules/ui/layers.js
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);
}

2
modules/ui/options.js
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();
}

14
modules/ui/style.js
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() {

7
modules/ui/stylePresets.js
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));
}
}
}
}