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

fix: move scaleBar to the corner of svg export

Browse source
This commit is contained in:
Azgaar 2023-11-19 20:10:42 +04:00
parent 20b09e8634
commit 433152db06
9 changed files with 153 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

136
modules/ui/options.js
View file

@ -20,7 +20,7 @@ function showOptions(event) {
}
regenerate.style.display = "none";
document.getElementById("options").style.display = "block";
byId("options").style.display = "block";
optionsTrigger.style.display = "none";
if (event) event.stopPropagation();
@ -28,21 +28,21 @@ function showOptions(event) {
// Hide options pane on trigger click
function hideOptions(event) {
document.getElementById("options").style.display = "none";
byId("options").style.display = "none";
optionsTrigger.style.display = "block";
if (event) event.stopPropagation();
}
// To toggle options on hotkey press
function toggleOptions(event) {
if (document.getElementById("options").style.display === "none") showOptions(event);
if (byId("options").style.display === "none") showOptions(event);
else hideOptions(event);
}
// Toggle "New Map!" pane on hover
optionsTrigger.addEventListener("mouseenter", function () {
if (optionsTrigger.classList.contains("glow")) return;
if (document.getElementById("options").style.display === "none") regenerate.style.display = "block";
if (byId("options").style.display === "none") regenerate.style.display = "block";
});
collapsible.addEventListener("mouseleave", function () {
@ -56,11 +56,11 @@ document
.addEventListener("click", function (event) {
if (event.target.tagName !== "BUTTON") return;
const id = event.target.id;
const active = document.getElementById("options").querySelector(".tab > button.active");
const active = byId("options").querySelector(".tab > button.active");
if (active && id === active.id) return; // already active tab is clicked
if (active) active.classList.remove("active");
document.getElementById(id).classList.add("active");
byId(id).classList.add("active");
document
.getElementById("options")
.querySelectorAll(".tabcontent")
@ -91,10 +91,10 @@ async function showSupporters() {
}
// on any option or dialog change
document.getElementById("options").addEventListener("change", storeValueIfRequired);
document.getElementById("dialogs").addEventListener("change", storeValueIfRequired);
document.getElementById("options").addEventListener("input", updateOutputToFollowInput);
document.getElementById("dialogs").addEventListener("input", updateOutputToFollowInput);
byId("options").addEventListener("change", storeValueIfRequired);
byId("dialogs").addEventListener("change", storeValueIfRequired);
byId("options").addEventListener("input", updateOutputToFollowInput);
byId("dialogs").addEventListener("input", updateOutputToFollowInput);
function storeValueIfRequired(ev) {
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
@ -109,16 +109,16 @@ function updateOutputToFollowInput(ev) {
// generic case
if (id.slice(-5) === "Input") {
const output = document.getElementById(id.slice(0, -5) + "Output");
const output = byId(id.slice(0, -5) + "Output");
if (output) output.value = value;
} else if (id.slice(-6) === "Output") {
const input = document.getElementById(id.slice(0, -6) + "Input");
const input = byId(id.slice(0, -6) + "Input");
if (input) input.value = value;
}
}
// Option listeners
const optionsContent = document.getElementById("optionsContent");
const optionsContent = byId("optionsContent");
optionsContent.addEventListener("input", function (event) {
const id = event.target.id;
const value = event.target.value;
@ -216,7 +216,7 @@ function fitMapToScreen() {
zoom.translateExtent(zoomExtent).scaleExtent([zoomMin, zoomMax]).scaleTo(svg, zoomMin);
fitScaleBar();
fitScaleBar(scaleBar, svgWidth, svgHeight);
if (window.fitLegendBox) fitLegendBox();
}
@ -241,7 +241,7 @@ const voiceInterval = setInterval(function () {
if (voices.length) clearInterval(voiceInterval);
else return;
const select = document.getElementById("speakerVoice");
const select = byId("speakerVoice");
voices.forEach((voice, i) => {
select.options.add(new Option(voice.name, i, false));
});
@ -255,7 +255,7 @@ function testSpeaker() {
const speaker = new SpeechSynthesisUtterance(text);
const voices = speechSynthesis.getVoices();
if (voices.length) {
const voiceId = +document.getElementById("speakerVoice").value;
const voiceId = +byId("speakerVoice").value;
speaker.voice = voices[voiceId];
}
speechSynthesis.speak(speaker);
@ -348,7 +348,7 @@ function changeCultureSet() {
}
function changeEmblemShape(emblemShape) {
const image = document.getElementById("emblemShapeImage");
const image = byId("emblemShapeImage");
const shapePath = window.COArenderer && COArenderer.shieldPaths[emblemShape];
shapePath ? image.setAttribute("d", shapePath) : image.removeAttribute("d");
@ -357,7 +357,7 @@ function changeEmblemShape(emblemShape) {
pack.cultures.filter(c => !c.removed).forEach(c => (c.shield = Cultures.getRandomShield()));
const rerenderCOA = (id, coa) => {
const coaEl = document.getElementById(id);
const coaEl = byId(id);
if (!coaEl) return; // not rendered
coaEl.remove();
COArenderer.trigger(id, coa);
@ -403,7 +403,7 @@ function changeUiSize(value) {
uiSizeInput.value = uiSizeOutput.value = value;
document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
document.getElementById("options").style.width = value * 300 + "px";
byId("options").style.width = value * 300 + "px";
}
function getUImaxSize() {
@ -463,7 +463,7 @@ function loadGoogleTranslate() {
const script = document.createElement("script");
script.src = "https://translate.google.com/translate_a/element.js?cb=initGoogleTranslate";
script.onload = () => {
document.getElementById("loadGoogleTranslateButton")?.remove();
byId("loadGoogleTranslateButton")?.remove();
// replace mapLayers underline <u> with bare text to avoid translation issue
document
@ -702,7 +702,7 @@ function restoreDefaultOptions() {
}
// Sticked menu Options listeners
document.getElementById("sticked").addEventListener("click", function (event) {
byId("sticked").addEventListener("click", function (event) {
const id = event.target.id;
if (id === "newMapButton") regeneratePrompt();
else if (id === "saveButton") showSavePane();
@ -735,7 +735,7 @@ function regeneratePrompt(options) {
}
function showSavePane() {
const sharableLinkContainer = document.getElementById("sharableLinkContainer");
const sharableLinkContainer = byId("sharableLinkContainer");
sharableLinkContainer.style.display = "none";
$("#saveMapData").dialog({
@ -752,13 +752,13 @@ function showSavePane() {
}
function copyLinkToClickboard() {
const shrableLink = document.getElementById("sharableLink");
const shrableLink = byId("sharableLink");
const link = shrableLink.getAttribute("href");
navigator.clipboard.writeText(link).then(() => tip("Link is copied to the clipboard", true, "success", 8000));
}
function showExportPane() {
document.getElementById("showLabels").checked = !hideLabels.checked;
byId("showLabels").checked = !hideLabels.checked;
$("#exportMapData").dialog({
title: "Export map data",
@ -793,10 +793,10 @@ async function showLoadPane() {
// already connected to Dropbox: list saved maps
if (Cloud.providers.dropbox.api) {
document.getElementById("dropboxConnectButton").style.display = "none";
document.getElementById("loadFromDropboxSelect").style.display = "block";
const loadFromDropboxButtons = document.getElementById("loadFromDropboxButtons");
const fileSelect = document.getElementById("loadFromDropboxSelect");
byId("dropboxConnectButton").style.display = "none";
byId("loadFromDropboxSelect").style.display = "block";
const loadFromDropboxButtons = byId("loadFromDropboxButtons");
const fileSelect = byId("loadFromDropboxSelect");
fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Loading...</option>`;
const files = await Cloud.providers.dropbox.list();
@ -821,9 +821,9 @@ async function showLoadPane() {
}
// not connected to Dropbox: show connect button
document.getElementById("dropboxConnectButton").style.display = "inline-block";
document.getElementById("loadFromDropboxButtons").style.display = "none";
document.getElementById("loadFromDropboxSelect").style.display = "none";
byId("dropboxConnectButton").style.display = "inline-block";
byId("loadFromDropboxButtons").style.display = "none";
byId("loadFromDropboxSelect").style.display = "none";
}
async function connectToDropbox() {
@ -859,24 +859,24 @@ function loadURL() {
}
// load map
document.getElementById("mapToLoad").addEventListener("change", function () {
byId("mapToLoad").addEventListener("change", function () {
const fileToLoad = this.files[0];
this.value = "";
closeDialogs();
uploadMap(fileToLoad);
});
function openSaveTiles() {
function openExportToPngTiles() {
closeDialogs();
updateTilesOptions();
const status = document.getElementById("tileStatus");
const status = byId("tileStatus");
status.innerHTML = "";
let loading = null;
const inputs = document.getElementById("saveTilesScreen").querySelectorAll("input");
const inputs = byId("exportToPngTilesScreen").querySelectorAll("input");
inputs.forEach(input => input.addEventListener("input", updateTilesOptions));
$("#saveTilesScreen").dialog({
$("#exportToPngTilesScreen").dialog({
resizable: false,
title: "Download tiles",
width: "23em",
@ -885,7 +885,7 @@ function openSaveTiles() {
status.innerHTML = "Preparing for download...";
setTimeout(() => (status.innerHTML = "Downloading. It may take some time."), 1000);
loading = setInterval(() => (status.innerHTML += "."), 1000);
saveTiles().then(() => {
exportToPngTiles().then(() => {
clearInterval(loading);
status.innerHTML = /* html */ `Done. Check file in "Downloads" (crtl + J)`;
setTimeout(() => (status.innerHTML = ""), 8000);
@ -910,10 +910,10 @@ function updateTilesOptions() {
if (prev?.tagName === "INPUT") prev.value = this.value;
}
const tileSize = document.getElementById("tileSize");
const tilesX = +document.getElementById("tileColsOutput").value;
const tilesY = +document.getElementById("tileRowsOutput").value;
const scale = +document.getElementById("tileScaleOutput").value;
const tileSize = byId("tileSize");
const tilesX = +byId("tileColsOutput").value;
const tilesY = +byId("tileRowsOutput").value;
const scale = +byId("tileScaleOutput").value;
// calculate size
const sizeX = graphWidth * scale * tilesX;
@ -962,9 +962,9 @@ function enterStandardView() {
heightmap3DView.classList.remove("pressed");
viewStandard.classList.add("pressed");
if (!document.getElementById("canvas3d")) return;
if (!byId("canvas3d")) return;
ThreeD.stop();
document.getElementById("canvas3d").remove();
byId("canvas3d").remove();
if (options3dUpdate.offsetParent) $("#options3d").dialog("close");
if (preview3d.offsetParent) $("#preview3d").dialog("close");
}
@ -997,7 +997,7 @@ async function enter3dView(type) {
};
if (type === "heightmap3DView") {
document.getElementById("preview3d").appendChild(canvas);
byId("preview3d").appendChild(canvas);
$("#preview3d").dialog({
title: "3D Preview",
resizable: true,
@ -1011,7 +1011,7 @@ async function enter3dView(type) {
}
function resize3d() {
const canvas = document.getElementById("canvas3d");
const canvas = byId("canvas3d");
canvas.width = parseFloat(preview3d.style.width);
canvas.height = parseFloat(preview3d.style.height) - 2;
ThreeD.redraw();
@ -1034,32 +1034,32 @@ function toggle3dOptions() {
if (modules.options3d) return;
modules.options3d = true;
document.getElementById("options3dUpdate").addEventListener("click", ThreeD.update);
document.getElementById("options3dSave").addEventListener("click", ThreeD.saveScreenshot);
document.getElementById("options3dOBJSave").addEventListener("click", ThreeD.saveOBJ);
byId("options3dUpdate").addEventListener("click", ThreeD.update);
byId("options3dSave").addEventListener("click", ThreeD.saveScreenshot);
byId("options3dOBJSave").addEventListener("click", ThreeD.saveOBJ);
document.getElementById("options3dScaleRange").addEventListener("input", changeHeightScale);
document.getElementById("options3dScaleNumber").addEventListener("change", changeHeightScale);
document.getElementById("options3dLightnessRange").addEventListener("input", changeLightness);
document.getElementById("options3dLightnessNumber").addEventListener("change", changeLightness);
document.getElementById("options3dSunX").addEventListener("change", changeSunPosition);
document.getElementById("options3dSunY").addEventListener("change", changeSunPosition);
document.getElementById("options3dMeshSkinResolution").addEventListener("change", changeResolutionScale);
document.getElementById("options3dMeshRotationRange").addEventListener("input", changeRotation);
document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation);
document.getElementById("options3dGlobeRotationRange").addEventListener("input", changeRotation);
document.getElementById("options3dGlobeRotationNumber").addEventListener("change", changeRotation);
document.getElementById("options3dMeshLabels3d").addEventListener("change", toggleLabels3d);
document.getElementById("options3dMeshSkyMode").addEventListener("change", toggleSkyMode);
document.getElementById("options3dMeshSky").addEventListener("input", changeColors);
document.getElementById("options3dMeshWater").addEventListener("input", changeColors);
document.getElementById("options3dGlobeResolution").addEventListener("change", changeResolution);
// document.getElementById("options3dMeshWireframeMode").addEventListener("change",toggleWireframe3d);
document.getElementById("options3dSunColor").addEventListener("input", changeSunColor);
document.getElementById("options3dSubdivide").addEventListener("change", toggle3dSubdivision);
byId("options3dScaleRange").addEventListener("input", changeHeightScale);
byId("options3dScaleNumber").addEventListener("change", changeHeightScale);
byId("options3dLightnessRange").addEventListener("input", changeLightness);
byId("options3dLightnessNumber").addEventListener("change", changeLightness);
byId("options3dSunX").addEventListener("change", changeSunPosition);
byId("options3dSunY").addEventListener("change", changeSunPosition);
byId("options3dMeshSkinResolution").addEventListener("change", changeResolutionScale);
byId("options3dMeshRotationRange").addEventListener("input", changeRotation);
byId("options3dMeshRotationNumber").addEventListener("change", changeRotation);
byId("options3dGlobeRotationRange").addEventListener("input", changeRotation);
byId("options3dGlobeRotationNumber").addEventListener("change", changeRotation);
byId("options3dMeshLabels3d").addEventListener("change", toggleLabels3d);
byId("options3dMeshSkyMode").addEventListener("change", toggleSkyMode);
byId("options3dMeshSky").addEventListener("input", changeColors);
byId("options3dMeshWater").addEventListener("input", changeColors);
byId("options3dGlobeResolution").addEventListener("change", changeResolution);
// byId("options3dMeshWireframeMode").addEventListener("change",toggleWireframe3d);
byId("options3dSunColor").addEventListener("input", changeSunColor);
byId("options3dSubdivide").addEventListener("change", toggle3dSubdivision);
function updateValues() {
const globe = document.getElementById("canvas3d").dataset.type === "viewGlobe";
const globe = byId("canvas3d").dataset.type === "viewGlobe";
options3dMesh.style.display = globe ? "none" : "block";
options3dGlobe.style.display = globe ? "block" : "none";
options3dOBJSave.style.display = globe ? "none" : "inline-block";