DiagramComponent

Represents the Kendo UI Diagram component for Angular.

The Diagram component is used to create organizational charts, and other types of diagrams.

html

<kendo-diagram [shapes]="shapesData"></kendo-diagram>

Selector

kendo-diagram

Export Name

Accessible in templates as #kendoDiagramInstance="kendoDiagram"

Inputs

Name	Type	Default	Description
connectionDefaults?	ConnectionDefaults		Defines the default configuration options applicable to all connections. Changing the property value dynamically triggers a reinitialization of the Diagram.
connections?	ConnectionOptions[]		Defines the connections that render between the shapes in the Diagram. Changing this property dynamically reinitializes the Diagram.
editable?	boolean | DiagramEditable	true	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.
layout?	DiagramLayout		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.
pannable?	boolean | Pannable	true	Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
selectable?	boolean | Selectable	true	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.
shapeDefaults?	ShapeDefaults		Defines the default configuration options applicable to all shapes. Changing the property value dynamically triggers a reinitialization of the Diagram.
shapes?	ShapeOptions[]		Defines the shapes that render in the Diagram. Changing the property value dynamically triggers a reinitialization of the Diagram.
zoom?	number	1	Defines the zoom level of the Diagram.
zoomMax?	number	2	Defines the maximum zoom level of the Diagram.
zoomMin?	number	0.1	Defines the minimum zoom level of the Diagram.
zoomRate?	number	0.1	Defines the zoom rate of the Diagram.

Fields

Name	Type	Default	Description
diagramConnections	Connection[]		The actual connections created by the Diagram.
diagramShapes	Shape[]		The actual shapes created by the Diagram.
selection	Shape | Connection[]		The currently selected items in the Diagram.

Events

Name	Type	Description
change	EventEmitter<DiagramChangeEvent>	Fires when a shape or connection is created or removed.
diagramClick	EventEmitter<DiagramDomEvent>	Fires when the user clicks on a shape or a connection.
drag	EventEmitter<DiagramDragEvent>	Fires when the user drags an item.
dragEnd	EventEmitter<DiagramDragEvent>	Fires when the user stops dragging an item.
dragStart	EventEmitter<DiagramDragEvent>	Fires when the user starts dragging an item.
mouseEnter	EventEmitter<DiagramDomEvent>	Fires when the mouse pointer enters a shape or connection.
mouseLeave	EventEmitter<DiagramDomEvent>	Fires when the mouse pointer leaves a shape or connection.
pan	EventEmitter<DiagramPanEvent>	Fires when the user pans the Diagram.
select	EventEmitter<DiagramSelectEvent>	Fires when the user selects one or more items.
shapeBoundsChange	EventEmitter<DiagramItemBoundsChangeEvent>	Fires when the location or size of an item are changed.
zoomEnd	EventEmitter<DiagramZoomEndEvent>	Fires when the diagram has finished zooming out.
zoomStart	EventEmitter<DiagramZoomStartEvent>	Fires when the diagram starts zooming in or out.

Methods

addConnection
Adds connection to the Diagram.
Parameters connection Connection undoable? boolean
Returns Connection The newly created connection.

addShape
Adds shape to the Diagram.
Parameters item ShapeOptions | Shape | Point undoable? boolean
Returns Shape The newly created shape.

alignShapes
Aligns shapes in the specified direction.
Parameters direction Direction

boundingBox
Gets the bounding rectangle of the given items.
Parameters items Shape | Connection | Shape | Connection[] origin? boolean
Returns Rect Bounding rectangle.

bringIntoView
Bring into view the passed item(s) or rectangle.
Parameters item Shape | Connection | Shape | Connection[] | Rect options? BringIntoViewOptions

bringToBack
Sends to back the passed items.
Parameters items Shape | Connection | Shape | Connection[] undoable? boolean

bringToFront
Brings to front the passed items.
Parameters items Shape | Connection | Shape | Connection[] undoable? boolean

clear
Clears the Diagram.

connect
Connects two items in the Diagram.
Parameters source Shape | Point | Connector target Shape | Point | Connector options? ConnectionOptions
Returns Connection The created connection.

connected
Determines whether two shapes are connected.
Parameters source Shape target Shape
Returns boolean true if the two shapes are connected.

copy
Copies selected items to clipboard.

deselect
Deselects the specified items or all items if no item is specified.
Parameters items? Shape | Connection | Shape | Connection[]

documentToModel
Converts document coordinates to model coordinates.
Parameters point Point
Returns any Point in model coordinates.

documentToView
Converts document coordinates to view coordinates.
Parameters point Point
Returns Point Point in view coordinates.

exportDOMVisual
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

exportVisual
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

focus
Focuses the Diagram.
Returns boolean true if focus was set successfully.

getShapeById
Gets a shape on the basis of its identifier.
Parameters id string
Returns Shape The shape with the specified ID.

getState
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.

layerToModel
Converts layer coordinates to model coordinates.
Parameters point Point
Returns any Point in model coordinates.

modelToDocument
Converts model coordinates to document coordinates.
Parameters point Point
Returns Point Point in document coordinates.

modelToLayer
Converts model coordinates to layer coordinates.
Parameters point Point
Returns any Point in layer coordinates.

modelToView
Converts model coordinates to view coordinates.
Parameters point Point
Returns any Point in view coordinates.

paste
Pastes items from clipboard.

redo
Executes the previous undoable action on top of the redo stack if any.

remove
Removes shape(s) and/or connection(s) from the Diagram.
Parameters items Shape | Connection | Shape | Connection[] undoable? boolean

select
Selects items on the basis of the given input.
Parameters items Shape | Connection | Shape | Connection[] options? SelectionOptions
Returns Shape | Connection[] Array of selected items.

selectAll
Selects all items in the Diagram.

selectArea
Selects items in the specified area.
Parameters rect Rect Rectangle area to select.

undo
Executes the next undoable action on top of the undo stack if any.

viewport
Gets the current Diagram viewport rectangle.
Returns Rect Viewport rectangle.

viewToDocument
Converts view coordinates to document coordinates.
Parameters point Point
Returns Point Point in document coordinates.

viewToModel
Converts view coordinates to model coordinates.
Parameters point Point
Returns any Point in model coordinates.