Add font support (#902)

modern/src/App.js

@@ -531,7 +531,7 @@ function Text({
   y,
   w,
   h,
-  // font,
+  font,
   fontsize,
   color,
   align,
@@ -561,18 +561,23 @@ function Text({
   // display is actually a keyword that is looked up in some sort of map
   // e.g. songname, time
   const nodeText = display;
+  const js_attributes = node.js_fontLookup(font.toLowerCase());
+  const fontFamily = js_attributes == null ? null : js_attributes.fontFamily;
+  const style = {
+    position: "absolute",
+    userSelect: "none",
+    MozUserSelect: "none",
+    ...params,
+    fontFamily,
+  };
+
   return (
     <GuiObjectEvents node={node}>
       <div
         data-node-type="Text"
         data-node-id={id}
         draggable={false}
-        style={{
-          position: "absolute",
-          userSelect: "none",
-          MozUserSelect: "none",
-          ...params,
-        }}
+        style={style}
       >
         {nodeText}
         <XmlChildren node={node} />

modern/src/initialize.js

@@ -102,7 +102,15 @@ const parsers = {
   slider: (node, parent, zip, store) =>
     new Slider(node, parent, undefined, store),
   gammagroup: noop,
-  truetypefont: noop,
+  truetypefont: async (node, parent, zip, store) => {
+    const { file } = node.attributes;
+    const font = Utils.getCaseInsensitveFile(zip, file);
+    const fontBlob = await font.async("blob");
+    const fontUrl = await Utils.getUrlFromBlob(fontBlob);
+    const fontFamily = `font-${Utils.getId()}-${file.replace(/\./, "_")}`;
+    await Utils.loadFont(fontUrl, fontFamily);
+    return new MakiObject(node, parent, { fontFamily }, store);
+  },
   component: (node, parent, zip, store) =>
     new Component(node, parent, undefined, store),
   text: (node, parent, zip, store) => new Text(node, parent, undefined, store),

modern/src/runtime/MakiObject.ts

@@ -68,6 +68,24 @@ class MakiObject {
     this._emitter.dispose();
   }
 
+  js_imageLookup(id: string) {
+    const element = Utils.findElementById(this, id);
+    if (element) {
+      return element.js_annotations;
+    }
+
+    return null;
+  }
+
+  js_fontLookup(id: string) {
+    const element = Utils.findElementById(this, id);
+    if (element) {
+      return element.js_annotations;
+    }
+
+    return null;
+  }
+
   js_groupdefLookup(id: string) {
     const groupdef = Utils.findGroupDefById(this, id);
     if (groupdef) {

modern/src/utils.ts

@@ -351,6 +351,22 @@ async function loadImage(
   });
 }
 
+/* global FontFace */
+// Types for FontFace provided by @types/css-font-loading-module
+// TODO: Offer some way to clean this up
+export async function loadFont(fontUrl: string, name: string) {
+  // Note: Incompatible with non-chromium Edge (#901)
+  console.log({ fontFamily: name });
+  const font = new FontFace(name, `url(${fontUrl})`);
+  const loadedFont = await font.load();
+  document.fonts.add(loadedFont);
+
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  function remove() {
+    document.fonts.delete(loadedFont);
+  }
+}
+
 export async function getSizeFromUrl(
   imgUrl: string
 ): Promise<{ width: number; height: number }> {

package.json

@@ -64,6 +64,7 @@
     "@babel/preset-typescript": "^7.0.0",
     "@babel/runtime": "^7.0.0",
     "@types/classnames": "^2.2.6",
+    "@types/css-font-loading-module": "^0.0.2",
     "@types/fscreen": "^1.0.1",
     "@types/invariant": "^2.2.29",
     "@types/jest": "^23.3.2",

yarn.lock

@@ -940,6 +940,11 @@
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.6.tgz#dbe8a666156d556ed018e15a4c65f08937c3f628"
 
+"@types/css-font-loading-module@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.2.tgz#09f1f1772975777e37851b7b7a4389d97c210add"
+  integrity sha512-zZTq/B1ZcJMepOfBIMEwOZ/g/jpSPUJoxP8zPtPizOKE/Q89SujK1BLYZBg+4LLW3IzJGOI67dbeePy8uPUs+g==
+
 "@types/fscreen@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/fscreen/-/fscreen-1.0.1.tgz#d924e07d0468eb056abeca41bd54e742ddce2b6d"