mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
grid patterns
This commit is contained in:
Azgaar
parent
38c8a20c45
commit
6fd8862d7a
5 changed files with 90 additions and 84 deletions
35
index.html
35
index.html
|
|
@ -550,11 +550,19 @@
|
|||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Set grid cells spacing (size)">
|
||||
<td>Size</td>
|
||||
<tr data-tip="Set grid cells scale multiplier">
|
||||
<td>Scale</td>
|
||||
<td>
|
||||
<input id="styleGridSize" type="number" min=2 max=50 step=.001>
|
||||
<output id="styleGridSizeFriendly" data-tip="Distance between two adjacent cells in map scale"></output>
|
||||
<input id="styleGridScale" type="number" min=.1 max=10 step=.01 >
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -4063,18 +4071,17 @@
|
|||
|
||||
<g id="coas"></g>
|
||||
|
||||
<pattern id="squareGrid" width="80" height="80" patternUnits="userSpaceOnUse" patternTransform="scale(1)">
|
||||
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
|
||||
<g id="gridPatterns">
|
||||
<pattern id="pattern_square" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
|
||||
<path d="M 25 0 L 0 0 0 25"/>
|
||||
</pattern>
|
||||
<pattern id="pointyHexGrid" width="50" height="43.4" patternUnits="userSpaceOnUse" patternTransform="scale(1)" fill="none" stroke="gray" stroke-width="1">
|
||||
<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>
|
||||
<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 id="pattern_pointyHex" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
|
||||
<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"/>
|
||||
</pattern>
|
||||
<!-- <rect width="100%" height="100%" fill="url('#squareGrid')"/> -->
|
||||
<!-- <rect width="100%" height="100%" fill="url('#pointyHexGrid')"/> -->
|
||||
<pattern id="pattern_flatHex" width="43.4" height="25" patternUnits="userSpaceOnUse" fill="none">
|
||||
<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>
|
||||
</svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -135,10 +135,15 @@ async function getMapURL(type, subtype) {
|
|||
}
|
||||
|
||||
// replace ocean pattern href to base64
|
||||
if (cloneEl.getElementById("oceanicPattern")) {
|
||||
if (PRODUCTION && cloneEl.getElementById("oceanicPattern")) {
|
||||
const el = cloneEl.getElementById("oceanicPattern");
|
||||
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
|
||||
|
|
@ -169,6 +174,13 @@ async function getMapURL(type, subtype) {
|
|||
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("fogging-cont")) cloneEl.getElementById("fog").remove(); //remove unused fog
|
||||
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() {
|
||||
const cells = pack.cells;
|
||||
|
||||
|
|
@ -1274,6 +1291,7 @@ function parseLoadedData(data) {
|
|||
|
||||
// draw data layers (no kept in svg)
|
||||
if (rulers && layerIsOn("toggleRulers")) rulers.draw();
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
|
||||
// set options
|
||||
yearInput.value = options.year;
|
||||
|
|
|
|||
|
|
@ -968,6 +968,8 @@ function toggleGrid(event) {
|
|||
turnButtonOn("toggleGrid");
|
||||
drawGrid();
|
||||
calculateFriendlyGridSize();
|
||||
|
||||
|
||||
if (event && isCtrlClick(event)) editStyle("gridOverlay");
|
||||
} else {
|
||||
if (event && isCtrlClick(event)) {editStyle("gridOverlay"); return;}
|
||||
|
|
@ -977,51 +979,19 @@ function toggleGrid(event) {
|
|||
}
|
||||
|
||||
function drawGrid() {
|
||||
TIME && console.time("drawGrid");
|
||||
gridOverlay.selectAll("*").remove();
|
||||
const type = styleGridType.value;
|
||||
const size = Math.max(+styleGridSize.value || +gridOverlay.attr("size"), 2);
|
||||
if (type === "pointyHex" || type === "flatHex") {
|
||||
const points = getHexGridPoints(size, type);
|
||||
const hex = "m" + getHex(size, type).slice(0, 4).join("l");
|
||||
const d = points.map(p => "M" + p + hex).join("");
|
||||
gridOverlay.append("path").attr("d", d);
|
||||
} else if (type === "square") {
|
||||
const pathX = d3.range(size, svgWidth, size).map(x => "M" + rn(x, 2) + ",0v" + svgHeight).join(" ");
|
||||
const pathY = d3.range(size, svgHeight, size).map(y => "M0," + rn(y, 2) + "h" + svgWidth).join(" ");
|
||||
gridOverlay.append("path").attr("d", pathX + pathY);
|
||||
}
|
||||
const pattern = "#pattern_" + (gridOverlay.attr("type") || "pointyHex");
|
||||
const stroke = gridOverlay.attr("stroke") || "#808080";
|
||||
const width = gridOverlay.attr("stroke-width") || .5;
|
||||
const dasharray = gridOverlay.attr("stroke-dasharray") || null;
|
||||
const linecap = gridOverlay.attr("stroke-linecap") || null;
|
||||
const scale = gridOverlay.attr("scale") || 1;
|
||||
const dx = gridOverlay.attr("dx") || 0;
|
||||
const dy = gridOverlay.attr("dy") || 0;
|
||||
const tr = `scale(${scale}) translate(${dx} ${dy})`;
|
||||
|
||||
// calculate hexes centers
|
||||
function getHexGridPoints(size, type) {
|
||||
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");
|
||||
d3.select(pattern).attr("stroke", stroke).attr("stroke-width", width).attr("stroke-dasharray", dasharray).attr("stroke-linecap", linecap).attr("patternTransform", tr);
|
||||
gridOverlay.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "url(" + pattern + ")").attr("stroke", "none");
|
||||
}
|
||||
|
||||
function toggleCoordinates(event) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -609,11 +609,11 @@ function getBase64(url, callback) {
|
|||
const reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
callback(reader.result);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(xhr.response);
|
||||
};
|
||||
xhr.open('GET', url);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.open("GET", url);
|
||||
xhr.responseType = "blob";
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue