Connection

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

Name	Type	Default	Description
adorner	any		The adorner used for visual feedback during interactions.
dataItem	any		The data item associated with this diagram element.
definers	PathDefiner[]		Array of path definers for intermediate points along the connection.
diagram	Diagram		The diagram that contains this 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.
options	any		Configuration options for the observable instance.
path	Polyline		The polyline visual element that represents the connection path.
sourceConnector	Connector		The connector at the source end of the connection.
targetConnector	Connector		The connector at the target end of the connection.
to	any		The target endpoint of the connection (Shape, Connector, or Point).
visual	any		The visual representation (Group) of this diagram element.

Constructors

Connection

(from: any, to: any, options?: any)

Creates a new Connection instance.

Parameters

from

any

The source endpoint (Shape, Connector, or Point)

to

any

The target endpoint (Shape, Connector, or Point)

options?

any

Configuration options for the connection

Methods

allPoints
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

bind
Binds event handlers to one or more events.
Parameters event EventNames | {[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 Connection The Observable instance for method chaining

bounds
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

clone
Returns a clone of this connection.
Returns Connection A new Connection instance that is a copy of this connection

content
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

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

first
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 eventName EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Connection The Observable instance for method chaining

one
Binds event handlers that will be executed only once. After execution, the handlers are automatically unbound.
Parameters eventNames EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Connection The Observable instance for method chaining

points
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

position
Sets the position of the diagram element.
Parameters point any The new position point with x and y coordinates

redraw
Redraws the connection with new options.
Parameters options any The options to apply when redrawing the connection

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

select
Selects or deselects this connection.
Parameters value any True to select, false to deselect the connection
Returns boolean True if the selection state changed, false otherwise

serialize
Returns a serialized connection in JSON format. Consists of the options and the dataItem.
Returns any Serialized connection object containing options, endpoints, and data

source
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

sourceDefiner
Gets or sets the PathDefiner of the sourcePoint. The left part of this definer is always null since it defines the source tangent.
Parameters value any The PathDefiner to set. If not provided, returns the current source definer.
Returns PathDefiner The source definer when used as a getter

sourcePoint
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

target
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

targetDefiner
Gets or sets the PathDefiner of the targetPoint. The right part of this definer is always null since it defines the target tangent.
Parameters value any The PathDefiner to set. If not provided, returns the current target definer.
Returns PathDefiner The target definer when used as a getter

targetPoint
Gets the Point where the target of the connection resides.
Returns any The target point of the connection

toJSON
Converts the connection to a JSON representation for serialization.
Returns { from: any; to: any; } Object containing the connection's endpoints information

toString
Returns a string representation of the diagram element.
Returns any The ID of the element as a string

trigger
Triggers an event, calling all bound handlers for that event.
Parameters eventName string 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

type
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

unbind
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 Connection The Observable instance for method chaining

updateModel
Updates the connection's model data and optionally synchronizes changes.
Parameters syncChanges? any Whether to synchronize changes immediately

updateOptionsFromModel
Updates the connection options from the model data.
Parameters model? any The model data to extract options from

visible
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