Skip to content

Commit 942b323

Browse files
sarathkumarvenkatesansarathkumarvenkatesan
authored
Merge pull request #1 from vinoth-Kumar-S/master
Adding Angular Diagram Mind Map sample
2 parents eefcfe0 + d23066c commit 942b323

17 files changed

+396
-1
lines changed

‎README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
1-
# how-to-create-a-mind-map-layout-using-the-angular-diagram
1+
# How to Create a Mind Map Diagram Layout Using Angular Diagram
2+
23
A quick start Angular project that shows how to create a Mind map Layout using the Angular Diagram component. This project includes a code snippet to customize the nodes and connectors in the layout and change its orientation. It also contains code to align the layout using horizontal and vertical spacing, and to add expand and collapse icons.
4+
5+
Refer to the following documentation on the Syncfusion Angular Bullet Charts component:
6+
https://ej2.syncfusion.com/angular/documentation/bullet-chart/getting-started
7+
8+
Check out this online example of the Angular Bullet Charts component:
9+
https://ej2.syncfusion.com/angular/demos/#/material/bullet-chart/default
10+
11+
## Project prerequisites
12+
13+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
14+
15+
### How to run this application?
16+
17+
To run this application, you need to clone the `getting-started-with-the-angular-bullet-chart-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.8",
22+
"@syncfusion/ej2-angular-diagrams": "^22.2.8",
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

Whitespace-only changes.

‎src/app/app.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ejs-diagram #diagram
2+
[dataSourceSettings]="data"
3+
[layout]="layoutSettings"
4+
[getNodeDefaults]="nodeDefaults"
5+
[getConnectorDefaults]="connectorDefaults"
6+
width="1500px"
7+
height="600px"
8+
(created)="create()">
9+
</ejs-diagram>
10+

‎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: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
2+
import { ConnectorModel, DataBinding, Diagram, MindMap, NodeModel, PointPortModel, DiagramComponent } from '@syncfusion/ej2-angular-diagrams';
3+
import { mindMapData } from './data';
4+
import { DataManager } from '@syncfusion/ej2-data';
5+
Diagram.Inject(DataBinding, MindMap);
6+
@Component({
7+
selector: 'app-root',
8+
templateUrl: './app.component.html',
9+
styleUrls: ['./app.component.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
13+
export class AppComponent {
14+
title = 'myangularproject';
15+
@ViewChild("diagram") diagramObj !: DiagramComponent;
16+
public data:object = {
17+
dataSource: new DataManager(mindMapData),
18+
id: 'id',
19+
parentId: 'parentId'
20+
}
21+
public layoutSettings:object = {
22+
type: 'MindMap', horizontalSpacing: 50, verticalSpacing: 20, orientation: 'Vertical'
23+
}
24+
25+
public nodeDefaults(obj: NodeModel){
26+
let nodeData: any = obj.data;
27+
obj.annotations = [{ content: nodeData.Label, style: { color: 'White'} }];
28+
obj.expandIcon = { shape: 'Minus'};
29+
obj.collapseIcon = { shape: 'Plus'};
30+
obj.height = 50;
31+
obj.width = 130;
32+
if( nodeData.branch === "Root" || nodeData.branch === "Left" || nodeData.branch === "Right"){
33+
obj.shape = nodeData.branch !== "Root" ? { type:'Basic', shape: 'Ellipse'} : { type: 'Path', data: 'M55.7315 17.239C57.8719 21.76 54.6613 27.788 47.1698 26.0787C46.0997 32.309 33.2572 35.323 28.9764 29.2951C25.7658 35.323 10.7829 33.816 10.7829 26.0787C3.29143 30.802 -0.989391 20.253 2.22121 17.239C-0.989317 14.2249 2.22121 6.68993 10.7829 8.39934C13.9935 -0.845086 25.7658 -0.845086 28.9764 5.18301C32.187 0.661909 45.0294 0.661908 47.1698 8.39934C52.5209 5.18301 60.0123 12.7179 55.7315 17.239Z'};
34+
obj.style = { fill: nodeData.branch !== "Root" ? '#F39C12' : '#E74C3C', strokeWidth: 0};
35+
} else {
36+
obj.style = { fill: nodeData.branch === "subRight" ? '#8E44AD' : '#3498DB', strokeWidth: 0}
37+
}
38+
obj.ports = getPorts();
39+
}
40+
41+
public connectorDefaults(connector: ConnectorModel, diagram: Diagram){
42+
let sourceNode: NodeModel = diagram.getObject(connector.sourceID as string);
43+
let targetNode: NodeModel = diagram.getObject(connector.targetID as string);
44+
let targetNodeData: any = targetNode.data;
45+
connector.type = "Bezier";
46+
connector.targetDecorator = { shape: 'None'};
47+
if(targetNodeData.branch === 'Right' || targetNodeData.branch === 'subRight'){
48+
connector.sourcePortID = (sourceNode as any).ports[1].id;
49+
connector.targetPortID = (targetNode as any).ports[0].id;
50+
connector.style = { strokeColor: '#8E44AD', strokeWidth: 3};
51+
} else if(targetNodeData.branch === 'Left' || targetNodeData.branch === 'subLeft'){
52+
connector.sourcePortID = (sourceNode as any).ports[0].id;
53+
connector.targetPortID = (targetNode as any).ports[1].id;
54+
connector.style = { strokeColor: '#3498DB', strokeWidth: 3};
55+
}
56+
}
57+
public create(): void {
58+
this.diagramObj.fitToPage();
59+
}
60+
}
61+
62+
function getPorts(): PointPortModel[]{
63+
let ports: PointPortModel[] = [
64+
{ id: 'port1', offset: { y: 0, x: 0.5 } },
65+
{ id: 'port2', offset: { y: 1, x: 0.5 } }
66+
]
67+
return ports;
68+
}

‎src/app/app.module.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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+
7+
@NgModule({
8+
declarations: [
9+
AppComponent
10+
],
11+
imports: [
12+
BrowserModule,
13+
DiagramModule
14+
],
15+
providers: [],
16+
bootstrap: [AppComponent]
17+
})
18+
export class AppModule { }

‎src/app/data.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export let mindMapData: Object[] = [
2+
{ id: 1, Label: "Creativity", branch: "Root" },
3+
{ id: 3, Label: "Brainstorming", parentId: 1, branch: "Right" },
4+
{ id: 4, Label: "Complementing", parentId: 1, branch: "Left" },
5+
{ id: 22, Label: "Sessions", parentId: 3, branch: "subRight" },
6+
{ id: 23, Label: "Generate", parentId: 3, branch: "subRight" },
7+
{ id: 25, Label: "Local", parentId: 22, branch: "subRight" },
8+
{ id: 26, Label: "Remote", parentId: 22, branch: "subRight" },
9+
{ id: 27, Label: "Individual", parentId: 22, branch: "subRight" },
10+
{ id: 28, Label: "Teams", parentId: 22, branch: "subRight" },
11+
{ id: 29, Label: "Ideas", parentId: 23, branch: "subRight" },
12+
{ id: 30, Label: "Engagement", parentId: 23, branch: "subRight" },
13+
{ id: 31, Label: "Product", parentId: 29, branch: "subRight" },
14+
{ id: 32, Label: "Service", parentId: 29, branch: "subRight" },
15+
{ id: 33, Label: "Business Direction", parentId: 29, branch: "subRight" },
16+
{ id: 34, Label: "Empowering", parentId: 30, branch: "subRight" },
17+
{ id: 35, Label: "Ownership", parentId: 30, branch: "subRight" },
18+
{ id: 50, Label: "Information", parentId: 4, branch: "subLeft" },
19+
{ id: 51, Label: "Expectations", parentId: 4, branch: "subLeft" },
20+
{ id: 53, Label: "Competitors", parentId: 50, branch: "subLeft" },
21+
{ id: 54, Label: "Products", parentId: 50, branch: "subLeft" },
22+
{ id: 55, Label: "Features", parentId: 50, branch: "subLeft" },
23+
{ id: 56, Label: "Other Data", parentId: 50, branch: "subLeft" },
24+
{ id: 59, Label: "Organization", parentId: 51, branch: "subLeft" },
25+
{ id: 60, Label: "Customer", parentId: 51, branch: "subLeft" },
26+
{ id: 61, Label: "Staff", parentId: 51, branch: "subLeft" },
27+
{ id: 62, Label: "Stakeholders", parentId: 51, branch: "subLeft" }
28+
]

‎src/assets/images/Marker.png

2.83 KB
Loading

0 commit comments

Comments
 (0)