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

grid patterns

Browse source
This commit is contained in:
Azgaar 2021-04-10 18:59:00 +03:00
parent 38c8a20c45
commit 6fd8862d7a
5 changed files with 90 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -550,11 +550,19 @@
</td> </td>
</tr> </tr>
<tr data-tip="Set grid cells spacing (size)"> <tr data-tip="Set grid cells scale multiplier">
<td>Size</td> <td>Scale</td>
<td> <td>
<input id="styleGridSize" type="number" min=2 max=50 step=.001> <input id="styleGridScale" type="number" min=.1 max=10 step=.01 >
<output id="styleGridSizeFriendly" data-tip="Distance between two adjacent cells in map scale"></output> <output id="styleGridSizeFriendly" data-tip="Distance between grid cell centers (in map scale)"></output>
</td>
</tr>
<tr data-tip="Shift the element by axes">
<td>Shift by axes</td>
<td>
<input id="styleGridShiftX" type="number" data-tip="Shift by x axis in pixels">
<input id="styleGridShiftY" type="number" data-tip="Shift by y axis in pixels">
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -4063,18 +4071,17 @@
<g id="coas"></g> <g id="coas"></g>
<pattern id="squareGrid" width="80" height="80" patternUnits="userSpaceOnUse" patternTransform="scale(1)"> <g id="gridPatterns">
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/> <pattern id="pattern_square" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
<path d="M 25 0 L 0 0 0 25"/>
</pattern> </pattern>
<pattern id="pointyHexGrid" width="50" height="43.4" patternUnits="userSpaceOnUse" patternTransform="scale(1)" fill="none" stroke="gray" stroke-width="1"> <pattern id="pattern_pointyHex" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
<polygon points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" id="pointyHex"></polygon> <path d="M 0,0 12.5,7.2 25,0 M 12.5,21.7 V 7.2 Z M 0,43.4 V 28.9 L 12.5,21.7 25,28.9 v 14.5"/>
<use xlink:href="#pointyHex" x="25"></use>
<use xlink:href="#pointyHex" x="-25"></use>
<use xlink:href="#pointyHex" x="12.5" y="-21.7"></use>
<use xlink:href="#pointyHex" x="-12.5" y="-21.7"></use>
</pattern> </pattern>
<!-- <rect width="100%" height="100%" fill="url('#squareGrid')"/> --> <pattern id="pattern_flatHex" width="43.4" height="25" patternUnits="userSpaceOnUse" fill="none">
<!-- <rect width="100%" height="100%" fill="url('#pointyHexGrid')"/> --> <path d="M 43.4,0 36.2,12.5 43.4,25 M 21.7,12.5 H 36.2 Z M 0,0 H 14.5 L 21.7,12.5 14.5,25 H 0"/>
</pattern>
</g>
</defs> </defs>
</svg> </svg>

22
modules/save-and-load.js
View file

