devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,038 lines (898 loc) • 43.6 kB
TypeScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-angular
*/
import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core';
import DataSource from 'devextreme/data/data_source';
import { AutoZoomMode, Command, CustomCommand, ShapeCategory, ToolboxDisplayMode, ShapeType, ConnectorLineEnd, ConnectorLineType, DataLayoutType, ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, OptionChangedEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, SelectionChangedEvent, PanelVisibility, Units } from 'devextreme/ui/diagram';
import { DataSourceOptions } from 'devextreme/data/data_source';
import { Store } from 'devextreme/data/store';
import { Orientation, PageOrientation } from 'devextreme/common';
import DxDiagram from 'devextreme/ui/diagram';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxiCustomShapeComponent } from 'devextreme-angular/ui/nested';
import { DxiDiagramCustomShapeComponent } from 'devextreme-angular/ui/diagram/nested';
import type * as DxDiagramTypes from "devextreme/ui/diagram_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/diagram/nested";
import * as i3 from "devextreme-angular/core";
/**
* The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.
*/
export declare class DxDiagramComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxDiagram;
/**
* Specifies how the Diagram UI component automatically zooms the work area.
*/
get autoZoomMode(): AutoZoomMode;
set autoZoomMode(value: AutoZoomMode);
/**
* Configures the context menu's settings.
*/
get contextMenu(): {
commands?: Array<Command | CustomCommand>;
enabled?: boolean;
};
set contextMenu(value: {
commands?: Array<Command | CustomCommand>;
enabled?: boolean;
});
/**
* Configures the context toolbox's settings.
*/
get contextToolbox(): {
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
enabled?: boolean;
shapeIconsPerRow?: number;
shapes?: Array<ShapeType>;
width?: number;
};
set contextToolbox(value: {
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
enabled?: boolean;
shapeIconsPerRow?: number;
shapes?: Array<ShapeType>;
width?: number;
});
/**
* Provide access to an array of custom shapes.
*/
get customShapes(): {
allowEditImage?: boolean;
allowEditText?: boolean;
allowResize?: boolean;
backgroundImageHeight?: number;
backgroundImageLeft?: number;
backgroundImageToolboxUrl?: string;
backgroundImageTop?: number;
backgroundImageUrl?: string;
backgroundImageWidth?: number;
baseType?: ShapeType | string;
category?: string;
connectionPoints?: {
x?: number;
y?: number;
}[];
defaultHeight?: number;
defaultImageUrl?: string;
defaultText?: string;
defaultWidth?: number;
imageHeight?: number;
imageLeft?: number;
imageTop?: number;
imageWidth?: number;
keepRatioOnAutoSize?: boolean;
maxHeight?: number;
maxWidth?: number;
minHeight?: number;
minWidth?: number;
template?: any;
templateHeight?: any;
templateLeft?: any;
templateTop?: any;
templateWidth?: any;
textHeight?: number;
textLeft?: number;
textTop?: number;
textWidth?: number;
title?: string;
toolboxTemplate?: any;
toolboxWidthToHeightRatio?: number;
type?: string;
}[];
set customShapes(value: {
allowEditImage?: boolean;
allowEditText?: boolean;
allowResize?: boolean;
backgroundImageHeight?: number;
backgroundImageLeft?: number;
backgroundImageToolboxUrl?: string;
backgroundImageTop?: number;
backgroundImageUrl?: string;
backgroundImageWidth?: number;
baseType?: ShapeType | string;
category?: string;
connectionPoints?: {
x?: number;
y?: number;
}[];
defaultHeight?: number;
defaultImageUrl?: string;
defaultText?: string;
defaultWidth?: number;
imageHeight?: number;
imageLeft?: number;
imageTop?: number;
imageWidth?: number;
keepRatioOnAutoSize?: boolean;
maxHeight?: number;
maxWidth?: number;
minHeight?: number;
minWidth?: number;
template?: any;
templateHeight?: any;
templateLeft?: any;
templateTop?: any;
templateWidth?: any;
textHeight?: number;
textLeft?: number;
textTop?: number;
textWidth?: number;
title?: string;
toolboxTemplate?: any;
toolboxWidthToHeightRatio?: number;
type?: string;
}[]);
/**
* Specifies a custom template for shapes.
*/
get customShapeTemplate(): any;
set customShapeTemplate(value: any);
/**
* Specifies a custom template for shapes in the toolbox.
*/
get customShapeToolboxTemplate(): any;
set customShapeToolboxTemplate(value: any);
/**
* Configures default item properties.
*/
get defaultItemProperties(): {
connectorLineEnd?: ConnectorLineEnd;
connectorLineStart?: ConnectorLineEnd;
connectorLineType?: ConnectorLineType;
shapeMaxHeight?: number | undefined;
shapeMaxWidth?: number | undefined;
shapeMinHeight?: number | undefined;
shapeMinWidth?: number | undefined;
style?: Record<string, any>;
textStyle?: Record<string, any>;
};
set defaultItemProperties(value: {
connectorLineEnd?: ConnectorLineEnd;
connectorLineStart?: ConnectorLineEnd;
connectorLineType?: ConnectorLineType;
shapeMaxHeight?: number | undefined;
shapeMaxWidth?: number | undefined;
shapeMinHeight?: number | undefined;
shapeMinWidth?: number | undefined;
style?: Record<string, any>;
textStyle?: Record<string, any>;
});
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.
*/
get edges(): {
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
fromExpr?: ((data: any, value: any) => any) | string;
fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
lineTypeExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
pointsExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string | undefined;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
toExpr?: ((data: any, value: any) => any) | string;
toLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
};
set edges(value: {
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
fromExpr?: ((data: any, value: any) => any) | string;
fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
lineTypeExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
pointsExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string | undefined;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
toExpr?: ((data: any, value: any) => any) | string;
toLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
});
/**
* Specifies which editing operations a user can perform.
*/
get editing(): {
allowAddShape?: boolean;
allowChangeConnection?: boolean;
allowChangeConnectorPoints?: boolean;
allowChangeConnectorText?: boolean;
allowChangeShapeText?: boolean;
allowDeleteConnector?: boolean;
allowDeleteShape?: boolean;
allowMoveShape?: boolean;
allowResizeShape?: boolean;
};
set editing(value: {
allowAddShape?: boolean;
allowChangeConnection?: boolean;
allowChangeConnectorPoints?: boolean;
allowChangeConnectorText?: boolean;
allowChangeShapeText?: boolean;
allowDeleteConnector?: boolean;
allowDeleteShape?: boolean;
allowMoveShape?: boolean;
allowResizeShape?: boolean;
});
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): Record<string, any>;
set elementAttr(value: Record<string, any>);
/**
* Configures export settings.
*/
get export(): {
fileName?: string;
};
set export(value: {
fileName?: string;
});
/**
* Specifies whether or not to display the UI component in full-screen mode.
*/
get fullScreen(): boolean;
set fullScreen(value: boolean);
/**
* Specifies the grid pitch.
*/
get gridSize(): number | {
items?: Array<number>;
value?: number;
};
set gridSize(value: number | {
items?: Array<number>;
value?: number;
});
/**
* Indicates whether diagram content has unsaved changes.
*/
get hasChanges(): boolean;
set hasChanges(value: boolean);
/**
* Specifies the UI component's height.
*/
get height(): (() => number | string) | number | string | undefined;
set height(value: (() => number | string) | number | string | undefined);
/**
* Configures the history toolbar's settings.
*/
get historyToolbar(): {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
};
set historyToolbar(value: {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
});
/**
* Configures the main toolbar settings.
*/
get mainToolbar(): {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
};
set mainToolbar(value: {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
});
/**
* Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.
*/
get nodes(): {
autoLayout?: DataLayoutType | {
orientation?: Orientation;
type?: DataLayoutType;
};
autoSizeEnabled?: boolean;
containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined;
containerKeyExpr?: ((data: any, value: any) => any) | string;
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
heightExpr?: ((data: any, value: any) => any) | string | undefined;
imageUrlExpr?: ((data: any, value: any) => any) | string | undefined;
itemsExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
leftExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
parentKeyExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
topExpr?: ((data: any, value: any) => any) | string | undefined;
typeExpr?: ((data: any, value: any) => any) | string;
widthExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
};
set nodes(value: {
autoLayout?: DataLayoutType | {
orientation?: Orientation;
type?: DataLayoutType;
};
autoSizeEnabled?: boolean;
containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined;
containerKeyExpr?: ((data: any, value: any) => any) | string;
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
heightExpr?: ((data: any, value: any) => any) | string | undefined;
imageUrlExpr?: ((data: any, value: any) => any) | string | undefined;
itemsExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
leftExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
parentKeyExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
topExpr?: ((data: any, value: any) => any) | string | undefined;
typeExpr?: ((data: any, value: any) => any) | string;
widthExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
});
/**
* Specifies the color of a diagram page.
*/
get pageColor(): string;
set pageColor(value: string);
/**
* Specifies the page orientation.
*/
get pageOrientation(): PageOrientation;
set pageOrientation(value: PageOrientation);
/**
* Specifies a size of pages.
*/
get pageSize(): {
height?: number;
items?: {
height?: number;
text?: string;
width?: number;
}[];
width?: number;
};
set pageSize(value: {
height?: number;
items?: {
height?: number;
text?: string;
width?: number;
}[];
width?: number;
});
/**
* Configures the Properties panel settings.
*/
get propertiesPanel(): {
tabs?: {
commands?: Array<Command | CustomCommand>;
groups?: {
commands?: Array<Command | CustomCommand>;
title?: string;
}[];
title?: string;
}[];
visibility?: PanelVisibility;
};
set propertiesPanel(value: {
tabs?: {
commands?: Array<Command | CustomCommand>;
groups?: {
commands?: Array<Command | CustomCommand>;
title?: string;
}[];
title?: string;
}[];
visibility?: PanelVisibility;
});
/**
* Specifies whether the diagram is read-only.
*/
get readOnly(): boolean;
set readOnly(value: boolean);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Specifies whether grid lines are visible.
*/
get showGrid(): boolean;
set showGrid(value: boolean);
/**
* Switch the Diagram UI component to simple view mode.
*/
get simpleView(): boolean;
set simpleView(value: boolean);
/**
* Specifies whether diagram elements should snap to grid lines.
*/
get snapToGrid(): boolean;
set snapToGrid(value: boolean);
/**
* Configures the toolbox settings.
*/
get toolbox(): {
groups?: {
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
expanded?: boolean;
shapes?: Array<ShapeType>;
title?: string;
}[];
shapeIconsPerRow?: number;
showSearch?: boolean;
visibility?: PanelVisibility;
width?: number | undefined;
};
set toolbox(value: {
groups?: {
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
expanded?: boolean;
shapes?: Array<ShapeType>;
title?: string;
}[];
shapeIconsPerRow?: number;
showSearch?: boolean;
visibility?: PanelVisibility;
width?: number | undefined;
});
/**
* Specifies the measurement unit for size properties.
*/
get units(): Units;
set units(value: Units);
/**
* Specifies whether or not the UI component uses native scrolling.
*/
get useNativeScrolling(): boolean;
set useNativeScrolling(value: boolean);
/**
* Configures the view toolbar settings.
*/
get viewToolbar(): {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
};
set viewToolbar(value: {
commands?: Array<Command | CustomCommand>;
visible?: boolean;
});
/**
* Specifies the measurement unit that is displayed in user interface elements.
*/
get viewUnits(): Units;
set viewUnits(value: Units);
/**
* Specifies whether the UI component is visible.
*/
get visible(): boolean;
set visible(value: boolean);
/**
* Specifies the UI component's width.
*/
get width(): (() => number | string) | number | string | undefined;
set width(value: (() => number | string) | number | string | undefined);
/**
* Specifies the zoom level.
*/
get zoomLevel(): number | {
items?: Array<number>;
value?: number | undefined;
};
set zoomLevel(value: number | {
items?: Array<number>;
value?: number | undefined;
});
/**
* A function that is executed when the UI component is rendered and each time the component is repainted.
*/
onContentReady: EventEmitter<ContentReadyEvent>;
/**
* A function that is executed after a custom command item was clicked and allows you to implement the custom command's logic.
*/
onCustomCommand: EventEmitter<CustomCommandEvent>;
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<InitializedEvent>;
/**
* A function that is executed after a shape or connector is clicked.
*/
onItemClick: EventEmitter<ItemClickEvent>;
/**
* A function that is executed after a shape or connector is double-clicked.
*/
onItemDblClick: EventEmitter<ItemDblClickEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that allows you to prohibit an edit operation at run time.
*/
onRequestEditOperation: EventEmitter<RequestEditOperationEvent>;
/**
* A function that allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded.
*/
onRequestLayoutUpdate: EventEmitter<RequestLayoutUpdateEvent>;
/**
* A function that is executed after the selection is changed in the Diagram.
*/
onSelectionChanged: EventEmitter<SelectionChangedEvent>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
autoZoomModeChange: EventEmitter<AutoZoomMode>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
contextMenuChange: EventEmitter<{
commands?: Array<Command | CustomCommand>;
enabled?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
contextToolboxChange: EventEmitter<{
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
enabled?: boolean;
shapeIconsPerRow?: number;
shapes?: Array<ShapeType>;
width?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customShapesChange: EventEmitter<{
allowEditImage?: boolean;
allowEditText?: boolean;
allowResize?: boolean;
backgroundImageHeight?: number;
backgroundImageLeft?: number;
backgroundImageToolboxUrl?: string;
backgroundImageTop?: number;
backgroundImageUrl?: string;
backgroundImageWidth?: number;
baseType?: ShapeType | string;
category?: string;
connectionPoints?: {
x?: number;
y?: number;
}[];
defaultHeight?: number;
defaultImageUrl?: string;
defaultText?: string;
defaultWidth?: number;
imageHeight?: number;
imageLeft?: number;
imageTop?: number;
imageWidth?: number;
keepRatioOnAutoSize?: boolean;
maxHeight?: number;
maxWidth?: number;
minHeight?: number;
minWidth?: number;
template?: any;
templateHeight?: any;
templateLeft?: any;
templateTop?: any;
templateWidth?: any;
textHeight?: number;
textLeft?: number;
textTop?: number;
textWidth?: number;
title?: string;
toolboxTemplate?: any;
toolboxWidthToHeightRatio?: number;
type?: string;
}[]>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customShapeTemplateChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customShapeToolboxTemplateChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
defaultItemPropertiesChange: EventEmitter<{
connectorLineEnd?: ConnectorLineEnd;
connectorLineStart?: ConnectorLineEnd;
connectorLineType?: ConnectorLineType;
shapeMaxHeight?: number | undefined;
shapeMaxWidth?: number | undefined;
shapeMinHeight?: number | undefined;
shapeMinWidth?: number | undefined;
style?: Record<string, any>;
textStyle?: Record<string, any>;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
edgesChange: EventEmitter<{
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
fromExpr?: ((data: any, value: any) => any) | string;
fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
lineTypeExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
pointsExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string | undefined;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
toExpr?: ((data: any, value: any) => any) | string;
toLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
editingChange: EventEmitter<{
allowAddShape?: boolean;
allowChangeConnection?: boolean;
allowChangeConnectorPoints?: boolean;
allowChangeConnectorText?: boolean;
allowChangeShapeText?: boolean;
allowDeleteConnector?: boolean;
allowDeleteShape?: boolean;
allowMoveShape?: boolean;
allowResizeShape?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange: EventEmitter<Record<string, any>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
exportChange: EventEmitter<{
fileName?: string;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
fullScreenChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
gridSizeChange: EventEmitter<number | {
items?: Array<number>;
value?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
hasChangesChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
heightChange: EventEmitter<(() => number | string) | number | string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
historyToolbarChange: EventEmitter<{
commands?: Array<Command | CustomCommand>;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
mainToolbarChange: EventEmitter<{
commands?: Array<Command | CustomCommand>;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
nodesChange: EventEmitter<{
autoLayout?: DataLayoutType | {
orientation?: Orientation;
type?: DataLayoutType;
};
autoSizeEnabled?: boolean;
containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined;
containerKeyExpr?: ((data: any, value: any) => any) | string;
customDataExpr?: ((data: any, value: any) => any) | string | undefined;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
heightExpr?: ((data: any, value: any) => any) | string | undefined;
imageUrlExpr?: ((data: any, value: any) => any) | string | undefined;
itemsExpr?: ((data: any, value: any) => any) | string | undefined;
keyExpr?: ((data: any, value: any) => any) | string;
leftExpr?: ((data: any, value: any) => any) | string | undefined;
lockedExpr?: ((data: any, value: any) => any) | string | undefined;
parentKeyExpr?: ((data: any, value: any) => any) | string | undefined;
styleExpr?: ((data: any, value: any) => any) | string | undefined;
textExpr?: ((data: any, value: any) => any) | string;
textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
topExpr?: ((data: any, value: any) => any) | string | undefined;
typeExpr?: ((data: any, value: any) => any) | string;
widthExpr?: ((data: any, value: any) => any) | string | undefined;
zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pageColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pageOrientationChange: EventEmitter<PageOrientation>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pageSizeChange: EventEmitter<{
height?: number;
items?: {
height?: number;
text?: string;
width?: number;
}[];
width?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
propertiesPanelChange: EventEmitter<{
tabs?: {
commands?: Array<Command | CustomCommand>;
groups?: {
commands?: Array<Command | CustomCommand>;
title?: string;
}[];
title?: string;
}[];
visibility?: PanelVisibility;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
readOnlyChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rtlEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
showGridChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
simpleViewChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
snapToGridChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
toolboxChange: EventEmitter<{
groups?: {
category?: ShapeCategory | string;
displayMode?: ToolboxDisplayMode;
expanded?: boolean;
shapes?: Array<ShapeType>;
title?: string;
}[];
shapeIconsPerRow?: number;
showSearch?: boolean;
visibility?: PanelVisibility;
width?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
unitsChange: EventEmitter<Units>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
useNativeScrollingChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
viewToolbarChange: EventEmitter<{
commands?: Array<Command | CustomCommand>;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
viewUnitsChange: EventEmitter<Units>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
visibleChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
widthChange: EventEmitter<(() => number | string) | number | string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
zoomLevelChange: EventEmitter<number | {
items?: Array<number>;
value?: number | undefined;
}>;
get customShapesChildren(): QueryList<DxiDiagramCustomShapeComponent>;
set customShapesChildren(value: QueryList<DxiDiagramCustomShapeComponent>);
get customShapesLegacyChildren(): QueryList<DxiCustomShapeComponent>;
set customShapesLegacyChildren(value: QueryList<DxiCustomShapeComponent>);
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any);
protected _createInstance(element: any, options: any): DxDiagram;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setupChanges(prop: string, changes: SimpleChanges): void;
ngDoCheck(): void;
_setOption(name: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DxDiagramComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DxDiagramComponent, "dx-diagram", never, { "autoZoomMode": { "alias": "autoZoomMode"; "required": false; }; "contextMenu": { "alias": "contextMenu"; "required": false; }; "contextToolbox": { "alias": "contextToolbox"; "required": false; }; "customShapes": { "alias": "customShapes"; "required": false; }; "customShapeTemplate": { "alias": "customShapeTemplate"; "required": false; }; "customShapeToolboxTemplate": { "alias": "customShapeToolboxTemplate"; "required": false; }; "defaultItemProperties": { "alias": "defaultItemProperties"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "edges": { "alias": "edges"; "required": false; }; "editing": { "alias": "editing"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "export": { "alias": "export"; "required": false; }; "fullScreen": { "alias": "fullScreen"; "required": false; }; "gridSize": { "alias": "gridSize"; "required": false; }; "hasChanges": { "alias": "hasChanges"; "required": false; }; "height": { "alias": "height"; "required": false; }; "historyToolbar": { "alias": "historyToolbar"; "required": false; }; "mainToolbar": { "alias": "mainToolbar"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "pageColor": { "alias": "pageColor"; "required": false; }; "pageOrientation": { "alias": "pageOrientation"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "propertiesPanel": { "alias": "propertiesPanel"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "showGrid": { "alias": "showGrid"; "required": false; }; "simpleView": { "alias": "simpleView"; "required": false; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; }; "toolbox": { "alias": "toolbox"; "required": false; }; "units": { "alias": "units"; "required": false; }; "useNativeScrolling": { "alias": "useNativeScrolling"; "required": false; }; "viewToolbar": { "alias": "viewToolbar"; "required": false; }; "viewUnits": { "alias": "viewUnits"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "zoomLevel": { "alias": "zoomLevel"; "required": false; }; }, { "onContentReady": "onContentReady"; "onCustomCommand": "onCustomCommand"; "onDisposing": "onDisposing"; "onInitialized": "onInitialized"; "onItemClick": "onItemClick"; "onItemDblClick": "onItemDblClick"; "onOptionChanged": "onOptionChanged"; "onRequestEditOperation": "onRequestEditOperation"; "onRequestLayoutUpdate": "onRequestLayoutUpdate"; "onSelectionChanged": "onSelectionChanged"; "autoZoomModeChange": "autoZoomModeChange"; "contextMenuChange": "contextMenuChange"; "contextToolboxChange": "contextToolboxChange"; "customShapesChange": "customShapesChange"; "customShapeTemplateChange": "customShapeTemplateChange"; "customShapeToolboxTemplateChange": "customShapeToolboxTemplateChange"; "defaultItemPropertiesChange": "defaultItemPropertiesChange"; "disabledChange": "disabledChange"; "edgesChange": "edgesChange"; "editingChange": "editingChange"; "elementAttrChange": "elementAttrChange"; "exportChange": "exportChange"; "fullScreenChange": "fullScreenChange"; "gridSizeChange": "gridSizeChange"; "hasChangesChange": "hasChangesChange"; "heightChange": "heightChange"; "historyToolbarChange": "historyToolbarChange"; "mainToolbarChange": "mainToolbarChange"; "nodesChange": "nodesChange"; "pageColorChange": "pageColorChange"; "pageOrientationChange": "pageOrientationChange"; "pageSizeChange": "pageSizeChange"; "propertiesPanelChange": "propertiesPanelChange"; "readOnlyChange": "readOnlyChange"; "rtlEnabledChange": "rtlEnabledChange"; "showGridChange": "showGridChange"; "simpleViewChange": "simpleViewChange"; "snapToGridChange": "snapToGridChange"; "toolboxChange": "toolboxChange"; "unitsChange": "unitsChange"; "useNativeScrollingChange": "useNativeScrollingChange"; "viewToolbarChange": "viewToolbarChange"; "viewUnitsChange": "viewUnitsChange"; "visibleChange": "visibleChange"; "widthChange": "widthChange"; "zoomLevelChange": "zoomLevelChange"; }, ["customShapesChildren", "customShapesLegacyChildren"], never, false, never>;
}
export declare class DxDiagramModule {
static ɵfac: i0.ɵɵFactoryDeclaration<DxDiagramModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<DxDiagramModule, [typeof DxDiagramComponent], [typeof i1.DxoContextMenuModule, typeof i1.DxiCommandModule, typeof i1.DxiItemModule, typeof i1.DxoContextToolboxModule, typeof i1.DxiCustomShapeModule, typeof i1.DxiConnectionPointModule, typeof i1.DxoDefaultItemPropertiesModule, typeof i1.DxoEdgesModule, typeof i1.DxoEditingModule, typeof i1.DxoExportModule, typeof i1.DxoGridSizeModule, typeof i1.DxoHistoryToolbarModule, typeof i1.DxoMainToolbarModule, typeof i1.DxoNodesModule, typeof i1.DxoAutoLayoutModule, typeof i1.DxoPageSizeModule, typeof i1.DxoPropertiesPanelModule, typeof i1.DxiTabModule, typeof i1.DxiGroupModule, typeof i1.DxoToolboxModule, typeof i1.DxoViewToolbarModule, typeof i1.DxoZoomLevelModule, typeof i2.DxoDiagramAutoLayoutModule, typeof i2.DxiDiagramCommandModule, typeof i2.DxiDiagramCommandItemModule, typeof i2.DxiDiagramConnectionPointModule, typeof i2.DxoDiagramContextMenuModule, typeof i2.DxoDiagramContextToolboxModule, typeof i2.DxiDiagramCustomShapeModule, typeof i2.DxoDiagramDefaultItemPropertiesModule, typeof i2.DxoDiagramEdgesModule, typeof i2.DxoDiagramEditingModule, typeof i2.DxoDiagramExportModule, typeof i2.DxoDiagramGridSizeModule, typeof i2.DxiDiagramGroupModule, typeof i2.DxoDiagramHistoryToolbarModule, typeof i2.DxiDiagramItemModule, typeof i2.DxoDiagramMainToolbarModule, typeof i2.DxoDiagramNodesModule, typeof i2.DxoDiagramPageSizeModule, typeof i2.DxiDiagramPageSizeItemModule, typeof i2.DxoDiagramPropertiesPanelModule, typeof i2.DxiDiagramTabModule, typeof i2.DxiDiagramTabGroupModule, typeof i2.DxoDiagramToolboxModule, typeof i2.DxiDiagramToolboxGroupModule, typeof i2.DxoDiagramViewToolbarModule, typeof i2.DxoDiagramZoomLevelModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxDiagramComponent, typeof i1.DxoContextMenuModule, typeof i1.DxiCommandModule, typeof i1.DxiItemModule, typeof i1.DxoContextToolboxModule, typeof i1.DxiCustomShapeModule, typeof i1.DxiConnectionPointModule, typeof i1.DxoDefaultItemPropertiesModule, typeof i1.DxoEdgesModule, typeof i1.DxoEditingModule, typeof i1.DxoExportModule, typeof i1.DxoGridSizeModule, typeof i1.DxoHistoryToolbarModule, typeof i1.DxoMainToolbarModule, typeof i1.DxoNodesModule, typeof i1.DxoAutoLayoutModule, typeof i1.DxoPageSizeModule, typeof i1.DxoPropertiesPanelModule, typeof i1.DxiTabModule, typeof i1.DxiGroupModule, typeof i1.DxoToolboxModule, typeof i1.DxoViewToolbarModule, typeof i1.DxoZoomLevelModule, typeof i2.DxoDiagramAutoLayoutModule, typeof i2.DxiDiagramCommandModule, typeof i2.DxiDiagramCommandItemModule, typeof i2.DxiDiagramConnectionPointModule, typeof i2.DxoDiagramContextMenuModule, typeof i2.DxoDiagramContextToolboxModule, typeof i2.DxiDiagramCustomShapeModule, typeof i2.DxoDiagramDefaultItemPropertiesModule, typeof i2.DxoDiagramEdgesModule, typeof i2.DxoDiagramEditingModule, typeof i2.DxoDiagramExportModule, typeof i2.DxoDiagramGridSizeModule, typeof i2.DxiDiagramGroupModule, typeof i2.DxoDiagramHistoryToolbarModule, typeof i2.DxiDiagramItemModule, typeof i2.DxoDiagramMainToolbarModule, typeof i2.DxoDiagramNodesModule, typeof i2.DxoDiagramPageSizeModule, typeof i2.DxiDiagramPageSizeItemModule, typeof i2.DxoDiagramPropertiesPanelModule, typeof i2.DxiDiagramTabModule, typeof i2.DxiDiagramTabGroupModule, typeof i2.DxoDiagramToolboxModule, typeof i2.DxiDiagramToolboxGroupModule, typeof i2.DxoDiagramViewToolbarModule, typeof i2.DxoDiagramZoomLevelModule, typeof i3.DxTemplateModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<DxDiagramModule>;
}
export { DxDiagramTypes };