load fonts on .map file open

This commit is contained in:
Azgaar 2021-07-11 00:29:58 +03:00
parent 25de9edb13
commit cfb6e1eeeb
5 changed files with 29 additions and 16 deletions

View file

@ -122,7 +122,7 @@ let customization = 0; // 0 - no; 1 = heightmap draw; 2 - states draw; 3 - add s
let biomesData = applyDefaultBiomesSystem(); let biomesData = applyDefaultBiomesSystem();
let nameBases = Names.getNameBases(); // cultures-related data let nameBases = Names.getNameBases(); // cultures-related data
const fonts = ["Almendra+SC", "Georgia", "Arial", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New"]; // default web-safe fonts const fonts = ["Almendra+SC", "Georgia", "Arial", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"]; // default fonts
let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation

View file

@ -220,6 +220,15 @@ function parseLoadedData(data) {
burgLabels = labels.select("#burgLabels"); burgLabels = labels.select("#burgLabels");
})(); })();
void (function loadUsedFonts() {
const fontsInUse = getFontsList(svg);
const fontsToLoad = fontsInUse.filter(font => !fonts.includes(font));
if (fontsToLoad) {
const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|");
addFonts(url);
}
})();
void (function parseGridData() { void (function parseGridData() {
grid = JSON.parse(data[6]); grid = JSON.parse(data[6]);
calculateVoronoi(grid, grid.points); calculateVoronoi(grid, grid.points);

View file

@ -269,8 +269,16 @@ async function getMapURL(type, subtype) {
}); });
} }
const fontStyle = await GFontToDataURI(getFontsToLoad(clone)); // load non-standard fonts // load non-standard fonts
if (fontStyle) clone.select("defs").append("style").text(fontStyle.join("\n")); // add font to style const usedFonts = getFontsList(clone);
const webSafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"];
const fontsToLoad = usedFonts.filter(font => !webSafe.includes(font));
if (fontsToLoad.length) {
const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|");
const fontStyle = await GFontToDataURI(url);
if (fontStyle) clone.select("defs").append("style").text(fontStyle.join("\n"));
}
clone.remove(); clone.remove();
const serialized = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>` + new XMLSerializer().serializeToString(cloneEl); const serialized = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>` + new XMLSerializer().serializeToString(cloneEl);
@ -351,21 +359,17 @@ function inlineStyle(clone) {
emptyG.remove(); emptyG.remove();
} }
// get non-standard fonts used for labels to fetch them from web function getFontsList(svg) {
function getFontsToLoad(clone) { const fontsInUse = [];
const webSafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"]; // fonts to not fetch
const fontsInUse = new Set(); // to store fonts currently in use svg.selectAll("#labels > g").each(function () {
clone.selectAll("#labels > g").each(function () {
if (!this.hasChildNodes()) return; if (!this.hasChildNodes()) return;
const font = this.dataset.font; const font = this.dataset.font;
if (!font || webSafe.includes(font)) return; if (font) fontsInUse.push(font);
fontsInUse.add(font);
}); });
const legendFont = legend.attr("data-font"); if (legend.node().hasChildNodes()) fontsInUse.push(legend.attr("data-font"));
if (legend.node().hasChildNodes() && !webSafe.includes(legendFont)) fontsInUse.add(legendFont);
const fonts = [...fontsInUse]; return [...new Set(fontsInUse)];
return fonts.length ? "https://fonts.googleapis.com/css?family=" + fonts.join("|") : null;
} }
// code from Kaiido's answer https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg // code from Kaiido's answer https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg

View file

@ -846,7 +846,7 @@ function editStates() {
if (owner) { if (owner) {
const name = provinces[p].name; const name = provinces[p].name;
// if province is historical part of abouther state province, unite with old province // if province is a historical part of another state's province, unite with old province
const part = states[owner].provinces.find(n => name.includes(provinces[n].name)); const part = states[owner].provinces.find(n => name.includes(provinces[n].name));
if (part) { if (part) {
provinces[p].removed = true; provinces[p].removed = true;

View file

@ -1233,7 +1233,7 @@ function addFonts(url) {
document.head.removeChild(s); document.head.removeChild(s);
return fetched; return fetched;
}) })
.catch(function () {}); .catch(err => ERROR && console.error(err));
} }
// Update font list for Label and Burg Editors // Update font list for Label and Burg Editors