A node-based editor built with vanilla js.
- Create a new script in the components folder.
- Create your node class, extending from
Node
- Create the node's inputs, outputs and data in the class constructor
- Define an update function to run when any connections are updated
- In
ContextMenu.js
import your new node. - Add a new event for it in the
ContextMenu
's constructor (see example)
Example: AddNode
AddNode class
import Node from "../core/Node.js";
class AddNode extends Node {
constructor() {
super("Add"); //Node name
const a = this.addInput("A");
const b = this.addInput("B");
const o = this.addOutput("Output");
}
update() {
this.outputs["Output"].value = Number(this.inputs["A"].value) + Number(this.inputs["B"].value);
}
}
export default AddNode;
Defining event in ContextMenu
const events = [
new ContextMenuItem("Add", (e) => { this.createNewNode(e, new AddNode()) })
]
Visible connectionsRemove/edit connectionsDelete nodes- Duplicate nodes
- Iterative nodes
Context menus disappear on exit hover