SymbolPaletteModel

23 Sep 20254 minutes to read

Interface for a class SymbolPalette

Properties

paletteExpanding EmitType<IPaletteExpandArgs>

Triggers when the icon is expanded

paletteSelectionChange EmitType<IPaletteSelectionChangeArgs>

Triggers after the selection changes in the symbol palette

accessKey string

Configures the key, when it pressed the symbol palette will be focused

allowDrag boolean

Defines whether the symbols can be dragged from palette or not

connectorDefaults ConnectorModel

Helps to return the default properties of connectors

enableAnimation boolean

Enables/Disables animation when the palette header is expanded/collapsed

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

enableSearch boolean

Enables/Disables search option in symbol palette

expandMode ExpandMode

Defines how many palettes can be at expanded mode at a time

filterSymbols Function|string

Defines the symbols to be added in search palette

getConnectorDefaults Function|string

Helps to return the default properties of connector

getNodeDefaults Function|string

Helps to return the default properties of node

getSymbolInfo 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';
}

getSymbolTemplate Function|string

Defines the content of a symbol

height string|number

Defines the height of the symbol palette

ignoreSymbolsOnSearch string[]

Defines the symbols to be added in search palette

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

nodeDefaults NodeModel

Helps to return the default properties of node

nodeTemplate string|Function

Helps to Customizes the node template

palettes PaletteModel[]

Defines the collection of symbol groups

symbolDragSize SymbolDragSizeModel

Defines the size of a drop symbol

symbolHeight number

Defines the height of the symbol

symbolInfo SymbolInfo

Defines the size, appearance and description of a symbol

symbolMargin MarginModel

Defines the space to be left around a symbol

symbolPreview SymbolPreviewModel

Defines the size and position of the symbol preview

symbolWidth number

Defines the width of the symbol

width string|number

Defines the width of the symbol palette