Symbol Palette customization in Angular Diagram component
10 Dec 202424 minutes to read
Customize the palette header
Palettes can be annotated with its header texts.
The title property displayed as the header text of palette.
The expanded property of palette allows to expand/collapse its palette items.
The height property of palette sets the height of the palette / 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 operation of symbol palette can be animated by utilizing the enableAnimation property of symbol palette. The following example demonstrates, how to enable and disable animation for 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 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, 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
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 the individual symbol can be customized. The symbolWidth and symbolHeight properties enables 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 the 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 the palette items can be customized using symbolPreview property of symbol palette.
The width and height properties of SymbolPalette allow you to define the preview size for all the 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. 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
You can customize whether to expand all the palettes of symbol palette at a time or to expand only one palette at a time. This customization can be done using the expandMode property of symbol palette.
You can customize whether to expand all the palettes of the symbol palette at a time or to expand only one palette at a time. This customization can be done using the expandMode property of the symbol palette.
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 we click on the expand icon of the palette, the paletteExpanding event is triggered. In this event, we 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 mouse hovers over the 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 the tooltips for symbols in the symbol palette, assign a custom tooltip to the content property of ‘tooltip’ for each symbol. Once you define the custom tooltip, enable the Tooltip constraints for each symbol, ensuring that the tooltips are displayed when users hover over them.
The code provided below demonstrates how to define tooltip content to 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 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 will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node 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, we need to define the locale property of the symbol palette with our preferred culture. In the example below, we use ‘de-DE’, which is the locale code for German as used in Germany.
The following code shows how to localize 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 the symbols getting dragged from the symbol palette by setting the allowDrag property of symbol palette as false. By default, the allowDrag is set as 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 you don’t want to be shown via search.
In the following example, we ignored the symbol with the ID of ‘plus’, so it will not appear in the 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 the search results based on your specific requirements. To achieve this, customize the filterSymbols method of the symbol palette according to your needs. In the following example, we filter the results 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