Interface for a class SymbolPalette
EmitType<IPaletteExpandArgs>
Triggers when the icon is expanded
EmitType<IPaletteSelectionChangeArgs>
Triggers after the selection changes in the symbol palette
string
Configures the key, when it pressed the symbol palette will be focused
boolean
Defines whether the symbols can be dragged from palette or not
ConnectorModel
Helps to return the default properties of connectors
boolean
Enables/Disables animation when the palette header is expanded/collapsed
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
Enables/Disables search option in symbol palette
ExpandMode
Defines how many palettes can be at expanded mode at a time
Function
| string
Defines the symbols to be added in search palette
Function
| string
Helps to return the default properties of connector
Function
| string
Helps to return the default properties of node
Function
| string
<div id="symbolpalette"></div>
let palette: SymbolPalette = new SymbolPalette({
expandMode: 'Multiple',
palettes: [
{ id: 'flow', expanded: false, symbols: getFlowShapes(), title: 'Flow Shapes' },
],
width: '100%', height: '100%', symbolHeight: 50, symbolWidth: 50,
symbolPreview: { height: 100, width: 100 },
enableSearch: true,
getNodeDefaults: setPaletteNodeDefaults,
symbolMargin: { left: 12, right: 12, top: 12, bottom: 12 },
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return { fit: true };
}
});
palette.appendTo('#symbolpalette');
export function getFlowShapes(): NodeModel[] {
let flowShapes: NodeModel[] = [
{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } },
{ id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } },
{ id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } }
];
return flowShapes;
}
function setPaletteNodeDefaults(node: NodeModel): void {
if (node.id === 'Terminator' || node.id === 'Process') {
node.width = 130;
node.height = 65;
} else {
node.width = 50;
node.height = 50;
}
node.style.strokeColor = '#3A3A3A';
}
Function
| string
Defines the content of a symbol
string
| number
Defines the height of the symbol palette
string[]
Defines the symbols to be added in search palette
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
NodeModel
Helps to return the default properties of node
Defines the collection of symbol groups
Defines the size of a drop symbol
number
Defines the height of the symbol
Defines the size, appearance and description of a symbol
MarginModel
Defines the space to be left around a symbol
Defines the size and position of the symbol preview
number
Defines the width of the symbol
string
| number
Defines the width of the symbol palette