v1.5.41 downloadGallery fix, async load

This commit is contained in:
Azgaar 2021-02-20 17:32:30 +03:00
parent 47b1c144ac
commit 66edd3f6c7
3 changed files with 37 additions and 38 deletions

View file

@ -398,10 +398,10 @@
function definePattern(pattern, element, size = "") { function definePattern(pattern, element, size = "") {
let t1 = null, t2 = null; let t1 = null, t2 = null;
if (P(.15)) size = "-small"; if (P(.1)) size = "-small";
else if (P(.05)) size = "-smaller"; else if (P(.1)) size = "-smaller";
else if (P(.035)) size = "-big"; else if (P(.01)) size = "-big";
else if (P(.001)) size = "-smallest"; else if (P(.005)) size = "-smallest";
// apply standard tinctures // apply standard tinctures
if (P(.5) && ["vair", "vairInPale", "vairEnPointe"].includes(pattern)) {t1 = "azure"; t2 = "argent";} if (P(.5) && ["vair", "vairInPale", "vairEnPointe"].includes(pattern)) {t1 = "azure"; t2 = "argent";}

View file

@ -839,11 +839,7 @@
const divisionClip = division ? `<clipPath id="divisionClip_${id}">${getTemplate(division.division, division.line)}</clipPath>` : ""; const divisionClip = division ? `<clipPath id="divisionClip_${id}">${getTemplate(division.division, division.line)}</clipPath>` : "";
const loadedCharges = await getCharges(coa, id, shieldPath); const loadedCharges = await getCharges(coa, id, shieldPath);
const loadedPatterns = getPatterns(coa, id); const loadedPatterns = getPatterns(coa, id);
const blacklight = `<radialGradient id="backlight_${id}" cx="100%" cy="100%" r="150%"> const blacklight = `<radialGradient id="backlight_${id}" cx="100%" cy="100%" r="150%"><stop stop-color="#fff" stop-opacity=".3" offset="0"/><stop stop-color="#fff" stop-opacity=".15" offset=".25"/><stop stop-color="#000" stop-opacity="0" offset="1"/></radialGradient>`;
<stop stop-color="#fff" stop-opacity=".3" offset="0"/>
<stop stop-color="#fff" stop-opacity=".15" offset=".25"/>
<stop stop-color="#000" stop-opacity="0" offset="1"/>
</radialGradient>`;
const field = `<rect x="0" y="0" width="200" height="200" fill="${clr(coa.t1)}"/>`; const field = `<rect x="0" y="0" width="200" height="200" fill="${clr(coa.t1)}"/>`;
const divisionGroup = division ? templateDivision() : ""; const divisionGroup = division ? templateDivision() : "";
const overlay = `<path d="${shieldPath}" fill="url(#backlight_${id})" stroke="#333"/>`; const overlay = `<path d="${shieldPath}" fill="url(#backlight_${id})" stroke="#333"/>`;
@ -855,6 +851,7 @@
// insert coa svg to defs // insert coa svg to defs
document.getElementById("coas").insertAdjacentHTML("beforeend", svg); document.getElementById("coas").insertAdjacentHTML("beforeend", svg);
return true;
function templateDivision() { function templateDivision() {
let svg = ""; let svg = "";
@ -1000,10 +997,10 @@
} }
function getSizeMod(size) { function getSizeMod(size) {
if (size === "small") return .5; if (size === "small") return .8;
if (size === "smaller") return .25; if (size === "smaller") return .5;
if (size === "smallest") return .125; if (size === "smallest") return .25;
if (size === "big") return 2; if (size === "big") return 1.6;
return 1; return 1;
} }
@ -1027,7 +1024,7 @@
} }
// render coa if does not exist // render coa if does not exist
const trigger = function(id, coa) { const trigger = async function(id, coa) {
if (coa === "custom") { if (coa === "custom") {
console.warn("Cannot render custom emblem", coa); console.warn("Cannot render custom emblem", coa);
return; return;
@ -1036,7 +1033,7 @@
console.warn(`Emblem ${id} is undefined`); console.warn(`Emblem ${id} is undefined`);
return; return;
} }
if (!document.getElementById(id)) draw(id, coa); if (!document.getElementById(id)) return draw(id, coa);
} }
const add = function(type, i, coa, x, y) { const add = function(type, i, coa, x, y) {

View file

@ -271,41 +271,41 @@ function editEmblem(type, id, el) {
} }
async function getURL(svg, size) { async function getURL(svg, size) {
const clone = svg.cloneNode(true); // clone svg const serialized = getSVG(svg, size);
clone.setAttribute("width", size);
clone.setAttribute("height", size);
const serialized = (new XMLSerializer()).serializeToString(clone);
const blob = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'}); const blob = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'});
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
window.setTimeout(() => window.URL.revokeObjectURL(url), 6000); window.setTimeout(() => window.URL.revokeObjectURL(url), 6000);
return url; return url;
} }
function downloadGallery() { function getSVG(svg, size) {
const clone = svg.cloneNode(true);
clone.setAttribute("width", size);
clone.setAttribute("height", size);
return (new XMLSerializer()).serializeToString(clone);
}
async function downloadGallery() {
const name = getFileName("Emblems Gallery"); const name = getFileName("Emblems Gallery");
const validStates = pack.states.filter(s => s.i && !s.removed && s.coa); const validStates = pack.states.filter(s => s.i && !s.removed && s.coa);
const validProvinces = pack.provinces.filter(p => p.i && !p.removed && p.coa); const validProvinces = pack.provinces.filter(p => p.i && !p.removed && p.coa);
const validBurgs = pack.burgs.filter(b => b.i && !b.removed && b.coa); const validBurgs = pack.burgs.filter(b => b.i && !b.removed && b.coa);
triggerCOALoad(validStates, validProvinces, validBurgs); await renderAllEmblems(validStates, validProvinces, validBurgs);
const timeout = (validStates.length + validProvinces.length + validBurgs.length) * 8; runDownload();
tip("Preparing to download...", true, "warn", timeout);
d3.timeout(runDownload, timeout);
function runDownload() { function runDownload() {
const back = `<a href="javascript:history.back()">Go Back</a>`; const back = `<a href="javascript:history.back()">Go Back</a>`;
const stateSection = `<div><h2>States</h2>` + validStates.map(state => { const stateSection = `<div><h2>States</h2>` + validStates.map(state => {
const el = document.getElementById("stateCOA"+state.i); const el = document.getElementById("stateCOA"+state.i);
const svg = getSVG(el, state.coa, 200); return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${state.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${state.fullName}</figcaption>${svg}</a></figure>`;
}).join("") + `</div>`; }).join("") + `</div>`;
const provinceSections = validStates.map(state => { const provinceSections = validStates.map(state => {
const stateProvinces = validProvinces.filter(p => p.state === state.i); const stateProvinces = validProvinces.filter(p => p.state === state.i);
const figures = stateProvinces.map(province => { const figures = stateProvinces.map(province => {
const el = document.getElementById("provinceCOA"+province.i); const el = document.getElementById("provinceCOA"+province.i);
const svg = getSVG(el, province.coa, 200); return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${province.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${province.fullName}</figcaption>${svg}</a></figure>`;
}).join(""); }).join("");
return stateProvinces.length ? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>` : ""; return stateProvinces.length ? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>` : "";
}).join(""); }).join("");
@ -316,8 +316,7 @@ function editEmblem(type, id, el) {
const provinceBurgs = stateBurgs.filter(b => pack.cells.province[b.cell] === province.i); const provinceBurgs = stateBurgs.filter(b => pack.cells.province[b.cell] === province.i);
const provinceBurgFigures = provinceBurgs.map(burg => { const provinceBurgFigures = provinceBurgs.map(burg => {
const el = document.getElementById("burgCOA"+burg.i); const el = document.getElementById("burgCOA"+burg.i);
const svg = getSVG(el, burg.coa, 200); return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${svg}</figure>`;
}).join(""); }).join("");
return provinceBurgs.length ? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>` : ""; return provinceBurgs.length ? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>` : "";
}).join(""); }).join("");
@ -325,8 +324,7 @@ function editEmblem(type, id, el) {
const stateBurgOutOfProvinces = stateBurgs.filter(b => !pack.cells.province[b.cell]); const stateBurgOutOfProvinces = stateBurgs.filter(b => !pack.cells.province[b.cell]);
const stateBurgOutOfProvincesFigures = stateBurgOutOfProvinces.map(burg => { const stateBurgOutOfProvincesFigures = stateBurgOutOfProvinces.map(burg => {
const el = document.getElementById("burgCOA"+burg.i); const el = document.getElementById("burgCOA"+burg.i);
const svg = getSVG(el, burg.coa, 200); return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${svg}</figure>`;
}).join(""); }).join("");
if (stateBurgOutOfProvincesFigures) stateBurgSections += `<div><h2>${state.fullName} burgs under direct control</h2>${stateBurgOutOfProvincesFigures}</div>`; if (stateBurgOutOfProvincesFigures) stateBurgSections += `<div><h2>${state.fullName} burgs under direct control</h2>${stateBurgOutOfProvincesFigures}</div>`;
return stateBurgSections; return stateBurgSections;
@ -335,8 +333,7 @@ function editEmblem(type, id, el) {
const neutralBurgs = validBurgs.filter(b => !b.state); const neutralBurgs = validBurgs.filter(b => !b.state);
const neutralsSection = neutralBurgs.length ? "<div><h2>Independent burgs</h2>" + neutralBurgs.map(burg => { const neutralsSection = neutralBurgs.length ? "<div><h2>Independent burgs</h2>" + neutralBurgs.map(burg => {
const el = document.getElementById("burgCOA"+burg.i); const el = document.getElementById("burgCOA"+burg.i);
const svg = getSVG(el, burg.coa, 200); return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${svg}</figure>`;
}).join("") + "</div>" : ""; }).join("") + "</div>" : "";
const FMG = `<a href="https://azgaar.github.io/Fantasy-Map-Generator" target="_blank">Azgaar's Fantasy Map Generator</a>`; const FMG = `<a href="https://azgaar.github.io/Fantasy-Map-Generator" target="_blank">Azgaar's Fantasy Map Generator</a>`;
@ -367,10 +364,15 @@ function editEmblem(type, id, el) {
} }
} }
function triggerCOALoad(states, provinces, burgs) { async function renderAllEmblems(states, provinces, burgs) {
states.forEach(state => COArenderer.trigger("stateCOA"+state.i, state.coa)); tip("Preparing for download...", true, "warn");
provinces.forEach(province => COArenderer.trigger("provinceCOA"+province.i, province.coa));
burgs.forEach(burg => COArenderer.trigger("burgCOA"+burg.i, burg.coa)); const statePromises = states.map(state => COArenderer.trigger("stateCOA"+state.i, state.coa));
const provincePromises = provinces.map(province => COArenderer.trigger("provinceCOA"+province.i, province.coa));
const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA"+burg.i, burg.coa));
const promises = [...statePromises, ...provincePromises, ...burgPromises];
return Promise.allSettled(promises).then(res => clearMainTip());
} }
function dragEmblem() { function dragEmblem() {