@ -135,10 +135,15 @@ async function getMapURL(type, subtype) {
} }
// replace ocean pattern href to base64 // replace ocean pattern href to base64
if (cloneEl.getElementById("oceanicPattern")) { if (PRODUCTION && cloneEl.getElementById("oceanicPattern")) {
const el = cloneEl.getElementById("oceanicPattern"); const el = cloneEl.getElementById("oceanicPattern");
const url = el.getAttribute("href"); const url = el.getAttribute("href");
getBase64(url, base64 => el.setAttribute("href", base64)); await new Promise(resolve => {
getBase64(url, base64 => {
el.setAttribute("href", base64);
resolve();
});
});
} }
// add relief icons // add relief icons
@ -169,6 +174,13 @@ async function getMapURL(type, subtype) {
if (anchor) cloneDefs.appendChild(anchor.cloneNode(true)); if (anchor) cloneDefs.appendChild(anchor.cloneNode(true));
} }
// add grid pattern
if (cloneEl.getElementById("gridOverlay")?.hasChildNodes()) {
const type = cloneEl.getElementById("gridOverlay").getAttribute("type");
const pattern = svgDefs.getElementById("pattern_"+type);
if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
}
if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching").remove(); //remove unused hatching group if (!cloneEl.getElementById("hatching").children.length) cloneEl.getElementById("hatching").remove(); //remove unused hatching group
if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog").remove(); //remove unused fog if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog").remove(); //remove unused fog
if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths").remove(); // removed unused statePaths if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths").remove(); // removed unused statePaths
@ -1185,6 +1197,11 @@ function parseLoadedData(data) {
} }
}() }()
if (version < 1.62) {
// v 1.62 changed grid data
gridOverlay.attr("size", null);
}
void function checkDataIntegrity() { void function checkDataIntegrity() {
const cells = pack.cells; const cells = pack.cells;
@ -1274,6 +1291,7 @@ function parseLoadedData(data) {
// draw data layers (no kept in svg) // draw data layers (no kept in svg)
if (rulers && layerIsOn("toggleRulers")) rulers.draw(); if (rulers && layerIsOn("toggleRulers")) rulers.draw();
if (layerIsOn("toggleGrid")) drawGrid();
// set options // set options
yearInput.value = options.year; yearInput.value = options.year;

56
modules/ui/layers.js
View file

@ -968,6 +968,8 @@ function toggleGrid(event) {
turnButtonOn("toggleGrid"); turnButtonOn("toggleGrid");
drawGrid(); drawGrid();
calculateFriendlyGridSize(); calculateFriendlyGridSize();
if (event && isCtrlClick(event)) editStyle("gridOverlay"); if (event && isCtrlClick(event)) editStyle("gridOverlay");
} else { } else {
if (event && isCtrlClick(event)) {editStyle("gridOverlay"); return;} if (event && isCtrlClick(event)) {editStyle("gridOverlay"); return;}
@ -977,51 +979,19 @@ function toggleGrid(event) {
} }
function drawGrid() { function drawGrid() {
TIME && console.time("drawGrid");
gridOverlay.selectAll("*").remove(); gridOverlay.selectAll("*").remove();
const type = styleGridType.value; const pattern = "#pattern_" + (gridOverlay.attr("type") || "pointyHex");
const size = Math.max(+styleGridSize.value || +gridOverlay.attr("size"), 2); const stroke = gridOverlay.attr("stroke") || "#808080";
if (type === "pointyHex" || type === "flatHex") { const width = gridOverlay.attr("stroke-width") || .5;
const points = getHexGridPoints(size, type); const dasharray = gridOverlay.attr("stroke-dasharray") || null;
const hex = "m" + getHex(size, type).slice(0, 4).join("l"); const linecap = gridOverlay.attr("stroke-linecap") || null;
const d = points.map(p => "M" + p + hex).join(""); const scale = gridOverlay.attr("scale") || 1;
gridOverlay.append("path").attr("d", d); const dx = gridOverlay.attr("dx") || 0;
} else if (type === "square") { const dy = gridOverlay.attr("dy") || 0;
const pathX = d3.range(size, svgWidth, size).map(x => "M" + rn(x, 2) + ",0v" + svgHeight).join(" "); const tr = `scale(${scale}) translate(${dx} ${dy})`;
const pathY = d3.range(size, svgHeight, size).map(y => "M0," + rn(y, 2) + "h" + svgWidth).join(" ");
gridOverlay.append("path").attr("d", pathX + pathY);
}
// calculate hexes centers d3.select(pattern).attr("stroke", stroke).attr("stroke-width", width).attr("stroke-dasharray", dasharray).attr("stroke-linecap", linecap).attr("patternTransform", tr);
function getHexGridPoints(size, type) { gridOverlay.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "url(" + pattern + ")").attr("stroke", "none");
const points = [];
const rt3 = Math.sqrt(3);
const off = type === "pointyHex" ? rn(rt3 * size / 2, 2) : rn(size * 3 / 2, 2);
const ySpace = type === "pointyHex" ? rn(size * 3 / 2, 2) : rn(rt3 * size / 2, 2);
const xSpace = type === "pointyHex" ? rn(rt3 * size, 2) : rn(size * 3, 2);
for (let y = 0, l = 0; y < graphHeight+ySpace; y += ySpace, l++) {
for (let x = l % 2 ? 0 : off; x < graphWidth+xSpace; x += xSpace) {points.push([rn(x, 2), rn(y, 2)]);}
}
return points;
}
// calculate hex points
function getHex(radius, type) {
let x0 = 0, y0 = 0;
const s = type === "pointyHex" ? 0 : Math.PI / -6;
const thirdPi = Math.PI / 3;
let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
return angles.map(function(a) {
const x1 = Math.sin(a) * radius;
const y1 = -Math.cos(a) * radius;
const dx = rn(x1 - x0, 2);
const dy = rn(y1 - y0, 2);
x0 = x1, y0 = y1;
return [rn(dx, 2), rn(dy, 2)];
});
}
TIME && console.timeEnd("drawGrid");
} }
function toggleCoordinates(event) { function toggleCoordinates(event) {

47
modules/ui/style.js
View file

File diff suppressed because one or more lines are too long

10
modules/utils.js
View file

@ -605,15 +605,15 @@ JSON.isValid = str => {
function getBase64(url, callback) { function getBase64(url, callback) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.onload = function() { xhr.onload = function () {
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = function() { reader.onloadend = function () {
callback(reader.result); callback(reader.result);
} };
reader.readAsDataURL(xhr.response); reader.readAsDataURL(xhr.response);
}; };
xhr.open('GET', url); xhr.open("GET", url);
xhr.responseType = 'blob'; xhr.responseType = "blob";
xhr.send(); xhr.send();
} }