NodeEditorJS

Project Info

A node-based editor built with vanilla js.

Basic setup

Creating new nodes

1. Create a new script in the components folder.
2. Create your node class, extending from Node
3. Create the node's inputs, outputs and data in the class constructor
4. Define an update function to run when any connections are updated
5. In ContextMenu.js import your new node.
6. Add a new event for it in the ContextMenu's constructor (see example)

Example: AddNode
AddNode class

importNodefrom"../core/Node.js";classAddNodeextendsNode{constructor(){super("Add");//Node nameconsta=this.addInput("A");constb=this.addInput("B");consto=this.addOutput("Output");}update(){this.outputs["Output"].value=Number(this.inputs["A"].value)+Number(this.inputs["B"].value);}}exportdefaultAddNode;

Defining event in ContextMenu

constevents=[newContextMenuItem("Add",(e)=>{this.createNewNode(e,newAddNode())})]

Roadmap

• Visible connections
• Remove/edit connections
• Delete nodes
• Duplicate nodes
• Iterative nodes
• Context menus disappear on exit hover