mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
Fix: rework texture data format (#1017)
* 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
GitHub
parent
958a2c6ef8
commit
ada39b47ad
47 changed files with 225 additions and 273 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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
|
||||
if (version < 1.94) {
|
||||
// from v1.94.00 texture image is removed when layer is off
|
||||
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);
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
{
|
||||
// replace ocean pattern href to base64
|
||||
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) {
|
||||
{
|
||||
// replace texture href to base64
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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?";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue