/** * DevExtreme (ui/diagram.d.ts) * Version: 21.1.7 * Build date: Thu Aug 07 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { UserDefinedElement, DxElement, } from '../core/element'; import { template, } from '../core/templates/template'; import DataSource, { DataSourceOptions, } from '../data/data_source'; import Store from '../data/abstract_store'; import { EventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events/index'; import Widget, { WidgetOptions, } from './widget/ui.widget'; /** @public */ export type ContentReadyEvent = EventInfo; /** @public */ export type CustomCommandEvent = { readonly component: dxDiagram; readonly element: DxElement; readonly name: string; }; /** @public */ export type DisposingEvent = EventInfo; /** @public */ export type InitializedEvent = InitializedEventInfo; /** @public */ export type ItemClickEvent = EventInfo & { readonly item: Item; }; /** @public */ export type ItemDblClickEvent = EventInfo & { readonly item: Item; }; /** @public */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type RequestEditOperationEvent = EventInfo & { readonly operation: 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints'; readonly args: dxDiagramAddShapeArgs | dxDiagramAddShapeFromToolboxArgs | dxDiagramDeleteShapeArgs | dxDiagramDeleteConnectorArgs | dxDiagramChangeConnectionArgs | dxDiagramChangeConnectorPointsArgs | dxDiagramBeforeChangeShapeTextArgs | dxDiagramChangeShapeTextArgs | dxDiagramBeforeChangeConnectorTextArgs | dxDiagramChangeConnectorTextArgs | dxDiagramResizeShapeArgs | dxDiagramMoveShapeArgs; readonly reason: 'checkUIElementAvailability' | 'modelModification'; allowed?: boolean; }; /** @public */ export type RequestLayoutUpdateEvent = EventInfo & { readonly changes: any[]; allowed?: boolean; }; /** @public */ export type SelectionChangedEvent = EventInfo & { readonly items: Array; }; /** @public */ export type CustomShapeTemplateData = { readonly item: dxDiagramShape; }; /** @public */ export type CustomShapeToolboxTemplateData = { readonly item: dxDiagramShape; }; /** * @deprecated use Properties instead * @namespace DevExpress.ui */ export interface dxDiagramOptions extends WidgetOptions { /** * @docid * @type Enums.DiagramAutoZoomMode * @default "disabled" * @public */ autoZoomMode?: 'fitContent' | 'fitWidth' | 'disabled'; /** * @docid * @default {} * @public */ contextMenu?: { /** * @docid * @type Array|Array * @default undefined */ commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'lineStyle' | 'lineWidth' | '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'>; /** * @docid * @default true */ enabled?: boolean; }; /** * @docid * @default {} * @public */ contextToolbox?: { /** * @docid * @type Enums.DiagramShapeCategory|String */ category?: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom' | string; /** * @docid * @type Enums.DiagramToolboxDisplayMode */ displayMode?: 'icons' | 'texts'; /** * @docid * @default true */ enabled?: boolean; /** * @docid * @default 4 */ shapeIconsPerRow?: number; /** * @docid * @type Array|Array */ shapes?: Array<'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'> | Array; /** * @docid * @default 152 */ width?: number; }; /** * @docid * @type_function_param1 e:object * @type_function_param1_field1 component:this * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 name:String * @action * @public */ onCustomCommand?: ((e: CustomCommandEvent) => void); /** * @docid * @type_function_param1 container:dxSVGElement * @type_function_param2 data:object * @type_function_param2_field1 item:dxDiagramShape * @type_function_return void * @public */ customShapeTemplate?: template | ((container: DxElement, data: CustomShapeTemplateData) => any); /** * @docid * @type_function_param1 container:dxSVGElement * @type_function_param2 data:object * @type_function_param2_field1 item:dxDiagramShape * @type_function_return void * @public */ customShapeToolboxTemplate?: template | ((container: DxElement, data: CustomShapeToolboxTemplateData) => any); /** * @docid * @default [] * @public */ customShapes?: Array<{ /** * @docid */ allowEditImage?: boolean; /** * @docid */ allowEditText?: boolean; /** * @docid */ allowResize?: boolean; /** * @docid */ backgroundImageHeight?: number; /** * @docid */ backgroundImageLeft?: number; /** * @docid */ backgroundImageTop?: number; /** * @docid */ backgroundImageUrl?: string; /** * @docid */ backgroundImageToolboxUrl?: string; /** * @docid */ backgroundImageWidth?: number; /** * @docid * @type Enums.DiagramShapeType|String */ baseType?: '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' | string; /** * @docid */ category?: string; /** * @docid */ connectionPoints?: Array<{ /** * @docid */ x?: number; /** * @docid */ y?: number; }>; /** * @docid */ defaultHeight?: number; /** * @docid */ defaultImageUrl?: string; /** * @docid */ defaultText?: string; /** * @docid */ defaultWidth?: number; /** * @docid */ imageHeight?: number; /** * @docid */ imageLeft?: number; /** * @docid */ imageTop?: number; /** * @docid */ imageWidth?: number; /** * @docid */ keepRatioOnAutoSize?: boolean; /** * @docid */ maxHeight?: number; /** * @docid */ maxWidth?: number; /** * @docid */ minHeight?: number; /** * @docid */ minWidth?: number; /** * @docid * @type_function_param1 container:dxSVGElement * @type_function_param2 data:object * @type_function_param2_field1 item:dxDiagramShape * @type_function_return void */ template?: template | ((container: DxElement, data: CustomShapeTemplateData) => any); /** * @docid */ templateHeight?: number; /** * @docid */ templateLeft?: number; /** * @docid */ templateTop?: number; /** * @docid */ templateWidth?: number; /** * @docid */ textHeight?: number; /** * @docid */ textLeft?: number; /** * @docid */ textTop?: number; /** * @docid */ textWidth?: number; /** * @docid */ title?: string; /** * @docid * @type_function_param1 container:dxSVGElement * @type_function_param2 data:object * @type_function_param2_field1 item:dxDiagramShape * @type_function_return void */ toolboxTemplate?: template | ((container: DxElement, data: CustomShapeToolboxTemplateData) => any); /** * @docid */ toolboxWidthToHeightRatio?: number; /** * @docid */ type?: string; }>; /** * @docid * @default {} * @public */ defaultItemProperties?: { /** * @docid */ style?: Object; /** * @docid */ textStyle?: Object; /** * @docid * @type Enums.DiagramConnectorLineType * @default 'orthogonal' */ connectorLineType?: 'straight' | 'orthogonal'; /** * @docid * @type Enums.DiagramConnectorLineEnd * @default 'none' */ connectorLineStart?: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'; /** * @docid * @type Enums.DiagramConnectorLineEnd * @default 'arrow' */ connectorLineEnd?: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle'; /** * @docid * @default undefined */ shapeMinWidth?: number; /** * @docid * @default undefined */ shapeMaxWidth?: number; /** * @docid * @default undefined */ shapeMinHeight?: number; /** * @docid * @default undefined */ shapeMaxHeight?: number; }; /** * @docid * @default {} * @public */ editing?: { /** * @docid * @default true */ allowAddShape?: boolean; /** * @docid * @default true */ allowDeleteShape?: boolean; /** * @docid * @default true */ allowDeleteConnector?: boolean; /** * @docid * @default true */ allowChangeConnection?: boolean; /** * @docid * @default true */ allowChangeConnectorPoints?: boolean; /** * @docid * @default true */ allowChangeConnectorText?: boolean; /** * @docid * @default true */ allowChangeShapeText?: boolean; /** * @docid * @default true */ allowResizeShape?: boolean; /** * @docid * @default true */ allowMoveShape?: boolean; }; /** * @docid * @default null * @public */ edges?: { /** * @docid * @default undefined */ customDataExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default null */ dataSource?: Array | Store | DataSource | DataSourceOptions; /** * @docid * @default "from" */ fromExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ fromLineEndExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ fromPointIndexExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default "id" */ keyExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ lineTypeExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ lockedExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ pointsExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ styleExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ textExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ textStyleExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default "to" */ toExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ toLineEndExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ toPointIndexExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ zIndexExpr?: string | ((data: any, value?: any) => any); }; /** * @docid * @public */ export?: { /** * @docid * @default "Diagram" */ fileName?: string; /** * @docid * @default undefined * @deprecated */ proxyUrl?: string; }; /** * @docid * @default false * @public */ fullScreen?: boolean; /** * @docid * @public */ gridSize?: number | { /** * @docid */ items?: Array; /** * @docid */ value?: number; }; /** * @docid * @default null * @public */ nodes?: { /** * @docid * @type Enums.DiagramDataLayoutType|Object * @default "auto" */ autoLayout?: 'off' | 'tree' | 'layered' | { /** * @docid * @type Enums.DiagramDataLayoutOrientation */ orientation?: 'vertical' | 'horizontal'; /** * @docid * @type Enums.DiagramDataLayoutType */ type?: 'off' | 'tree' | 'layered'; }; /** * @docid * @default true */ autoSizeEnabled?: boolean; /** * @docid * @default "children" */ containerChildrenExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ containerKeyExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ customDataExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default null */ dataSource?: Array | Store | DataSource | DataSourceOptions; /** * @docid * @default undefined */ heightExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ imageUrlExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ itemsExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default "id" */ keyExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ leftExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ lockedExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ parentKeyExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ styleExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default "text" */ textExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ textStyleExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ topExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default "type" */ typeExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ widthExpr?: string | ((data: any, value?: any) => any); /** * @docid * @default undefined */ zIndexExpr?: string | ((data: any, value?: any) => any); }; /** * @docid * @default false * @public */ hasChanges?: boolean; /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDiagram * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 item:dxDiagramItem * @action * @public */ onItemClick?: ((e: ItemClickEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDiagram * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 item:dxDiagramItem * @action * @public */ onItemDblClick?: ((e: ItemDblClickEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDiagram * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 items:Array * @action * @public */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDiagram * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 operation:Enums.DiagramModelOperation * @type_function_param1_field5 args:dxDiagramAddShapeArgs|dxDiagramAddShapeFromToolboxArgs|dxDiagramDeleteShapeArgs|dxDiagramDeleteConnectorArgs|dxDiagramChangeConnectionArgs|dxDiagramChangeConnectorPointsArgs|dxDiagramBeforeChangeShapeTextArgs|dxDiagramChangeShapeTextArgs|dxDiagramBeforeChangeConnectorTextArgs|dxDiagramChangeConnectorTextArgs|dxDiagramResizeShapeArgs|dxDiagramMoveShapeArgs * @type_function_param1_field6 reason:Enums.DiagramRequestEditOperationReason * @type_function_param1_field7 allowed:boolean * @action * @public */ onRequestEditOperation?: ((e: RequestEditOperationEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDiagram * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 changes:Array * @type_function_param1_field5 allowed:boolean * @action * @public */ onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void); /** * @docid * @default "white" * @public */ pageColor?: string; /** * @docid * @type Enums.DiagramPageOrientation * @default "portrait" * @public */ pageOrientation?: 'portrait' | 'landscape'; /** * @docid * @public */ pageSize?: { /** * @docid */ height?: number; /** * @docid */ items?: Array<{ /** * @docid */ height?: number; /** * @docid */ text?: string; /** * @docid */ width?: number; }>; /** * @docid */ width?: number; }; /** * @docid * @default {} * @public */ propertiesPanel?: { /** * @docid * @default undefined */ tabs?: Array<{ /** * @docid * @type Array|Array */ commands?: Array<'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'>; /** * @docid */ groups?: Array<{ /** * @docid * @type Array|Array */ commands?: Array<'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'>; /** * @docid */ title?: string; }>; /** * @docid */ title?: string; }>; /** * @docid * @type Enums.DiagramPanelVisibility * @default 'auto' */ visibility?: 'auto' | 'visible' | 'collapsed' | 'disabled'; }; /** * @docid * @default false * @public */ readOnly?: boolean; /** * @docid * @default true * @public */ showGrid?: boolean; /** * @docid * @default false * @public */ simpleView?: boolean; /** * @docid * @default true * @default false &for(desktop except Mac) * @public */ useNativeScrolling?: boolean; /** * @docid * @default true * @public */ snapToGrid?: boolean; /** * @docid * @default {} * @public */ mainToolbar?: { /** * @docid * @type Array|Array * @default undefined */ commands?: Array<'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'>; /** * @docid * @default false */ visible?: boolean; }; /** * @docid * @default {} * @public */ historyToolbar?: { /** * @docid * @type Array|Array * @default undefined */ commands?: Array<'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'>; /** * @docid * @default true */ visible?: boolean; }; /** * @docid * @default {} * @public */ viewToolbar?: { /** * @docid * @type Array|Array * @default undefined */ commands?: Array<'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'>; /** * @docid * @default true */ visible?: boolean; }; /** * @docid * @default {} * @public */ toolbox?: { /** * @docid * @type Array