Public
Edited
Apr 14, 2021
3 forks
6 stars
mutable results = 0;
// Custom multiplication class
// https://github.com/jagenjo/litegraph.js?files=1#how-to-code-a-new-node-type
class CustomMultNode {
constructor(){
this.title = "Multiplication";
this.addInput("A","number");
this.addInput("B","number");
this.addOutput("A*B","number");
this.properties = { precision: 0.1 };
}
onExecute(){
let a = this.getInputData(0) || 0;
let b = this.getInputData(1) || 0;
this.setOutputData(0,a*b);
}
}
class ObservableNode {
constructor(mutator){
this.title = "ObservableNode";
this.addInput("A","number");
this.addOutput("A","number");
this.properties = { precision: 0.1 };
this.mutator = mutator;
console.log("Created");
}
setMutator(callback){
this.mutator = callback;
}
onExecute(){
let a = this.getInputData(0) || 0;
if(this.mutator)this.mutator(a);
this.setOutputData(0,a);
}
}
graph = {
graphCell;
// Register our new custom node
LiteGraph.registerNodeType("custom/multiply",CustomMultNode);
LiteGraph.registerNodeType("custom/observable",ObservableNode);
var graph = new LiteGraph.LGraph();
var canvas = new LiteGraph.LGraphCanvas("#graphDiv", graph);
// Search box triggers "Blocked autofocusing on a <input> element in a cross-origin subframe."
canvas.allow_searchbox = false;
/** Disable LiteGraph Input prompts
*
* @note
* Some LiteGraph widgets support left-click Input pop-ups
* that also throw "Blocked autofocusing on a <input> element
* in a cross-origin subframe"
*
* There's no flag to disable so instead this snippet replaces
* the `prompt` function to keep LiteGraph spawning a pop-up.
*/
canvas.prompt = (title,value,callback,event)=>{ return null; };
// Set up a simple example multipling A*B (where A & B are const numeric inputs)
var nodeConstA = LiteGraph.createNode("basic/const");
nodeConstA.pos = [200,200];
nodeConstA.setValue(4.5);
graph.add(nodeConstA);
var nodeConstB = LiteGraph.createNode("basic/const");
nodeConstB.pos = [200,300];
nodeConstB.setValue(1.5);
graph.add(nodeConstB);
var nodeMult = LiteGraph.createNode("custom/multiply");
nodeMult.pos = [500,250];
graph.add(nodeMult);
// All nodes must be in the graph before connections can be made.
nodeConstA.connect(0,nodeMult,0);
nodeConstB.connect(0,nodeMult,1);
var nodeWatch = LiteGraph.createNode("basic/watch");
nodeWatch.pos = [700,250];
graph.add(nodeWatch);
// Create an Observable mutate wrapper to copy the results of our multiplcation in to the `results` var
var nodeObserve = LiteGraph.createNode("custom/observable");
nodeObserve.setMutator((value)=>{
mutable results = value;
});
nodeObserve.pos = [700,350];
graph.add(nodeObserve);
nodeMult.connect(0, nodeWatch, 0 );
nodeMult.connect(0, nodeObserve, 0 );
graph.start()
return graph;
}
LiteGraph = require('litegraph.js@0.7.8/build/litegraph.js').catch(() => window["LiteGraph"])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
