New to Kendo UI for AngularStart a free 30-day trial

The visual link between two Shapes through the intermediate of Connectors.

Definition

Package:@progress/kendo-angular-diagrams

Methods

Gets all the points of this connection. This is the combination of the sourcePoint, the points and the targetPoint.

Returns:

any[]

Array of all points including source, intermediate, and target points

Binds event handlers to one or more events.

Parameters:eventEventNames | { [key: string]: Handler }

The event name(s) to bind to, or an object mapping event names to handlers

handlers?EventHandlers

The event handler(s) to bind. Can be a function or an object mapping event names to handlers

one?boolean

If true, the handler will be executed only once and then automatically unbound

Returns:

this

The Observable instance for method chaining

Gets or sets the bounds of this connection.

Parameters:value?any

A Rect object to set as bounds. If not provided, returns the current bounds.

Returns:

Rect

The bounds of the connection

Returns a clone of this connection.

Returns:

Connection

A new Connection instance that is a copy of this connection

Gets or sets the content of the connection.

Parameters:content?any

The content to set. If not provided, returns the current content.

Returns:

any

The current content when used as a getter

Destroys the observable instance and removes all event handlers. This method should be called when the observable is no longer needed to prevent memory leaks.

Binds event handlers to be executed first (prepends to the handlers list). These handlers will be called before any previously bound handlers for the same event.

Parameters:eventNameEventNames

The event name(s) to bind to

handlersEventHandlers

The event handler(s) to bind

Returns:

this

The Observable instance for method chaining

Binds event handlers that will be executed only once. After execution, the handlers are automatically unbound.

Parameters:eventNamesEventNames

The event name(s) to bind to

handlersEventHandlers

The event handler(s) to bind

Returns:

this

The Observable instance for method chaining

Gets or sets the collection of intermediate points. The 'allPoints()' property will return all the points. The 'definers' property returns the definers of the intermediate points. The 'sourceDefiner' and 'targetDefiner' return the definers of the endpoints.

Parameters:value?any

Array of Points or point-like objects to set as intermediate points. If not provided, returns the current points.

Returns:

any[]

Array of intermediate points when used as a getter

Sets the position of the diagram element.

Parameters:pointany

The new position point with x and y coordinates

Redraws the connection with new options.

Parameters:optionsany

The options to apply when redrawing the connection

Refreshes the connection's visual representation. Resolves connectors, refreshes the path, aligns content, and updates adorners.

Selects or deselects this connection.

Parameters:valueany

True to select, false to deselect the connection

Returns:

boolean

True if the selection state changed, false otherwise

Returns a serialized connection in JSON format. Consists of the options and the dataItem.

Returns:

any

Serialized connection object containing options, endpoints, and data

Gets or sets the source endpoint of the connection.

Parameters:source?any

The source endpoint (Shape, Connector, or Point) to set. If not provided, returns the current source.

undoable?any

Whether this operation should be undoable

Returns:

Point | Connector

The current source when used as a getter

Gets or sets the PathDefiner of the sourcePoint. The left part of this definer is always null since it defines the source tangent.

Parameters:valueany

The PathDefiner to set. If not provided, returns the current source definer.

Returns:

PathDefiner

The source definer when used as a getter

Gets the Point where the source of the connection resides. If the endpoint is Auto-connector the location of the resolved connector will be returned. If the endpoint is floating the location of the endpoint is returned.

Returns:

any

The source point of the connection

Gets or sets the target endpoint of the connection.

Parameters:target?any

The target endpoint (Shape, Connector, or Point) to set. If not provided, returns the current target.

undoable?any

Whether this operation should be undoable

Returns:

Point | Connector

The current target when used as a getter

Gets or sets the PathDefiner of the targetPoint. The right part of this definer is always null since it defines the target tangent.

Parameters:valueany

The PathDefiner to set. If not provided, returns the current target definer.

Returns:

PathDefiner

The target definer when used as a getter

Gets the Point where the target of the connection resides.

Returns:

any

The target point of the connection

Converts the connection to a JSON representation for serialization.

Returns:

{ from: any; to: any }

Object containing the connection's endpoints information

Returns a string representation of the diagram element.

Returns:

any

The ID of the element as a string

Triggers an event, calling all bound handlers for that event.

Parameters:eventNamestring

The name of the event to trigger

eventArgs?any

Optional event arguments to pass to the handlers

Returns:

boolean

True if any handler called preventDefault(), false otherwise

Gets or sets the connection type (see ConnectionType enumeration).

Parameters:value?any

A ConnectionType value to set. If not provided, returns the current type.

Returns:

any

The connection type

Removes event handlers from events.

Parameters:eventName?string

The event name to unbind from. If undefined, all events are unbound

handler?EventHandlers

The specific handler to remove. If undefined, all handlers for the event are removed

Returns:

this

The Observable instance for method chaining

Updates the connection's model data and optionally synchronizes changes.

Parameters:syncChanges?any

Whether to synchronize changes immediately

Updates the connection options from the model data.

Parameters:model?any

The model data to extract options from

Gets or sets the visibility of the diagram element.

Parameters:value?any

If provided, sets the visibility. If undefined, returns the current visibility.

Returns:

boolean | void

The current visibility when used as a getter

Properties

The adorner used for visual feedback during interactions.

The data item associated with this diagram element.

definers

PathDefiner[]

Array of path definers for intermediate points along the connection.

events

string[]

Array of event names that this observable supports.

from

any

The source endpoint of the connection (Shape, Connector, or Point).

id

string

The unique identifier of this diagram element.

isSelected

boolean

Indicates whether this element is currently selected.

Configuration options for the observable instance.

The polyline visual element that represents the connection path.

The connector at the source end of the connection.

The connector at the target end of the connection.

to

any

The target endpoint of the connection (Shape, Connector, or Point).

The visual representation (Group) of this diagram element.