Skip to content

Commit d846b7c

Browse files
sarathkumarvenkatesansarathkumarvenkatesan
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Diagram Ports sample
2 parents e279b8f + 8a5680e commit d846b7c

16 files changed

+404
-2
lines changed

‎README.md‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# how-to-create-and-customize-ports-in-the-angular-diagram-component
2-
A quick start Angular project that shows how to create and add port nodes programmatically and dynamically. This project includes code snippets to add multiple ports and customize them dynamically. It also includes code snippets for customizing the appearance and position of the ports, as well as how to connect nodes using ports.
1+
# How to Create and Customize Ports in the Angular Diagram Component
2+
3+
A quick start Angular project that shows how to create and customize port nodes programmatically and dynamically. This project includes code snippets to add multiple ports and customize them dynamically. It also includes code snippets for customizing the appearance and position of the ports, as well as how to connect nodes using ports.
4+
5+
The ports documentation for the Syncfusion Angular Diagram component:
6+
https://helpej2.syncfusion.com/angular/documentation/diagram/ports
7+
8+
Check out the online ports example for the Angular Diagram component:
9+
https://ej2.syncfusion.com/angular/demos/#/material/diagram/ports
10+
11+
Refer to this video for getting started with the Angular Diagram component:
12+
https://www.youtube.com/watch?v=TObiS2Lj87U
13+
14+
Refer to this video for creating and customizing nodes in the Angular Diagram component:
15+
https://www.youtube.com/watch?v=OnI_SMaYLOk
16+
17+
Refer to this video for adding and customizing connectors in the Angular Diagram component:
18+
https://www.youtube.com/watch?v=fwK8CWWBwZ4
19+
20+
## Project prerequisites
21+
22+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
23+
24+
### How to run this application?
25+
26+
To run this application, you need to clone the `how-to-create-and-customize-ports-in-the-angular-diagram-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

‎angular.json‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myangularproject": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/myangularproject",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css",
29+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
30+
],
31+
"scripts": []
32+
},
33+
"configurations": {
34+
"production": {
35+
"budgets": [
36+
{
37+
"type": "initial",
38+
"maximumWarning": "500kb",
39+
"maximumError": "1mb"
40+
},
41+
{
42+
"type": "anyComponentStyle",
43+
"maximumWarning": "2kb",
44+
"maximumError": "4kb"
45+
}
46+
],
47+
"outputHashing": "all"
48+
},
49+
"development": {
50+
"buildOptimizer": false,
51+
"optimization": false,
52+
"vendorChunk": true,
53+
"extractLicenses": false,
54+
"sourceMap": true,
55+
"namedChunks": true
56+
}
57+
},
58+
"defaultConfiguration": "production"
59+
},
60+
"serve": {
61+
"builder": "@angular-devkit/build-angular:dev-server",
62+
"configurations": {
63+
"production": {
64+
"browserTarget": "myangularproject:build:production"
65+
},
66+
"development": {
67+
"browserTarget": "myangularproject:build:development"
68+
}
69+
},
70+
"defaultConfiguration": "development"
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"browserTarget": "myangularproject:build"
76+
}
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"polyfills": [
82+
"zone.js",
83+
"zone.js/testing"
84+
],
85+
"tsConfig": "tsconfig.spec.json",
86+
"assets": [
87+
"src/favicon.ico",
88+
"src/assets"
89+
],
90+
"styles": [
91+
"src/styles.css",
92+
"./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
93+
],
94+
"scripts": []
95+
}
96+
}
97+
}
98+
}
99+
}
100+
}

‎package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "myangularproject",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^16.0.0",
14+
"@angular/common": "^16.0.0",
15+
"@angular/compiler": "^16.0.0",
16+
"@angular/core": "^16.0.0",
17+
"@angular/forms": "^16.0.0",
18+
"@angular/platform-browser": "^16.0.0",
19+
"@angular/platform-browser-dynamic": "^16.0.0",
20+
"@angular/router": "^16.0.0",
21+
"@syncfusion/ej2-angular-buttons": "^22.2.9",
22+
"@syncfusion/ej2-angular-diagrams": "^22.2.9",
23+
"@syncfusion/ej2-material-theme": "*",
24+
"rxjs": "~7.8.0",
25+
"tslib": "^2.3.0",
26+
"zone.js": "~0.13.0"
27+
},
28+
"devDependencies": {
29+
"@angular-devkit/build-angular": "^16.0.4",
30+
"@angular/cli": "~16.0.4",
31+
"@angular/compiler-cli": "^16.0.0",
32+
"@types/jasmine": "~4.3.0",
33+
"jasmine-core": "~4.6.0",
34+
"karma": "~6.4.0",
35+
"karma-chrome-launcher": "~3.2.0",
36+
"karma-coverage": "~2.2.0",
37+
"karma-jasmine": "~5.1.0",
38+
"karma-jasmine-html-reporter": "~2.0.0",
39+
"typescript": "~5.0.2"
40+
}
41+
}

‎src/app/app.component.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.e-btn{
2+
margin: 5px;
3+
}

‎src/app/app.component.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<button ejs-button (click)="addPort()">Add Port</button>
2+
<button ejs-button (click)="removePort()">Remove Port</button>
3+
<button ejs-button (click)="UpdatePort()">Update Port</button>
4+
<ejs-diagram #diagram
5+
width="1500px"
6+
height="600px">
7+
<e-nodes>
8+
<e-node id="node1"
9+
[offsetX]="100"
10+
[offsetY]="100"
11+
[height]="100"
12+
[width]="100"
13+
[style]="style"
14+
[ports]="portSettings">
15+
</e-node>
16+
<e-node id="node2"
17+
[offsetX]="350"
18+
[offsetY]="100"
19+
[height]="100"
20+
[width]="100"
21+
[style]="style"
22+
[ports]="portSettings"
23+
></e-node>
24+
</e-nodes>
25+
</ejs-diagram>
26+

‎src/app/app.component.spec.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(() => TestBed.configureTestingModule({
6+
declarations: [AppComponent]
7+
}));
8+
9+
it('should create the app', () => {
10+
const fixture = TestBed.createComponent(AppComponent);
11+
const app = fixture.componentInstance;
12+
expect(app).toBeTruthy();
13+
});
14+
15+
it(`should have as title 'myangularproject'`, () => {
16+
const fixture = TestBed.createComponent(AppComponent);
17+
const app = fixture.componentInstance;
18+
expect(app.title).toEqual('myangularproject');
19+
});
20+
21+
it('should render title', () => {
22+
const fixture = TestBed.createComponent(AppComponent);
23+
fixture.detectChanges();
24+
const compiled = fixture.nativeElement as HTMLElement;
25+
expect(compiled.querySelector('.content span')?.textContent).toContain('myangularproject app is running!');
26+
});
27+
});

‎src/app/app.component.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
2+
import { DiagramComponent, PointPortModel, PortConstraints, PortVisibility } from '@syncfusion/ej2-angular-diagrams';
3+
4+
@Component({
5+
selector: 'app-root',
6+
templateUrl: './app.component.html',
7+
styleUrls: ['./app.component.css'],
8+
encapsulation: ViewEncapsulation.None
9+
})
10+
11+
export class AppComponent {
12+
title = 'myangularproject';
13+
public style = { fill: '#6495ED'};
14+
@ViewChild('diagram') diagramObj !: DiagramComponent;
15+
public portSettings: PointPortModel[] = [
16+
{ id: 'port1', offset: {x:0, y:0}, visibility:PortVisibility.Visible,
17+
horizontalAlignment: 'Right',
18+
verticalAlignment: 'Bottom', style: {fill: 'Orange', strokeWidth: 2}, height: 15, width: 15,
19+
shape: 'Custom',
20+
pathData: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z',
21+
},
22+
// {
23+
// id: 'port2',
24+
// offset: {x:0.5, y:0.5},
25+
// visibility: PortVisibility.Visible
26+
// },
27+
// {
28+
// id: 'port3',
29+
// offset: {x:0.5, y:1},
30+
// visibility: PortVisibility.Visible
31+
// },
32+
{
33+
id: 'port4',
34+
offset: {x:1, y:0.5},
35+
visibility: PortVisibility.Visible,
36+
constraints: PortConstraints.Draw | PortConstraints.Default
37+
},
38+
{
39+
id: 'port5',
40+
offset: {x:0, y:0.5},
41+
visibility: PortVisibility.Visible
42+
},
43+
// {
44+
// id: 'port6',
45+
// offset: {x:0.5, y:0},
46+
// visibility: PortVisibility.Visible
47+
// },
48+
// {
49+
// id: 'port7',
50+
// offset: {x:0, y:1},
51+
// visibility: PortVisibility.Visible
52+
// },
53+
// {
54+
// id: 'port8',
55+
// offset: {x:1, y:1},
56+
// visibility: PortVisibility.Visible
57+
// },
58+
// {
59+
// id: 'port9',
60+
// offset: {x:1, y:0},
61+
// visibility: PortVisibility.Visible
62+
// },
63+
];
64+
65+
public addPort(){
66+
this.diagramObj.addPorts(this.diagramObj.nodes[0], this.portSettings);
67+
}
68+
69+
public removePort(){
70+
this.diagramObj.removePorts(this.diagramObj.nodes[0] as any, this.portSettings);
71+
}
72+
73+
public UpdatePort(){
74+
(this.diagramObj.nodes[0] as any).ports[0].offset = { x:1, y:1 };
75+
this.diagramObj.dataBind();
76+
}
77+
}

‎src/app/app.module.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { AppComponent } from './app.component';
5+
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
6+
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
7+
8+
@NgModule({
9+
declarations: [
10+
AppComponent
11+
],
12+
imports: [
13+
BrowserModule,
14+
DiagramModule,
15+
ButtonModule
16+
],
17+
providers: [],
18+
bootstrap: [AppComponent]
19+
})
20+
export class AppModule { }

‎src/assets/images/Marker.png‎

2.83 KB
Loading

‎src/favicon.ico‎

948 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)