@progress/kendo-angular-diagrams
Version:
Kendo UI Angular diagrams component
376 lines (375 loc) • 15.9 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* 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 { 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 { Group } from '@progress/kendo-drawing';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Diagram component for Angular({% slug overview_diagrams %}).
*
* 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;
diagramClass: boolean;
/**
* Defines the default configuration options applicable to all connections.
* 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.
*/
connections?: ConnectionOptions[];
/**
* 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.
*/
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.
* Changing the property value dynamically triggers a reinitialization of the Diagram.
*/
shapeDefaults?: ShapeDefaults;
/**
* Defines the shapes that render in the Diagram.
* Changing the property value dynamically triggers a reinitialization of the Diagram.
*/
shapes?: ShapeOptions[];
/**
* 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;
/**
* 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>;
/**
* @hidden
* Represents the Diagram instance, holding the core functionality of the Diagram.
*/
diagram: 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;
private options;
constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone);
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;
protected activeEmitter(name: string): any;
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>;
}