SymbolPaletteModel API in JavaScript Diagram API control

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

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