Fonts refactoring and Add Font dialog (#660)

* fonts rework - start

* fonts rework - continue

* fonts rework - fetch google font

* fonts rework - issue fixes

* fonts rework - add fonts to downloaded image

* fonts rework - add methods dialog

* fonts rework - add methods description

* fonts update - move version to 1.661

* fonts - remove unused file

main.js

@@ -300,7 +300,6 @@ async function checkLoadParameters() {
       });
     });
 
-<<<<<<< HEAD
   if (onloadMap.value === "saved") {
     try {
       await loadLastMap();
@@ -318,15 +317,6 @@ async function checkLoadParameters() {
 async function generateMapOnLoad() {
   await applyStyleOnLoad(); // apply previously selected default or custom style
   await generate(); // generate map
-=======
-  WARN && console.warn('Generate random map');
-  generateMapOnLoad();
-})();
-
-function generateMapOnLoad() {
-  applyStyleOnLoad(); // apply default of previously selected style
-  generate(); // generate map
->>>>>>> f557701e (dropbox - import changes from alpha)
   focusOn(); // based on searchParams focus on point, cell or burg from MFCG
   applyPreset(); // apply saved layers preset
 }

modules/load.js

@@ -237,6 +237,15 @@ function parseLoadedData(data) {
       if (data[2]) mapCoordinates = JSON.parse(data[2]);
       if (data[4]) notes = JSON.parse(data[4]);
       if (data[33]) rulers.fromString(data[33]);
+      if (data[34]) {
+        const usedFonts = JSON.parse(data[34]);
+        usedFonts.forEach(usedFont => {
+          const {family: usedFamily, unicodeRange: usedRange, variant: usedVariant} = usedFont;
+          const defaultFont = fonts.find(({family, unicodeRange, variant}) => family === usedFamily && unicodeRange === usedRange && variant === usedVariant);
+          if (!defaultFont) fonts.push(usedFont);
+          declareFont(usedFont);
+        });
+      }
 
       const biomes = data[3].split('|');
       biomesData = applyDefaultBiomesSystem();
@@ -310,8 +319,6 @@ function parseLoadedData(data) {
       burgLabels = labels.select('#burgLabels');
     })();
 
-    loadUsedFonts();
-
     void (function parseGridData() {
       grid = JSON.parse(data[6]);
       calculateVoronoi(grid, grid.points);
@@ -425,18 +432,8 @@ function parseLoadedData(data) {
         Religions.generate();
 
         // 1.0 adds a legend box
-        legend = svg.append('g').attr('id', 'legend');
+        legend = svg.append("g").attr("id", "legend");
-        legend
+        legend.attr("font-family", "Almendra SC").attr("font-size", 13).attr("data-size", 13).attr("data-x", 99).attr("data-y", 93).attr("stroke-width", 2.5).attr("stroke", "#812929").attr("stroke-dasharray", "0 4 10 4").attr("stroke-linecap", "round");
-          .attr('font-family', 'Almendra SC')
-          .attr('data-font', 'Almendra+SC')
-          .attr('font-size', 13)
-          .attr('data-size', 13)
-          .attr('data-x', 99)
-          .attr('data-y', 93)
-          .attr('stroke-width', 2.5)
-          .attr('stroke', '#812929')
-          .attr('stroke-dasharray', '0 4 10 4')
-          .attr('stroke-linecap', 'round');
 
         // 1.0 separated drawBorders fron drawStates()
         stateBorders = borders.append('g').attr('id', 'stateBorders');

modules/save.js

@@ -281,14 +281,22 @@ async function getMapURL(type, options = {}) {
     });
   }
 
-  // load non-standard fonts
+  // TODO: add dataURL for all used fonts
-  const usedFonts = getFontsList(clone);
+  const usedFonts = getUsedFonts(cloneEl);
-  const webSafe = ['Georgia', 'Times+New+Roman', 'Comic+Sans+MS', 'Lucida+Sans+Unicode', 'Courier+New', 'Verdana', 'Arial', 'Impact'];
+  const fontsToLoad = usedFonts.filter(font => font.src);
-  const fontsToLoad = usedFonts.filter((font) => !webSafe.includes(font));
   if (fontsToLoad.length) {
-    const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|");
+    const dataURLfonts = await loadFontsAsDataURI(fontsToLoad);
-    const fontStyle = await convertFontToDataURI(url);
+
-    if (fontStyle) clone.select("defs").append("style").text(fontStyle.join("\n"));
+    const fontFaces = dataURLfonts
+      .map(({family, src, unicodeRange = "", variant = "normal"}) => {
+        return `@font-face {font-family: "${family}"; src: ${src}; unicode-range: ${unicodeRange}; font-variant: ${variant};}`;
+      })
+      .join("\n");
+
+    const style = document.createElement("style");
+    style.setAttribute("type", "text/css");
+    style.innerHTML = fontFaces;
+    cloneEl.querySelector("defs").appendChild(style);
   }
 
   clone.remove();
@@ -384,6 +392,7 @@ function getMapData() {
   const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
   const notesData = JSON.stringify(notes);
   const rulersString = rulers.toString();
+  const fonts = JSON.stringify(getUsedFonts(svg.node()));
 
   // save svg
   const cloneEl = document.getElementById("map").cloneNode(true);
@@ -420,7 +429,7 @@ function getMapData() {
   const pop = Array.from(pack.cells.pop).map(p => rn(p, 4));
 
   // data format as below
-  const mapData = [params, settings, coords, biomes, notesData, serializedSVG, gridGeneral, grid.cells.h, grid.cells.prec, grid.cells.f, grid.cells.t, grid.cells.temp, packFeatures, cultures, states, burgs, pack.cells.biome, pack.cells.burg, pack.cells.conf, pack.cells.culture, pack.cells.fl, pop, pack.cells.r, pack.cells.road, pack.cells.s, pack.cells.state, pack.cells.religion, pack.cells.province, pack.cells.crossroad, religions, provinces, namesData, rivers, rulersString].join("\r\n");
+  const mapData = [params, settings, coords, biomes, notesData, serializedSVG, gridGeneral, grid.cells.h, grid.cells.prec, grid.cells.f, grid.cells.t, grid.cells.temp, packFeatures, cultures, states, burgs, pack.cells.biome, pack.cells.burg, pack.cells.conf, pack.cells.culture, pack.cells.fl, pop, pack.cells.r, pack.cells.road, pack.cells.s, pack.cells.state, pack.cells.religion, pack.cells.province, pack.cells.crossroad, religions, provinces, namesData, rivers, rulersString, fonts].join("\r\n");
   TIME && console.timeEnd("createMapData");
   return mapData;
 }