Symbol Palette Customization in Angular Diagram Component
14 Sep 202524 minutes to read
Customize the palette header
Palettes can be annotated with their header texts.
The title property is displayed as the header text of the palette.
The expanded property of the palette allows users to expand or collapse its palette items.
The height property of the palette sets the height of the palette or symbol group.
The iconCss property sets the icon to be rendered with the title.
The following code example illustrates how to customize palette headers.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, NodeModel, ConnectorModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette"width="100%" height="700px" [expandMode]="expandMode" [palettes]="palettes" [symbolHeight]=80 [symbolWidth]=80>
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public expandMode?: ExpandMode;
public palettes?: PaletteModel[];
public getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon'
}
}
];
return basicShapes;
};
public getFlowShapes(): NodeModel[] {
let flowShapes: NodeModel[] = [{
id: 'process',
shape: {
type: 'Flow',
shape: 'Process'
}
},
{
id: 'document',
shape: {
type: 'Flow',
shape: 'Document'
}
},
{
id: 'predefinedprocess',
shape: {
type: 'Flow',
shape: 'PreDefinedProcess'
}
}
];
return flowShapes;
};
public getConnectors(): ConnectorModel[] {
let connectorSymbols: ConnectorModel[] = [{
id: 'Link1',
type: 'Orthogonal',
sourcePoint: {
x: 0,
y: 0
},
targetPoint: {
x: 40,
y: 40
},
targetDecorator: {
shape: 'Arrow'
}
},
{
id: 'Link21',
type: 'Straight',
sourcePoint: {
x: 0,
y: 0
},
targetPoint: {
x: 40,
y: 40
},
targetDecorator: {
shape: 'Arrow'
}
},
{
id: 'link33',
type: 'Bezier',
sourcePoint: {
x: 0,
y: 0
},
targetPoint: {
x: 40,
y: 40
},
style: {
strokeWidth: 2
},
targetDecorator: {
shape: 'None'
}
}
];
return connectorSymbols;
};
ngOnInit(): void {
this.expandMode = 'Multiple'
this.palettes = [{
//Sets the id of the palette
id: 'flow',
//Sets whether the palette expands/collapse its children
expanded: true,
//Adds the palette items to palette
symbols: this.getFlowShapes(),
//Sets the header text of the palette
title: 'Flow Shapes',
iconCss: 'e-ddb-icons e-flow'
},
{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
},
{
id: 'connectors',
expanded: true,
symbols: this.getConnectors(),
title: 'Connectors',
iconCss: 'e-ddb-icons e-connector'
}
]
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Animation
The expand and collapse operations of the symbol palette can be animated by utilizing the enableAnimation property of the symbol palette. The following example demonstrates how to enable and disable animation for the symbol palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, ConnectorModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<label>Enable animation</label>
<input style="margin-left: 5px" id="enableAnimation" type="checkbox" checked (click)="toggleAnimation($event)" />
<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [enableAnimation]="enableAnimation">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
// Enables / Disables animation
public enableAnimation: boolean = true;
public palettes: PaletteModel[] = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}];
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return nodes;
}
toggleAnimation(args: any) {
if (args.target.checked) {
this.enableAnimation = true;
} else {
this.enableAnimation = false;
}
(this.symbolPalette as SymbolPaletteComponent).refresh();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Description for symbols
The description property defines the descriptive text that appears beneath each symbol in the palette. This text provides additional information about the symbol’s purpose or usage within the diagramming context. The description can be dynamically retrieved and defined using the getSymbolInfo property, allowing for contextual information to assist users in understanding the function or meaning of each symbol.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, Connector, NodeConstraints, SymbolInfo, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [getSymbolInfo]="getSymbolInfo">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes: PaletteModel[] = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}];
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
// Defines the tooltip for the shape
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
return nodes;
}
//Sets the description of a symbol
getSymbolInfo(symbol: Node | Connector): SymbolInfo {
return {
width: 50,
height: 50,
description: {
//Defines the description text for the symbol
text: (symbol as any).id,
},
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Text wrapping and text overflow
The descriptive text that appears beneath each symbol can vary in length. In cases where the text might overlap neighboring symbols in the palette, text wrapping is employed. Text wrapping is controlled using the symbolInfo’s description property wrap, which supports three modes: Wrap, NoWrap, and WrapWithOverflow. By default, text wrapping is set to Wrap.
Additionally, to handle overflowing text, the overflow property can be used. By default, textOverflow is set to Ellipsis, which truncates overflowing text with an ellipsis (…).
The following example demonstrates how text wrapping and text overflow are applied based on the symbol ID:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, Connector, SymbolInfo, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [getSymbolInfo]="getSymbolInfo">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes?: PaletteModel[];
getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [
{
id: 'Rectangle-symbol',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse-symbol',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon-symbol',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
return basicShapes;
}
ngOnInit(): void {
this.palettes = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
}];
}
//Sets the description of a symbol
getSymbolInfo(symbol: Node | Connector): SymbolInfo {
return {
width: 50,
height: 50,
description: {
//Defines the description text for the symbol
text: (symbol as any).id,
//Defines the text wrapping based on symbol id
wrap:
(symbol as any).id === 'Rectangle-symbol' || (symbol as any).id === 'Ellipse-symbol'
? 'NoWrap'
: 'WrapWithOverflow',
//Defines the text overflow based on symbol id
overflow:
(symbol as any).id === 'Rectangle-symbol'
? 'Ellipsis'
: (symbol as any).id === 'Ellipse-symbol'
? 'Clip'
: 'Clip',
},
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Appearance of symbol description
The appearance of a symbol description in the palette can be customized by changing its color, fill, fontSize, fontFamily, bold, italic, textDecoration, and margin properties.
The following code example shows how to customize the symbol description.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, Connector, SymbolInfo, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [getSymbolInfo]="getSymbolInfo" enableSearch=true>
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes?: PaletteModel[];
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [
{
id: 'Rectangle-symbol',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse-symbol',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon-symbol',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
return basicShapes;
}
//Initialize the flow shapes for the symbol palette
getFlowShapes(): NodeModel[] {
let flowShapes: NodeModel[] = [
{
id: 'Process',
shape: { type: 'Flow', shape: 'Process' },
style: { strokeWidth: 2 },
},
{
id: 'Document',
shape: { type: 'Flow', shape: 'Document' },
style: { strokeWidth: 2 },
},
];
return flowShapes;
}
ngOnInit(): void {
this.palettes = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
}, {
id: 'flow',
symbols: this.getFlowShapes(),
title: 'Flow Shapes',
},];
}
//Description appearance customization of a symbol
getSymbolInfo(symbol: Node | Connector): SymbolInfo {
return {
width: 100,
height: 50,
description: {
// Defines the description text for the symbol
text: (symbol as any).id,
// Defines the margin between the symbol and text
margin: { top: 20, bottom: 10 },
// Defines the background color of the text
fill: 'green',
// Defines the font family of the text
fontFamily: 'Calibri',
// Defines the font size of the text
fontSize: 15,
// Defines if the text is bold
bold: true,
// Defines if the text is italic
italic: true,
// Defines the text decoration
textDecoration: 'Underline',
// Defines the color of the text
color: 'white',
},
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Symbol size and symbol margin
The size of individual symbols can be customized. The symbolWidth and symbolHeight properties enable you to define the size of the symbols. The following code example illustrates how to change the size of a symbol.
The symbolMargin property is used to create space around elements, outside of any defined borders. By setting the symbol margin with specific values for left, right, top, and bottom, you can create consistent spacing on all sides around the shape.
The following code example illustrates how to set symbol size and symbol margin for the symbol palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, NodeModel, MarginModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" width="100%" height="700px" [symbolHeight]=80 [symbolWidth]=80 [expandMode]="expandMode" [palettes]="palettes" [symbolMargin]="symbolMargin">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public expandMode?: ExpandMode;
public palettes?: PaletteModel[];
public symbolMargin?: MarginModel;
public getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon'
}
}
];
return basicShapes;
};
ngOnInit(): void {
this.expandMode = 'Multiple'
this.palettes = [{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}]
//Sets the space to be left around a symbol
this.symbolMargin = {
left: 15,
right: 15,
top: 15,
bottom: 15
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Symbol preview
The symbol preview size of palette items can be customized using the symbolPreview property of the symbol palette.
The width and height properties of SymbolPalette allow you to define the preview size for all symbol palette items. The offset property specifies the position of the dragging helper relative to the mouse cursor.
The following code example illustrates how to change the preview size of a palette item.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPreviewModel, NodeModel, PaletteModel, MarginModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [symbolHeight]=80 [symbolWidth]=80 [expandMode]="expandMode" [palettes]="palettes" [getSymbolInfo]="getSymbolInfo" [symbolMargin]="symbolMargin" [symbolPreview]="symbolPreview">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px">
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public expandMode?: ExpandMode;
public palettes?: PaletteModel[];
public symbolMargin?: MarginModel;
public symbolPreview?: SymbolPreviewModel;
public getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon'
}
}
];
return basicShapes;
};
public getSymbolInfo() {
// Enables to fit the content into the specified palette item size
return {
fit: true
};
// When it is set as false, the element is rendered with actual node size
};
ngOnInit(): void {
this.expandMode = 'Multiple'
this.palettes = [{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}],
this.symbolMargin = {
left: 15,
right: 15,
top: 15,
bottom: 15
},
//Specifies the preview size and position to symbol palette items.
this.symbolPreview = {
height: 100,
width: 100,
offset: {
x: 1,
y: 0.5
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Symbol drag size
The symbolDragSize property sets the dimensions (height and width) of a shape while it is being dragged from the palette to the diagram canvas. This differs from the preview size, which only affects how symbols appear in the palette itself. The following code illustrates how to set symbolDragSize for the symbol palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, SymbolDragSizeModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolDragSize]="symbolDragSize">
</ejs-symbolpalette>
<ejs-diagram id="diagram" widht="1000px" height="500px">
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public palettes?: PaletteModel[];
// Defines the size of the shape while dragging it from the palette to the diagram canvas
public symbolDragSize: SymbolDragSizeModel = { height: 30, width: 40 };
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return nodes;
}
ngOnInit(): void {
this.palettes = [{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
}];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));NOTE
If the size of the symbol is not defined, the default size will be determined based on its shape.
Expand mode
The expandMode property of the symbol palette allows you to customize whether to expand all palettes simultaneously or to expand only one palette at a time.
The following example demonstrates how to set the expandMode property to control the expansion behavior of the palettes:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, NodeModel, ConnectorModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette"width="100%" height="700px" [expandMode]="expandMode" [palettes]="palettes" [symbolHeight]=80 [symbolWidth]=80>
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
//Expands only one palette at a time
public expandMode: ExpandMode = 'Single';
public palettes?: PaletteModel[];
//Initialize the basicshapes for the symbol palette
getBasicShapes() {
var basicShapes: NodeModel[] = [
{
id: 'Rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
style: { strokeWidth: 2 },
},
{
id: 'Ellipse',
shape: { type: 'Basic', shape: 'RightTriangle' },
style: { strokeWidth: 2 },
},
{
id: 'Hexagon',
shape: { type: 'Basic', shape: 'Hexagon' },
style: { strokeWidth: 2 },
}
];
return basicShapes;
}
//Initialize the flowshapes for the symbol palette
getFlowShapes() {
var flowShapes: NodeModel[] = [
{
id: 'Process',
shape: { type: 'Flow', shape: 'Process' },
style: { strokeWidth: 2 },
},
{
id: 'Document',
shape: { type: 'Flow', shape: 'Document' },
style: { strokeWidth: 2 },
}
];
return flowShapes;
}
//Initialize connectors for symbol palette
getConnectors() {
var connectors: ConnectorModel[] = [
{
id: 'Straight',
type: 'Straight',
sourcePoint: { x: 0, y: 0 },
targetPoint: { x: 60, y: 60 },
targetDecorator: {
shape: 'Arrow',
style: { strokeColor: '#757575', fill: '#757575' },
},
style: { strokeWidth: 1, strokeColor: '#757575' },
},
{
id: 'Orthogonal',
type: 'Orthogonal',
sourcePoint: { x: 0, y: 0 },
targetPoint: { x: 60, y: 60 },
targetDecorator: {
shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' },
},
style: { strokeWidth: 1, strokeColor: '#757575' },
},
{
id: 'Bezier',
type: 'Bezier',
sourcePoint: { x: 0, y: 0 },
targetPoint: { x: 60, y: 60 },
targetDecorator: {
shape: 'Arrow',
style: { strokeColor: '#757575', fill: '#757575' },
},
style: { strokeWidth: 1, strokeColor: '#757575' },
}
];
return connectors;
}
ngOnInit(): void {
this.palettes = [
{
id: 'flow',
expanded: true,
symbols: this.getFlowShapes(),
title: 'Flow Shapes',
iconCss: 'e-ddb-icons e-flow'
},
{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
},
{
id: 'connectors',
expanded: true,
symbols: this.getConnectors(),
title: 'Connectors',
iconCss: 'e-ddb-icons e-connector'
}
]
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Restrict expand/collapse of the palette
The symbol palette panel can be restricted from expanding. When the expand icon of the palette is clicked, the paletteExpanding event is triggered. In this event, you can determine whether the palette’s panel should be expanded or collapsed by utilizing the cancel argument of the event. By default, the panel is expanded. This restriction can be applied to each palette in the symbol palette as desired.
In the following code example, the basic shapes palette is restricted from expanding, and the flow shapes palette is restricted from collapsing, whereas the swimlane shapes palette can be expanded or collapsed:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DiagramModule, SymbolPaletteModule } from '@syncfusion/ej2-angular-diagrams';
import { Component, ViewEncapsulation } from '@angular/core';
import { NodeModel, PaletteModel, SymbolPreviewModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette"width="100%" height="100%" [expandMode]="expandMode" [enableSearch]=true [palettes]='palettes'
[symbolHeight]=80 [symbolWidth]=80 [symbolPreview]='symbolPreview' (paletteExpanding)='paletteExpanding($event)'>
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public expandMode?: ExpandMode;
public palettes?: PaletteModel[];
public symbolPreview?: SymbolPreviewModel[];
public paletteExpanding(args: any) {
if(args.palette.id === 'basic') {
// Basic shapes panel does not collapse
args.cancel = true;
} else {
// Flow shapes panel collapse and expand
args.cancel = false;
}
};
public getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle'
}
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse'
}
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon'
}
}
];
return basicShapes;
};
public getFlowShapes(): NodeModel[] {
let flowShapes: NodeModel[] = [{
id: 'process',
shape: {
type: 'Flow',
shape: 'Process'
}
},
{
id: 'document',
shape: {
type: 'Flow',
shape: 'Document'
}
}
];
return flowShapes;
};
ngOnInit(): void {
this.expandMode = 'Multiple'
this.palettes = [{
id: 'flow',
expanded: true,
symbols: this.getFlowShapes(),
title: 'Flow Shapes',
iconCss: 'e-ddb-icons e-flow'
},
{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}
],
this.symbolPreview = [{
height: 100,
width: 100
}]
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Tooltip for symbols in symbol palette
The symbol palette supports displaying tooltips when the mouse hovers over symbols. You can customize the tooltip for each symbol in the symbol palette.
Default tooltip for symbols
When hovering over symbols in the symbol palette, the default tooltip displays the symbol’s ID.
Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
Custom tooltip for symbols
To customize tooltips for symbols in the symbol palette, assign a custom tooltip to the content property of the ‘tooltip’ for each symbol. Once you define the custom tooltip, enable the Tooltip constraints for each symbol, ensuring that tooltips are displayed when users hover over them.
The code provided below demonstrates how to define tooltip content for symbols within a symbol palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, Connector, NodeConstraints, SymbolInfo, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [getSymbolInfo]="getSymbolInfo">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes: PaletteModel[] = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}];
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
// Defines the tooltip for the shape
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
return nodes;
}
//Sets the description of a symbol
getSymbolInfo(symbol: Node | Connector): SymbolInfo {
return {
width: 50,
height: 50,
description: {
//Defines the description text for the symbol
text: (symbol as any).id,
},
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));How to enable or disable the default tooltip for shapes in the symbol palette
By default, the symbol ID is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the showTooltip property within the getSymbolInfo method. The showTooltip property is set to true by default, which enables the tooltip.
The following example demonstrates how to configure selective tooltip display:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import {
SymbolPaletteModule,
NodeModel,
PaletteModel,
SymbolPreviewModel,
MarginModel,
SymbolPaletteComponent,
} from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
@Component({
imports: [
SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template:
`<ejs-symbolpalette #symbolpalette id="symbolpalette"width="700px" height="300px" [expandMode]="expandMode"
[palettes]="palettes" [symbolHeight]=70 [symbolWidth]=70 [symbolPreview]="symbolPreview" [symbolMargin]="symbolMargin"
[getSymbolInfo]="getSymbolInfo" [getNodeDefaults] ='getNodeDefaults'>
</ejs-symbolpalette>
<input id="showTooltip" #checkboxRef checked type="checkbox" (click)="changeTooltip()">Show Tooltip`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
@ViewChild('checkboxRef') checkbox?: ElementRef<HTMLInputElement>;
public expandMode?: ExpandMode;
public palettes?: PaletteModel[];
public symbolPreview?: SymbolPreviewModel;
public symbolMargin?: MarginModel;
public getSymbolInfo = (symbol: any) => {
return { showTooltip: this?.checkbox?.nativeElement?.checked };
}
// Initialize basic shapes for symbol palette.
public getBasicShapes(): NodeModel[] {
const basicShapes: NodeModel[] = [
{ id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' } },
{ id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' } },
{ id: 'Triangle', shape: { type: 'Basic', shape: 'Triangle' } },
{ id: 'Hexagon', shape: { type: 'Basic', shape: 'Hexagon' } },
{ id: 'Parallelogram', shape: { type: 'Basic', shape: 'Parallelogram' } },
{ id: 'Diamond', shape: { type: 'Basic', shape: 'Diamond' } },
{ id: 'Pentagon', shape: { type: 'Basic', shape: 'Pentagon' } },
{ id: 'Heptagon', shape: { type: 'Basic', shape: 'Heptagon' } },
];
return basicShapes;
}
// Initialize flow shapes symbol palette.
public getFlowShapes(): NodeModel[] {
const flowShapes: NodeModel[] = [
{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' } },
{ id: 'Process', shape: { type: 'Flow', shape: 'Process' } },
{ id: 'Decision', shape: { type: 'Flow', shape: 'Decision' } },
{ id: 'Document', shape: { type: 'Flow', shape: 'Document' } },
{ id: 'PreDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' } },
{ id: 'DirectData', shape: { type: 'Flow', shape: 'DirectData' } },
{ id: 'Card', shape: { type: 'Flow', shape: 'Card' } },
{ id: 'Collate', shape: { type: 'Flow', shape: 'Collate' } },
];
return flowShapes;
}
public getNodeDefaults(node: NodeModel): NodeModel {
(node.style as any).fill = '#6495ED';
(node.style as any).strokeColor = '#6495ED';
return node;
}
changeTooltip(): void {
if (this.symbolPalette) {
this.symbolPalette.refresh();
}
}
ngOnInit(): void {
this.expandMode = 'Multiple';
this.palettes = [
{
id: 'flow',
expanded: true,
symbols: this.getFlowShapes(),
title: 'Flow Shapes',
},
{
id: 'basic',
expanded: true,
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
this.symbolPreview = {
height: 80,
width: 80,
};
this.symbolMargin = {
left: 15,
right: 15,
top: 15,
bottom: 15,
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));NOTE
This property is effective only when tooltip constraints are disabled for the symbol palette element.
How to provide different tooltip for Symbol palette and diagram elements.
When a custom tooltip is defined for a symbol, it will be displayed for both the symbol and the dropped node in the diagram canvas.
However, to provide distinct tooltips for symbols in the palette and dropped nodes, capture the dragEnter event and assign specific tooltips dynamically.
When a symbol is dragged from the symbol palette and enters the diagram canvas, the DragEnter event is fired, accompanied by an argument of type IDragEnterEventArgs. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node.
The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
The following code snippet demonstrates how to define two different tooltips for symbols in the symbol palette and dropped nodes in the diagram canvas.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, SymbolPaletteComponent, NodeModel, NodeConstraints, PaletteModel, IDragEnterEventArgs } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [symbolWidth]=80 [symbolHeight]=80>
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" (dragEnter) = "dragEnter($event)"></ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes: PaletteModel[] = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic'
}];
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
// Defines the tooltip for the shape
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
// Defines the tooltip for the shape
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
return nodes;
}
dragEnter(args: IDragEnterEventArgs) {
let node: NodeModel = args.element as NodeModel;
(node as any).tooltip.content = 'New ' + (node as any).shape.shape + ' node';
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Localization
To localize the symbol palette search box, define the locale property of the symbol palette with the preferred culture. In the example below, ‘de-DE’ is used, which is the locale code for German as used in Germany.
The following code shows how to localize the symbol palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { NodeModel, SymbolPalette } from '@syncfusion/ej2-diagrams';
import { SymbolPaletteModule, SymbolPaletteComponent, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette #symbolpalette id="symbolpalette" [palettes]="palettes" [symbolWidth]= 80 [symbolHeight] = 80 [enableSearch]= true [enableAnimation]= false [locale]="locale">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("symbolpalette")
public symbolPalette?: SymbolPaletteComponent;
public palettes?: PaletteModel[];
public locale?: string;
//Initialize the basic shapes for the symbol palette
getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [
{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
return basicShapes;
}
ngOnInit(): void {
this.palettes = [{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
}];
// Override the global culture and localization value
this.locale = 'de-DE';
// Set the default culture to German
setCulture('de');
// Load locale text for the SearchShapes
L10n.load({
'de-DE': {
SymbolPalette: {
SearchShapes: 'Formen suchen',
},
},
});
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Restrict symbol dragging from palette
You can restrict symbols from being dragged from the symbol palette by setting the allowDrag property of the symbol palette to false. By default, allowDrag is set to true.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, PaletteModel, NodeModel } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" [symbolWidth]=80 [symbolHeight]=80 [palettes]="palettes" [allowDrag]="allowDrag">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" >
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public allowDrag: boolean = false;
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return nodes;
}
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Search symbol
The diagram provides support for enabling the search option in the palette. The enableSearch property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., “rectangle”) and search keywords into the search text box. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, PaletteModel, NodeModel } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" [palettes]="palettes" [symbolWidth] = 60 [symbolHeight] = 60 [enableSearch]="enableSearch">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" >
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public enableSearch: boolean = true;
public flowShapes: NodeModel[] = [
{ id: 'terminator', shape: { type: 'Flow', shape: 'Terminator' } },
{ id: 'process', shape: { type: 'Flow', shape: 'Process' } },
{ id: 'decision', shape: { type: 'Flow', shape: 'Decision' } },
{ id: 'document', shape: { type: 'Flow', shape: 'Document' } },
{
id: 'preDefinedProcess',
shape: { type: 'Flow', shape: 'PreDefinedProcess' },
},
{ id: 'paperTap', shape: { type: 'Flow', shape: 'PaperTap' } },
{ id: 'directData', shape: { type: 'Flow', shape: 'DirectData' } },
{ id: 'sequentialData', shape: { type: 'Flow', shape: 'SequentialData' } },
{ id: 'sort', shape: { type: 'Flow', shape: 'Sort' } },
];
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.flowShapes,
title: 'Basic Shapes',
},
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Ignore symbols on search
The ignoreSymbolsOnSearch property allows you to specify which symbols should be excluded from search results within the symbol palette. By setting this property, you can control the visibility of specific symbols during a search operation. This feature is useful for hiding certain symbols that should not be shown through search functionality.
In the following example, the symbol with the ID ‘plus’ is ignored, so it will not appear in search results.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, PaletteModel, NodeModel } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" [palettes]="palettes" [symbolWidth] = 60 [symbolHeight] = 60 [enableSearch]="enableSearch" [ignoreSymbolsOnSearch]="ignoreSymbolsOnSearch">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" >
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public enableSearch: boolean = true;
// collection of shapes to be ignored on search
public ignoreSymbolsOnSearch: string[] = ['plus'];
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return nodes;
}
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Filter search
You can filter search results based on specific requirements. To achieve this, customize the filterSymbols method of the symbol palette according to your needs. In the following example, the results are filtered to display only flow shapes in the search palette.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, SymbolPaletteModule, PaletteModel, NodeModel } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" [palettes]="palettes" [symbolWidth] = 60 [symbolHeight] = 60 [enableSearch]="enableSearch" [filterSymbols]="filterSymbols">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" >
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public enableSearch: boolean = true;
getBasicShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return nodes;
}
//Initialize the flow shapes for the symbol palette
getFlowShapes(): NodeModel[] {
let nodes: NodeModel[] = [
{
id: 'process',
shape: {
type: 'Flow',
shape: 'Process',
},
},
{
id: 'terminator',
shape: {
type: 'Flow',
shape: 'Terminator',
},
},
{
id: 'decision',
shape: {
type: 'Flow',
shape: 'Decision',
},
},
{
id: 'document',
shape: {
type: 'Flow',
shape: 'Document',
},
},
{
id: 'data',
shape: {
type: 'Flow',
shape: 'Data',
},
},
];
return nodes;
}
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
{
id: 'flow',
symbols: this.getFlowShapes(),
title: 'Flow Shapes',
},
];
filterSymbols(symbols: NodeModel[]): NodeModel[] {
let symbolGroup: NodeModel[] = [];
for (let i: number = 0; i < symbols.length; i++) {
let symbol = symbols[i];
//Filters symbol based on type
if ((symbol as any).shape.type === 'Flow') {
symbolGroup.push(symbol);
}
}
return symbolGroup;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));NOTE
The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed