diff --git a/index.html b/index.html
index 2bc032c2..232064eb 100644
--- a/index.html
+++ b/index.html
@@ -2862,9 +2862,10 @@
-
diff --git a/modules/ui/emblems-editor.js b/modules/ui/emblems-editor.js
index e433028b..679c33d3 100644
--- a/modules/ui/emblems-editor.js
+++ b/modules/ui/emblems-editor.js
@@ -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() {
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 659495a5..32307eab 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -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 => ``).join("");
+ const burgString = burgNodes.map(d => ``).join("");
emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
const provinceNodes = nodes.filter(node => node.type === "province");
- const provinceString = provinceNodes.map(d => ``).join("");
+ const provinceString = provinceNodes.map(d => ``).join("");
emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
const stateNodes = nodes.filter(node => node.type === "state");
- const stateString = stateNodes.map(d => ``).join("");
+ const stateString = stateNodes.map(d => ``).join("");
emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
invokeActiveZooming();