⚡ destroy methods
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "graphfx",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.4",
|
||||
"description": "Graph image processing pipeline",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -38,6 +38,12 @@ export default class Graph {
|
||||
return results;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
for(let {node} of this.nodes) {
|
||||
node.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -25,6 +25,11 @@ export default class Canvas2d extends Node {
|
||||
this.__canvas = document.createElement('canvas');
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.__canvas = null;
|
||||
super.destroy();
|
||||
}
|
||||
|
||||
async _update() {
|
||||
const values = {};
|
||||
for (let name of Object.keys(this.in.variables)) {
|
||||
@@ -37,8 +42,12 @@ export default class Canvas2d extends Node {
|
||||
const result = await this.render(values, this.__canvas, ctx);
|
||||
if (result instanceof ImageBitmap) {
|
||||
this.__out.image.value = result;
|
||||
this.out.width.value = this.out.image.value.width;
|
||||
this.out.height.value = this.out.image.value.height;
|
||||
if (this.out.width.value !== this.out.image.value.width) {
|
||||
this.out.width.value = this.out.image.value.width;
|
||||
}
|
||||
if (this.out.height.value !== this.out.image.value.height) {
|
||||
this.out.height.value = this.out.image.value.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -65,7 +65,6 @@ export default class Resize extends Canvas2d {
|
||||
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));
|
||||
});
|
||||
|
||||
@@ -5,20 +5,28 @@ export default class Node {
|
||||
|
||||
constructor(name, inputDefinition, outputDefiniton, options) {
|
||||
this.name = name;
|
||||
this.uid = uuidv4();
|
||||
this.id = uuidv4();
|
||||
this.__in = new Inputs(inputDefinition, this);
|
||||
this.__out = new Outputs(outputDefiniton, this);
|
||||
this.__in.update = (name) => this.__update([name]);
|
||||
this.__scheduledUpdate = false;
|
||||
this.__currentUpdate = Promise.resolve();
|
||||
this._stopped = false;
|
||||
}
|
||||
|
||||
__update(changes) {
|
||||
if (!this.__scheduledUpdate) {
|
||||
if (!this.__scheduledUpdate && !this._stopped) {
|
||||
this.__scheduledUpdate = true;
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
this.__currentUpdate = this.__currentUpdate
|
||||
.then(async () => {
|
||||
const startTag =`graphfx-update-start:${this.uid}`;
|
||||
const endTag = `graphfx-update-end:${this.uid}`
|
||||
this.__scheduledUpdate = false;
|
||||
this._update();
|
||||
performance.mark(startTag)
|
||||
await this._update();
|
||||
performance.mark(endTag)
|
||||
performance.measure(`GraphFX<${this.name}>`, startTag, endTag)
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -57,11 +65,9 @@ export default class Node {
|
||||
}
|
||||
|
||||
reconnect({options}, outputs) {
|
||||
console.log('outputs', outputs)
|
||||
for (let name of Object.keys(options.in)) {
|
||||
const {output} = options.in[name];
|
||||
if (output) {
|
||||
console.log('connecting', this.in[name].id, outputs[output])
|
||||
this.in[name].connect(outputs[output]);
|
||||
}
|
||||
}
|
||||
@@ -69,9 +75,18 @@ export default class Node {
|
||||
this.out[name].deserialize(options.out[name]);
|
||||
}
|
||||
for (let name of Object.keys(options.in)) {
|
||||
console.log(options.in[name]);
|
||||
this.in[name].deserialize(options.in[name]);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._stopped = true;
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
for (let input of this.in) {
|
||||
input.disconnect();
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -21,6 +21,12 @@ export default class WebGL extends Node {
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.canvas = null;
|
||||
this.program = null;
|
||||
super.destroy();
|
||||
}
|
||||
|
||||
get vert() {
|
||||
return `
|
||||
attribute vec2 a_position;
|
||||
@@ -147,6 +153,9 @@ export default class WebGL extends Node {
|
||||
const image = this.in.image.value;
|
||||
if (!image) return;
|
||||
const {width, height} = mediaSize(image);
|
||||
if (width === 0 || height === 0) {
|
||||
return;
|
||||
}
|
||||
this.setup();
|
||||
const canvas = this.canvas;
|
||||
canvas.width = width;
|
||||
@@ -222,8 +231,12 @@ export default class WebGL extends Node {
|
||||
|
||||
const result = await createImageBitmap(canvas);
|
||||
this.out.image.value = result;
|
||||
this.out.width.value = this.out.image.value.width;
|
||||
this.out.height.value = this.out.image.value.height;
|
||||
if (this.out.width.value !== this.out.image.value.width) {
|
||||
this.out.width.value = this.out.image.value.width;
|
||||
}
|
||||
if (this.out.height.value !== this.out.image.value.height) {
|
||||
this.out.height.value = this.out.image.value.height;
|
||||
}
|
||||
}
|
||||
|
||||
setRectangle(gl, x, y, width, height) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Node from './Node';
|
||||
|
||||
export default class ToBlob extends Node {
|
||||
export default class Webcam extends Node {
|
||||
|
||||
constructor(options) {
|
||||
super('Webcam', {}, {
|
||||
@@ -14,14 +14,14 @@ export default class ToBlob extends Node {
|
||||
type: 'Number',
|
||||
}
|
||||
});
|
||||
this.start();
|
||||
this.start()
|
||||
.catch(console.error.bind(console))
|
||||
}
|
||||
|
||||
|
||||
async start() {
|
||||
const devices = (await navigator.mediaDevices.enumerateDevices()).filter((d) => d.kind === 'videoinput')
|
||||
const last = (ary) => ary[ary.length - 1];
|
||||
console.log(last(devices));
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
width: { min: 480, ideal: 1920, max: 1920 },
|
||||
@@ -29,7 +29,6 @@ export default class ToBlob extends Node {
|
||||
deviceId: last(devices).deviceId
|
||||
},
|
||||
});
|
||||
console.log(stream)
|
||||
/** @type {HTMLVideoElement} */
|
||||
|
||||
const video = document.createElement('video');
|
||||
@@ -45,7 +44,11 @@ export default class ToBlob extends Node {
|
||||
this.out.width.value = video.videoWidth;
|
||||
this.out.height.value = video.videoHeight;
|
||||
}
|
||||
requestAnimationFrame(feedLoop);
|
||||
if (!this._stopped) {
|
||||
requestAnimationFrame(feedLoop);
|
||||
} else {
|
||||
video.src = null;
|
||||
}
|
||||
};
|
||||
feedLoop();
|
||||
}
|
||||
|
||||
@@ -21,6 +21,12 @@ export default class AbstractIOSet {
|
||||
}
|
||||
}
|
||||
|
||||
*[Symbol.iterator]() {
|
||||
for (let name of Object.keys(this.variables)) {
|
||||
yield this.__values[name];
|
||||
}
|
||||
}
|
||||
|
||||
__createProperty(name, definition) {
|
||||
|
||||
}
|
||||
|
||||
@@ -9,4 +9,5 @@ export const waitForMedia = async (media) => {
|
||||
return media;
|
||||
}
|
||||
|
||||
export const setImmediate = (fn) => Promise.resolve().then(fn);
|
||||
export const setImmediate = (fn) => Promise.resolve().then(fn);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user