Search results

SymbolPaletteComponent

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

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

locale

string

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

Defaults to undefined

palettes

PaletteModel[]

Defines the collection of symbol groups

Defaults to []

symbolHeight

number

Defines the height of the symbol

Defaults to undefined

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

Returns void

destroy

To destroy the symbol palette

Returns void

getModuleName

To get Module name @private

Returns string

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

Returns void

render

Renders nodes and connectors in the symbol palette

Returns void

Events

paletteSelectionChange

EmitType<IPaletteSelectionChangeArgs>

Triggers after the selection changes in the symbol palette