load fonts on style set change

index.html

@@ -4176,6 +4176,7 @@
   <script src="libs/lineclip.min.js"></script>
   <script src="libs/jquery-ui.min.js"></script>
   <script src="libs/alea.min.js"></script>
+  <script src="modules/fonts.js"></script>
   <script src="modules/ui/layers.js"></script>
   <script src="modules/ui/measurers.js"></script>
 

modules/fonts.js

@@ -0,0 +1,63 @@
+// helper finction to work with fonts
+
+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);
+  }
+}
+
+function getFontsList(svg) {
+  const fontsInUse = [];
+
+  svg.selectAll("#labels > g").each(function () {
+    if (!this.hasChildNodes()) return;
+    const font = this.dataset.font;
+    if (font) fontsInUse.push(font);
+  });
+  if (legend.node().hasChildNodes()) fontsInUse.push(legend.attr("data-font"));
+
+  return [...new Set(fontsInUse)];
+}
+
+// code from Kaiido's answer https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg
+function GFontToDataURI(url) {
+  if (!url) return Promise.resolve();
+  return fetch(url) // first fecth the embed stylesheet page
+    .then(resp => resp.text()) // we only need the text of it
+    .then(text => {
+      let s = document.createElement("style");
+      s.innerHTML = text;
+      document.head.appendChild(s);
+      const styleSheet = Array.prototype.filter.call(document.styleSheets, sS => sS.ownerNode === s)[0];
+
+      const FontRule = rule => {
+        const src = rule.style.getPropertyValue("src");
+        const url = src ? src.split("url(")[1].split(")")[0] : "";
+        return {rule, src, url: url.substring(url.length - 1, 1)};
+      };
+      const fontProms = [];
+
+      for (const r of styleSheet.cssRules) {
+        let fR = FontRule(r);
+        if (!fR.url) continue;
+
+        fontProms.push(
+          fetch(fR.url) // fetch the actual font-file (.woff)
+            .then(resp => resp.blob())
+            .then(blob => {
+              return new Promise(resolve => {
+                let f = new FileReader();
+                f.onload = e => resolve(f.result);
+                f.readAsDataURL(blob);
+              });
+            })
+            .then(dataURL => fR.rule.cssText.replace(fR.url, dataURL))
+        );
+      }
+      document.head.removeChild(s); // clean up
+      return Promise.all(fontProms); // wait for all this has been done
+    });
+}

modules/load.js

@@ -221,14 +221,7 @@ function parseLoadedData(data) {
       burgLabels = labels.select("#burgLabels");
     })();
 
-    void (function loadUsedFonts() {
+    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() {
       grid = JSON.parse(data[6]);

modules/save.js

@@ -359,59 +359,6 @@ function inlineStyle(clone) {
   emptyG.remove();
 }
 
-function getFontsList(svg) {
-  const fontsInUse = [];
-
-  svg.selectAll("#labels > g").each(function () {
-    if (!this.hasChildNodes()) return;
-    const font = this.dataset.font;
-    if (font) fontsInUse.push(font);
-  });
-  if (legend.node().hasChildNodes()) fontsInUse.push(legend.attr("data-font"));
-
-  return [...new Set(fontsInUse)];
-}
-
-// code from Kaiido's answer https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg
-function GFontToDataURI(url) {
-  if (!url) return Promise.resolve();
-  return fetch(url) // first fecth the embed stylesheet page
-    .then(resp => resp.text()) // we only need the text of it
-    .then(text => {
-      let s = document.createElement("style");
-      s.innerHTML = text;
-      document.head.appendChild(s);
-      const styleSheet = Array.prototype.filter.call(document.styleSheets, sS => sS.ownerNode === s)[0];
-
-      const FontRule = rule => {
-        const src = rule.style.getPropertyValue("src");
-        const url = src ? src.split("url(")[1].split(")")[0] : "";
-        return {rule, src, url: url.substring(url.length - 1, 1)};
-      };
-      const fontProms = [];
-
-      for (const r of styleSheet.cssRules) {
-        let fR = FontRule(r);
-        if (!fR.url) continue;
-
-        fontProms.push(
-          fetch(fR.url) // fetch the actual font-file (.woff)
-            .then(resp => resp.blob())
-            .then(blob => {
-              return new Promise(resolve => {
-                let f = new FileReader();
-                f.onload = e => resolve(f.result);
-                f.readAsDataURL(blob);
-              });
-            })
-            .then(dataURL => fR.rule.cssText.replace(fR.url, dataURL))
-        );
-      }
-      document.head.removeChild(s); // clean up
-      return Promise.all(fontProms); // wait for all this has been done
-    });
-}
-
 // prepare map data for saving
 function getMapData() {
   TIME && console.time("createMapDataBlob");

modules/ui/style.js

@@ -879,10 +879,8 @@ function applyStyle(style) {
 
 // change current style preset to another saved one
 function changeStylePreset(preset) {
-  if (customization) {
+  if (customization) return tip("Please exit the customization mode first", false, "error");
-    tip("Please exit the customization mode first", false, "error");
+
-    return;
-  }
   alertMessage.innerHTML = "Are you sure you want to change the style preset? All unsaved style changes will be lost";
   $("#alert").dialog({
     resizable: false,
@@ -899,6 +897,7 @@ function changeStylePreset(preset) {
           }
         } else if (defaultStyles[preset]) applyStyle(JSON.parse(defaultStyles[preset]));
         else applyDefaultStyle();
+        loadUsedFonts();
 
         removeStyleButton.style.display = stylePreset.selectedOptions[0].dataset.system ? "none" : "inline-block";
         updateElements(); // change elements