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

bug: style to have texture info

Browse source
This commit is contained in:
Azgaar 2023-08-08 01:34:36 +04:00
parent 8579ae7bff
commit c72c998eaf
18 changed files with 150 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -865,7 +865,7 @@
<td>Image</td>
<td>
<select id="styleTextureInput">
<option value="none">None</option>
<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>

7
main.js
View file

@ -134,6 +134,13 @@ 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

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

@ -636,4 +636,18 @@ export function resolveVersionConflicts(version) {
if (coa?.shield === "state") delete coa.shield;
});
}
if (version < 1.9) {
// from v1.90.02 texture image is always there
if (!texture.selectAll("*").size()) {
texture.style("display", "none");
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");
}
}
}

18
modules/io/export.js
View file

@ -237,9 +237,23 @@ async function getMapURL(type, options = {}) {
}
// replace ocean pattern href to base64
if (location.hostname && cloneEl.getElementById("oceanicPattern")) {
if (location.hostname) {
const el = cloneEl.getElementById("oceanicPattern");
const url = el.getAttribute("href");
const url = el?.getAttribute("href");
if (url) {
await new Promise(resolve => {
getBase64(url, base64 => {
el.setAttribute("href", base64);
resolve();
});
});
}
}
// replace texture href to base64
if (location.hostname) {
const el = cloneEl.getElementById("textureImage");
const url = el?.getAttribute("href");
if (url) {
await new Promise(resolve => {
getBase64(url, base64 => {

21
modules/ui/layers.js
View file

@ -1517,27 +1517,14 @@ function toggleRelief(event) {
function toggleTexture(event) {
if (!layerIsOn("toggleTexture")) {
turnButtonOn("toggleTexture");
// append default texture image selected by default. Don't append on load to not harm performance
if (!texture.selectAll("*").size()) {
const x = +styleTextureShiftX.value;
const y = +styleTextureShiftY.value;
const image = texture
.append("image")
.attr("id", "textureImage")
.attr("x", x)
.attr("y", y)
.attr("width", graphWidth - x)
.attr("height", graphHeight - y)
.attr("preserveAspectRatio", "xMidYMid slice");
getBase64(styleTextureInput.value, base64 => image.attr("xlink:href", base64));
}
$("#texture").fadeIn();
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
// href is not set directly to avoid image loading when layer is off
const src = texture.select("image").attr("src");
texture.select("image").attr("href", src);
if (event && isCtrlClick(event)) editStyle("texture");
} else {
if (event && isCtrlClick(event)) return editStyle("texture");
$("#texture").fadeOut();
turnButtonOff("toggleTexture");
texture.select("image").attr("href", null);
}
}

71
modules/ui/style.js
View file

@ -76,9 +76,22 @@ function selectStyleElement() {
// stroke color and width
if (
["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(
sel
)
[
"armies",
"routes",
"lakes",
"borders",
"cults",
"relig",
"cells",
"coastline",
"prec",
"ice",
"icons",
"coordinates",
"zones",
"gridOverlay"
].includes(sel)
) {
styleStroke.style.display = "block";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
@ -87,14 +100,29 @@ function selectStyleElement() {
}
// stroke dash
if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) {
if (
["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)
) {
styleStrokeDash.style.display = "block";
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
}
// clipping
if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) {
if (
[
"cells",
"gridOverlay",
"coordinates",
"compass",
"terrain",
"temperature",
"routes",
"texture",
"biomes",
"zones"
].includes(sel)
) {
styleClipping.style.display = "block";
styleClippingInput.value = el.attr("mask") || "";
}
@ -142,8 +170,12 @@ function selectStyleElement() {
if (sel === "population") {
stylePopulation.style.display = "block";
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population
.select("#rural")
.attr("stroke");
stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population
.select("#urban")
.attr("stroke");
styleStrokeWidth.style.display = "block";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
}
@ -233,7 +265,8 @@ function selectStyleElement() {
styleOcean.style.display = "block";
styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
styleOceanPattern.value = document.getElementById("oceanicPattern")?.getAttribute("href");
styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value = document.getElementById("oceanicPattern").getAttribute("opacity") || 1;
styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
document.getElementById("oceanicPattern").getAttribute("opacity") || 1;
outlineLayers.value = oceanLayers.attr("layers");
}
@ -334,8 +367,9 @@ styleFilterInput.addEventListener("change", function () {
});
styleTextureInput.addEventListener("change", function () {
if (this.value === "none") texture.select("image").attr("xlink:href", "");
else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
texture.select("image").attr("src", this.value);
if (layerIsOn("toggleTexture")) texture.select("image").attr("href", this.value);
zoom.scaleBy(svg, 1.00001);
});
styleTextureShiftX.addEventListener("input", function () {
@ -551,7 +585,10 @@ styleFontAdd.addEventListener("click", function () {
if (!family) return tip("Please provide a font name", false, "error");
const existingFont = method === "fontURL" ? fonts.find(font => font.family === family && font.src === src) : fonts.find(font => font.family === family);
const existingFont =
method === "fontURL"
? fonts.find(font => font.family === family && font.src === src)
: fonts.find(font => font.family === family);
if (existingFont) return tip("The font is already added", false, "error");
if (method === "fontURL") addWebFont(family, src);
@ -726,17 +763,17 @@ function textureProvideURL() {
buttons: {
Apply: function () {
const name = textureURL.value.split("/").pop();
if (!name || name === "") {
tip("Please provide a valid URL", false, "error");
return;
}
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;
getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64));
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
const image = texture.select("image");
image.attr("src", textureURL.value);
if (layerIsOn("toggleTexture")) image.attr("href", textureURL.value);
$(this).dialog("close");
},
Cancel: function () {

6
modules/ui/stylePresets.js
View file

@ -89,6 +89,10 @@ function applyStyle(style) {
} else {
el.setAttribute(attribute, value);
}
if (layerIsOn("toggleTexture") && selector === "#textureImage" && attribute === "src") {
el.setAttribute("href", value);
}
}
}
}
@ -225,7 +229,7 @@ function addStylePreset() {
"#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
"#emblems": ["opacity", "stroke-width", "filter"],
"#texture": ["opacity", "filter", "mask"],
"#textureImage": ["x", "y"],
"#textureImage": ["x", "y", "src"],
"#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
"#oceanLayers": ["filter", "layers"],
"#oceanBase": ["fill"],

3
styles/ancient.json
View file

@ -265,7 +265,8 @@
},
"#textureImage": {
"x": 0,
"y": 0
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg"
},
"#zones": {
"opacity": 0.6,

7
styles/atlas.json
View file

@ -259,10 +259,15 @@
"filter": null
},
"#texture": {
"opacity": null,
"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"
},
"#zones": {
"opacity": 0.6,
"stroke": "#333333",

8
styles/clean.json
View file

@ -261,11 +261,15 @@
"filter": null
},
"#texture": {
"opacity": null,
"opacity": 0.2,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
},
"#zones": {
"opacity": 0.7,
"stroke": "#ff6262",

7
styles/cyberpunk.json
View file

@ -259,10 +259,15 @@
"filter": ""
},
"#texture": {
"opacity": 0.14,
"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"
},
"#zones": {
"opacity": 0.7,
"stroke": "#ffffff",

5
styles/default.json
View file

@ -263,6 +263,11 @@
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg"
},
"#zones": {
"opacity": 0.6,
"stroke": "#333333",

5
styles/gloom.json
View file

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

7
styles/light.json
View file

@ -259,10 +259,15 @@
"filter": null
},
"#texture": {
"opacity": 0.39,
"opacity": 0.4,
"filter": null,
"mask": ""
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
},
"#zones": {
"opacity": 0.6,
"stroke": "#333333",

8
styles/monochrome.json
View file

@ -249,16 +249,20 @@
"filter": "url(#dropShadow05)"
},
"#texture": {
"opacity": 1,
"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"
},
"#emblems": {
"opacity": 0.5,
"stroke-width": 0.5,
"filter": null
},
"#textureImage": {},
"#zones": {
"opacity": 0.6,
"stroke": "#333333",

5
styles/pale.json
View file

@ -259,13 +259,14 @@
"filter": null
},
"#texture": {
"opacity": 0.39,
"opacity": 0.4,
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
},
"#zones": {
"opacity": 0.6,

5
styles/watercolor.json
View file

@ -263,6 +263,11 @@
"filter": null,
"mask": "url(#land)"
},
"#textureImage": {
"x": 0,
"y": 0,
"src": "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg"
},
"#zones": {
"opacity": 0.6,
"stroke": "#333333",

2
versioning.js
View file

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