@vebasoft/ngx-node-editor

⚠️ License Notice

This software is licensed under PolyForm Noncommercial 1.0.0 for noncommercial use only. Commercial use requires a separate license agreement.

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.

Features

• 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.

Demo

https://vebasoft-node-editor.netlify.app

Installation

install it into your Angular application:

npm install @vebasoft/ngx-node-editor

Basic Usage

1. Import the Module

   In your app, import the NodeEditorComponent

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:

   <vebasoft-node-editor (setService)="onServiceInit($event)">
   </vebasoft-node-editor>

   Then, in your component class, you can capture the PublicNodeEditorService instance to configure the node editor, register nodes, set up controls, etc.:

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:

   import { NodeType } from '@vebasoft/ngx-node-editor';
   import { Socket } from 'path/to/socket';
   
   export const exampleNodeType: NodeType<Socket, any, any, any> = {
     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.

   // Example worker map
   const workerMap = {
     example: (inputs) => {
       // Compute outputs, return them
       return { outputA: inputs.inputA * 2 };
     }
   };
   
   // Then in your code:
   service.process(workerMap, {});

Demo / Example

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.

Development

• Build the Library:

  npm run build
  

  This compiles and bundles the ngx-vebasoft-node-editor library.

• Testing:

  npm test
  

License

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!