Vebasoft Node Editor
Angular-based node editor library that allows you to create, connect, and process nodes in a visual flow. This repository includes a demo application showing how to use and customize the editor, as well as the core library you can install as an npm package.
- Flexible Node Definitions: Easily define inputs, outputs, and controls for each node.
- Node Control Components: Plug-in custom form controls (numeric inputs, text areas, dropdowns, and more).
- Automatic Layout: auto-layout your node graph with the help of dagre.
- Serialization & Processing: Serialize node graphs to JSON, process them with custom logic, and restore them.
install it into your Angular application:
``
npm install @vebasoft/ngx-node-editor
1. Import the Module
In your app, import the NodeEditorComponent
`ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NodeEditorComponent } from '@vebasoft/ngx-node-editor';
@Component({
selector: 'app-basic-editor',
imports: [
NodeEditorComponent,
],
templateUrl: './basic-editor.component.html',
styleUrl: './basic-editor.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasicEditorComponent {
`
2. Add the Node Editor Component
In a component template, use the node editor just like any Angular component:
`html`
Then, in your component class, you can capture the PublicNodeEditorService instance to configure the node editor, register nodes, set up controls, etc.:
`ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NodeEditorComponent, PublicNodeEditorService } from '@vebasoft/ngx-node-editor';
@Component({
selector: 'app-basic-editor',
imports: [
NodeEditorComponent,
],
templateUrl: './basic-editor.component.html',
styleUrl: './basic-editor.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasicEditorComponent {
onServiceInit(service: PublicNodeEditorService) {
// Register your node definitions, controls, etc.
// e.g.: service.nodeRegistry.registerNode(...);
}
}
`
3. Define Your Nodes
This library is built to let you register custom node definitions. You can see in the demo how allNodes are defined, each implementing a shape with inputs, outputs, and optional controls. For example:
`ts
import { NodeType } from '@vebasoft/ngx-node-editor';
import { Socket } from 'path/to/socket';
export const exampleNodeType: NodeType
id: 'example',
name: 'Example Node',
inputs: [
{
id: 'inputA',
name: 'Input A',
type: Socket.NUMBER,
},
],
outputs: [
{
id: 'outputA',
name: 'Output A',
type: Socket.NUMBER,
},
],
};
`
4. Process the Graph
Once your nodes are set up and connected, you can call service.process(...) to run custom worker logic and produce results.
`ts
// Example worker map
const workerMap = {
example: (inputs) => {
// Compute outputs, return them
return { outputA: inputs.inputA * 2 };
}
};
// Then in your code:
service.process(workerMap, {});
`
This repository also includes a demo project illustrating how to:
- Register custom node types (numNodeType, addNodeType, etc.).
- Plug in custom controls (numeric fields, text inputs, checkboxes, and so on).
- Serialize/deserialize the node graph, copy/paste, and more.
You can run the demo locally by cloning this repo, installing dependencies, and running:
`
npm install
npm run start
Then open http://localhost:4200 in your browser.
- Build the Library:
`
npm run build
This compiles and bundles the ngx-vebasoft-node-editor library.
- Testing:
`
npm test
This project is licensed under the PolyForm Noncommercial 1.0.0 License.
---
For more details and examples, explore the code in the projects/demo folder and the library source code in projects/ngx-vebasoft-node-editor`. Feel free to open issues or contribute improvements!