@progress/kendo-angular-diagrams 21.0.0-develop.2 → 21.0.0-develop.20

package/diagram.component.d.ts

@@ -2,9 +2,11 @@
 * 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 } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ConnectionDefaults, ConnectionOptions, DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, ShapeDefaults, ShapeOptions, 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 } from './index';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
@@ -20,41 +22,63 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
     private wrapperElement;
     private renderer;
     private zone;
+    private popupService;
+    private viewContainer;
     diagramClass: boolean;
     /**
      * Defines the default configuration options applicable to all connections.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
      */
     connectionDefaults?: ConnectionDefaults;
     /**
-     * Defines the connections that render between the shapes in the Diagram.
-     * Changing this property dynamically reinitializes the Diagram.
+     * 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.
+     * Changing this property dynamically reinitializes the `Diagram`.
+     *
      */
-    connections?: ConnectionOptions[];
+    connections?: any[];
     /**
-     * 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.
+     * Controls whether the `Diagram` tooltips are displayed when hovering over shapes and connections ([see example](slug:diagram_tooltips)).
+     * @default false
+     *
+     */
+    tooltip?: boolean;
+    /**
+     * Defines the field mapping configuration for connections data binding ([see example](slug:diagram_data_binding#custom-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;
     /**
-     * The layout of a diagram consists of arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
      */
     layout?: DiagramLayout;
     /**
-     * Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
+     * 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.
+     * Defines the `Diagram` selection options.
      *
-     * By default, you can select shapes in the Diagram in one of two ways:
+     * 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;
@@ -64,30 +88,39 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     shapeDefaults?: ShapeDefaults;
     /**
-     * Defines the shapes that render in the Diagram.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * 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.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
+     */
+    shapes?: any[];
+    /**
+     * Defines the field mapping configuration for shapes data binding ([see example](slug:diagram_data_binding#custom-field-mapping)).
+     * Maps source object properties to `Diagram` shape properties.
+     * Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
      */
-    shapes?: ShapeOptions[];
+    shapeModelFields?: ShapeModelFields;
     /**
-     * Defines the zoom level of the Diagram.
+     * Defines the zoom level of the `Diagram`.
      *
      * @default 1
      */
     zoom?: number;
     /**
-     * Defines the maximum zoom level of the Diagram.
+     * Defines the maximum zoom level of the `Diagram`.
      *
      * @default 2
      */
     zoomMax?: number;
     /**
-     * Defines the minimum zoom level of the Diagram.
+     * Defines the minimum zoom level of the `Diagram`.
      *
      * @default 0.1
      */
     zoomMin?: number;
     /**
-     * Defines the zoom rate of the Diagram.
+     * Defines the zoom rate of the `Diagram`.
      *
      * @default 0.1
      */
@@ -125,7 +158,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     mouseLeave: EventEmitter<DiagramDomEvent>;
     /**
-     * Fires when the user pans the Diagram.
+     * Fires when the user pans the `Diagram`.
      */
     onPan: EventEmitter<DiagramPanEvent>;
     /**
@@ -133,28 +166,36 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     onSelect: EventEmitter<DiagramSelectEvent>;
     /**
-     * Fires when the diagram has finished zooming out.
+     * Fires when the `Diagram` has finished zooming out.
      */
     zoomEnd: EventEmitter<DiagramZoomEndEvent>;
     /**
-     * Fires when the diagram starts zooming in or out.
+     * 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<any>;
+    /**
+     * Fires when a tooltip should be hidden.
+     */
+    tooltipHide: EventEmitter<any>;
     /**
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
     diagramWidget: Diagram;
     /**
-     * The currently selected items in the Diagram.
+     * The currently selected items in the `Diagram`.
      */
     get selection(): (Shape | Connection)[];
     /**
-     * The actual shapes created by the Diagram.
+     * The actual shapes created by the `Diagram`.
      */
     get diagramShapes(): Shape[];
     /**
-     * The actual connections created by the Diagram.
+     * The actual connections created by the `Diagram`.
      */
     get diagramConnections(): Connection[];
     /**
@@ -166,22 +207,43 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     licenseMessage?: string;
     private options;
-    constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone);
+    /**
+     * 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?;
+    /**
+     * Template reference for tooltip content.
+     */
+    tooltipTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     * Current tooltip content for template context.
+     */
+    tooltipContent: string;
+    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.
+     * 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.
+     * Focuses the `Diagram`.
      * @returns {boolean} true if focus was set successfully.
      */
     focus(): boolean;
     /**
-     * Clears the Diagram.
+     * Clears the `Diagram`.
      */
     clear(): void;
     /**
@@ -192,27 +254,27 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     connected(source: Shape, target: Shape): boolean;
     /**
-     * Adds connection to the Diagram.
+     * 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.
+     * 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.
+     * 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.
+     * 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.
@@ -235,7 +297,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     select(items: Shape | Connection | (Shape | Connection)[], options?: SelectionOptions): (Shape | Connection)[];
     /**
-     * Selects all items in the Diagram.
+     * Selects all items in the `Diagram`.
      */
     selectAll(): void;
     /**
@@ -371,9 +433,33 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @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;
+    /**
+     * 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;
+    /**
+     * Creates field mapping configuration from model fields.
+     */
+    private createFieldMapping;
     private init;
     private updateOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "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; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "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"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "tooltip": { "alias": "tooltip"; "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; }; }, { "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"; }, never, never, true, never>;
 }