@progress/kendo-angular-diagrams/diagram.component.d.ts

Kendo UI Angular diagrams component

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import { DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
import { PopupService } from '@progress/kendo-angular-popup';
import { Group } from '@progress/kendo-drawing';
import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults, ShapeOptions, ConnectionOptions, DiagramNavigationOptions } from './models';
import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
import * as i0 from "@angular/core";
/**
 * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
 *
 * The Diagram component is used to create organizational charts, and other types of diagrams.
 *
 * @example
 * ```html
 * <kendo-diagram [shapes]="shapesData"></kendo-diagram>
 * ```
 */
export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
    private wrapperElement;
    private renderer;
    private zone;
    private popupService;
    private viewContainer;
    diagramClass: boolean;
    /**
     * Defines the default configuration options applicable to all connections.
     *
     */
    connectionDefaults?: ConnectionDefaults;
    /**
     * Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
     * Accepts either an array of `ConnectionOptions` or an array of any objects
     * that will be mapped using the `connectionModelFields` configuration.
     *
     */
    connections?: any[];
    /**
     * Defines the field mapping configuration for connections data binding ([see example](slug:diagram_data_binding#field-mapping)).
     * Maps source object properties to `Diagram` connection properties.
     * Only used when `connections` is an array of custom objects instead of `ConnectionOptions`.
     */
    connectionModelFields?: ConnectionModelFields;
    /**
     * A set of settings to configure the `Diagram` behavior when the user attempts to drag, resize, or remove shapes.
     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
     *
     * @default true
     */
    editable?: boolean | DiagramEditable;
    /**
     * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
     *
     */
    layout?: DiagramLayout;
    /**
     * Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
     *
     * @default true
     */
    pannable?: boolean | Pannable;
    /**
     * Defines the `Diagram` selection options.
     *
     * By default, you can select shapes in the `Diagram` in one of two ways:
     * - Clicking a single shape to select it and deselect any previously selected shapes.
     * - Holding the `Ctrl/Cmd on MacOS` key while clicking multiple shapes to select them and any other shapes between them.
     *
     * Use the `selectable` configuration to allow single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.
     *
     * @default true
     */
    selectable?: boolean | Selectable;
    /**
     * Defines the default configuration options applicable to all shapes.
     */
    shapeDefaults?: ShapeDefaults;
    /**
     * Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
     * Accepts either an array of `ShapeOptions` or an array of any objects
     * that will be mapped using the `shapeModelFields` configuration.
     *
     */
    shapes?: any[];
    /**
     * Defines the field mapping configuration for shapes data binding ([see example](slug:diagram_data_binding#field-mapping)).
     * Maps source object properties to `Diagram` shape properties.
     * Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
     */
    shapeModelFields?: ShapeModelFields;
    /**
     * Defines the zoom level of the `Diagram`.
     *
     * @default 1
     */
    zoom?: number;
    /**
     * Defines the maximum zoom level of the `Diagram`.
     *
     * @default 2
     */
    zoomMax?: number;
    /**
     * Defines the minimum zoom level of the `Diagram`.
     *
     * @default 0.1
     */
    zoomMin?: number;
    /**
     * Defines the zoom rate of the `Diagram`.
     *
     * @default 0.1
     */
    zoomRate?: number;
    /**
     * Enables keyboard navigation in the `Diagram`.
     * When set to `true`, navigate between shapes using arrow keys.
     * Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
     *
     * @default true
     */
    set navigable(_navigable: boolean | DiagramNavigationOptions);
    get navigable(): boolean | DiagramNavigationOptions;
    /**
     * Fires when a shape or connection is created or removed.
     */
    change: EventEmitter<DiagramChangeEvent>;
    /**
     * Fires when the user clicks on a shape or a connection.
     */
    diagramClick: EventEmitter<DiagramDomEvent>;
    /**
     * Fires when the user drags an item.
     */
    drag: EventEmitter<DiagramDragEvent>;
    /**
     * Fires when the user stops dragging an item.
     */
    dragEnd: EventEmitter<DiagramDragEvent>;
    /**
     * Fires when the user starts dragging an item.
     */
    dragStart: EventEmitter<DiagramDragEvent>;
    /**
     * Fires when the location or size of an item are changed.
     */
    shapeBoundsChange: EventEmitter<DiagramItemBoundsChangeEvent>;
    /**
     * Fires when the mouse pointer enters a shape or connection.
     */
    mouseEnter: EventEmitter<DiagramDomEvent>;
    /**
     * Fires when the mouse pointer leaves a shape or connection.
     */
    mouseLeave: EventEmitter<DiagramDomEvent>;
    /**
     * Fires when the user pans the `Diagram`.
     */
    onPan: EventEmitter<DiagramPanEvent>;
    /**
     * Fires when the user selects one or more items.
     */
    onSelect: EventEmitter<DiagramSelectEvent>;
    /**
     * Fires when the `Diagram` has finished zooming out.
     */
    zoomEnd: EventEmitter<DiagramZoomEndEvent>;
    /**
     * Fires when the `Diagram` starts zooming in or out.
     */
    zoomStart: EventEmitter<DiagramZoomStartEvent>;
    /**
     * Fires when a tooltip should shown for a shape or connection.
     */
    tooltipShow: EventEmitter<ShapeOptions | ConnectionOptions>;
    /**
     * Fires when a tooltip should be hidden.
     */
    tooltipHide: EventEmitter<ShapeOptions | ConnectionOptions>;
    /**
     * @hidden
     * Represents the Diagram instance, holding the core functionality of the Diagram.
     */
    diagramWidget: Diagram;
    /**
     * The currently selected items in the `Diagram`.
     */
    get selection(): (Shape | Connection)[];
    /**
     * The actual shapes created by the `Diagram`.
     */
    get diagramShapes(): Shape[];
    /**
     * The actual connections created by the `Diagram`.
     */
    get diagramConnections(): Connection[];
    /**
     * @hidden
     */
    showLicenseWatermark: boolean;
    /**
     * @hidden
     */
    licenseMessage?: string;
    /**
     * @hidden
     */
    customTemplate?: TemplateRef<any>;
    private _navigable;
    private options;
    /**
     * Stores the converted shapes from user data.
     */
    private convertedShapes;
    /**
     * Stores the converted connections from user data.
     */
    private convertedConnections;
    /**
     * Current popup instance for tooltip.
     */
    private tooltipPopup?;
    defaultTooltipTemplate: TemplateRef<any>;
    customTooltipTemplate: TemplateRef<any>;
    shapeTooltipTemplate: ShapeTooltipTemplateDirective;
    connectionTooltipTemplate: ConnectionTooltipTemplateDirective;
    /**
     * @hidden
     * The original data item provided by the user. Passed in the tooltip template context.
     */
    dataItem: any;
    constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, popupService: PopupService, viewContainer: ViewContainerRef);
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    /**
     * Provides the current `Diagram`'s shapes and connections that can be used to create a new `Diagram` when needed.
     * @returns {DiagramState} Object containing shapes and connections arrays.
     */
    getState(): DiagramState;
    /**
     * Focuses the `Diagram`.
     * @returns {boolean} true if focus was set successfully.
     */
    focus(): boolean;
    /**
     * Clears the `Diagram`.
     */
    clear(): void;
    /**
     * Determines whether two shapes are connected.
     * @param {Shape} Shape.
     * @param {Shape} Shape.
     * @returns {boolean} true if the two shapes are connected.
     */
    connected(source: Shape, target: Shape): boolean;
    /**
     * Adds connection to the `Diagram`.
     * @param {Connection} Connection.
     * @param {boolean} Boolean.
     * @returns {Connection} The newly created connection.
     */
    addConnection(connection: Connection, undoable?: boolean): Connection;
    /**
     * Adds shape to the `Diagram`.
     * @param {ShapeOptions | Shape | Point} If you pass a `Point`, a new Shape with default options will be created and positioned at that point.
     * @param {boolean} Boolean indicating if the action should be undoable.
     * @returns {Shape} The newly created shape.
     */
    addShape(item: ShapeOptions | Shape | Point, undoable?: boolean): Shape;
    /**
     * Removes shape(s) and/or connection(s) from the `Diagram`.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param {Boolean} Boolean indicating if the action should be undoable.
     */
    remove(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
    /**
     * Connects two items in the `Diagram`.
     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
     * @param {ConnectionOptions} Connection options.
     * @returns {Connection} The created connection.
     */
    connect(source: Shape | Connector | Point, target: Shape | Connector | Point, options?: ConnectionOptions): Connection;
    /**
     * Executes the next undoable action on top of the undo stack if any.
     */
    undo(): void;
    /**
     * Executes the previous undoable action on top of the redo stack if any.
     */
    redo(): void;
    /**
     * Selects items on the basis of the given input.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param Selection options.
     * @returns {(Shape | Connection)[]} Array of selected items.
     */
    select(items: Shape | Connection | (Shape | Connection)[], options?: SelectionOptions): (Shape | Connection)[];
    /**
     * Selects all items in the `Diagram`.
     */
    selectAll(): void;
    /**
     * Selects items in the specified area.
     * @param {Rect} rect Rectangle area to select.
     */
    selectArea(rect: Rect): void;
    /**
     * Deselects the specified items or all items if no item is specified.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     */
    deselect(items?: Shape | Connection | (Shape | Connection)[]): void;
    /**
     * Brings to front the passed items.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param {boolean} By default the action is undoable.
     */
    bringToFront(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
    /**
     * Sends to back the passed items.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param {boolean} By default the action is undoable.
     */
    bringToBack(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
    /**
     * Bring into view the passed item(s) or rectangle.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param {DiagramAlignOptions} controls the position of the calculated rectangle relative to the viewport.
     * "Center middle" will position the items in the center. animate - controls if the pan should be animated.
     */
    bringIntoView(item: Shape | Connection | (Shape | Connection)[] | Rect, options?: BringIntoViewOptions): void;
    /**
     * Aligns shapes in the specified direction.
     * @param {Direction} Direction to align shapes.
     */
    alignShapes(direction: Direction): void;
    /**
     * @hidden
     * Pans the Diagram.
     * @param {Point} Pan coordinates.
     * @param {boolean} Whether to animate the pan.
     * @returns {Point} Current pan position.
     */
    pan(pan: Point, animate?: boolean): Point;
    /**
     * Gets the current `Diagram` viewport rectangle.
     * @returns {Rect} Viewport rectangle.
     */
    viewport(): Rect;
    /**
     * Copies selected items to clipboard.
     */
    copy(): void;
    /**
     * @hidden
     * Cuts selected items to clipboard.
     */
    cut(): void;
    /**
     * Pastes items from clipboard.
     */
    paste(): void;
    /**
     * Gets the bounding rectangle of the given items.
     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
     * @param {boolean} Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
     * @returns {Rect} Bounding rectangle.
     */
    boundingBox(items: Shape | Connection | (Shape | Connection)[], origin?: boolean): Rect;
    /**
     * Converts document coordinates to view coordinates.
     * @param {Point} Point in document coordinates.
     * @returns {Point} Point in view coordinates.
     */
    documentToView(point: Point): Point;
    /**
     * Converts view coordinates to document coordinates.
     * @param {Point} Point in view coordinates.
     * @returns {Point} Point in document coordinates.
     */
    viewToDocument(point: Point): Point;
    /**
     * Converts view coordinates to model coordinates.
     * @param {Point} Point in view coordinates.
     * @returns {Point} Point in model coordinates.
     */
    viewToModel(point: Point): any;
    /**
     * Converts model coordinates to view coordinates.
     * @param {Point} Point in model coordinates.
     * @returns {Point} Point in view coordinates.
     */
    modelToView(point: Point): any;
    /**
     * Converts model coordinates to layer coordinates.
     * @param {Point} Point in model coordinates.
     * @returns {Point} Point in layer coordinates.
     */
    modelToLayer(point: Point): any;
    /**
     * Converts layer coordinates to model coordinates.
     * @param {Point} Point in layer coordinates.
     * @returns {Point} Point in model coordinates.
     */
    layerToModel(point: Point): any;
    /**
     * Converts document coordinates to model coordinates.
     * @param {Point} Point in document coordinates.
     * @returns {Point} Point in model coordinates.
     */
    documentToModel(point: Point): any;
    /**
     * Converts model coordinates to document coordinates.
     * @param {Point} Point in model coordinates.
     * @returns {Point} Point in document coordinates.
     */
    modelToDocument(point: Point): Point;
    /**
     * Gets a shape on the basis of its identifier.
     * @param {string} The identifier of a shape.
     * @returns {Shape} The shape with the specified ID.
     */
    getShapeById(id: string): Shape;
    /**
     * Exports the diagram's DOM visual representation for rendering or export purposes.
     * Creates a clipped group containing the canvas content with proper transformations.
     * @returns {Group} A drawing Group element containing the exported DOM visual
     */
    exportDOMVisual(): Group;
    /**
     * Exports the diagram's visual representation with proper scaling based on zoom level.
     * Creates a scaled group containing the main layer content.
     * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
     */
    exportVisual(): Group;
    /**
     * Handles the tooltipShow event from the diagram widget.
     */
    private handleTooltipShow;
    private showTooltip;
    private popupClass;
    private setCustomTemplate;
    /**
     * Handles the tooltipHide event from the diagram widget.
     */
    private handleTooltipHide;
    /**
     * Hides the current tooltip and cleans up resources.
     */
    private hideTooltip;
    protected activeEmitter(name: string): any;
    /**
     * Binds event handlers to the diagram widget.
     */
    private bindDiagramEvents;
    /**
     * Converts user data to Diagram model format using field mappings.
     */
    private convertUserData;
    private addDataItemProperty;
    /**
     * Creates field mapping configuration from model fields.
     */
    private createFieldMapping;
    private init;
    private updateOptions;
    private loadOptions;
    private getNormalizedNavigationOptions;
    static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "tooltipShow": "tooltipShow"; "tooltipHide": "tooltipHide"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
}