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.66 - resize individual Emblem enstead of hide

Browse source
This commit is contained in:
Azgaar 2021-02-26 19:54:45 +03:00
parent 9a20a3e4c6
commit a5395fca78
3 changed files with 41 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -2862,9 +2862,10 @@
</select>
</div>
<div data-tip="Show or hide this particular emblem on map. To hide the entire category go to Menu ⭢ Style ⭢ Emblems">
<input id="emblemShow" class="checkbox" type="checkbox">
<label for="emblemShow" class="checkbox-label">Show emblem on map</label>
<div data-tip="Set size of particular Emblem. To hide set to 0. To change the entire category go to Menu ⭢ Style ⭢ Emblems">
<div class="label" style="width: 2.8em">Size:</div>
<input id="emblemSizeSlider" type="range" min=0 max=5 step=.1 style="width: 8em"/>
<input id="emblemSizeNumber" type="number" min=0 max=5 step=.1 />
</div>
</div>
<div id="emblemsBottom">

37
modules/ui/emblems-editor.js
View file

@ -23,7 +23,8 @@ function editEmblem(type, id, el) {
emblemProvinces.oninput = selectProvince;
emblemBurgs.oninput = selectBurg;
emblemShapeSelector.oninput = changeShape;
document.getElementById("emblemShow").onchange = toggleEmblem;
document.getElementById("emblemSizeSlider").oninput = changeSize;
document.getElementById("emblemSizeNumber").oninput = changeSize;
document.getElementById("emblemsRegenerate").onclick = regenerate;
document.getElementById("emblemsArmoria").onclick = openInArmoria;
document.getElementById("emblemsUpload").onclick = toggleUpload;
@ -105,7 +106,9 @@ function editEmblem(type, id, el) {
emblemShapeSelector.value = el.coa.shield;
}
document.getElementById("emblemShow").checked = !el.coaHidden;
const size = el.coaSize || 1;
document.getElementById("emblemSizeSlider").value = size;
document.getElementById("emblemSizeNumber").value = size;
}
function selectState() {
@ -162,22 +165,24 @@ function editEmblem(type, id, el) {
highlightEmblemElement(type, el);
}
function toggleEmblem() {
el.coaHidden = !el.coaHidden;
function changeSize() {
const size = el.coaSize = +this.value;
document.getElementById("emblemSizeSlider").value = size;
document.getElementById("emblemSizeNumber").value = size;
const g = emblems.select("#"+type+"Emblems");
if (el.coaHidden) g.select("[data-i='"+el.i+"']").remove();
else {
// re-append use element
if (g.select("[data-i='"+el.i+"']").size()) return; // alredy displayed
const halfSize = +g.attr("font-size") / 2;
const x = el.x || el.pole[0];
const y = el.y || el.pole[1];
g.append("use").attr("data-i", el.i)
.attr("x", rn(x - halfSize), 2).attr("y", rn(y - halfSize), 2)
.attr("width", "1em").attr("height", "1em")
.attr("href", "#"+id);
}
g.select("[data-i='"+el.i+"']").remove();
if (!size) return;
// re-append use element
const categotySize = +g.attr("font-size");
const shift = categotySize * size / 2;
const x = el.x || el.pole[0];
const y = el.y || el.pole[1];
g.append("use").attr("data-i", el.i)
.attr("x", rn(x - shift), 2).attr("y", rn(y - shift), 2)
.attr("width", size+"em").attr("height", size+"em")
.attr("href", "#"+id);
}
function regenerate() {

26
modules/ui/layers.js
View file

@ -1245,9 +1245,9 @@ function drawEmblems() {
TIME && console.time("drawEmblems");
const {states, provinces, burgs} = pack;
const validStates = states.filter(s => s.i && !s.removed && s.coa && !s.coaHidden);
const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && !p.coaHidden);
const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && !b.coaHidden);
const validStates = states.filter(s => s.i && !s.removed && s.coa && s.coaSize != 0);
const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && p.coaSize != 0);
const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && b.coaSize != 0);
const getStateEmblemsSize = () => {
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 40, 10), 100);
@ -1273,26 +1273,32 @@ function drawEmblems() {
const sizeBurgs = getBurgEmblemSize();
const burgCOAs = validBurgs.map(burg => {
const {x, y} = burg;
return {type: "burg", i: burg.i, x, y, size: sizeBurgs};
const size = burg.coaSize || 1;
const shift = sizeBurgs * size / 2;
return {type: "burg", i: burg.i, x, y, size, shift};
});
const sizeProvinces = getProvinceEmblemsSize();
const provinceCOAs = validProvinces.map(province => {
if (!province.pole) getProvincesVertices();
const [x, y] = province.pole || pack.cells.p[province.center];
return {type: "province", i: province.i, x, y, size: sizeProvinces};
const size = province.coaSize || 1;
const shift = sizeProvinces * size / 2;
return {type: "province", i: province.i, x, y, size, shift};
});
const sizeStates = getStateEmblemsSize();
const stateCOAs = validStates.map(state => {
const [x, y] = state.pole || pack.cells.p[state.center];
return {type: "state", i: state.i, x, y, size: sizeStates};
const size = state.coaSize || 1;
const shift = sizeStates * size / 2;
return {type: "state", i: state.i, x, y, size, shift};
});
const nodes = burgCOAs.concat(provinceCOAs).concat(stateCOAs);
const simulation = d3.forceSimulation(nodes)
.alphaMin(.6).alphaDecay(.2).velocityDecay(.6)
.force('collision', d3.forceCollide().radius(d => d.size/2))
.force('collision', d3.forceCollide().radius(d => d.shift))
.stop();
d3.timeout(function() {
@ -1302,15 +1308,15 @@ function drawEmblems() {
}
const burgNodes = nodes.filter(node => node.type === "burg");
const burgString = burgNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.size / 2)}" y="${rn(d.y - d.size / 2)}" width="1em" height="1em"/>`).join("");
const burgString = burgNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`).join("");
emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
const provinceNodes = nodes.filter(node => node.type === "province");
const provinceString = provinceNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.size / 2)}" y="${rn(d.y - d.size / 2)}" width="1em" height="1em"/>`).join("");
const provinceString = provinceNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`).join("");
emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
const stateNodes = nodes.filter(node => node.type === "state");
const stateString = stateNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.size / 2)}" y="${rn(d.y - d.size / 2)}" width="1em" height="1em"/>`).join("");
const stateString = stateNodes.map(d => `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${d.size}em"/>`).join("");
emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
invokeActiveZooming();