🔥 removing graphfx.app code and unused libs

src/nodes/Canvas2d/Fill.js

@@ -0,0 +1,33 @@
+import Canvas2d from './Canvas2d';
+
+export default class Fill extends Canvas2d {
+
+    constructor() {
+        super('Fill', {
+            image: null,
+            width: {
+                type: 'Number',
+                default: 100,
+                min: 1,
+            },
+            height: {
+                type: 'Number',
+                default: 100,
+                min: 1,
+            },
+            color: {
+                type: 'Color',
+                default: '#FFFFFF'
+            }
+        }, {});
+        this.__update();
+    }
+
+    async render({color, width, height}, canvas, ctx) {
+        canvas.width = width;
+        canvas.height = height;
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, width, height);
+        this.__out.image.value = await createImageBitmap(canvas);
+    }
+}

src/nodes/Canvas2d/Text.js

@@ -16,6 +16,16 @@ export default class Resize extends Canvas2d {
                 min: 1,
                 default: 50,
             },
+            fontStyle: {
+                type: 'String',
+                default: 'normal',
+                enum: [
+                    'normal',
+                    'bold',
+                    'italic',
+                    'bold italic',
+                ]
+            },
             font: {
                 type: 'String',
                 default: 'Arial',
@@ -33,17 +43,32 @@ export default class Resize extends Canvas2d {
             color: {
                 type: 'Color',
                 default: '#FFFFFF'
+            },
+            textAlign: {
+                type: 'String',
+                default: 'center',
+                enum: [
+                    'left',
+                    'center',
+                    'right',
+                ]
             }
         }, {});
+        this.__update();
     }
 
-    async render({font, fontSize, text, color, width, height}, canvas, ctx) {
+    async render({font, fontSize, text, color, width, height, textAlign, fontStyle}, canvas, ctx) {
         canvas.width = width;
         canvas.height = height;
-        ctx.font = `${fontSize}px ${font}`;
+        ctx.font = `${fontStyle} ${fontSize}px ${font}`;
         ctx.fillStyle = color;
-        ctx.textAlign = 'center';
-        ctx.fillText(text, canvas.width/2, canvas.height/2);
+        ctx.textAlign = textAlign;
+        const x = textAlign === 'center' ? canvas.width /2 :
+            textAlign === 'left' ? 0 : canvas.width;
+        console.log(text.split('\\n'));
+        text.split('\\n').forEach((line, index) => {
+            ctx.fillText(line, x, fontSize * (1 + index));
+        });
         this.__out.image.value = await createImageBitmap(canvas);
     }
 }

src/nodes/Node.js

@@ -35,6 +35,7 @@ export default class Node {
             name: this.name,
             options: {
                 in: this.in.serialize(),
+                out: this.out.serialize(),
             },
         }
     }
@@ -52,11 +53,12 @@ export default class Node {
                 this.in[name].connect(outputs[output]);
             }
         }
+        for (let name of Object.keys(options.out)) {
+            this.out[name].deserialize(options.out[name]);
+        }
         for (let name of Object.keys(options.in)) {
-            const {value} = options.in[name];
-            if (value) {
-                this.in[name].deserialize(value);
-            }
+            console.log(options.in[name]);
+            this.in[name].deserialize(options.in[name]);
         }
     }
 };

src/nodes/WebGL/Tint.js

@@ -0,0 +1,58 @@
+import WebGL from './WebGl';
+
+
+export default class Sepia extends WebGL {
+
+    constructor() {
+        super('Tint', {
+            amount: {
+                type: 'Number',
+                default: 0,
+            },
+            amount: {
+                type: 'Color',
+                default: '',
+            },
+        })
+    }
+
+    get frag() {
+        return `
+        precision mediump float;
+
+        // our texture
+        uniform sampler2D u_image;
+
+        // the texCoords passed in from the vertex shader.
+        varying vec2 v_texCoord;
+
+        uniform float amount;
+
+        void main() {
+            vec4 color = texture2D(u_image, v_texCoord);
+            float r = color.r;
+            float g = color.g;
+            float b = color.b;
+
+            color.r = min(1.0, (r * (1.0 - (0.607 * amount))) + (g * (0.769 * amount)) + (b * (0.189 * amount)));
+            color.g = min(1.0, (r * 0.349 * amount) + (g * (1.0 - (0.314 * amount))) + (b * 0.168 * amount));
+            color.b = min(1.0, (r * 0.272 * amount) + (g * 0.534 * amount) + (b * (1.0 - (0.869 * amount))));
+
+            gl_FragColor = color;
+        }
+        `
+    }
+
+    get amount() {
+        return this.in.amount.value;
+    }
+
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     * @param {*} program
+     */
+    _setParams(gl, program) {
+        gl.uniform1f(gl.getUniformLocation(program, "amount"), this.amount);
+    }
+}

