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

resampleDialog UI update

Browse source
This commit is contained in:
Azgaar 2022-04-27 00:26:47 +05:00
parent ea1d535abd
commit 1889ac919d
5 changed files with 106 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.css
View file

@ -2271,6 +2271,7 @@ svg.button {
user-select: none; user-select: none;
} }
.dontAsk { .dontAsk {
display: inline-block; display: inline-block;
margin: 0.9em 0 0 0.6em; margin: 0.9em 0 0 0.6em;

90
index.html
View file

@ -1247,7 +1247,7 @@
<input id="pointsInput" type="range" min="1" max="13" value="4" data-cells="10000" /> <input id="pointsInput" type="range" min="1" max="13" value="4" data-cells="10000" />
</td> </td>
<td> <td>
<output id="pointsOutput_formatted" style="color: #053305">10K</output> <output id="pointsOutputFormatted" style="color: #053305">10K</output>
</td> </td>
</tr> </tr>
@ -1729,7 +1729,7 @@
<p>Click to create a new map:</p> <p>Click to create a new map:</p>
<div> <div>
<button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button> <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
<button id="openResampleMenu" data-tip="Click to transform the map" onclick="UISubmap.openRemapOptions()">Resample</button> <button id="openResampleMenu" data-tip="Click to transform the map">Resample</button>
</div> </div>
</div> </div>
@ -4444,64 +4444,42 @@
<div id="tileStatus" style="background-color: #33333310; font-style: italic"></div> <div id="tileStatus" style="background-color: #33333310; font-style: italic"></div>
</div> </div>
<div id="remapOptionsDialog" style="display: none; max-width: 300px" class="dialog"> <div id="resampleDialog" style="display: none" class="dialog">
<p style="font-style: italic; color: red; font-weight: bold">Warning! This operation is destructive and irreversible. Don't forget to save your map!</p> <p style="font-weight: bold">
<table> This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
<tr> as a .map file first!
<td>Points number</td> </p>
<td> <div style="display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: repeat(4, 1fr); align-items: center; padding-left: 0.5em">
<input <div>Points number</div>
id="submapPointsInput" <div>
autocomplete="off" <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
type="range" <output id="submapPointsOutputFormatted" style="color: #053305">10K</output>
min="1" </div>
max="13"
value="4" <div>Shift</div>
data-cells="10000" <div>
oninput="document.getElementById('submapPointsOutput').value=cellsDensityConstants[+this.value]/1000 + 'K'; event.stopPropagation()" <label>X: <input id="submapShiftX" type="number" min="0" size="4" value="0" /></label>
/> <label>Y: <input id="submapShiftY" type="number" min="0" size="4" value="0" /></label>
</td> </div>
<td>
<output id="submapPointsOutput" style="color: #053305">10K</output> <div>Rotate</div>
</td> <div>
</tr> <input id="submapAngleInput" type="range" min="0" max="359" value="0" />
<tr> <output id="submapAngleOutput">0</output>°
<td>Shift</td> </div>
<td colspan="2">
X: <input id="submapShiftX" autocomplete="off" min="0" size="4" value="0"/> <div>Mirror</div>
Y: <input id="submapShiftY" autocomplete="off" min="0" size="4" value="0"/> <div>
</td>
</tr>
<tr>
<td>Rotate <i class="icon-cw"></i></td>
<td>
<input
id="submapRotationAngle"
autocomplete="off"
type="range"
min="0"
max="359"
value="0"
oninput="document.getElementById('submapRotationAngleOutput').value=+this.value + '°'"
/>
</td>
<td>
<output id="submapRotationAngleOutput" style="color: #053305">0°</output>
</td>
</tr>
<tr>
<td>Mirror</td>
<td colspan="2">
<input type="checkbox" class="checkbox" id="submapMirrorH" /> <input type="checkbox" class="checkbox" id="submapMirrorH" />
<label for="submapMirrorH" class="checkbox-label" >Horizontally</label> <label for="submapMirrorH" class="checkbox-label">horizontally</label>
&nbsp; &nbsp;
<input type="checkbox" class="checkbox" id="submapMirrorV" /> <input type="checkbox" class="checkbox" id="submapMirrorV" />
<label for="submapMirrorV" class="checkbox-label">Vertically</label> <label for="submapMirrorV" class="checkbox-label">vertically</label>
</td>
</tr>
</table>
</div> </div>
<div id="submapOptionsDialog" style="display: none; max-width: 300px" class="dialog"> </div>
</div>
<div id="submapOptionsDialog" style="display: none" class="dialog">
<p style="font-style: italic; color: red; font-weight: bold"> <p style="font-style: italic; color: red; font-weight: bold">
Warning! This operation is destructive and irreversible. Don't forget to save your original map! Warning! This operation is destructive and irreversible. Don't forget to save your original map!
</p> </p>

18
modules/ui/options.js
View file

@ -335,7 +335,7 @@ function copyMapURL() {
.catch(err => tip("Could not copy URL: " + err, false, "error", 5000)); .catch(err => tip("Could not copy URL: " + err, false, "error", 5000));
} }
const cellsDensityConstants = { const cellsDensityMap = {
1: 1000, 1: 1000,
2: 2000, 2: 2000,
3: 5000, 3: 5000,
@ -348,14 +348,22 @@ const cellsDensityConstants = {
10: 70000, 10: 70000,
11: 80000, 11: 80000,
12: 90000, 12: 90000,
13: 100000, 13: 100000
}; };
function changeCellsDensity(value) { function changeCellsDensity(value) {
const cells = value in cellsDensityConstants? cellsDensityConstants[value]: 1000; const cells = cellsDensityMap[value] || 1000;
pointsInput.dataset.cells = cells; pointsInput.dataset.cells = cells;
pointsOutput_formatted.value = cells / 1000 + "K"; pointsOutputFormatted.value = getCellsDensityValue(cells);
pointsOutput_formatted.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305"; pointsOutputFormatted.style.color = getCellsDensityColor(cells);
}
function getCellsDensityValue(cells) {
return cells / 1000 + "K";
}
function getCellsDensityColor(cells) {
return cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
} }
function changeCultureSet() { function changeCultureSet() {

81
modules/ui/submap.js
View file

@ -1,16 +1,21 @@
"use strict"; "use strict";
// UI elements for submap generation
/*
UI elements for submap generation
*/
window.UISubmap = (function () { window.UISubmap = (function () {
function openSubmapOptions() { document.getElementById("submapPointsInput").addEventListener("input", function () {
const output = document.getElementById("submapPointsOutputFormatted");
const cells = cellsDensityMap[+this.value] || 1000;
this.dataset.cells = cells;
output.value = getCellsDensityValue(cells);
output.style.color = getCellsDensityColor(cells);
});
function openSubmapMenu() {
$("#submapOptionsDialog").dialog({ $("#submapOptionsDialog").dialog({
title: "Submap options", title: "Create a submap",
width: "30em",
resizable: false, resizable: false,
width: fitContent(), position: {my: "center", at: "center", of: "svg"},
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
buttons: { buttons: {
Submap: function () { Submap: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -23,19 +28,21 @@ window.UISubmap = (function () {
}); });
} }
function openRemapOptions() { function openResampleMenu() {
resetZoom(0); resetZoom(0);
document.getElementById("submapRotationAngle").value = 0;
document.getElementById("submapRotationAngleOutput").value = "0°"; document.getElementById("submapAngleInput").value = 0;
document.getElementById("submapAngleOutput").value = "0°";
document.getElementById("submapShiftX").value = 0; document.getElementById("submapShiftX").value = 0;
document.getElementById("submapShiftY").value = 0; document.getElementById("submapShiftY").value = 0;
document.getElementById("submapMirrorH").checked = false; document.getElementById("submapMirrorH").checked = false;
document.getElementById("submapMirrorV").checked = false; document.getElementById("submapMirrorV").checked = false;
$("#remapOptionsDialog").dialog({
title: "Resampler options", $("#resampleDialog").dialog({
title: "Resample map",
width: "30em",
resizable: false, resizable: false,
width: fitContent(), position: {my: "center", at: "center", of: "svg"},
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
buttons: { buttons: {
Resample: function () { Resample: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -48,32 +55,28 @@ window.UISubmap = (function () {
}); });
} }
/* callbacks */
const resampleCurrentMap = debounce(function () {
// Resample the whole map to different cell resolution or shape // Resample the whole map to different cell resolution or shape
const cellNumId = Number(document.getElementById("submapPointsInput").value); const resampleCurrentMap = debounce(function () {
const angle = Number(document.getElementById("submapRotationAngle").value) / 180 * Math.PI; WARN && console.warn("Resampling current map");
const shiftX = Number(document.getElementById("submapShiftX").value); const cellNumId = +document.getElementById("submapPointsInput").value;
const shiftY = Number(document.getElementById("submapShiftY").value); if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
const angle = (+document.getElementById("submapAngleInput").value / 180) * Math.PI;
const shiftX = +document.getElementById("submapShiftX").value;
const shiftY = +document.getElementById("submapShiftY").value;
const mirrorH = document.getElementById("submapMirrorH").checked; const mirrorH = document.getElementById("submapMirrorH").checked;
const mirrorV = document.getElementById("submapMirrorV").checked; const mirrorV = document.getElementById("submapMirrorV").checked;
if (!cellsDensityConstants[cellNumId]) {
console.error("Unknown cell number!");
return;
}
const [cx, cy] = [graphWidth / 2, graphHeight / 2]; const [cx, cy] = [graphWidth / 2, graphHeight / 2];
const rot = alfa => (x, y) => [ const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx,
(y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy
];
const shift = (dx, dy) => (x, y) => [x + dx, y + dy]; const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
const flipH = (x, y) => [-x + 2 * cx, y]; const flipH = (x, y) => [-x + 2 * cx, y];
const flipV = (x, y) => [x, -y + 2 * cy]; const flipV = (x, y) => [x, -y + 2 * cy];
const app = (f, g) => (x, y) => f(...g(x, y)); const app = (f, g) => (x, y) => f(...g(x, y));
const id = (x, y) => [x, y]; const id = (x, y) => [x, y];
let projection = id, inverse = id;
let projection = id;
let inverse = id;
if (angle) [projection, inverse] = [rot(angle), rot(-angle)]; if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
if (shiftX || shiftY) { if (shiftX || shiftY) {
@ -84,7 +87,6 @@ window.UISubmap = (function () {
if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)]; if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
changeCellsDensity(cellNumId); changeCellsDensity(cellNumId);
WARN && console.warn("Resampling current map");
startResample({ startResample({
lockMarkers: false, lockMarkers: false,
lockBurgs: false, lockBurgs: false,
@ -94,17 +96,16 @@ window.UISubmap = (function () {
smoothHeightMap: false, smoothHeightMap: false,
rescaleStyles: false, rescaleStyles: false,
projection, projection,
inverse, inverse
}); });
}, 1000); }, 1000);
// Create submap from the current map. Submap limits defined by the current window size (canvas viewport)
const generateSubmap = debounce(function () { const generateSubmap = debounce(function () {
// Create submap from the current map
// submap limits defined by the current window size (canvas viewport)
WARN && console.warn("Resampling current map"); WARN && console.warn("Resampling current map");
closeDialogs("#worldConfigurator, #options3d"); closeDialogs("#worldConfigurator, #options3d");
const checked = id => Boolean(document.getElementById(id).checked); const checked = id => Boolean(document.getElementById(id).checked);
// Create projection func from current zoom extents // Create projection func from current zoom extents
const [[x0, y0], [x1, y1]] = getViewBoxExtent(); const [[x0, y0], [x1, y1]] = getViewBoxExtent();
const origScale = scale; const origScale = scale;
@ -140,7 +141,7 @@ window.UISubmap = (function () {
}, 1000); }, 1000);
async function startResample(options) { async function startResample(options) {
// Do model changes with Submap.resample then do view changes if needed. // Do model changes with Submap.resample then do view changes if needed
resetZoom(0); resetZoom(0);
let oldstate = { let oldstate = {
grid: deepCopy(grid), grid: deepCopy(grid),
@ -203,12 +204,12 @@ window.UISubmap = (function () {
ERROR && console.error(error); ERROR && console.error(error);
clearMainTip(); clearMainTip();
alertMessage.innerHTML = `Map resampling failed :_(. alertMessage.innerHTML = `Map resampling failed:
<br>You may retry after clearing stored data or contact us at discord. <br>You may retry after clearing stored data or contact us at discord.
<p id="errorBox">${parseError(error)}</p>`; <p id="errorBox">${parseError(error)}</p>`;
$("#alert").dialog({ $("#alert").dialog({
resizable: false, resizable: false,
title: "Generation error", title: "Resampling error",
width: "32em", width: "32em",
buttons: { buttons: {
Ok: function () { Ok: function () {
@ -219,5 +220,5 @@ window.UISubmap = (function () {
}); });
} }
return {openSubmapOptions, openRemapOptions}; return {openSubmapMenu, openResampleMenu};
})(); })();

4
modules/ui/tools.js
View file

@ -73,8 +73,8 @@ toolsContent.addEventListener("click", function (event) {
else if (button === "addRoute") toggleAddRoute(); else if (button === "addRoute") toggleAddRoute();
else if (button === "addMarker") toggleAddMarker(); else if (button === "addMarker") toggleAddMarker();
// click to create a new map buttons // click to create a new map buttons
else if (button === "openSubmapMenu") UISubmap.openSubmapOptions(); else if (button === "openSubmapMenu") UISubmap.openSubmapMenu();
else if (button === "openResampleMenu") UISubmap.openRemapOptions(); else if (button === "openResampleMenu") UISubmap.openResampleMenu();
}); });
function processFeatureRegeneration(event, button) { function processFeatureRegeneration(event, button) {