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

Fix: rework texture data format (#1017)

Browse source 
* fix: rework texture save format

* refactor: move textures to a local folder

* fix: export texture

* fix: don't export empty texture

* chore: pump version

* fix: rescale water mask on screen size change

---------

Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
Azgaar 2023-11-19 14:43:56 +04:00 • committed by GitHub
parent 958a2c6ef8
commit ada39b47ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 225 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
images/textures/antique-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 572 KiB

BIN
images/textures/antique-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
images/textures/folded-paper-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 878 KiB

BIN
images/textures/folded-paper-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
images/textures/gray-paper.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 520 KiB

BIN
images/textures/iran-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
images/textures/marble-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 536 KiB

BIN
images/textures/marble-blue-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 KiB

BIN
images/textures/marble-blue-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
images/textures/marble-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 KiB

BIN
images/textures/mars-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
images/textures/mars-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
images/textures/mauritania-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
images/textures/mercury-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 592 KiB

BIN
images/textures/mercury-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
images/textures/ocean.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 365 KiB

BIN
images/textures/pergamena-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
images/textures/plaster.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
images/textures/soiled-paper-vertical.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
images/textures/soiled-paper.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 351 KiB

BIN
images/textures/spain-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 271 KiB

BIN
images/textures/timbercut-big.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 629 KiB

BIN
images/textures/timbercut-small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 151 KiB

114
index.html
View file

@ -866,77 +866,31 @@
<td>
<select id="styleTextureInput">
<option value="">No texture</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-big.jpg">
Folded paper big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-small.jpg">
Folded paper small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/gray-paper.jpg">
Gray paper
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper.jpg">
Soiled paper horizontal
</option>
<option
value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper-e1633784189147.jpg"
>
Soided paper vertical
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg">Plaster</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/ocean.jpg">Ocean</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg">
Antique small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-big.jpg">
Antique big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/pergamena-small.jpg">
Pergamena small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg" selected>
Marble big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-small.jpg">
Marble small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg">
Marble Blue
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-big.jpg">
Marble Blue big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-small.jpg">
Stone small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-big.jpg">
Stone big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-small.jpg">
Timber Cut small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-big.jpg">
Timber Cut big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-small.jpg">
Mars small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-big.jpg">Mars big</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg">
Mercury small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-big.jpg">
Mercury big
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mauritania-small.jpg">
Mauritania small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg">
Iran small
</option>
<option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/spain-small.jpg">
Spain small
</option>
<option value="./images/textures/folded-paper-big.jpg">Folded paper big</option>
<option value="./images/textures/folded-paper-small.jpg">Folded paper small</option>
<option value="./images/textures/gray-paper.jpg">Gray paper</option>
<option value="./images/textures/soiled-paper.jpg">Soiled paper horizontal</option>
<option value="./images/textures/soiled-paper-vertical.jpg">Soided paper vertical</option>
<option value="./images/textures/plaster.jpg">Plaster</option>
<option value="./images/textures/ocean.jpg">Ocean</option>
<option value="./images/textures/antique-small.jpg">Antique small</option>
<option value="./images/textures/antique-big.jpg">Antique big</option>
<option value="./images/textures/pergamena-small.jpg">Pergamena small</option>
<option value="./images/textures/marble-big.jpg" selected>Marble big</option>
<option value="./images/textures/marble-small.jpg">Marble small</option>
<option value="./images/textures/marble-blue-small.jpg">Marble Blue</option>
<option value="./images/textures/marble-blue-big.jpg">Marble Blue big</option>
<option value="./images/textures/stone-small.jpg">Stone small</option>
<option value="./images/textures/stone-big.jpg">Stone big</option>
<option value="./images/textures/timbercut-small.jpg">Timber Cut small</option>
<option value="./images/textures/timbercut-big.jpg">Timber Cut big</option>
<option value="./images/textures/mars-small.jpg">Mars small</option>
<option value="./images/textures/mars-big.jpg">Mars big</option>
<option value="./images/textures/mercury-small.jpg">Mercury small</option>
<option value="./images/textures/mercury-big.jpg">Mercury big</option>
<option value="./images/textures/mauritania-small.jpg">Mauritania small</option>
<option value="./images/textures/iran-small.jpg">Iran small</option>
<option value="./images/textures/spain-small.jpg">Spain small</option>
</select>
<button
data-tip="Click and provide a URL to image to be set as a texture"
@ -7985,16 +7939,16 @@
<script src="libs/lineclip.min.js"></script>
<script src="libs/alea.min.js"></script>
<script src="modules/fonts.js?v=1.89.18"></script>
<script src="modules/ui/layers.js?v=1.93.07"></script>
<script src="modules/ui/layers.js?v=1.94.00"></script>
<script src="modules/ui/measurers.js?v=1.87.02"></script>
<script src="modules/ui/stylePresets.js?v=1.93.07"></script>
<script src="modules/ui/stylePresets.js?v=1.94.00"></script>
<script src="modules/ui/general.js?v=1.93.04"></script>
<script src="modules/ui/options.js?v=1.93.12"></script>
<script src="main.js?v=1.93.02"></script>
<script src="modules/ui/general.js?v=1.94.00"></script>
<script src="modules/ui/options.js?v=1.94.00"></script>
<script src="main.js?v=1.94.00"></script>
<script defer src="modules/relief-icons.js"></script>
<script defer src="modules/ui/style.js?v=1.93.12"></script>
<script defer src="modules/ui/style.js?v=1.94.00"></script>
<script defer src="modules/ui/editors.js?v=1.93.10"></script>
<script defer src="modules/ui/tools.js?v=1.92.00"></script>
<script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>
@ -8029,13 +7983,13 @@
<script defer src="modules/ui/3d.js?v=1.93.11"></script>
<script defer src="modules/ui/submap.js?v=1.92.00"></script>
<script defer src="modules/ui/hotkeys.js?v=1.93.00"></script>
<script defer src="modules/coa-renderer.js?v=1.91.00"></script>
<script defer src="modules/coa-renderer.js?v=1.94.00"></script>
<script defer src="libs/rgbquant.min.js"></script>
<script defer src="libs/jquery.ui.touch-punch.min.js"></script>
<script defer src="modules/io/save.js?v=1.93.02"></script>
<script defer src="modules/io/load.js?v=1.93.02"></script>
<script defer src="modules/io/load.js?v=1.94.00"></script>
<script defer src="modules/io/cloud.js"></script>
<script defer src="modules/io/export.js?v=1.93.12"></script>
<script defer src="modules/io/export.js?v=1.94.00"></script>
<script defer src="modules/io/formats.js"></script>
<!-- Web Components -->

2
libs/umami.js
View file

@ -1,5 +1,5 @@
(window => {
const noTrack = !location.hostname || window.localStorage.getItem("noTrack");
const noTrack = window.localStorage.getItem("noTrack");
const {
screen: {width, height},

11
main.js
View file

@ -134,13 +134,6 @@ fogging
.attr("fill", "#e8f0f6")
.attr("filter", "url(#splotch)");
texture
.append("image")
.attr("id", "textureImage")
.attr("preserveAspectRatio", "xMidYMid slice")
.attr("width", "100%")
.attr("height", "100%");
// assign events separately as not a viewbox child
scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
legend
@ -1955,7 +1948,9 @@ const regenerateMap = debounce(async function (options) {
// clear the map
function undraw() {
viewbox.selectAll("path, circle, polygon, line, text, use, #zones > g, #armies > g, #ruler > g").remove();
viewbox
.selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g")
.remove();
document
.getElementById("deftemp")
.querySelectorAll("path, clipPath, svg")

4
modules/coa-renderer.js
View file

@ -1953,9 +1953,9 @@ window.COArenderer = (function () {
return fetchedCharges.join("");
}
const url = location.hostname ? "./charges/" : "http://armoria.herokuapp.com/charges/"; // on local machine fetch files from server
const PATH = "./charges/";
async function fetchCharge(charge, id) {
const fetched = fetch(url + charge + ".svg")
const fetched = fetch(PATH + charge + ".svg")
.then(res => {
if (res.ok) return res.text();
else throw new Error("Cannot fetch charge");

41
modules/dynamic/auto-update.js
View file

@ -638,19 +638,6 @@ export function resolveVersionConflicts(version) {
}
if (version < 1.91) {
// from v1.90.02 texture image is always there
if (!texture.select("#textureImage").size()) {
// cleanup old texture if it has no id and add new one
texture.selectAll("*").remove();
texture
.append("image")
.attr("id", "textureImage")
.attr("width", "100%")
.attr("height", "100%")
.attr("preserveAspectRatio", "xMidYMid slice")
.attr("src", "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg");
}
// from 1.91.00 custom coa is moved to coa object
pack.states.forEach(state => {
if (state.coa === "custom") state.coa = {custom: true};
@ -704,19 +691,23 @@ export function resolveVersionConflicts(version) {
labels.selectAll("tspan").each(function () {
this.setAttribute("x", 0);
});
// leftover from v1.90.02
texture.style("display", null);
const textureImage = texture.select("#textureImage");
if (textureImage.size()) {
const xlink = textureImage.attr("xlink:href");
const href = textureImage.attr("href");
const src = xlink || href;
if (src) {
textureImage.attr("src", src);
textureImage.attr("xlink:href", null);
}
if (version < 1.94) {
// from v1.94.00 texture image is removed when layer is off
texture.style("display", null);
const textureImage = texture.select("image");
if (textureImage.size()) {
// restore parameters
const x = Number(textureImage.attr("x") || 0);
const y = Number(textureImage.attr("y") || 0);
const href = textureImage.attr("xlink:href") || textureImage.attr("href") || textureImage.attr("src");
// save parameters to parent element
texture.attr("data-href", href).attr("data-x", x).attr("data-y", y);
// recreate image in expected format
textureImage.remove();
drawTexture();
}
}
}

24
modules/io/export.js
View file

@ -236,28 +236,28 @@ async function getMapURL(type, options = {}) {
cloneDefs.querySelector("#defs-emblems")?.remove();
}
{
// replace ocean pattern href to base64
if (location.hostname) {
const el = cloneEl.getElementById("oceanicPattern");
const url = el?.getAttribute("href");
if (url) {
const image = cloneEl.getElementById("oceanicPattern");
const href = image?.getAttribute("href");
if (href) {
await new Promise(resolve => {
getBase64(url, base64 => {
el.setAttribute("href", base64);
getBase64(href, base64 => {
image.setAttribute("href", base64);
resolve();
});
});
}
}
{
// replace texture href to base64
if (location.hostname) {
const el = cloneEl.getElementById("textureImage");
const url = el?.getAttribute("href");
if (url) {
const image = cloneEl.querySelector("#texture > image");
const href = image?.getAttribute("href");
if (href) {
await new Promise(resolve => {
getBase64(url, base64 => {
el.setAttribute("href", base64);
getBase64(href, base64 => {
image.setAttribute("href", base64);
resolve();
});
});

10
modules/io/load.js
View file

@ -415,7 +415,7 @@ async function parseLoadedData(data) {
.forEach(el => el.classList.add("buttonoff"));
// turn on active layers
if (notHidden(texture) && hasChild(texture, "image")) turnOn("toggleTexture");
if (hasChild(texture, "image")) turnOn("toggleTexture");
if (hasChildren(terrs)) turnOn("toggleHeight");
if (hasChildren(biomes)) turnOn("toggleBiomes");
if (hasChildren(cells)) turnOn("toggleCells");
@ -456,7 +456,7 @@ async function parseLoadedData(data) {
{
// dynamically import and run auto-update script
const versionNumber = parseFloat(params[0]);
const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.93.00");
const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.94.00");
resolveVersionConflicts(versionNumber);
}
@ -468,6 +468,12 @@ async function parseLoadedData(data) {
}
}
{
// add custom texture if any
const textureHref = texture.attr("data-href");
updateTextureSelectValue(textureHref);
}
void (function checkDataIntegrity() {
const cells = pack.cells;

2
modules/ui/general.js
View file

@ -9,7 +9,7 @@ window.addEventListener("resize", function (e) {
changeMapSize();
});
if (location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
window.onbeforeunload = () => "Are you sure you want to navigate away?";
}

23
modules/ui/layers.js
View file

@ -157,6 +157,7 @@ function getCurrentPreset() {
// run on map regeneration
function restoreLayers() {
if (layerIsOn("toggleTexture")) drawTexture();
if (layerIsOn("toggleHeight")) drawHeightmap();
if (layerIsOn("toggleCells")) drawCells();
if (layerIsOn("toggleGrid")) drawGrid();
@ -1509,18 +1510,30 @@ function toggleRelief(event) {
function toggleTexture(event) {
if (!layerIsOn("toggleTexture")) {
turnButtonOn("toggleTexture");
// href is not set directly to avoid image loading when layer is off
const textureImage = byId("textureImage");
if (textureImage) textureImage.setAttribute("href", textureImage.getAttribute("src"));
drawTexture();
if (event && isCtrlClick(event)) editStyle("texture");
} else {
if (event && isCtrlClick(event)) return editStyle("texture");
turnButtonOff("toggleTexture");
texture.select("image").attr("href", null);
texture.select("image").remove();
}
}
function drawTexture() {
const x = Number(texture.attr("data-x") || 0);
const y = Number(texture.attr("data-y") || 0);
const href = texture.attr("data-href");
texture
.append("image")
.attr("preserveAspectRatio", "xMidYMid slice")
.attr("x", x)
.attr("y", y)
.attr("width", graphWidth - x)
.attr("height", graphHeight - y)
.attr("href", href);
}
function toggleRivers(event) {
if (!layerIsOn("toggleRivers")) {
turnButtonOn("toggleRivers");

6
modules/ui/options.js
View file

@ -178,7 +178,7 @@ function mapSizeInputChange() {
}
}
// change svg size on manual size change or window resize, do not change graph size
// change svg size on manual size change or window resize (do not change graph size!)
function changeMapSize() {
svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
@ -186,16 +186,18 @@ function changeMapSize() {
const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
zoom.translateExtent([
[0, 0],
[maxWidth, maxHeight]
]);
landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
fogging.selectAll("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
defs.select("mask#fog > rect").attr("width", maxWidth).attr("height", maxHeight);
texture.select("image").attr("width", maxWidth).attr("height", maxHeight);
defs.select("mask#water > rect").attr("width", maxWidth).attr("height", maxHeight);
fitScaleBar();
if (window.fitLegendBox) fitLegendBox();

112
modules/ui/style.js
View file

@ -71,36 +71,36 @@ function getColorScheme(scheme = "bright") {
// Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement);
function selectStyleElement() {
const sel = styleElementSelect.value;
let el = d3.select("#" + sel);
const styleElement = styleElementSelect.value;
let el = d3.select("#" + styleElement);
styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections
// show alert line if layer is not visible
const isLayerOff = sel !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size());
const isLayerOff = styleElement !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size());
styleIsOff.style.display = isLayerOff ? "block" : "none";
// active group element
const group = styleGroupSelect.value;
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
const gEl = group && el.select("#" + group);
el = group && gEl.size() ? gEl : el.select("g");
}
// opacity
if (!["landmass", "ocean", "regions", "legend"].includes(sel)) {
if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) {
styleOpacity.style.display = "block";
styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
}
// filter
if (!["landmass", "legend", "regions"].includes(sel)) {
if (!["landmass", "legend", "regions"].includes(styleElement)) {
styleFilter.style.display = "block";
styleFilterInput.value = el.attr("filter") || "";
}
// fill
if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) {
if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(styleElement)) {
styleFill.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill");
}
@ -122,7 +122,7 @@ function selectStyleElement() {
"coordinates",
"zones",
"gridOverlay"
].includes(sel)
].includes(styleElement)
) {
styleStroke.style.display = "block";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
@ -132,7 +132,9 @@ function selectStyleElement() {
// stroke dash
if (
["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)
["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(
styleElement
)
) {
styleStrokeDash.style.display = "block";
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
@ -152,16 +154,21 @@ function selectStyleElement() {
"texture",
"biomes",
"zones"
].includes(sel)
].includes(styleElement)
) {
styleClipping.style.display = "block";
styleClippingInput.value = el.attr("mask") || "";
}
// show specific sections
if (sel === "texture") styleTexture.style.display = "block";
if (styleElement === "texture") {
styleTexture.style.display = "block";
styleTextureShiftX.value = el.attr("data-x") || 0;
styleTextureShiftY.value = el.attr("data-y") || 0;
updateTextureSelectValue(el.attr("data-href"));
}
if (sel === "terrs") {
if (styleElement === "terrs") {
styleHeightmap.style.display = "block";
styleHeightmapScheme.value = terrs.attr("scheme");
styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing");
@ -170,12 +177,12 @@ function selectStyleElement() {
styleHeightmapCurve.value = terrs.attr("curve");
}
if (sel === "markers") {
if (styleElement === "markers") {
styleMarkers.style.display = "block";
styleRescaleMarkers.checked = +markers.attr("rescale");
}
if (sel === "gridOverlay") {
if (styleElement === "gridOverlay") {
styleGrid.style.display = "block";
styleGridType.value = el.attr("type");
styleGridScale.value = el.attr("scale") || 1;
@ -184,7 +191,7 @@ function selectStyleElement() {
calculateFriendlyGridSize();
}
if (sel === "compass") {
if (styleElement === "compass") {
styleCompass.style.display = "block";
const tr = parseTransform(compass.select("use").attr("transform"));
styleCompassShiftX.value = tr[0];
@ -192,14 +199,14 @@ function selectStyleElement() {
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
}
if (sel === "terrain") {
if (styleElement === "terrain") {
styleRelief.style.display = "block";
styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
styleReliefSet.value = terrain.attr("set");
}
if (sel === "population") {
if (styleElement === "population") {
stylePopulation.style.display = "block";
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population
.select("#rural")
@ -211,7 +218,7 @@ function selectStyleElement() {
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
}
if (sel === "regions") {
if (styleElement === "regions") {
styleStates.style.display = "block";
styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
styleStatesBodyFilter.value = statesBody.attr("filter") || "";
@ -221,7 +228,7 @@ function selectStyleElement() {
styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
}
if (sel === "labels") {
if (styleElement === "labels") {
styleFill.style.display = "block";
styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block";
@ -239,7 +246,7 @@ function selectStyleElement() {
styleFontSize.value = el.attr("data-size");
}
if (sel === "provs") {
if (styleElement === "provs") {
styleFill.style.display = "block";
styleSize.style.display = "block";
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111";
@ -249,7 +256,7 @@ function selectStyleElement() {
styleFontSize.value = el.attr("data-size");
}
if (sel == "burgIcons") {
if (styleElement == "burgIcons") {
styleFill.style.display = "block";
styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block";
@ -263,7 +270,7 @@ function selectStyleElement() {
styleRadiusInput.value = el.attr("size") || 1;
}
if (sel == "anchors") {
if (styleElement == "anchors") {
styleFill.style.display = "block";
styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block";
@ -274,7 +281,7 @@ function selectStyleElement() {
styleIconSizeInput.value = el.attr("size") || 2;
}
if (sel === "legend") {
if (styleElement === "legend") {
styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block";
styleSize.style.display = "block";
@ -292,7 +299,7 @@ function selectStyleElement() {
styleFontSize.value = el.attr("data-size");
}
if (sel === "ocean") {
if (styleElement === "ocean") {
styleOcean.style.display = "block";
styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
styleOceanPattern.value = byId("oceanicPattern")?.getAttribute("href");
@ -301,7 +308,7 @@ function selectStyleElement() {
outlineLayers.value = oceanLayers.attr("layers");
}
if (sel === "temperature") {
if (styleElement === "temperature") {
styleStrokeWidth.style.display = "block";
styleTemperature.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
@ -310,18 +317,18 @@ function selectStyleElement() {
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
}
if (sel === "coordinates") {
if (styleElement === "coordinates") {
styleSize.style.display = "block";
styleFontSize.value = el.attr("data-size");
}
if (sel === "armies") {
if (styleElement === "armies") {
styleArmies.style.display = "block";
styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
}
if (sel === "emblems") {
if (styleElement === "emblems") {
styleEmblems.style.display = "block";
styleStrokeWidth.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
@ -329,8 +336,8 @@ function selectStyleElement() {
// update group options
styleGroupSelect.options.length = 0; // remove all options
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) {
const groups = byId(sel).querySelectorAll("g");
if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(styleElement)) {
const groups = byId(styleElement).querySelectorAll("g");
groups.forEach(el => {
if (el.id === "burgLabels") return;
const option = new Option(`${el.id} (${el.childElementCount})`, el.id, false, false);
@ -339,11 +346,11 @@ function selectStyleElement() {
styleGroupSelect.value = el.attr("id");
styleGroup.style.display = "block";
} else {
styleGroupSelect.options.add(new Option(sel, sel, false, true));
styleGroupSelect.options.add(new Option(styleElement, styleElement, false, true));
styleGroup.style.display = "none";
}
if (sel === "coastline" && styleGroupSelect.value === "sea_island") {
if (styleElement === "coastline" && styleGroupSelect.value === "sea_island") {
styleCoastline.style.display = "block";
const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter"));
if (auto) styleFilter.style.display = "none";
@ -398,12 +405,26 @@ styleFilterInput.addEventListener("change", function () {
});
styleTextureInput.addEventListener("change", function () {
texture.select("image").attr("src", this.value);
if (layerIsOn("toggleTexture")) texture.select("image").attr("href", this.value);
zoom.scaleBy(svg, 1.00001);
changeTexture(this.value);
});
function changeTexture(href) {
texture.attr("data-href", href);
texture.select("image").attr("href", href);
}
function updateTextureSelectValue(href) {
const isAdded = Array.from(styleTextureInput.options).some(option => option.value === href);
if (isAdded) {
styleTextureInput.value = href;
} else {
const name = href.split("/").pop().slice(0, 20);
styleTextureInput.add(new Option(name, href, false, true));
}
}
styleTextureShiftX.addEventListener("input", function () {
texture.attr("data-x", this.value);
texture
.select("image")
.attr("x", this.value)
@ -411,6 +432,7 @@ styleTextureShiftX.addEventListener("input", function () {
});
styleTextureShiftY.addEventListener("input", function () {
texture.attr("data-y", this.value);
texture
.select("image")
.attr("y", this.value)
@ -905,27 +927,19 @@ emblemsBurgSizeInput.addEventListener("change", drawEmblems);
// request a URL to image to be used as a texture
function textureProvideURL() {
alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture:
alertMessage.innerHTML = /* html */ `Provide a texture image URL:
<input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" />
<canvas id="texturePreview" width="256px" height="144px"></canvas>`;
$("#alert").dialog({
resizable: false,
title: "Load custom texture",
width: "26em",
width: "28em",
buttons: {
Apply: function () {
const name = textureURL.value.split("/").pop();
if (!name || name === "") return tip("Please provide a valid URL", false, "error");
const opt = document.createElement("option");
opt.value = textureURL.value;
opt.text = name.slice(0, 20);
styleTextureInput.add(opt);
styleTextureInput.value = textureURL.value;
const image = texture.select("image");
image.attr("src", textureURL.value);
if (layerIsOn("toggleTexture")) image.attr("href", textureURL.value);
if (!textureURL.value) return tip("Please provide a valid URL", false, "error");
changeTexture(textureURL.value);
updateTextureSelectValue(textureURL.value);
$(this).dialog("close");
},
Cancel: function () {

37
modules/ui/stylePresets.js
View file

@ -62,21 +62,19 @@ async function getStylePreset(desiredPreset) {
}
async function fetchSystemPreset(preset) {
const style = await fetch(`./styles/${preset}.json`)
.then(res => res.json())
.catch(err => {
ERROR && console.error("Error on loading style preset", preset, err);
return null;
});
if (!style) throw new Error("Cannot fetch style preset", preset);
return style;
try {
const res = await fetch(`./styles/${preset}.json`);
return await res.json();
} catch (err) {
throw new Error("Cannot fetch style preset", preset);
}
}
function applyStyle(style) {
for (const selector in style) {
const el = document.querySelector(selector);
if (!el) continue;
for (const attribute in style[selector]) {
const value = style[selector][attribute];
@ -91,8 +89,13 @@ function applyStyle(style) {
el.setAttribute(attribute, value);
}
if (layerIsOn("toggleTexture") && selector === "#textureImage" && attribute === "src") {
el.setAttribute("href", value);
if (selector === "#texture") {
const image = document.querySelector("#texture > image");
if (image) {
if (attribute === "data-x") image.setAttribute("x", value);
if (attribute === "data-y") image.setAttribute("y", value);
if (attribute === "data-href") image.setAttribute("href", value);
}
}
// add custom heightmap color scheme
@ -105,10 +108,7 @@ function applyStyle(style) {
function requestStylePresetChange(preset) {
const isConfirmed = sessionStorage.getItem("styleChangeConfirmed");
if (isConfirmed) {
changeStyle(preset);
return;
}
if (isConfirmed) return changeStyle(preset);
confirmationDialog({
title: "Change style preset",
@ -126,8 +126,8 @@ function requestStylePresetChange(preset) {
async function changeStyle(desiredPreset) {
const styleData = await getStylePreset(desiredPreset);
const [appliedPreset, style] = styleData;
localStorage.setItem("presetStyle", appliedPreset);
const [presetName, style] = styleData;
localStorage.setItem("presetStyle", presetName);
applyStyleWithUiRefresh(style);
}
@ -234,8 +234,7 @@ function addStylePreset() {
],
"#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
"#emblems": ["opacity", "stroke-width", "filter"],
"#texture": ["opacity", "filter", "mask"],
"#textureImage": ["x", "y", "src"],
"#texture": ["opacity", "filter", "mask", "data-x", "data-y", "data-href"],
"#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
"#oceanLayers": ["filter", "layers"],
"#oceanBase": ["fill"],

10
styles/ancient.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.6,
"filter": "",
"mask": ""
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg"
"mask": "",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/antique-small.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/atlas.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.2,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/clean.json
View file

@ -263,12 +263,10 @@
"#texture": {
"opacity": 0.2,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#zones": {
"opacity": 0.7,

10
styles/cyberpunk.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.2,
"filter": null,
"mask": "url(#water)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg"
"mask": "url(#water)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/mercury-small.jpg"
},
"#zones": {
"opacity": 0.7,

10
styles/default.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": null,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/marble-big.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/gloom.json
View file

@ -263,12 +263,10 @@
"#texture": {
"opacity": 0.8,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/iran-small.jpg"
},
"#zones": {
"opacity": 0.5,

10
styles/light.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.4,
"filter": null,
"mask": ""
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/monochrome.json
View file

@ -251,12 +251,10 @@
"#texture": {
"opacity": 0.2,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#emblems": {
"opacity": 0.5,

10
styles/night.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.1,
"filter": null,
"mask": "url(#water)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg"
"mask": "url(#water)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/marble-blue-small.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/pale.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.4,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#zones": {
"opacity": 0.6,

10
styles/watercolor.json
View file

@ -261,12 +261,10 @@
"#texture": {
"opacity": 0.2,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
"mask": "url(#land)",
"data-x": 0,
"data-y": 0,
"data-href": "./images/textures/plaster.jpg"
},
"#zones": {
"opacity": 0.6,

2
versioning.js
View file

@ -1,7 +1,7 @@
"use strict";
// version and caching control
const version = "1.93.12"; // generator version, update each time
const version = "1.94.00"; // generator version, update each time
{
document.title += " v" + version;