src/nodes/WebGL/WebGl.js

@@ -1,5 +1,4 @@
 import Node from '../Node';
-import webglUtils from '../lib/webgl-utils';
 import {createCanvas, mediaSize, paintToCanvas} from '../canvas';
 
 export default class WebGL extends Node {

src/nodes/Webcam.js

@@ -18,8 +18,8 @@ export default class ToBlob extends Node {
         console.log(last(devices));
         const stream = await navigator.mediaDevices.getUserMedia({
             video: {
-                width: { min: 1024, ideal: 1280, max: 1920 },
-                height: { min: 776, ideal: 720, max: 1080 },
+                width: { min: 1024, ideal: 1920, max: 1920 },
+                height: { min: 776, ideal: 1080, max: 1080 },
                 deviceId: last(devices).deviceId
             },
         });

src/nodes/canvas.js

@@ -5,23 +5,11 @@
  * @returns {HTMLCanvasElement}
  */
 export const createCanvas = (width, height) => {
-    if (window.name !== 'nodejs') {
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
 
-        return canvas;
-    } else {
-        const {createCanvas} = require('canvas');
-        const canvas = createCanvas(width, height);
-        canvas.toBlob = (callback, type, quality) => {
-            canvas.toBuffer((err, data) => {
-                callback(new Blob([data]));
-            }, type)
-            canvas
-        }
-        return canvas;
-    }
+    return canvas;
 }
 
 /**

src/nodes/index.js

@@ -1,6 +1,7 @@
 export {default as Webcam} from './Webcam';
 export {default as Resize} from './Canvas2d/Resize';
 export {default as Compose} from './Canvas2d/Compose';
+export {default as Fill} from './Canvas2d/Fill';
 // export {default as ImageIdentity} from './Canvas2d/ImageIdentity';
  export {default as Text} from './Canvas2d/Text';
 export {default as BrightnessContrast} from './WebGL/BrightnessContrast';

src/nodes/io/AbstractIO.js

@@ -38,6 +38,7 @@ export default class AbstractIO {
         this.__owner = owner
         this.__definition = definition;
         this.__value = null;
+        this.label = null;
         this.__listeners = [];
     }
 

src/nodes/io/Input.js

@@ -45,15 +45,17 @@ export default class Input extends AbstractIO {
 
     serialize() {
         return {
+            label: this.label,
             value: this.__output ? null : serialize(this.__value),
             output: this.__output ? this.__output.id: null,
         }
     }
 
-    deserialize(value) {
+    deserialize({value, label}) {
         const deserializedValue = deserialize(value);
         if (deserializedValue) {
             this.value = deserializedValue;
         }
+        this.label = label
     }
 }

src/nodes/io/Output.js

@@ -37,4 +37,15 @@ export default class Output extends AbstractIO {
         this.__listeners = this.__listeners
             .filter((l) => l !== listener);
     }
+
+
+    serialize() {
+        return {
+            label: this.label,
+        };
+    }
+
+    deserialize({label}) {
+        this.label = label;
+    }
 }

src/nodes/io/Outputs.js

@@ -14,7 +14,12 @@ export default class Outputs extends AbstractIOSet {
         return `${this.__owner.id}-out`;
     }
 
+
     serialize() {
-        return null;
+        const res = {};
+        for (let name of Object.keys(this.variables)) {
+            res[name] = this.__values[name].serialize();
+        }
+        return res;
     }
 }