React Diagram Types

AutoZoomMode

Specifies how the Diagram UI component automatically zooms the work area.

Type:

Literal Union

Accepted Values: 'fitContent' | 'fitWidth' | 'disabled'

Used in:

Command

Specifies the Diagram command's identifier.

Type:

Literal Union

Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'

Used in:

ConnectorLineEnd

Specifies the default tip of a connector's start/end point.

Type:

Literal Union

Accepted Values: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'

Used in:

ConnectorLineType

Specifies the default type of a connector.

Type:

Literal Union

Accepted Values: 'straight' | 'orthogonal'

Used in:

ConnectorPosition

The position of the connector in the processed point.

Type:

Literal Union

Accepted Values: 'start' | 'end'

Used in:

ContentReadyEvent

The type of the contentReady event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.ContentReadyEvent

Used in:

CustomCommandEvent

The type of the customCommand event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.CustomCommandEvent

Used in:

DataLayoutType

Specifies an auto-layout algorithm that the UI component uses to build a diagram.

Type:

Literal Union

Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

Used in:

DiagramExportFormat

Exports the diagram to an image format.

Type:

Literal Union

Accepted Values: 'svg' | 'png' | 'jpg'

Used in:

DisposingEvent

The type of the disposing event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.DisposingEvent

Used in:

InitializedEvent

The type of the initialized event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.InitializedEvent

Used in:

ItemClickEvent

The type of the itemClick event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.ItemClickEvent

Used in:

ItemDblClickEvent

The type of the itemDblClick event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.ItemDblClickEvent

Used in:

ItemType

Returns the type of the item.

Type:

Literal Union

Accepted Values: 'shape' | 'connector'

Used in:

ModelOperation

Specifies the edit operation.

Type:

Literal Union

Accepted Values: 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints' | 'beforeChangeShapeText' | 'changeShapeText' | 'beforeChangeConnectorText' | 'changeConnectorText' | 'resizeShape' | 'moveShape'

Used in:

OptionChangedEvent

The type of the optionChanged event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.OptionChangedEvent

Used in:

PanelVisibility

Specifies the panel's visibility.

Type:

Literal Union

Accepted Values: 'auto' | 'visible' | 'collapsed' | 'disabled'

Used in:

RequestEditOperationEvent

The type of the requestEditOperation event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.RequestEditOperationEvent

Used in:

RequestEditOperationReason

Specifies the reason to request edit operation.

Type:

Literal Union

Accepted Values: 'checkUIElementAvailability' | 'modelModification'

Used in:

RequestLayoutUpdateEvent

The type of the requestLayoutUpdate event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.RequestLayoutUpdateEvent

Used in:

SelectionChangedEvent

The type of the selectionChanged event handler's argument.

import { DiagramTypes } from "devextreme-react/diagram"
Type: DiagramTypes.SelectionChangedEvent

Used in:

ShapeCategory

Specifies the category of shapes.

Type:

Literal Union

Accepted Values: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom'

Used in:

ShapeType

The type of the processed shape.

Type:

Literal Union

Accepted Values: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight'

Used in:

ToolboxDisplayMode

Specifies how shapes are displayed in the toolbox.

Type:

Literal Union

Accepted Values: 'icons' | 'texts'

Used in:

Units

Specifies the measurement unit for size properties.

Type:

Literal Union

Accepted Values: 'in' | 'cm' | 'px'

Used in: