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 scaleBar on svg export

Browse source
This commit is contained in:
Azgaar 2021-10-23 15:19:34 +03:00
parent 120bf4a7eb
commit 043f71c174
4 changed files with 41 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -3608,17 +3608,17 @@
<p>Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p> <p>Map will be split into tiles and downloaded as a single zip file. Avoid saving to big images</p>
<div data-tip="Number of columns" style="margin-bottom: .3em"> <div data-tip="Number of columns" style="margin-bottom: .3em">
<div class="label">Columns:</div> <div class="label">Columns:</div>
<input id="tileColsInput" data-stored="tileCols" type="range" min=2 max=20 value=8 style="width: 11em"> <input id="tileColsInput" data-stored="tileCols" type="range" min=2 max=20 value=8 style="width: 10em">
<input id="tileColsOutput" data-stored="tileCols" type="number" min=2 value=8 > <input id="tileColsOutput" data-stored="tileCols" type="number" min=2 value=8 >
</div> </div>
<div data-tip="Number of rows" style="margin-bottom: .3em"> <div data-tip="Number of rows" style="margin-bottom: .3em">
<div class="label">Rows:</div> <div class="label">Rows:</div>
<input id="tileRowsInput" data-stored="tileRows" type="range" min=2 max=20 value=8 style="width: 11em"> <input id="tileRowsInput" data-stored="tileRows" type="range" min=2 max=20 value=8 style="width: 10em">
<input id="tileRowsOutput" data-stored="tileRows" type="number" min=2 value=8 > <input id="tileRowsOutput" data-stored="tileRows" type="number" min=2 value=8 >
</div> </div>
<div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em"> <div data-tip="Image scale relative to image size (e.g. 5x)" style="margin-bottom: .3em">
<div class="label">Scale:</div> <div class="label">Scale:</div>
<input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 11em"> <input id="tileScaleInput" data-stored="tileScale" type="range" min=1 max=4 value=1 style="width: 10em">
<input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1 <input id="tileScaleOutput" data-stored="tileScale" type="number" min=1 value=1
> >
</div> </div>

14
modules/export.js
View file

@ -4,7 +4,7 @@
// download map as SVG // download map as SVG
async function saveSVG() { async function saveSVG() {
TIME && console.time("saveSVG"); TIME && console.time("saveSVG");
const url = await getMapURL("svg"); const url = await getMapURL("svg", {fullMap: true});
const link = document.createElement("a"); const link = document.createElement("a");
link.download = getFileName() + ".svg"; link.download = getFileName() + ".svg";
link.href = url; link.href = url;
@ -74,7 +74,7 @@ async function saveJPEG() {
async function saveTiles() { async function saveTiles() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
// download schema // download schema
const urlSchema = await getMapURL("tiles", {debug: true}); const urlSchema = await getMapURL("tiles", {debug: true, fullMap: true});
const zip = new JSZip(); const zip = new JSZip();
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -90,7 +90,7 @@ async function saveTiles() {
}; };
// download tiles // download tiles
const url = await getMapURL("tiles"); const url = await getMapURL("tiles", {fullMap: true});
const tilesX = +document.getElementById("tileColsInput").value; const tilesX = +document.getElementById("tileColsInput").value;
const tilesY = +document.getElementById("tileRowsInput").value; const tilesY = +document.getElementById("tileRowsInput").value;
const scale = +document.getElementById("tileScaleInput").value; const scale = +document.getElementById("tileScaleInput").value;
@ -139,7 +139,10 @@ async function saveTiles() {
// parse map svg to object url // parse map svg to object url
async function getMapURL(type, options = {}) { async function getMapURL(type, options = {}) {
const {debug = false, globe = false, noLabels = false, noWater = false} = options; const {debug = false, globe = false, noLabels = false, noWater = false, fullMap = false} = options;
if (fullMap) drawScaleBar(1);
const cloneEl = document.getElementById("map").cloneNode(true); // clone svg const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
cloneEl.id = "fantasyMap"; cloneEl.id = "fantasyMap";
document.body.appendChild(cloneEl); document.body.appendChild(cloneEl);
@ -161,10 +164,11 @@ async function getMapURL(type, options = {}) {
clone.select("#oceanBase").attr("opacity", 0); clone.select("#oceanBase").attr("opacity", 0);
clone.select("#oceanPattern").attr("opacity", 0); clone.select("#oceanPattern").attr("opacity", 0);
} }
if (type !== "png") { if (fullMap) {
// reset transform to show the whole map // reset transform to show the whole map
clone.attr("width", graphWidth).attr("height", graphHeight); clone.attr("width", graphWidth).attr("height", graphHeight);
clone.select("#viewbox").attr("transform", null); clone.select("#viewbox").attr("transform", null);
drawScaleBar(scale);
} }
if (type === "svg") removeUnusedElements(clone); if (type === "svg") removeUnusedElements(clone);

8
modules/ui/3d.js
View file

@ -391,7 +391,8 @@ window.ThreeD = (function () {
async function createMesh(width, height, segmentsX, segmentsY) { async function createMesh(width, height, segmentsX, segmentsY) {
const mapOptions = { const mapOptions = {
noLabels: options.labels3d, noLabels: options.labels3d,
noWater: options.extendedWater noWater: options.extendedWater,
fullMap: true
}; };
const url = await getMapURL("mesh", mapOptions); const url = await getMapURL("mesh", mapOptions);
window.setTimeout(() => window.URL.revokeObjectURL(url), 5000); window.setTimeout(() => window.URL.revokeObjectURL(url), 5000);
@ -445,7 +446,8 @@ window.ThreeD = (function () {
if (texture) texture.dispose(); if (texture) texture.dispose();
const mapOptions = { const mapOptions = {
noLabels: options.labels3d, noLabels: options.labels3d,
noWater: options.extendedWater noWater: options.extendedWater,
fullMap: true
}; };
const url = await getMapURL("mesh", mapOptions); const url = await getMapURL("mesh", mapOptions);
window.setTimeout(() => window.URL.revokeObjectURL(url), 4000); window.setTimeout(() => window.URL.revokeObjectURL(url), 4000);
@ -526,7 +528,7 @@ window.ThreeD = (function () {
material.map = texture; material.map = texture;
if (addMesh) addGlobe3dMesh(); if (addMesh) addGlobe3dMesh();
}; };
img2.src = await getMapURL("mesh", {globe: true}); img2.src = await getMapURL("mesh", {globe: true, fullMap: true});
} }
async function getOBJ() { async function getOBJ() {

38
modules/ui/measurers.js
View file

@ -20,7 +20,16 @@ class Rulers {
for (const rulerString of rulers) { for (const rulerString of rulers) {
const [type, pointsString] = rulerString.split(": "); const [type, pointsString] = rulerString.split(": ");
const points = pointsString.split(" ").map(el => el.split(",").map(n => +n)); const points = pointsString.split(" ").map(el => el.split(",").map(n => +n));
const Type = type === "Ruler" ? Ruler : type === "Opisometer" ? Opisometer : type === "RouteOpisometer" ? RouteOpisometer : type === "Planimeter" ? Planimeter : null; const Type =
type === "Ruler"
? Ruler
: type === "Opisometer"
? Opisometer
: type === "RouteOpisometer"
? RouteOpisometer
: type === "Planimeter"
? Planimeter
: null;
this.create(Type, points); this.create(Type, points);
} }
} }
@ -527,17 +536,18 @@ class Planimeter extends Measurer {
} }
// Scale bar // Scale bar
function drawScaleBar() { function drawScaleBar(requestedScale) {
if (scaleBar.style("display") === "none") return; // no need to re-draw hidden element if (scaleBar.style("display") === "none") return; // no need to re-draw hidden element
scaleBar.selectAll("*").remove(); // fully redraw every time scaleBar.selectAll("*").remove(); // fully redraw every time
const scaleLevel = requestedScale || scale;
const dScale = distanceScaleInput.value; const distanceScale = distanceScaleInput.value;
const unit = distanceUnitInput.value; const unit = distanceUnitInput.value;
const size = +barSizeInput.value;
// calculate size // calculate size
const init = 100; // actual length in pixels if scale, dScale and size = 1; const init = 100;
const size = +barSizeInput.value; let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit
let val = (init * size * dScale) / scale; // bar length in distance unit
if (val > 900) val = rn(val, -3); if (val > 900) val = rn(val, -3);
// round to 1000 // round to 1000
else if (val > 90) val = rn(val, -2); else if (val > 90) val = rn(val, -2);
@ -545,13 +555,13 @@ function drawScaleBar() {
else if (val > 9) val = rn(val, -1); else if (val > 9) val = rn(val, -1);
// round to 10 // round to 10
else val = rn(val); // round to 1 else val = rn(val); // round to 1
const l = (val * scale) / dScale; // actual length in pixels on this scale const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale
scaleBar scaleBar
.append("line") .append("line")
.attr("x1", 0.5) .attr("x1", 0.5)
.attr("y1", 0) .attr("y1", 0)
.attr("x2", l + size - 0.5) .attr("x2", length + size - 0.5)
.attr("y2", 0) .attr("y2", 0)
.attr("stroke-width", size) .attr("stroke-width", size)
.attr("stroke", "white"); .attr("stroke", "white");
@ -559,16 +569,16 @@ function drawScaleBar() {
.append("line") .append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("y1", size) .attr("y1", size)
.attr("x2", l + size) .attr("x2", length + size)
.attr("y2", size) .attr("y2", size)
.attr("stroke-width", size) .attr("stroke-width", size)
.attr("stroke", "#3d3d3d"); .attr("stroke", "#3d3d3d");
const dash = size + " " + rn(l / 5 - size, 2); const dash = size + " " + rn(length / 5 - size, 2);
scaleBar scaleBar
.append("line") .append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("y1", 0) .attr("y1", 0)
.attr("x2", l + size) .attr("x2", length + size)
.attr("y2", 0) .attr("y2", 0)
.attr("stroke-width", rn(size * 3, 2)) .attr("stroke-width", rn(size * 3, 2))
.attr("stroke-dasharray", dash) .attr("stroke-dasharray", dash)
@ -580,16 +590,16 @@ function drawScaleBar() {
.data(d3.range(0, 6)) .data(d3.range(0, 6))
.enter() .enter()
.append("text") .append("text")
.attr("x", d => rn((d * l) / 5, 2)) .attr("x", d => rn((d * length) / 5, 2))
.attr("y", 0) .attr("y", 0)
.attr("dy", "-.5em") .attr("dy", "-.5em")
.attr("font-size", fontSize) .attr("font-size", fontSize)
.text(d => rn((((d * l) / 5) * dScale) / scale) + (d < 5 ? "" : " " + unit)); .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit));
if (barLabel.value !== "") { if (barLabel.value !== "") {
scaleBar scaleBar
.append("text") .append("text")
.attr("x", (l + 1) / 2) .attr("x", (length + 1) / 2)
.attr("y", 2 * size) .attr("y", 2 * size)
.attr("dominant-baseline", "text-before-edge") .attr("dominant-baseline", "text-before-edge")
.attr("font-size", fontSize) .attr("font-size", fontSize)