Connection
The visual link between two Shapes through the intermediate of Connectors.
Definition
Package:@progress/kendo-react-diagram
Properties
adorner
any
The adorner used for visual feedback during interactions.
dataItem
any
The data item associated with this diagram element.
Array of path definers for intermediate points along the connection.
events
string[]
Array of event names that this observable supports.
from
null | ConnectionEndpoint
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.
The connector at the source end of the connection.
The connector at the target end of the connection.
to
null | ConnectionEndpoint
The target endpoint of the connection (Shape, Connector, or Point).
visual
any
The visual representation (Group) of this diagram element.
Methods
Gets all the points of this connection. This is the combination of the sourcePoint, the points and the targetPoint.
Point[]
Array of all points including source, intermediate, and target points
Binds event handlers to one or more events.
The event name(s) to bind to, or an object mapping event names to handlers
handlers?EventHandlersThe event handler(s) to bind. Can be a function or an object mapping event names to handlers
one?booleanIf true, the handler will be executed only once and then automatically unbound
Returns:this
The Observable instance for method chaining
Returns a clone of this connection.
A new Connection instance that is a copy of this connection
Gets the current content of the connection.
undefined | ConnectionContent | ConnectionRichTextContent
The connection content, or undefined when no content is configured.
Sets the content of the connection.
The new connection content.
Returns:ConnectionContent | ConnectionRichTextContent
The applied connection content.
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.
The event name(s) to bind to
handlersEventHandlersThe 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.
The event name(s) to bind to
handlersEventHandlersThe event handler(s) to bind
Returns:this
The Observable instance for method chaining
Gets the intermediate points of the connection.
Point[]
The current intermediate points.
Sets the intermediate points of the connection.
The points or point-like objects to use as intermediate points.
Redraws the connection with new options.
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.
True to select, false to deselect the connection
Returns:undefined | boolean
True if the selection state changed; otherwise undefined.
Returns a serialized connection in JSON format. Consists of the options and the dataItem.
{ options: ConnectionOptionsBase; from?: string | ConnectionEndpointJson; to?: string | ConnectionEndpointJson; dataItem?: string }
Serialized connection object containing options, endpoints, and data
Gets the resolved source endpoint of the connection.
The resolved source endpoint.
Sets the source endpoint of the connection.
The source shape, connector, point, or null to detach the endpoint.
undoable?booleanWhether the operation can be undone.
Returns:The resolved source endpoint.
Gets the path definer for the source point.
The source point path definer.
Sets the path definer for the source point. The left part is cleared because it defines the source tangent.
The source path definer.
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.
The source point of the connection
Gets the resolved target endpoint of the connection.
The resolved target endpoint.
Sets the target endpoint of the connection.
The target shape, connector, point, or null to detach the endpoint.
undoable?booleanWhether the operation can be undone.
Returns:The resolved target endpoint.
Gets the path definer for the target point.
The target point path definer.
Sets the path definer for the target point. The right part is cleared because it defines the target tangent.
The target path definer.
Gets the Point where the target of the connection resides.
The target point of the connection
Converts the connection to a JSON representation for serialization.
{ from: ConnectionEndpointJson; to: ConnectionEndpointJson }
Object containing the connection's endpoints information
Returns a string representation of the diagram element.
string
The element ID.
Triggers an event, calling all bound handlers for that event.
The name of the event to trigger
eventArgs?anyOptional event arguments to pass to the handlers
Returns:boolean
True if any handler called preventDefault(), false otherwise
Gets the current connection type.
The current connection type.
Sets the connection type.
The new connection type.
Removes event handlers from events.
The event name to unbind from. If undefined, all events are unbound
handler?EventHandlersThe specific handler to remove. If undefined, all handlers for the event are removed
Returns:this
The Observable instance for method chaining
Updates the connection options from the model data.
The model data to extract options from
Gets the visibility of the diagram element.
boolean
true when the element is visible; otherwise, false.
Sets the visibility of the diagram element.
Whether the element should be visible.