Symbol Palette Events in EJ2 React 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 * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
const dragEnter = (args) => {
//DragEntered symbol
console.log(args.element.id);
//customize
args.element.style.fill = 'yellow';
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} dragEnter={dragEnter} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {useRef} from "react";
import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, IDragEnterEventArgs } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef: DiagramComponent = useRef(null);
const dragEnter = (args: IDragEnterEventArgs) => {
//DragEntered symbol
console.log(args.element.id);
//customize
args.element.style.fill = 'yellow';
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} dragEnter={dragEnter} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const dragLeave = (args) => {
//drag leaved symbol
console.log(args.element.id);
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" width={'1000px'} height={'500px'} dragLeave={dragLeave} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, IDragLeaveEventArgs } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const dragLeave = (args: IDragLeaveEventArgs) => {
//drag leaved symbol
console.log(args.element.id);
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" width={'1000px'} height={'500px'} dragLeave={dragLeave} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const dragOver = (args) => {
if (args.target) {
//Target shape id
console.log(args.target.id);
}
//Dragged symbol
console.log(args.element.id);
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" width={'1000px'} height={'500px'} dragOver={dragOver} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, IDragOverEventArgs } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const dragOver = (args: IDragOverEventArgs) => {
if (args.target) {
//Target shape id
console.log(args.target.id);
}
//Dragged symbol
console.log(args.element.id);
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" width={'1000px'} height={'500px'} dragOver={dragOver} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
const drop = (args) => {
//Dropped symbol
args.element.style.fill = 'yellow';
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} drop={drop} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent, IDropEventArgs, NodeModel, PaletteModel } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
const drop = (args: IDropEventArgs) => {
//Dropped symbol
args.element.style.fill = 'yellow';
//customize
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={60} symbolHeight={60} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} drop={drop} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
const paletteExpanding = (args) => {
if (args.isExpanded) {
alert('Palette expanded');
} else {
alert('Palette collapsed');
}
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={70} symbolHeight={60}
paletteExpanding={paletteExpanding} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, IPaletteExpandArgs } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
const paletteExpanding = (args: IPaletteExpandArgs) => {
if (args.isExpanded) {
alert('Palette expanded');
} else {
alert('Palette collapsed');
}
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={70} symbolHeight={60}
paletteExpanding={paletteExpanding} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes() {
let basicShapes = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
// Triggered upon symbol selection change
const paletteSelectionChange = (args) => {
//The selected symbol
console.log(args.newValue);
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={70} symbolHeight={60}
paletteSelectionChange={paletteSelectionChange} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, IPaletteSelectionChangeArgs } from "@syncfusion/ej2-react-diagrams";
//Initialize the basic shapes for the symbol palette
export function getBasicShapes(): NodeModel[] {
let basicShapes: NodeModel[] = [{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
return basicShapes;
}
const palettes: PaletteModel[] = [{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
}];
function App() {
const diagramRef = useRef(null);
// Triggered upon symbol selection change
const paletteSelectionChange = (args: IPaletteSelectionChangeArgs) => {
//The selected symbol
console.log(args.newValue);
}
return (
<div>
<SymbolPaletteComponent id="symbolpalette" palettes={palettes} symbolWidth={70} symbolHeight={60}
paletteSelectionChange={paletteSelectionChange} />
<DiagramComponent id="diagram" ref={diagramRef} width={'1000px'} height={'500px'} />
</div>);
}
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render(<App />);