diff --git a/index.html b/index.html index 2bc032c2..232064eb 100644 --- a/index.html +++ b/index.html @@ -2862,9 +2862,10 @@ -
- - +
+
Size:
+ +
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();