✨ running/stopped event

src/nodes/Canvas2d/Compose.js

@@ -130,6 +130,10 @@ export default class Compose extends Canvas2d {
         if (!width || !height) {
             return;
         }
+        if (!this.bg && !this.fg) {
+            return;
+        }
+
         canvas.width = width;
         canvas.height = height;
 

src/nodes/Node.js

@@ -1,5 +1,6 @@
 import {Inputs, Outputs} from './io';
 import uuidv4 from 'uuid/v4';
+import {MultiSubject} from '../helpers/listener';
 
 export default class Node {
 
@@ -12,13 +13,18 @@ export default class Node {
         this.__in.update = (name) => this.__update([name]);
         this.__scheduledUpdate = false;
         this.__currentUpdate = Promise.resolve();
+        this.__running = false;
         this._stopped = false;
+        this.subject = new MultiSubject(['running']);
     }
 
     __update(changes) {
         if (!this.__scheduledUpdate && !this._stopped) {
             this.__scheduledUpdate = true;
             this.__currentUpdate = this.__currentUpdate
+                .then(() => {
+                    this._running = true;
+                })
                 .then(async () => {
                     const startTag =`graphfx-update-start:${this.uid}`;
                     const endTag = `graphfx-update-end:${this.uid}`
@@ -27,6 +33,13 @@ export default class Node {
                     await this._update();
                     performance.mark(endTag)
                     performance.measure(`GraphFX<${this.name}>`, startTag, endTag)
+                })
+                .then(() => {
+                    this._running = false;
+                })
+                .catch((err) => {
+                    this._running = false;
+                    throw err;
                 });
         }
     }
@@ -35,6 +48,17 @@ export default class Node {
         throw new Error('_update method not implemented');
     }
 
+    get _running() {
+        return this.__running;
+    }
+
+    set _running(val) {
+        if (this.__running !== val) {
+            this.__running = val;
+            this.subject.next('running', this.__running);
+        }
+    }
+
     /**
      * Input getters
      */

src/nodes/WebGL/Channels.js

@@ -4,7 +4,7 @@ import WebGL from './WebGl';
 export default class Channels extends WebGL {
 
     constructor() {
-        super('Greyscale by channel', {
+        super('Channels', {
             red: {
                 type: 'Number',
                 default: 1,

src/nodes/WebGL/WebGl.js

@@ -153,17 +153,8 @@ export default class WebGL extends Node {
     _passes() {
         return [
             (gl, program, image) => {
-                console.log('pass1')
                 this._setParams(gl, program);
             },
-            (gl, program, image) => {
-                console.log('pass2')
-                this._setParams(gl, program);
-            },
-            (gl, program, image) => {
-                console.log('pass3')
-                this._setParams(gl, program);
-            }
         ]
     }
 
@@ -186,7 +177,9 @@ export default class WebGL extends Node {
     async _update() {
 
         const image = this.in.image.value;
-        if (!image) return;
+        if (!image) {
+            return;
+        }
         if (image.acquire) {
             image.acquire();
         }