DiagramComponent
Represents the Kendo UI Diagram component for Angular.
The Diagram component is used to create organizational charts, and other types of diagrams.
Definition
Package:@progress/kendo-angular-diagrams
Selector:kendo-diagram
Export Name:Accessible in templates as #kendoDiagramInstance="kendoDiagram"
Syntax:
<kendo-diagram [shapes]="shapesData"></kendo-diagram>Inputs
Defines the default configuration options applicable to all connections.
Defines the field mapping configuration for connections data binding (see example).
Maps source object properties to Diagram connection properties.
Only used when connections is an array of custom objects instead of ConnectionOptions.
connections?
any[]
Defines the connections that render between the shapes in the Diagram (see Connections article).
Accepts either an array of ConnectionOptions or an array of any objects
that will be mapped using the connectionModelFields configuration.
[]
editable?
boolean | DiagramEditable
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.
true
Defines the layout configuration for arranging shapes and connections in the Diagram (see Layout article).
navigable
boolean | DiagramNavigationOptions
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.
true
Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
true
selectable?
boolean | Selectable
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 MacOSkey 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.
true
Defines the default configuration options applicable to all shapes.
Defines the field mapping configuration for shapes data binding (see example).
Maps source object properties to Diagram shape properties.
Only used when shapes is an array of custom objects instead of ShapeOptions.
shapes?
any[]
Defines the shapes that render in the Diagram (see Shapes article).
Accepts either an array of ShapeOptions or an array of any objects
that will be mapped using the shapeModelFields configuration.
[]
zoom?
number
Defines the zoom level of the Diagram.
1
zoomMax?
number
Defines the maximum zoom level of the Diagram.
2
zoomMin?
number
Defines the minimum zoom level of the Diagram.
0.1
zoomRate?
number
Defines the zoom rate of the Diagram.
0.1
Fields
The actual connections created by the Diagram.
The actual shapes created by the Diagram.
The currently selected items in the Diagram.
Events
Fires when a shape or connection is created or removed.
Fires when the user clicks on a shape or a connection.
Fires when the user drags an item.
Fires when the user stops dragging an item.
Fires when the user starts dragging an item.
Fires when the mouse pointer enters a shape or connection.
Fires when the mouse pointer leaves a shape or connection.
Fires when the user pans the Diagram.
Fires when the user selects one or more items.
Fires when the location or size of an item are changed.
Fires when a tooltip should be hidden.
Fires when a tooltip should shown for a shape or connection.
Fires when the Diagram has finished zooming out.
Fires when the Diagram starts zooming in or out.
Methods
Adds connection to the Diagram.
Adds shape to the Diagram.
Aligns shapes in the specified direction.
Gets the bounding rectangle of the given items.
Bring into view the passed item(s) or rectangle.
Sends to back the passed items.
Brings to front the passed items.
Clears the Diagram.
Copies selected items to clipboard.
Deselects the specified items or all items if no item is specified.
Converts document coordinates to model coordinates.
Exports the diagram's DOM visual representation for rendering or export purposes. Creates a clipped group containing the canvas content with proper transformations.
A drawing Group element containing the exported DOM visual
Exports the diagram's visual representation with proper scaling based on zoom level. Creates a scaled group containing the main layer content.
A drawing Group element containing the exported visual with inverse zoom scaling
Focuses the Diagram.
boolean
true if focus was set successfully.
Gets a shape on the basis of its identifier.
Provides the current Diagram's shapes and connections that can be used to create a new Diagram when needed.
Object containing shapes and connections arrays.
Converts layer coordinates to model coordinates.
Converts model coordinates to layer coordinates.
Converts model coordinates to view coordinates.
Pastes items from clipboard.
Executes the previous undoable action on top of the redo stack if any.
Removes shape(s) and/or connection(s) from the Diagram.
Selects items on the basis of the given input.
Shape | Connection[]
Array of selected items.
Selects all items in the Diagram.
Selects items in the specified area.
Rectangle area to select.
Executes the next undoable action on top of the undo stack if any.
Converts view coordinates to model coordinates.