✨ font support, disable node

src/nodes/Canvas2d/Text.js

@@ -2,6 +2,8 @@ import Canvas2d from './Canvas2d';
 import {waitForMedia} from '../../utils';
 import {createCanvas, mediaSize, paintToCanvas} from '../canvas';
 
+const isEmpty = (x) => !x || Object.keys(x).length === 0;
+
 export default class Resize extends Canvas2d {
 
     constructor() {
@@ -27,7 +29,7 @@ export default class Resize extends Canvas2d {
                 ]
             },
             font: {
-                type: 'String',
+                type: 'Font', // {name, url, fontface}
                 default: 'Arial',
             },
             width: {
@@ -57,10 +59,38 @@ export default class Resize extends Canvas2d {
         this._update();
     }
 
+    /**
+     *
+     * @param {{name: string, url: string, fontface: FontFace}} font
+     */
+    async loadFont(font) {
+        if (typeof font === 'string') {
+            return font
+        } else if (!font) {
+            return;
+        }
+
+        if (font.name && !font.url && !font.fontface) {
+            return name;
+        }
+        if (font.name && font.url && isEmpty(font.fontface)) {
+            font.fontface = new FontFace(font.name, font.url);
+        }
+
+        if (font.fontface) {
+            await font.fontface.load();
+            if (!document.fonts.has(font.fontface)) {
+                await document.fonts.add(font.fontface)
+            }
+            return font.name;
+        }
+    }
+
     async render({font, fontSize, text, color, width, height, textAlign, fontStyle}, canvas, ctx) {
         canvas.width = width;
         canvas.height = height;
-        ctx.font = `${fontStyle} ${fontSize}px ${font}`;
+
+        ctx.font = `${fontStyle} ${fontSize}px "${(await this.loadFont(font)) || ''}"`;
         ctx.fillStyle = color;
         ctx.textAlign = textAlign;
         const x = textAlign === 'center' ? canvas.width /2 :

src/nodes/Disable.js

@@ -0,0 +1,26 @@
+import Node from './Node';
+
+export default class Disable extends Node {
+    constructor() {
+        super('Disable', {
+          image: {
+            type: 'Image',
+          },
+          disabled: {
+            type: 'Boolean',
+            default: false,
+          },
+        }, {
+          image: {
+            type: 'Image',
+          },
+        }, {});
+    }
+
+    async _update() {
+      if (!this.in.disabled.value) {
+        this.out.image.value = this.in.image.value;
+      }
+    }
+
+}

src/nodes/Font.js

@@ -0,0 +1,42 @@
+import Node from './Node';
+
+export default class Font extends Node {
+    constructor() {
+        super('Font', {
+          fontSize: {
+            type: 'Number',
+            min: 1,
+            default: 50,
+          },
+          fontStyle: {
+            type: 'String',
+            default: 'normal',
+            enum: [
+                'normal',
+                'bold',
+                'italic',
+                'bold italic',
+            ]
+          },
+          font: {
+            type: 'Font',
+          },
+        }, {
+          fontSize: {
+            type: 'Number',
+          },
+          fontStyle: {
+            type: 'String'
+          },
+          font: {
+            type: 'Font',
+          },
+        }, {});
+    }
+
+    async _update() {
+      this.out.font.value = this.in.font.value;
+      this.out.fontStyle.value = this.in.fontStyle.value;
+    }
+
+}

src/nodes/index.js

@@ -16,3 +16,7 @@ export {default as Blur} from './WebGL/Blur';
 // Math
 export {default as Numbers} from './Math/Numbers';
 export {default as NumberBinaryOperation} from './Math/NumberBinaryOperation';
+// Helpers
+export {default as Font} from './Font';
+export {default as Disable} from './Disable';
+// export {default as Synchronize} from './Synchronize';