Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually.
A group can be added to the diagram model through nodes
collection. To define an object as group, add the child objects to the children
collection of the group. The following code illustrates how to create a group node.
padding
property of a group node defines the spacing between the group node’s edges and its children.diagram.group
method.diagram.unGroup
method is used to define whether the group can be ungrouped or not.import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, IconShapeModel, MarginModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=100 [offsetY]=100>
</e-node>
<e-node id='node2' [offsetX]=200 [offsetY]=200>
</e-node>
<e-node id='node3' [offsetX]=400 [offsetY]=300 >
</e-node>
<e-node id='group' [children]='children' [padding]="padding">
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
node.style.fill = "#6BA5D7";
node.style.strokeColor = "White";
return node;
}
public children: string[];
public padding: MarginModel = {left:10,right:10,top:10,bottom:10}
ngOnInit(): void {
this.children = ['node1', 'node2']
}
public created(args: Object): void {
this.diagram.selectAll();
// Adding the third node into the existing group
this.diagram.group();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, DiagramModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The following code illustrates how a ungroup at runtime.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, IconShapeModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=100 [offsetY]=100>
</e-node>
<e-node id='node2' [offsetX]=200 [offsetY]=200>
</e-node>
<e-node id='node3' [offsetX]=400 [offsetY]=300 >
</e-node>
<e-node id='group' [children]='children'>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
node.style.fill = "#6BA5D7";
node.style.strokeColor = "White";
return node;
}
public children: string[];
ngOnInit(): void {
this.children = ['node1', 'node2']
}
public created(args: Object): void {
this.diagram.selectAll();
// Ungroup the selected group into nodes
this.diagram.unGroup();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, DiagramModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Connectors can be added to a group. The following code illustrates how to add connectors into a group.
import { Component, ViewEncapsulation, ViewChild, } from '@angular/core';
import {
DiagramComponent, NodeModel, ConnectorModel,
} from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: 'app-container',
template: `<ejs-diagram #diagram id="diagram" width="1000px" height="700px" [nodes]='nodes' [connectors]="connectors">
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('diagram')
public diagram: DiagramComponent;
public connectors: ConnectorModel[] = [{
id: 'connector1', type: 'Orthogonal', sourceID: 'node1', targetID: 'node2'
},
];
public nodes: NodeModel[] = [{
id: 'node1', height: 100, width: 100, offsetX: 100, offsetY: 100, annotations: [{ content: 'Node1'}]
},
{
id: 'node2', height: 100, width: 100, offsetX: 300, offsetY: 100, annotations: [{ content: 'Node2'}]
},
{
id: 'group', children: ['node1', 'node2', 'connector1',], style: { strokeWidth: 0}
}];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, DiagramModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
A group node can be added at runtime by using the client-side method diagram.add
.
The following code illustrates how a group node is added at runtime.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, IconShapeModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' (created)='created($event)'>
<e-nodes>
<e-node id='node1' [offsetX]=100 [offsetY]=100>
</e-node>
<e-node id='node2' [offsetX]=200 [offsetY]=200>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
node.style.fill = "#6BA5D7";
node.style.strokeColor = "White";
return node;
}
public group: NodeModel[] = [{
id: 'group2',
children: ['node1', 'node2']
}]
public created(args: Object): void {
// Add the group into the diagram
this.diagram.add(this.group);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, DiagramModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Containers are used to automatically measure and arrange the size and position of the child elements in a predefined manner. There are two types of containers available.
canvas.children
property.basicElements
The following code illustrates how to add canvas panel
orientation
is vertical.The following code illustrates how to add a stack panel.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, TextElement, StackPanel, PointModel, VerticalAlignment } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
<e-nodes>
<e-node id='node1' [offsetX]=100 [offsetY]=100>
<e-node-annotations>
<e-node-annotation content="Custom Template" [offset]='offset' [verticalAlignment]='verticalAlignment'>
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram: DiagramComponent;
public offset: PointModel
public verticalAlignment: VerticalAlignment
public getTextElement(text: string): TextElement {
let textElement: TextElement = new TextElement();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
};
public addRows(column: StackPanel) {
column.children.push(this.getTextElement('Row1'));
column.children.push(this.getTextElement('Row2'));
column.children.push(this.getTextElement('Row3'));
column.children.push(this.getTextElement('Row4'));
};
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
ngOnInit(): void {
this.verticalAlignment = 'Top';
this.offset = {y: 1};
this.diagram.setNodeTemplate = (obj: NodeModel, diagram: Diagram): StackPanel => {
if (obj.id.indexOf('node1') !== -1) {
// It will be replaced with grid panel
let table: StackPanel = new StackPanel();
table.orientation = 'Horizontal';
let column1: StackPanel = new StackPanel();
column1.children = [];
column1.children.push(this.getTextElement('Column1'));
this.addRows(column1);
let column2: StackPanel = new StackPanel();
column2.children = [];
column2.children.push(this.getTextElement('Column2'));
this.addRows(column2);
table.children = [column1, column2];
return table;
}
return null
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, DiagramModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Group | Container |
---|---|
It arranges the child elements based on the child elements position and size properties. | Each container has a predefined behavior to measure and arrange its child elements. Canvas and stack containers are supported in the diagram. |
The Padding, Min, and Max Size properties are not applicable for basic group. | It is applicable for container. |
The Children’s margin and alignment properties are not applicable for basic group. | It is applicable for container. |
You can edit the group and its children at runtime. For more information about how to interact with a group, refer to Edit Groups
.