backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

v1.5.04 - Emblems better positioning and rescaling

Browse source
This commit is contained in:
Azgaar 2021-01-30 03:23:17 +03:00
parent 549eefe7ba
commit 56b6eb2a13
5 changed files with 69 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

68
modules/ui/layers.js
View file

@ -1244,8 +1244,6 @@ function drawEmblems() {
TIME && console.time("drawEmblems");
const {states, provinces, burgs, cells} = pack;
let svg = "";
// const sizeBurgs = +emblems.attr("size-burgs") || 15;
// burgs.filter(b => b.i && !b.removed && b.coa).forEach(burg => {
// const {x, y} = burg;
@ -1253,39 +1251,65 @@ function drawEmblems() {
// svg += `<use x=${x-sizeBurgs/2} y=${y-sizeBurgs/2} width=${sizeBurgs} height=${sizeBurgs} href="#burgCOA${burg.i}"></use>`;
// });
const sizeProvinces = +emblems.attr("size-provinces") || 25;
const provinceCOAs = provinces.filter(p => p.i && !p.removed && p.coa).map(province => {
const validStates = states.filter(s => s.i && !s.removed && s.coa);
const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa);
const sizeMod = +emblems.attr("size-modifier") || 1;
const getStateEmblemsSize = () => {
const startSize = (graphHeight + graphWidth) / 40;
const statesMod = (1 + validStates.length / 100) - (15 - validStates.length) / 200; // states number modifier
const size = rn(startSize / statesMod * sizeMod); // target size ~50px on 1536x754 map with 15 states
return Math.min(Math.max(size, 10), 100);
};
const getProvinceEmblemsSize = () => {
const startSize = (graphHeight + graphWidth) / 80;
const provincesMod = (1 + validProvinces.length / 1000) - (115 - validProvinces.length) / 1000; // states number modifier
const size = rn(startSize / provincesMod * sizeMod); // target size ~50px on 1536x754 map with 15 states
return Math.min(Math.max(size, 5), 75);
}
const sizeProvinces = getProvinceEmblemsSize();
const provinceCOAs = validProvinces.map(province => {
if (!province.pole) getProvincesVertices();
const [x, y] = province.pole;
COArenderer.trigger("provinceCOA"+province.i, province.coa);
//svg += `<use x=${x-sizeProvinces/2} y=${y-sizeProvinces/2} width=${sizeProvinces} height=${sizeProvinces} href="#provinceCOA${province.i}"></use>`;
return {type: "province", id: "provinceCOA"+province.i, x: x - sizeProvinces/2, y: y - sizeProvinces/2, size: sizeProvinces, el: province};
return {type: "province", id: "provinceCOA"+province.i, x, y, size: sizeProvinces, el: province};
});
const sizeStates = +emblems.attr("size-states") || 50;
const stateCOAs = states.filter(s => s.i && !s.removed && s.coa).map(state => {
const sizeStates = getStateEmblemsSize();
const stateCOAs = validStates.map(state => {
const [x, y] = state.pole;
COArenderer.trigger("stateCOA"+state.i, state.coa);
//svg += `<use x=${x-sizeStates/2} y=${y-sizeStates/2} width=${sizeStates} height=${sizeStates} href="#stateCOA${state.i}"></use>`;
return {type: "state", id: "stateCOA"+state.i, x: x - sizeStates/2, y: y - sizeStates/2, size: sizeStates, el: state};
return {type: "state", id: "stateCOA"+state.i, x, y, size: sizeStates, el: state};
});
const nodes = provinceCOAs.concat(stateCOAs);
// emblems.html(svg);
const simulation = d3.forceSimulation(nodes)
.alphaMin(.6).alphaDecay(.2)
.force('collision', d3.forceCollide().radius(d => d.size/2));
.alphaMin(.6).alphaDecay(.2).velocityDecay(.6)
.force('collision', d3.forceCollide().radius(d => d.size/2))
.stop();
const node = emblems.selectAll("use").data(nodes).join("use")
.attr("href", d => "#"+d.id)
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", d => d.size)
.attr("height", d => d.size);
debug.attr("fill", "#fff").attr("stroke", "#000")
.selectAll("circle").data(nodes).join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 2);
simulation.on("tick", () => {
node.attr("x", d => d.x).attr("y", d => d.y);
d3.timeout(function() {
const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
for (let i = 0; i < n; ++i) {
simulation.tick();
}
emblems.selectAll("use").data(nodes).join("use")
.attr("href", d => "#"+d.id)
.attr("x", d => d.x - d.size / 2)
.attr("y", d => d.y - d.size / 2)
.attr("width", d => d.size + "em")
.attr("height", d => d.size + "em");
invokeActiveZooming();
});
TIME && console.timeEnd("drawEmblems");

3
modules/ui/style.js
View file

@ -795,8 +795,7 @@ function applyDefaultStyle() {
labels.select("#addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("stroke", "#3a3a3a").attr("stroke-width", 0).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 18).attr("data-size", 18).attr("filter", null);
fogging.attr("opacity", .98).attr("fill", "#30426f");
emblems.attr("opacity", .9).attr("size-states", 50).attr("size-provinces", 25).attr("size-burgs", 15).attr("filter", null);
emblems.attr("opacity", .9).attr("font-size", 1).attr("size-modifier", 1).attr("filter", null)
}
// apply style settings in JSON