SVG Node Editor

overview

svg-node-editor is an angular package. By using this package we can connect infinite number of svg-nodes. So we can have visual representation of connected nodes.

installation

npm install svg-node-editor

import

import { NodeEditorModule } from 'svg-node-editor';

Add above import statement in app.module.ts.

parameters

s.no	Parameter	Datatype	Usage
1	collections	Array of objects	Pass an input .It contains node and its attributes.
2	getConnections	Function	Pass an output .It will emit connections in current window.
3	showMathNodes	Boolean	Enable inbuild nodes add, subtract, multiply, concat.Default value false.
4	showValueNodes	Boolean	Enable inbuild nodes string, number,date, search.Default value false.
5	showLogicNodes	Boolean	Enable inbuild nodes or, and.Default value false.

How to use

After importing to app.module.ts;

we can call this component like below.

<angular-node-editor [collections]="collections" (getConnections)="getConnections($event)">

Example of collections parameter:-

[
{
    "name": "customer",
    "attributes": [
        "id",
        "first_name",
        "last_name",
        "age",
        "gender"
    ]
},
{
    "name": "contact",
    "attributes": [
        "id",
        "customer_id",
        "phone",
        "email"
    ]
}
]

Thank you !!!