Symbol Palette Events in EJ2 Angular Diagram Component
The Symbol Palette component provides several events that trigger during user interactions such as dragging symbols, expanding palettes, and changing selections. These events enable developers to customize behavior, provide visual feedback, and implement custom logic during symbol palette operations.
DragEnter event
The DragEnter event triggers when a symbol enters the diagram surface while being dragged from the symbol palette. This event allows developers to customize the appearance of the dragged symbol or validate drop targets dynamically based on the diagram’s current state.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, IDragEnterEventArgs, SymbolPaletteModule, NodeModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
</ejs-symbolpalette>
<ejs-diagram #diagram id="diagram" width="1000" height="500px" (dragEnter)="dragEnter($event)"></ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
dragEnter(args: IDragEnterEventArgs) {
//Dragged symbol
console.log(args.element.id);
//customize
(args as any).element.style.fill = 'yellow';
(this.diagram as DiagramComponent).dataBind();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));DragLeave event
The DragLeave event occurs when a dragged symbol leaves the diagram surface without being dropped. This event is particularly useful for cleaning up temporary visual changes applied during the drag operation or resetting any modified states.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDragLeaveEventArgs } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
</ejs-symbolpalette>
<ejs-diagram #diagram id="diagram" width="1000" height="500px" (dragLeave)="dragLeave($event)"></ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
dragLeave(args: IDragLeaveEventArgs) {
//drag leaved symbol
console.log((args.element as any).id);
//customize
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));DragOver event
The DragOver event triggers continuously while a symbol is being dragged over the diagram surface. This event provides real-time feedback during drag operations and enables developers to implement dynamic drop validation.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDragOverEventArgs, NodeConstraints } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
</ejs-symbolpalette>
<ejs-diagram #diagram id="diagram" width="1000" height="500px" [getNodeDefaults]="getNodeDefaults" (dragOver)="dragOver($event)"></ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
getNodeDefaults(node: NodeModel) {
node.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
}
dragOver(args: IDragOverEventArgs) {
if (args.target) {
//Target shape id
console.log((args.target as any).id);
}
//Dragged symbol
console.log((args.element as any).id);
//customize
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Drop event
The Drop event triggers when a symbol is successfully dropped onto the diagram surface. This event serves as the final step in the drag-and-drop process and provides access to both the dropped symbol and the target location.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, SymbolPaletteModule, NodeModel, PaletteModel, IDropEventArgs } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
DiagramModule, SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70>
</ejs-symbolpalette>
<ejs-diagram #diagram id="diagram" width="1000" height="500px" (drop)="drop($event)"></ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
drop(args: IDropEventArgs) {
//Dropped symbol
(args.element as any).style.fill = 'yellow';
(this.diagram as DiagramComponent).dataBind();
//customize
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));PaletteExpanding event
The PaletteExpanding event triggers when a palette group is expanded or collapsed within the symbol palette. This event enables developers to control palette expansion behavior and implement custom logic based on palette state changes.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { SymbolPaletteModule, NodeModel, PaletteModel, IPaletteExpandArgs } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70 (paletteExpanding)="paletteExpanding($event)">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
paletteExpanding(args: IPaletteExpandArgs) {
if (args.isExpanded) {
alert('Palette expanded');
} else {
alert('Palette collapsed');
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));PaletteSelectionChange event
The PaletteSelectionChange event triggers when the selection changes within the symbol palette. This event provides information about both the previously selected and newly selected symbols, enabling developers to respond to selection changes appropriately.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { SymbolPaletteModule, NodeModel, PaletteModel, IPaletteSelectionChangeArgs } from '@syncfusion/ej2-angular-diagrams'
@Component({
imports: [
SymbolPaletteModule
],
providers: [],
standalone: true,
selector: "app-container",
template: `<ejs-symbolpalette id="symbolpalette" [palettes]="palettes" [symbolHeight]=50 [symbolWidth]=70 (paletteSelectionChange)="paletteSelectionChange($event)">
</ejs-symbolpalette>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public palettes: PaletteModel[] = [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
];
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;
}
// Triggered upon symbol selection change
paletteSelectionChange(args: IPaletteSelectionChangeArgs) {
//The selected symbol
console.log((args as any).newValue);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));