SymbolPaletteComponent

Represents vue 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

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 \

Returns void

addPalettes

Add particular palettes to symbol palette at runtime.\

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\

Returns void

removePaletteItem

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

Returns void

removePalettes

Remove particular palettes to symbol palette at runtime \

Returns void

Events

paletteExpanding

EmitType<IPaletteExpandArgs>

Triggers when the icon is expanded

paletteSelectionChange

EmitType<IPaletteSelectionChangeArgs>

Triggers after the selection changes in the symbol palette