mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
v1.0.25
This commit is contained in:
Azgaar
parent
a5d1fefff7
commit
cbc702bfde
4 changed files with 9 additions and 80 deletions
|
|
@ -885,16 +885,16 @@ body button.noicon {
|
|||
}
|
||||
|
||||
.color-div {
|
||||
width: 32px;
|
||||
height: 12px;
|
||||
width: 2.7em;
|
||||
height: 1.1em;
|
||||
display: inline-block;
|
||||
margin: 1px 2px;
|
||||
margin: .1em .2em;
|
||||
border: 1px #c5c5c5 groove;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#colorsSelect div {
|
||||
height: 18px;
|
||||
height: 1.7em;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1776,7 +1776,6 @@
|
|||
<button data-tip="Open template editor" id="applyTemplate" style="display: none">Template Editor</button>
|
||||
<button data-tip="Open Image Converter" id="convertImage" style="display: none">Image Converter</button>
|
||||
<button data-tip="Render heightmap data as a small monochrome image" id="heightmapPreview">Heightmap Preview</button>
|
||||
<button data-tip="Render heightmap in perspective" id="perspectiveView">Perspective View</button>
|
||||
</div>
|
||||
|
||||
<div id="customizeOptions">
|
||||
|
|
@ -2401,8 +2400,8 @@
|
|||
</div>
|
||||
|
||||
<div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i><br>
|
||||
<input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 8em">
|
||||
<input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em; border: 1px solid #d4d4d4">
|
||||
<input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 11.5em">
|
||||
<input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em">
|
||||
</div>
|
||||
|
||||
<div data-tip="Select a color below and assign a height value for it" id="colorsSelect" style="display: none">
|
||||
|
|
@ -2421,10 +2420,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div id="perspectivePanel" class="dialog stable" style="display: none">
|
||||
<canvas id="perspective" width="480" height="150"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="biomesEditor" class="dialog stable" style="display: none">
|
||||
<div id="biomesHeader" class="header">
|
||||
<div style="left:1.4em" data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome </div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ function editHeightmap() {
|
|||
document.getElementById("applyTemplate").addEventListener("click", openTemplateEditor);
|
||||
document.getElementById("convertImage").addEventListener("click", openImageConverter);
|
||||
document.getElementById("heightmapPreview").addEventListener("click", toggleHeightmapPreview);
|
||||
document.getElementById("perspectiveView").addEventListener("click", openPerspectivePanel);
|
||||
document.getElementById("finalizeHeightmap").addEventListener("click", finalizeHeightmap);
|
||||
document.getElementById("renderOcean").addEventListener("click", mockHeightmap);
|
||||
document.getElementById("templateUndo").addEventListener("click", () => restoreHistory(edits.n-1));
|
||||
|
|
@ -389,7 +388,6 @@ function getHeight(h) {
|
|||
if (!noStat) updateStatistics();
|
||||
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if ($("#perspectivePanel").is(":visible")) drawPerspective(); // update perspective view if opened
|
||||
}
|
||||
|
||||
// restoreHistory
|
||||
|
|
@ -403,7 +401,6 @@ function getHeight(h) {
|
|||
updateStatistics();
|
||||
|
||||
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
|
||||
if ($("#perspectivePanel").is(":visible")) drawPerspective(); // update perspective view if opened
|
||||
}
|
||||
|
||||
// restart edits from 1st step
|
||||
|
|
@ -896,7 +893,7 @@ function getHeight(h) {
|
|||
closeDialogs("#imageConverter");
|
||||
|
||||
$("#imageConverter").dialog({
|
||||
title: "Image Converter", minHeight: "auto", width: "22.5em", resizable: false,
|
||||
title: "Image Converter", minHeight: "auto", width: "19.5em", resizable: false,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
}).on('dialogclose', closeImageConverter);
|
||||
|
||||
|
|
@ -924,7 +921,7 @@ function getHeight(h) {
|
|||
const container = d3.select("#colorScheme");
|
||||
container.selectAll("div").data(d3.range(101)).enter().append("div").attr("data-color", i => i)
|
||||
.style("background-color", i => color(1-i/100))
|
||||
.style("width", i => i < 20 || i > 70 ? "3px" : "1px")
|
||||
.style("width", i => i < 20 || i > 70 ? ".2em" : ".1em")
|
||||
.on("touchmove mousemove", showPalleteHeight).on("click", assignHeight);
|
||||
}()
|
||||
|
||||
|
|
@ -1173,68 +1170,4 @@ function getHeight(h) {
|
|||
}
|
||||
}
|
||||
|
||||
function openPerspectivePanel() {
|
||||
if ($("#perspectivePanel").is(":visible")) return;
|
||||
$("#perspectivePanel").dialog({
|
||||
title: "Perspective View", minHeight: "auto", width: 510, height: 200,
|
||||
position: {my: "center center", at: "center center", of: "svg"}
|
||||
});
|
||||
|
||||
drawPerspective();
|
||||
}
|
||||
|
||||
function drawPerspective() {
|
||||
const width = 320, height = 180;
|
||||
const wRatio = graphWidth / width, hRatio = graphHeight / height;
|
||||
const lineCount = 320, lineGranularity = 90;
|
||||
const perspective = document.getElementById("perspective");
|
||||
const pContext = perspective.getContext("2d");
|
||||
const lines = [];
|
||||
|
||||
let i = lineCount;
|
||||
while (i--) {
|
||||
const x = i / lineCount * width | 0;
|
||||
const canvasPoints = [];
|
||||
lines.push(canvasPoints);
|
||||
let j = Math.floor(lineGranularity);
|
||||
while (j--) {
|
||||
const y = j / lineGranularity * height | 0;
|
||||
let index = findGridCell(x * wRatio, y * hRatio);
|
||||
let h = grid.cells.h[index] - 20;
|
||||
if (h < 1) h = 0;
|
||||
canvasPoints.push([x, y, h]);
|
||||
}
|
||||
}
|
||||
|
||||
pContext.clearRect(0, 0, perspective.width, perspective.height);
|
||||
for (let canvasPoints of lines) {
|
||||
for (let i = 0; i < canvasPoints.length - 1; i++) {
|
||||
const pt1 = canvasPoints[i];
|
||||
const pt2 = canvasPoints[i + 1];
|
||||
const avHeight = (pt1[2] + pt2[2]) / 200;
|
||||
pContext.beginPath();
|
||||
pContext.moveTo(...transformPt(pt1));
|
||||
pContext.lineTo(...transformPt(pt2));
|
||||
let clr = "rgb(81, 103, 169)"; // water
|
||||
if (avHeight !== 0) {clr = color(1 - avHeight - 0.2);}
|
||||
pContext.strokeStyle = clr;
|
||||
pContext.stroke();
|
||||
}
|
||||
for (let i = 0; i < canvasPoints.length - 1; i++) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function transformPt(pt) {
|
||||
const width = 320, maxHeight = 0.2;
|
||||
var [x, y] = projectIsometric(pt[0],pt[1]);
|
||||
return [x + width / 2 + 10, y + 10 - pt[2] * maxHeight];
|
||||
}
|
||||
|
||||
function projectIsometric(x, y) {
|
||||
const scale = 1, yProj = 4;
|
||||
return [(x - y) * scale, (x + y) / yProj * scale];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -586,6 +586,7 @@ styleStatesHaloOpacity.addEventListener("input", function() {
|
|||
|
||||
// request to restore default style on button click
|
||||
function askToRestoreDefaultStyle() {
|
||||
if (customization) {tip("Please exit the customization mode first", false, "error"); return;}
|
||||
alertMessage.innerHTML = "Are you sure you want to restore default style for all elements?";
|
||||
$("#alert").dialog({resizable: false, title: "Restore default style",
|
||||
buttons: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue