SymbolPaletteComponent

23 Sep 20257 minutes to read

SymbolPalette Component

<ej-symbol-palette></ej-symbol-palette>

Properties

accessKey string

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

Defaults to ‘S’

allowDrag boolean

Defines whether the symbols can be dragged from palette or not

Defaults to true

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.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSearch boolean

Enables/Disables search option in symbol palette

Defaults to false

expandMode ExpandMode

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

Defaults to ‘Multiple’

filterSymbols Function|string

Defines the symbols to be added in search palette

Defaults to undefined

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

Defaults to undefined

height string|number

Defines the height of the symbol palette

Defaults to ‘100%’

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’.

Defaults to ’’

nodeDefaults NodeModel

Helps to return the default properties of node

nodeTemplate any

Helps to Customizes the node template

Defaults to undefined

palettes PaletteModel[]

Defines the collection of symbol groups

Defaults to []

symbolDragSize SymbolDragSizeModel

Defines the size of a drop symbol

Defaults to undefined

symbolHeight number

Defines the height of the symbol

Defaults to undefined

symbolInfo SymbolInfo

Defines the size, appearance and description of a symbol

symbolMargin MarginModel

Defines the space to be left around a symbol

Defaults to {left:10,right:10,top:10,bottom:10}

symbolPreview SymbolPreviewModel

Defines the size and position of the symbol preview

Defaults to undefined

symbolWidth number

Defines the width of the symbol

Defaults to undefined

width string|number

Defines the width of the symbol palette

Defaults to ‘100%’

Methods

addPaletteItem

Used to add the palette item as nodes or connectors in palettes \

Parameter Type Description
paletteName string provide the scale value.
paletteSymbol NodeModel | ConnectorModel provide the scale value.
isChild (optional) boolean provide the scale value.

Returns void

addPalettes

Add particular palettes to symbol palette at runtime.\

Parameter Type Description
palettes PaletteModel[] -Defines the collection of palettes to be added.

Returns void

destroy

To destroy the ruler

Returns void

getPersistData

Get the properties to be maintained in the persisted state.

Returns string

onPropertyChanged

Refreshes the panel when the symbol palette properties are updated\

Parameter Type Description
newProp SymbolPaletteModel Defines the new values of the changed properties.
oldProp SymbolPaletteModel Defines the old values of the changed properties.

Returns void

removePaletteItem

Used to remove the palette item as nodes or connectors in palettes \

Parameter Type Description
paletteName string provide the scale value.
symbolId string provide the scale value.

Returns void

removePalettes

Remove particular palettes to symbol palette at runtime \

Parameter Type Description
palettes string[] provide the scale value.

Returns void