v1.5.66 - resize individual Emblem enstead of hide

index.html

@@ -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">
+        <div data-tip="Set size of particular Emblem. To hide set to 0. To change the entire category go to Menu ⭢ Style ⭢ Emblems">
-          <input id="emblemShow" class="checkbox" type="checkbox">
+          <div class="label" style="width: 2.8em">Size:</div>
-          <label for="emblemShow" class="checkbox-label">Show emblem on map</label>
+          <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">

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,23 +165,25 @@ function editEmblem(type, id, el) {
     highlightEmblemElement(type, el);
   }
 
-  function toggleEmblem() {
+  function changeSize() {
-    el.coaHidden = !el.coaHidden;
+    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();
+    g.select("[data-i='"+el.i+"']").remove();
-    else {
+    if (!size) return;
+
     // re-append use element
-      if (g.select("[data-i='"+el.i+"']").size()) return; // alredy displayed
+    const categotySize = +g.attr("font-size");
-      const halfSize = +g.attr("font-size") / 2;
+    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 - halfSize), 2).attr("y", rn(y - halfSize), 2)
+      .attr("x", rn(x - shift), 2).attr("y", rn(y - shift), 2)
-        .attr("width", "1em").attr("height", "1em")
+      .attr("width", size+"em").attr("height", size+"em")
       .attr("href", "#"+id);
   }
-  }
 
   function regenerate() {
     let parent = null;

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 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.coaHidden);
+  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.coaHidden);
+  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();