Symbol Palette customization in Vue Diagram component
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.
<template>
<div id="app">
<ejs-symbolpalette id="symbolpalette" width="100%" height="700px" :expandMode="expandMode" :palettes="palettes"
:symbolHeight="80" :symbolWidth="80" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
// Define reactive properties
const expandMode = ref('Multiple');
const palettes = ref([
{
//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: getFlowShapes(),
//Sets the header text of the palette
title: 'Flow Shapes',
//Sets the header icon of the palette
iconCss: 'e-ddb-icons e-flow'
},
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
{
id: 'connectors',
expanded: true,
symbols: getConnectors(),
title: 'Connectors',
iconCss: 'e-ddb-icons e-connector',
},
]);
// Define helper functions
function getBasicShapes() {
return [
{
id: 'Rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
},
{
id: 'Ellipse',
shape: { type: 'Basic', shape: 'Ellipse' },
},
{
id: 'Hexagon',
shape: { type: 'Basic', shape: 'Hexagon' },
},
];
}
function getFlowShapes() {
return [
{
id: 'process',
shape: { type: 'Flow', shape: 'Process' },
},
{
id: 'document',
shape: { type: 'Flow', shape: 'Document' },
},
{
id: 'predefinedprocess',
shape: { type: 'Flow', shape: 'PreDefinedProcess' },
},
];
}
function getConnectors() {
return [
{
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' },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette id="symbolpalette" width="100%" height="700px" :expandMode="expandMode" :palettes="palettes"
:symbolHeight="80" :symbolWidth="80" />
</div>
</template>
<script>
import { SymbolPaletteComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'AppComponent',
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
expandMode: 'Multiple',
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',
//Sets the header icon of the palette
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',
},
]
};
},
methods: {
getBasicShapes() {
return [
{
id: 'Rectangle',
shape: { type: 'Basic', shape: 'Rectangle' }
},
{
id: 'Ellipse',
shape: { type: 'Basic', shape: 'Ellipse' }
},
{
id: 'Hexagon',
shape: { type: 'Basic', shape: 'Hexagon' }
}
];
},
getFlowShapes() {
return [
{
id: 'process',
shape: { type: 'Flow', shape: 'Process' }
},
{
id: 'document',
shape: { type: 'Flow', shape: 'Document' }
},
{
id: 'predefinedprocess',
shape: { type: 'Flow', shape: 'PreDefinedProcess' }
},
];
},
getConnectors() {
return [
{
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' }
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<label>Enable animation</label>
<input style="margin-left: 5px" id="enableAnimation" type="checkbox" v-model="enableAnimation" />
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes"
:enableAnimation="enableAnimation" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
// Enables animation
const enableAnimation = ref(true);
const symbolPalette = ref(null);
// Define palettes with a function for basic shapes
const palettes = ref([
{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Define helper function to get basic shapes
function getBasicShapes() {
return [
{
id: 'rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
},
{
id: 'plus',
shape: { type: 'Basic', shape: 'Plus' },
},
{
id: 'triangle',
shape: { type: 'Basic', shape: 'RightTriangle' },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<label>Enable animation</label>
<input style="margin-left: 5px" id="enableAnimation" type="checkbox" v-model="enableAnimation" />
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :enableAnimation="enableAnimation" />
</div>
</template>
<script>
import { SymbolPaletteComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'AppComponent',
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
// Enables animation
enableAnimation: true,
palettes: [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes"
:getSymbolInfo="getSymbolInfo"></ejs-symbolpalette>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, NodeConstraints } from '@syncfusion/ej2-vue-diagrams';
// Register component
// Define palettes
const palettes = ref([
{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Function to initialize the basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: 'rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: { type: 'Basic', shape: 'Plus' },
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: { type: 'Basic', shape: 'RightTriangle' },
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
}
// Function to set symbol information including width, height, and description
function getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: { text: symbol.id },
};
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent, NodeConstraints } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
iconCss: "e-ddb-icons e-basic",
},
],
};
},
methods: {
// Initialize the basic shapes for the symbol palette
getBasicShapes() {
return [
{
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,
},
];
},
// Sets the description of a symbol
getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: {
// Defines the description text for the symbol
text: symbol.id,
},
};
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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:
<template>
<div>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
// Define reactive palettes array
const palettes = ref([
{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
},
]);
// Function to initialize basic shapes
function getBasicShapes() {
return [
{
id: 'Rectangle-symbol',
shape: { type: 'Basic', shape: 'Rectangle' },
},
{
id: 'Ellipse-symbol',
shape: { type: 'Basic', shape: 'Ellipse' },
},
{
id: 'Hexagon-symbol',
shape: { type: 'Basic', shape: 'Hexagon' },
},
];
}
// Function to define symbol description information
function getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: {
//Defines the description text for the symbol
text: symbol.id,
//Defines the text wrapping based on symbol id
wrap: symbol.id === 'Rectangle-symbol' || symbol.id === 'Ellipse-symbol' ? 'NoWrap' : 'WrapWithOverflow',
//Defines the text overflow based on symbol id
overflow: symbol.id === 'Rectangle-symbol' ? 'Ellipsis' : 'Clip',
},
};
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo" />
</div>
</template>
<script>
import { SymbolPaletteComponent } from '@syncfusion/ej2-vue-diagrams';
export default {
name: 'AppComponent',
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
palettes: [
{
id: 'basic',
symbols: this.getBasicShapes(),
title: 'Basic Shapes',
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: 'Rectangle-symbol',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse-symbol',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon-symbol',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
},
// Function to define symbol description information
getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: {
//Defines the description text for the symbol
text: symbol.id,
//Defines the text wrapping based on symbol id
wrap:
symbol.id === 'Rectangle-symbol' || symbol.id === 'Ellipse-symbol'
? 'NoWrap'
: 'WrapWithOverflow',
//Defines the text overflow based on symbol id
overflow: symbol.id === 'Rectangle-symbol' ? 'Ellipsis' : 'Clip',
},
};
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo"
enableSearch="true"></ejs-symbolpalette>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from "@syncfusion/ej2-vue-diagrams";
// Define palettes using ref for reactivity
const palettes = ref([
{
id: "basic",
symbols: getBasicShapes(),
title: "Basic Shapes",
},
{
id: "flow",
symbols: getFlowShapes(),
title: "Flow Shapes",
},
]);
// Function to initialize the basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: "Rectangle-symbol",
shape: { type: "Basic", shape: "Rectangle" },
},
{
id: "Ellipse-symbol",
shape: { type: "Basic", shape: "Ellipse" },
},
{
id: "Hexagon-symbol",
shape: { type: "Basic", shape: "Hexagon" },
},
];
}
// Function to initialize the flow shapes for the symbol palette
function getFlowShapes() {
return [
{
id: "Process",
shape: { type: "Flow", shape: "Process" },
style: { strokeWidth: 2 },
},
{
id: "Document",
shape: { type: "Flow", shape: "Document" },
style: { strokeWidth: 2 },
},
];
}
// Function to customize symbol description appearance
function getSymbolInfo(symbol) {
return {
width: 100,
height: 50,
description: {
text: symbol.id,
margin: { top: 20, bottom: 10 },
fill: "green",
fontFamily: "Calibri",
fontSize: 15,
bold: true,
italic: true,
textDecoration: "Underline",
color: "white",
},
};
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo"
enableSearch="true">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
{
id: "flow",
symbols: this.getFlowShapes(),
title: "Flow Shapes",
},
],
};
},
methods: {
// Initialize the basic shapes for the symbol palette
getBasicShapes() {
return [
{
id: "Rectangle-symbol",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "Ellipse-symbol",
shape: {
type: "Basic",
shape: "Ellipse",
},
},
{
id: "Hexagon-symbol",
shape: {
type: "Basic",
shape: "Hexagon",
},
},
];
},
// Initialize the flow shapes for the symbol palette
getFlowShapes() {
return [
{
id: "Process",
shape: { type: "Flow", shape: "Process" },
style: { strokeWidth: 2 },
},
{
id: "Document",
shape: { type: "Flow", shape: "Document" },
style: { strokeWidth: 2 },
},
];
},
// Description appearance customization of a symbol
getSymbolInfo(symbol) {
return {
width: 100,
height: 50,
description: {
// Defines the description text for the symbol
text: symbol.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",
},
};
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="700px" :symbolHeight="80"
:symbolWidth="80" :expandMode="expandMode" :palettes="palettes" :symbolMargin="symbolMargin" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
const expandMode = ref('Multiple');
//Sets the space to be left around a symbol
const symbolMargin = ref({
left: 15,
right: 15,
top: 15,
bottom: 15,
});
const palettes = ref([
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Function to initialize basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="700px" :symbolHeight="80"
:symbolWidth="80" :expandMode="expandMode" :palettes="palettes" :symbolMargin="symbolMargin">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
expandMode: 'Multiple',
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
symbolMargin: {
left: 15,
right: 15,
top: 15,
bottom: 15,
},
};
},
methods: {
getBasicShapes() {
return [
{
id: "Rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "Ellipse",
shape: {
type: "Basic",
shape: "Ellipse",
},
},
{
id: "Hexagon",
shape: {
type: "Basic",
shape: "Hexagon",
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :symbolHeight="80" :symbolWidth="80"
:expandMode="expandMode" :palettes="palettes" :getSymbolInfo="getSymbolInfo" :symbolMargin="symbolMargin"
:symbolPreview="symbolPreview" />
<ejs-diagram id="diagram" width="1000px" height="500px"></ejs-diagram>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
// Define reactive variables
const expandMode = ref('Multiple');
const symbolMargin = ref({
left: 15,
right: 15,
top: 15,
bottom: 15,
});
//Specifies the preview size and position to symbol palette items.
const symbolPreview = ref({
height: 100,
width: 100,
offset: {
x: 1,
y: 0.5,
},
});
const palettes = ref([
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Function to initialize basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: 'Rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'Ellipse',
shape: {
type: 'Basic',
shape: 'Ellipse',
},
},
{
id: 'Hexagon',
shape: {
type: 'Basic',
shape: 'Hexagon',
},
},
];
}
// Function for symbol info
function getSymbolInfo() {
return {
fit: true, // Enables to fit the content into the specified palette item size
};
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="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>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
'ejs-diagram': DiagramComponent,
},
data() {
return {
expandMode: 'Multiple',
palettes: [{
id: "basic",
expanded: true,
symbols: this.getBasicShapes(),
title: "Basic Shapes",
iconCss: "e-ddb-icons e-basic",
}],
symbolMargin: {
left: 15,
right: 15,
top: 15,
bottom: 15,
},
//Specifies the preview size and position to symbol palette items.
symbolPreview: {
height: 100,
width: 100,
offset: {
x: 1,
y: 0.5,
},
},
};
},
methods: {
getBasicShapes() {
return [
{
id: "Rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "Ellipse",
shape: {
type: "Basic",
shape: "Ellipse",
},
},
{
id: "Hexagon",
shape: {
type: "Basic",
shape: "Hexagon",
},
},
];
},
getSymbolInfo() {
return {
fit: true, // Enables to fit the content into the specified palette item size
};
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes"
:symbolDragSize="symbolDragSize" />
<ejs-diagram id="diagram" width="1000px" height="500px"></ejs-diagram>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
// Defines the size of the shape while dragging it from the palette to the diagram canvas
const symbolDragSize = ref({ height: 30, width: 40 });
const palettes = ref([
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
},
]);
// Function to initialize basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :symbolDragSize="symbolDragSize">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px">
</ejs-diagram>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
'ejs-diagram': DiagramComponent
},
data() {
return {
palettes: [{
id: "basic",
expanded: true,
symbols: this.getBasicShapes(),
title: "Basic Shapes",
}],
// Defines the size of the shape while dragging it from the palette to the diagram canvas
symbolDragSize: { height: 30, width: 40 },
};
},
methods: {
getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic", shape: "Rectangle",
},
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
The following example demonstrates how to set the expandMode property to control the expansion behavior of the palettes:
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="700px" :expandMode="expandMode"
:palettes="palettes" :symbolHeight="80" :symbolWidth="80" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
// Define reactive variables
const expandMode = ref('Single');
const palettes = ref([
{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
title: 'Flow Shapes',
iconCss: 'e-ddb-icons e-flow',
},
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
{
id: 'connectors',
expanded: true,
symbols: getConnectors(),
title: 'Connectors',
iconCss: 'e-ddb-icons e-connector',
},
]);
// Function to get basic shapes
function getBasicShapes() {
return [
{
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 },
},
];
}
// Function to get flow shapes
function getFlowShapes() {
return [
{
id: 'Process',
shape: { type: 'Flow', shape: 'Process' },
style: { strokeWidth: 2 },
},
{
id: 'Document',
shape: { type: 'Flow', shape: 'Document' },
style: { strokeWidth: 2 },
},
];
}
// Function to get connectors
function getConnectors() {
return [
{
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' },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="700px" :expandMode="expandMode"
:palettes="palettes" :symbolHeight="80" :symbolWidth="80">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
// Expands only one palette at a time
expandMode: "Single",
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",
},
],
};
},
methods: {
getBasicShapes() {
return [
{
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 },
},
];
},
getFlowShapes() {
return [
{
id: "Process",
shape: { type: "Flow", shape: "Process" },
style: { strokeWidth: 2 },
},
{
id: "Document",
shape: { type: "Flow", shape: "Document" },
style: { strokeWidth: 2 },
},
];
},
getConnectors() {
return [
{
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" },
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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:
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="100%" :expandMode="expandMode"
:enableSearch="true" :palettes="palettes" :symbolHeight="80" :symbolWidth="80"
:symbolPreview="symbolPreview" @paletteExpanding="paletteExpanding" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
// Define reactive variables
const expandMode = ref('Multiple');
const palettes = ref([
{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
title: 'Flow Shapes',
iconCss: 'e-ddb-icons e-flow',
},
{
id: 'basic',
expanded: true,
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
const symbolPreview = ref([
{
height: 100,
width: 100,
},
]);
// Function to handle palette expanding event
function paletteExpanding(args) {
if (args.palette.id === 'basic') {
// Basic shapes panel does not collapse
args.cancel = true;
} else {
// Flow shapes panel collapses and expands
args.cancel = false;
}
}
// Function to get basic shapes
function getBasicShapes() {
return [
{
id: 'Rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
},
{
id: 'Ellipse',
shape: { type: 'Basic', shape: 'Ellipse' },
},
{
id: 'Hexagon',
shape: { type: 'Basic', shape: 'Hexagon' },
},
];
}
// Function to get flow shapes
function getFlowShapes() {
return [
{
id: 'process',
shape: { type: 'Flow', shape: 'Process' },
},
{
id: 'document',
shape: { type: 'Flow', shape: 'Document' },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" width="100%" height="100%" :expandMode="expandMode"
:enableSearch="true" :palettes="palettes" :symbolHeight="80" :symbolWidth="80" :symbolPreview="symbolPreview"
@paletteExpanding="paletteExpanding">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
expandMode: "Multiple", // Allows multiple palettes to be expanded
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",
}],
symbolPreview: [
{
height: 100,
width: 100,
},
],
};
},
methods: {
paletteExpanding(args) {
if (args.palette.id === "basic") {
// Basic shapes panel does not collapse
args.cancel = true;
} else {
// Flow shapes panel collapses and expands
args.cancel = false;
}
},
getBasicShapes() {
return [
{
id: "Rectangle",
shape: { type: "Basic", shape: "Rectangle" },
},
{
id: "Ellipse",
shape: { type: "Basic", shape: "Ellipse" },
},
{
id: "Hexagon",
shape: { type: "Basic", shape: "Hexagon" },
},
];
},
getFlowShapes() {
return [
{
id: "process",
shape: { type: "Flow", shape: "Process" },
},
{
id: "document",
shape: { type: "Flow", shape: "Document" },
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes"
:getSymbolInfo="getSymbolInfo"></ejs-symbolpalette>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, NodeConstraints } from '@syncfusion/ej2-vue-diagrams';
// Register component
// Define palettes
const palettes = ref([
{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Function to initialize the basic shapes for the symbol palette
function getBasicShapes() {
return [
{
id: 'rectangle',
shape: { type: 'Basic', shape: 'Rectangle' },
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: { type: 'Basic', shape: 'Plus' },
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: { type: 'Basic', shape: 'RightTriangle' },
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
}
// Function to set symbol information including width, height, and description
function getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: { text: symbol.id },
};
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id='app'>
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :getSymbolInfo="getSymbolInfo">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent, NodeConstraints } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
},
data() {
return {
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
iconCss: "e-ddb-icons e-basic",
},
],
};
},
methods: {
// Initialize the basic shapes for the symbol palette
getBasicShapes() {
return [
{
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,
},
];
},
// Sets the description of a symbol
getSymbolInfo(symbol) {
return {
width: 50,
height: 50,
description: {
// Defines the description text for the symbol
text: symbol.id,
},
};
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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:
<template>
<div id="app">
<ejs-symbolpalette
id="symbolpalette"
ref="symbolPaletteRef"
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" @click="showTooltip" checked type="checkbox" />Show
Tooltip
</div>
</template>
<script setup>
import { ref } from "vue";
import {
SymbolPaletteComponent as EjsSymbolpalette,
DiagramComponent as EjsDiagram,
NodeConstraints,
} from "@syncfusion/ej2-vue-diagrams";
let symbolPaletteInstance;
const expandMode = ref("Multiple");
const symbolPreview = ref({
height: 80,
width: 80,
});
const symbolMargin = ref({
left: 15,
right: 15,
top: 15,
bottom: 15,
});
const palettes = ref([
{
id: "flow",
expanded: true,
symbols: getFlowShapes(),
title: "Flow Shapes",
},
{
id: "basic",
expanded: true,
symbols: getBasicShapes(),
title: "Basic Shapes",
},
]);
const symbolPaletteRef = ref(null);
function getFlowShapes() {
return [
{ 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: "SequentialData", shape: { type: "Flow", shape: "Card" } },
{ id: "Sort", shape: { type: "Flow", shape: "Collate" } },
];
}
function getBasicShapes() {
return [
{ id: "Rectangle", shape: { type: "Basic", shape: "Rectangle" } },
{ id: "Ellipse", shape: { type: "Basic", shape: "Ellipse" } },
{ id: "Hexagon", shape: { type: "Basic", shape: "Triangle" } },
{ id: "Star", shape: { type: "Basic", shape: "Hexagon" } },
{ id: "Pentagon", 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" } },
];
}
function getSymbolInfo(symbol) {
return { showTooltip: true };
}
function getNodeDefaults(symbol) {
symbol.style.fill = "#6495ED";
symbol.style.strokeColor = "#6495ED";
}
function showTooltip(args) {
var checkBox = document.getElementById("showTooltip");
symbolPaletteInstance.getSymbolInfo = function (symbol) {
return {
showTooltip: checkBox.checked,
};
};
symbolPaletteInstance.dataBind();
}
onMounted(() => {
symbolPaletteInstance = symbolPaletteRef.value.ej2Instances;
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette
id="symbolpalette"
ref="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" @click="showTooltip" checked type="checkbox" />Show
Tooltip
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
let symbolPaletteInstance;
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
},
data() {
return {
expandMode: "Multiple",
symbolPreview: { height: 80, width: 80 },
symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },
palettes: [
{
id: "flow",
expanded: true,
symbols: this.getFlowShapes(),
title: "Flow Shapes",
},
{
id: "basic",
expanded: true,
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
],
};
},
methods: {
getFlowShapes() {
return [
{ 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: "SequentialData", shape: { type: "Flow", shape: "Card" } },
{ id: "Sort", shape: { type: "Flow", shape: "Collate" } },
];
},
getBasicShapes() {
return [
{ id: "Rectangle", shape: { type: "Basic", shape: "Rectangle" } },
{ id: "Ellipse", shape: { type: "Basic", shape: "Ellipse" } },
{ id: "Hexagon", shape: { type: "Basic", shape: "Triangle" } },
{ id: "Star", shape: { type: "Basic", shape: "Hexagon" } },
{ id: "Pentagon", 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" } },
];
},
getSymbolInfo: function (symbol) {
return { showTooltip: true };
},
getNodeDefaults: function (symbol) {
symbol.style.fill = "#6495ED";
symbol.style.strokeColor = "#6495ED";
},
showTooltip: function (args) {
var checkBox = document.getElementById("showTooltip");
symbolPaletteInstance.getSymbolInfo = function (symbol) {
return {
showTooltip: checkBox.checked,
};
};
symbolPaletteInstance.dataBind();
},
},
mounted() {
// Set up the reference once the component is mounted
symbolPaletteInstance = this.$refs.symbolPalette.ej2Instances;
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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 will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :symbolWidth="80"
:symbolHeight="80">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" @dragEnter="dragEnter">
</ejs-diagram>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram, NodeConstraints } from '@syncfusion/ej2-vue-diagrams';
// Reactive variables
const palettes = ref([
{
id: 'basic',
symbols: getBasicShapes(),
title: 'Basic Shapes',
iconCss: 'e-ddb-icons e-basic',
},
]);
// Function to get basic shapes
function getBasicShapes() {
return [
{
id: 'rectangle',
shape: {
type: 'Basic',
shape: 'Rectangle',
},
tooltip: { content: 'Rectangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'plus',
shape: {
type: 'Basic',
shape: 'Plus',
},
tooltip: { content: 'Plus Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: 'triangle',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
tooltip: { content: 'RightTriangle Basic shape', relativeMode: 'Object' },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
}
// Function to handle the dragEnter event
function dragEnter(args) {
const node = args.element; // Retrieve the dragged node
// Update the tooltip content based on the shape
node.tooltip.content = `New ${node.shape.shape} node`;
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :symbolWidth="80" :symbolHeight="80">
</ejs-symbolpalette>
<ejs-diagram id="diagram" width="1000px" height="500px" @dragEnter="dragEnter">
</ejs-diagram>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent, NodeConstraints } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
'ejs-symbolpalette': SymbolPaletteComponent,
'ejs-diagram': DiagramComponent,
},
data() {
return {
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
iconCss: "e-ddb-icons e-basic",
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
tooltip: { content: "Rectangle Basic shape", relativeMode: "Object" },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
tooltip: { content: "Plus Basic shape", relativeMode: "Object" },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
tooltip: { content: "RightTriangle Basic shape", relativeMode: "Object" },
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
},
];
},
dragEnter(args) {
const node = args.element; // Retrieve the dragged node
// Update the tooltip content based on the shape
node.tooltip.content = `New ${node.shape.shape} node`;
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :symbolWidth="80"
:symbolHeight="80" :enableSearch="true" :enableAnimation="false" :locale="locale">
</ejs-symbolpalette>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette } from '@syncfusion/ej2-vue-diagrams';
import { L10n, setCulture } from '@syncfusion/ej2-base';
// Set culture to German
setCulture("de");
// Load locale text for the SearchShapes
L10n.load({
"de-DE": {
SymbolPalette: {
SearchShapes: "Formen suchen",
},
},
});
// Reactive variables
const palettes = ref([
{
id: "basic",
symbols: getBasicShapes(),
title: "Basic Shapes",
},
]);
const locale = ref('de-DE'); // Set default locale
// Function to get basic shapes
function getBasicShapes() {
return [
{
id: "Rectangle",
shape: { type: "Basic", shape: "Rectangle" },
},
{
id: "Ellipse",
shape: { type: "Basic", shape: "Ellipse" },
},
{
id: "Hexagon",
shape: { type: "Basic", shape: "Hexagon" },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-symbolpalette ref="symbolPalette" id="symbolpalette" :palettes="palettes" :symbolWidth="80" :symbolHeight="80"
:enableSearch="true" :enableAnimation="false" :locale="locale">
</ejs-symbolpalette>
</div>
</template>
<script>
import { SymbolPaletteComponent } from "@syncfusion/ej2-vue-diagrams";
import { L10n, setCulture } from "@syncfusion/ej2-base";
// Set culture to German
setCulture("de");
// Load locale text for the SearchShapes
L10n.load({
"de-DE": {
SymbolPalette: {
SearchShapes: "Formen suchen",
},
},
});
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
},
data() {
return {
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
],
// Set default locale
locale: "de-DE",
};
},
methods: {
getBasicShapes() {
return [
{
id: "Rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "Ellipse",
shape: {
type: "Basic",
shape: "Ellipse",
},
},
{
id: "Hexagon",
shape: {
type: "Basic",
shape: "Hexagon",
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<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>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
//Restricts symbol dragging from the palette
const allowDrag = ref(false);
const palettes = ref([
{
id: "basic",
symbols: getBasicShapes(),
title: "Basic Shapes",
},
]);
// Function to return basic shapes
function getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<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>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
"ejs-diagram": DiagramComponent,
},
data() {
return {
//Restricts symbol dragging from the palette
allowDrag: false,
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<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>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
// Enables search for the symbol palette
const enableSearch = ref(true);
const palettes = ref([
{
id: "basic",
symbols: getFlowShapes(),
title: "Basic Shapes",
},
]);
// Function to return flow shapes
function getFlowShapes() {
return [
{ 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" } },
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<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>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
"ejs-diagram": DiagramComponent,
},
data() {
return {
// Enables search for the symbol palette
enableSearch: true,
palettes: [
{
id: "basic",
symbols: this.getFlowShapes(),
title: "Basic Shapes",
},
],
};
},
methods: {
getFlowShapes() {
return [
{ 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" } },
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<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>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
const enableSearch = ref(true);
// Defines collection of symbols to be ignored on search
const ignoreSymbolsOnSearch = ref(['plus']);
const palettes = ref([
{
id: "basic",
symbols: getBasicShapes(),
title: "Basic Shapes",
},
]);
// Function to provide basic shapes
function getBasicShapes() {
return [
{
id: "rectangle",
shape: { type: "Basic", shape: "Rectangle" },
},
{
id: "plus",
shape: { type: "Basic", shape: "Plus" },
},
{
id: "triangle",
shape: { type: "Basic", shape: "RightTriangle" },
},
];
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<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>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
"ejs-diagram": DiagramComponent,
},
data() {
return {
enableSearch: true,
// Defines collection of symbols to be ignored on search
ignoreSymbolsOnSearch: ['plus'],
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
},
];
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<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>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { SymbolPaletteComponent as EjsSymbolpalette, DiagramComponent as EjsDiagram } from "@syncfusion/ej2-vue-diagrams";
// Define reactive state
const enableSearch = ref(true);
const palettes = ref([
{
id: "basic",
symbols: getBasicShapes(),
title: "Basic Shapes",
},
{
id: "flow",
symbols: getFlowShapes(),
title: "Flow Shapes",
},
]);
// Define functions to get shapes
function getBasicShapes() {
return [
{ id: "rectangle", shape: { type: "Basic", shape: "Rectangle" } },
{ id: "plus", shape: { type: "Basic", shape: "Plus" } },
{ id: "triangle", shape: { type: "Basic", shape: "RightTriangle" } },
];
}
function getFlowShapes() {
return [
{ 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" } },
];
}
// filter the search results
function filterSymbols(symbols) {
return symbols.filter(symbol => symbol.shape.type === 'Flow');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<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>
</div>
</template>
<script>
import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-vue-diagrams";
export default {
name: "App",
components: {
"ejs-symbolpalette": SymbolPaletteComponent,
"ejs-diagram": DiagramComponent,
},
data() {
return {
enableSearch: true,
palettes: [
{
id: "basic",
symbols: this.getBasicShapes(),
title: "Basic Shapes",
},
{
id: "flow",
symbols: this.getFlowShapes(),
title: "Flow Shapes",
},
],
};
},
methods: {
getBasicShapes() {
return [
{
id: "rectangle",
shape: {
type: "Basic",
shape: "Rectangle",
},
},
{
id: "plus",
shape: {
type: "Basic",
shape: "Plus",
},
},
{
id: "triangle",
shape: {
type: "Basic",
shape: "RightTriangle",
},
},
];
},
getFlowShapes() {
return [
{
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",
},
},
];
},
// filter the search results
filterSymbols(symbols) {
return symbols.filter(symbol => symbol.shape.type === 'Flow');
},
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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