v1.5.04 - smarter coa generation, coa download

modules/ui/emblems-editor.js

@@ -1,17 +1,7 @@
 "use strict";
 function editEmblem(type, id, el) {
   if (customization) return;
-
-  if (!id && d3.event) {
-    const parent = d3.event.target.parentNode;
-    const [g, t] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] :
-                      parent.id === "provinceEmblems" ? [pack.provinces, "province"] :
-                      [pack.states, "state"];
-    const i = +d3.event.target.dataset.i;
-    type = t;
-    id = type+"COA"+i;
-    el = g[i];
-  }
+  if (!id && d3.event) defineEmblemData(d3.event);
 
   emblems.selectAll(":scope > use").call(d3.drag().on("drag", dragEmblem)).classed("draggable", true);
 
@@ -23,19 +13,31 @@ function editEmblem(type, id, el) {
   updateElementSelectors(type, id, el);
 
   $("#emblemEditor").dialog({
-    title: "Edit Emblem", resizable: true, width: "auto", height: "auto",
+    title: "Edit Emblem", resizable: true, width: "18em", height: "auto",
     position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
     close: closeEmblemEditor
   });
 
-  if (modules.editEmblem) return;
-  modules.editEmblem = true;
+  // add listeners,then remove on closure
+  emblemStates.oninput = selectState;
+  emblemProvinces.oninput = selectProvince;
+  emblemBurgs.oninput = selectBurg;
+  document.getElementById("emblemShapeSelector").oninput = changeShape;
+  document.getElementById("emblemsRegenerate").onclick = regenerate;
+  document.getElementById("emblemsArmoria").onclick = openInArmoria;
+  document.getElementById("emblemsDownload").onclick = download;
+  document.getElementById("emblemsFocus").onclick = showArea;
 
-  // add listeners
-  emblemStates.addEventListener("input", selectState);
-  emblemProvinces.addEventListener("input", selectProvince);
-  emblemBurgs.addEventListener("input", selectBurg);
-  document.getElementById("emblemsFocus").addEventListener("click", showArea);
+  function defineEmblemData(e) {
+    const parent = e.target.parentNode;
+    const [g, t] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] :
+                      parent.id === "provinceEmblems" ? [pack.provinces, "province"] :
+                      [pack.states, "state"];
+    const i = +e.target.dataset.i;
+    type = t;
+    id = type+"COA"+i;
+    el = g[i];
+  }
 
   function updateElementSelectors(type, id, el) {
     let state = 0, province = 0, burg = 0;
@@ -81,7 +83,10 @@ function editEmblem(type, id, el) {
   function updateEmblemData(type, id, el) {
     if (!el.coa) return;
     document.getElementById("emblemImage").setAttribute("href", "#" + id);
-    document.getElementById("emblemArmiger").innerText = el.fullName || el.name;
+    document.getElementById("emblemShapeSelector").value = el.coa.shield;
+    let name = el.fullName || el.name;
+    if (type === "burg") name = "Burg of " + name;
+    document.getElementById("emblemArmiger").innerText = name;
   }
 
   function selectState() {
@@ -127,6 +132,85 @@ function editEmblem(type, id, el) {
     updateElementSelectors(type, id, el);
   }
 
+  function changeShape() {
+    el.coa.shield = this.value;
+    document.getElementById(id).remove();
+    COArenderer.trigger(id, el.coa);
+  }
+
+  function showArea() {
+    highlightEmblemElement(type, el);
+  }
+
+  function regenerate() {
+    let parent = null;
+    if (type === "province") parent = pack.states[el.state].coa;
+    else if (type === "burg") {
+      const province = pack.cells.province[el.cell];
+      parent = province ? pack.provinces[province].coa : pack.states[el.state].coa;
+    }
+
+    const shield = el.coa.shield;
+    el.coa = COA.generate(parent);
+    el.coa.shield = shield;
+
+    document.getElementById(id).remove();
+    COArenderer.trigger(id, el.coa);
+  }
+
+  function openInArmoria() {
+    const json = JSON.stringify(el.coa).replaceAll("#", "%23");
+    const url = `http://azgaar.github.io/Armoria/?coa=${json}`;
+    openURL(url);
+  }
+
+  function download() {
+    const coa = document.getElementById(id);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = 500;
+    canvas.height = 500;
+
+    const url = getURL(coa, el.coa);
+    const img = new Image();
+    img.src = url;
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      drawCanvas(canvas, el);
+    }
+
+    function drawCanvas(canvas, el) {
+      const link = document.createElement("a");
+      link.download = getFileName(`Emblem ${el.fullName || el.name}`) + ".png";
+      canvas.toBlob(function (blob) {
+        link.href = window.URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        setTimeout(function () {
+          canvas.remove();
+          window.URL.revokeObjectURL(link.href);
+        }, 5000);
+      });
+    }
+  }
+
+  function getURL(svg, coa) {
+    const clone = svg.cloneNode(true); // clone svg
+    const d = clone.getElementsByTagName("defs")[0];
+
+    d.insertAdjacentHTML("beforeend", document.getElementById(coa.shield).outerHTML); // copy shield to defs
+    svg.querySelectorAll("[fill^=url]").forEach(el => {
+      const id = el.getAttribute("fill").match(/\#([^)]+)\)/)[1];
+      d.insertAdjacentHTML("beforeend", document.getElementById(id).outerHTML);
+    });
+
+    const serialized = (new XMLSerializer()).serializeToString(clone);
+    const blob = new Blob([serialized], { type: 'image/svg+xml;charset=utf-8' });
+    const url = window.URL.createObjectURL(blob);
+    return url;
+  }
+
   function dragEmblem() {
     const tr = parseTransform(this.getAttribute("transform"));
     const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
@@ -137,10 +221,6 @@ function editEmblem(type, id, el) {
     });
   }
 
-  function showArea() {
-    highlightEmblemElement(type, el);
-  }
-
   function closeEmblemEditor() {
     emblems.selectAll(":scope > use").call(d3.drag().on("drag", null)).attr("class", null);
   }