Endpoint

Models an endpoint. Can have 1 to maxConnections connections emanating from it (set maxConnections to -1 to allow unlimited). If you use 'jsPlumb.connect' to programmatically connect two elements, you won't actually deal with the underlying Endpoint objects. But if you wish to support drag and drop Connections, one of the ways you do so is by creating and registering endpoints using 'jsPlumb.addEndpoint', and marking these endpoints as 'source' and/or 'target' endpoints for connections.

You never need to create one of these directly; jsPlumb will create them as needed, but check the docs for the constructor as anything supported there can be set in the parameters passed to jsPlumbInstance#addEndpoint, jsPlumbInstance#makeSource or jsPlumbInstance#makeTarget.

new Endpoint()

Source:
  • endpoint-api.js, line 1

Extends

Members

canvas

The Endpoint's drawing area

Source:
  • endpoint-api.js, line 5

connections

List of Connections for the Endpoint.

Source:
  • endpoint-api.js, line 7

overlays

List of Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 3

scope

Scope descriptor for the Endpoint.

Source:
  • endpoint-api.js, line 9

Methods

addClass(class)

Adds a class or some classes to the visual elements for the given component.

Parameters:
Name Type Description
class String

The class(es) to add. The values are appended as given, meaning you can supply a space separated string of several classes if you wish.
Inherited From:
Source:
  • uicomponent.js, line 11

addOverlay(overlaySpec)

Adds an Overlay to the component.

Parameters:
Name Type Description
overlaySpec Object

Specification of the Overlay to add.
Inherited From:
Source:
  • overlaycomponent.js, line 29

addType(typeId, params, doNotRepaint)

Adds a type to the component. Note this is distinct from jsPlumbUIComponent#setType, which overrides all current types - this function just adds a type to the existing list.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to add.
params Object <optional>

Optional params to use when applying the type.
doNotRepaint Boolean <optional>
 false

Tells jsPlumb not to repaint after adding the type.
Inherited From:
Source:
  • uicomponent.js, line 23

bind(event, listener)

Binds a listener to an event.

Parameters:
Name Type Description
event String

Name of the event to bind to.
listener Function

Function to execute.
Inherited From:
Source:
  • util-api.js, line 21

cleanupListeners()

Removes all listeners.

Inherited From:
Source:
  • util-api.js, line 28

detach(connection)

Detach and cleanup a connection.

Parameters:
Name Type Description
connection Connection
Source:
  • endpoint-api.js, line 18

detachAll(fireEvent)

Detach all connections for this endpoint.

Parameters:
Name Type Argument Default Description
fireEvent Boolean <optional>
 true

Whether or not to fire an event for each detach.
Source:
  • endpoint-api.js, line 20

detachFrom(targetEndpoint, fireEvent)

Detach from the given target endpoint.

Parameters:
Name Type Argument Default Description
targetEndpoint Endpoint

Endpoint between which and this Endpoint to detach all connections.
fireEvent Boolean <optional>
 true

Whether or not to fire an event.
Source:
  • endpoint-api.js, line 22

detachFromConnection(connection)

Detach from the given connection, without cleaning up or destroying the connection.

Parameters:
Name Type Description
connection Connection
Source:
  • endpoint-api.js, line 16

Endpoint(params)

You never instantiate an Endpoint directly, but, with the exception of source, all of the constructor parameters described here are valid in the params object you pass to a jsPlumb.addEndpoint, jsPlumb.makeSource or jsPlumb.makeTarget call.

Parameters:
Name Type Description
params Object

Constructor parameters.

Properties
Name Type Argument Default Description
anchor String | Array <optional>

Definition of the Anchor for the endpoint. See the jsPlumb documentation for a discussion of this.
endpoint String | Array <optional>

Endpoint definition. See the jsPlumb documentation for a discussion of this.
enabled Boolean <optional>
 true

Whether or not the Endpoint should be enabled for mouse events (drag/drop).
paintStyle Object <optional>
 null

Endpoint style, a js object. may be null.
hoverPaintStyle Object <optional>
 null

Style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null.
cssClass String <optional>
 null

CSS class to set on the display element associated with this Endpoint.
hoverClass String <optional>
 null

CSS class to set on the display element associated with this Endpoint when it is in hover state.
source String | Selector | Element

Element the Endpoint is attached to, of type String (an element id), element selector, or element. Required.
container String | Selector | Element <optional>

Id or selector instructing jsPlumb where to attach the element it creates for this endpoint. you should read the documentation for a full discussion of this.
connections Connection[] <optional>

List of Connections to configure the Endpoint with.
isSource Boolean <optional>
 false

Indicates the endpoint can act as a source of new connections. Optional; defaults to false.
maxConnections Integer <optional>
 1

A value of -1 means no upper limit.
dragOptions Object <optional>

If isSource is set to true, you can supply arguments for the underlying library's drag method. Optional; defaults to null.
connectorStyle Object <optional>

If isSource is set to true, this is the paint style for Connections from this Endpoint. Optional; defaults to null.
connectorHoverStyle Object <optional>

If isSource is set to true, this is the hover paint style for Connections from this Endpoint. Optional; defaults to null.
connector String | Object <optional>

Connector type to use. Like endpoint, this may be either a single string nominating a known Connector type (eg. "Bezier", "Straight"), or an array containing [name, params], eg. [ "Bezier", { curviness:160 } ].
connectorOverlays Object[] <optional>

Array of Overlay definitions that will be applied to any Connection from this Endpoint.
connectorClass String <optional>

CSS class to set on Connections emanating from this Endpoint.
connectorHoverClass String <optional>

CSS class to set on to set on Connections emanating from this Endpoint when they are in hover state.
connectionsDetachable Boolean <optional>
 true

Sets whether connections to/from this Endpoint should be detachable or not.
isTarget Boolean <optional>
 false

Indicates the endpoint can act as a target of new connections. Optional; defaults to false.
dropOptions Object <optional>

If isTarget is set to true, you can supply arguments for the underlying library's drop method with this parameter. Optional; defaults to null.
reattach Boolean <optional>
 false

Determines whether or not the Connections reattach after they have been dragged off an Endpoint and left floating. defaults to false: Connections dropped in this way will just be deleted.
parameters Object <optional>
 {}

JS object containing parameters to set on the Endpoint. These parameters are then available via the getParameter method. When a connection is made involving this Endpoint, the parameters from this Endpoint are copied into that Connection. Source Endpoint parameters override target Endpoint parameters if they both have a parameter with the same name.
connector-pointer-events String <optional>

A value for the 'pointer-events' property of any SVG elements that are created to render connections from this endoint.
Source:
  • endpoint-api.js, line 3

getElement() → {Element}

Source:
  • endpoint-api.js, line 24
Returns:

The DOM element this Endpoint is attached to.

Type
Element

getLabel()

Returns the label text for this component (or a function if you are labelling with a function). This does not return the overlay itself; this is a convenience method which is a pair with setLabel; together they allow you to add and access a Label Overlay without having to create the Overlay object itself. For access to the underlying label overlay that jsPlumb has created, use getLabelOverlay.

Inherited From:
Source:
  • overlaycomponent.js, line 5
See:
  • #getOverlay
  • #getLabelOverlay

getLabelOverlay() → {Overlay}

Inherited From:
Source:
  • overlaycomponent.js, line 7
See:
  • #setLabel
Returns:

The underlying internal label overlay, which will exist if you specified a label on a connect call, or have called setLabel at any stage. Otherwise it will be null.

Type
Overlay

getOverlay(overlayId) → {Overlay}

Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter in to the Overlay's constructor arguments, and then use that to retrieve it via this method.

Parameters:
Name Type Description
overlayId String

Id of the overlay to retrieve.
Inherited From:
Source:
  • overlaycomponent.js, line 9
Returns:

The overlay stored against the given id, null if not found.

Type
Overlay

getOverlays() → {Array}

Gets all the overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 11
Returns:

List of the component's overlays.

Type
Array

getParameter(name) → {Object}

Gets a parameter from the component

Parameters:
Name Type Description
name String

Name of the parameter to get
Inherited From:
Source:
  • uicomponent.js, line 3
Returns:

The given parameter's value, null if not found.

Type
Object

getParameters() → {Object}

Gets all parameters from the component. Note that you are given the actual parameters object, not a copy, so you can alter their values directly, and if you hold the reference to the parameters object you could cause a memory leak.

Inherited From:
Source:
  • uicomponent.js, line 7
Returns:

All of the component's parameters.

Type
Object

getType() → {String[]}

Gets the current type - or types - for this component.

Inherited From:
Source:
  • uicomponent.js, line 17
Returns:

The current list of types, empty if none registered.

Type
String[]

getUuid() → {String}

Source:
  • endpoint-api.js, line 26
Returns:

The UUID for this Endpoint, if there is one. Otherwise returns null.

Type
String

hasType(typeId) → {Boolean}

Returns whether or not the component currently has the given type.

Parameters:
Name Type Description
typeId String

Id of the type to check for
Inherited From:
Source:
  • uicomponent.js, line 21
Returns:

True if the component has the type, false if not.

Type
Boolean

hideOverlay(overlayId)

Hides the overlay specified by the given id.

Parameters:
Name Type Description
overlayId String

Id of the overlay to hide.
Inherited From:
Source:
  • overlaycomponent.js, line 13

hideOverlays()

Hides all Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 15

isEnabled() → {Boolean}

Source:
  • endpoint-api.js, line 28
Returns:

True if the Endpoint is enabled for drag/drop connections enabled, false otherwise.

Type
Boolean

isFull() → {Boolean}

Source:
  • endpoint-api.js, line 30
Returns:

True if the Endpoint cannot accept any more Connections, false otherwise.

Type
Boolean

isHover() → {Boolean}

Returns whether or not the object is currently in hover state

Inherited From:
Source:
  • uicomponent.js, line 29
Returns:

True if in hover state, false if not.

Type
Boolean

isSuspendEvents() → {Boolean}

Inherited From:
Source:
  • util-api.js, line 27
Returns:

True if events are suspended, false otherwise.

Type
Boolean

isVisible() → {Boolean}

Source:
  • endpoint-api.js, line 32
Returns:

Whether or not the Endpoint is currently visible.

Type
Boolean

reapplyTypes(params)

Reapplies the current list of types with the given (optional) parameters. See the jsPlumb documentation for a full discussion of types.

Parameters:
Name Type Argument Description
params Object <optional>

Optional params to use when reapplying types.
Inherited From:
Source:
  • uicomponent.js, line 19

removeAllOverlays()

Removes all overlays from the component, and then repaints.

Inherited From:
Source:
  • overlaycomponent.js, line 21

removeClass(class)

Removes a class or some classes from the visual elements for the given component. You can supply a space separated string of several classes if you wish.

Parameters:
Name Type Description
class String

The class(es) to remove.
Inherited From:
Source:
  • uicomponent.js, line 13

removeOverlay(overlayId)

Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec.

Parameters:
Name Type Description
overlayId String

Id of the overlay to remove.
Inherited From:
Source:
  • overlaycomponent.js, line 23

removeOverlays(overlayIds)

Removes a set of overlays by ID. Note: by ID. This is a string you set in the overlay spec.

Parameters:
Name Type Argument Description
overlayIds String <repeatable>

This function takes an arbitrary number of arguments, each of which is a single overlay id.
Inherited From:
Source:
  • overlaycomponent.js, line 25

removeType(typeId, doNotRepaint)

Removes the given type from the component.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to remove.
doNotRepaint Boolean <optional>
 false

Tells jsPlumb not to repaint after removing the type.
Inherited From:
Source:
  • uicomponent.js, line 25

setAnchor(anchorParams, doNotRepaint) → {Endpoint}

Sets the anchor to use for this Endpoint. anchorParams is an object in the same form that you would pass as the anchor parameter to jsPlumb.addEndpoint or jsPlumb.connect.

Parameters:
Name Type Argument Default Description
anchorParams object

Parameters for the anchor
doNotRepaint boolean <optional>
 false

Instructs jsPlumb to not repaint after setting the new anchor.
Source:
  • endpoint-api.js, line 12
Returns:

The Endpoint.

Type
Endpoint

setDragAllowedWhenFull(allowed)

Sets whether or not connections can be dragged from this Endpoint once it is full. You would use this in a UI in which you're going to provide some other way of breaking connections, if you need to break them at all. This property is by default true; use it in conjunction with the 'reattach' option on a connect call.

Parameters:
Name Type Description
allowed Boolean

Whether drag is allowed or not when the Endpoint is full.
Source:
  • endpoint-api.js, line 34

setElement(el) → {Endpoint}

Sets the DOM element this Endpoint is attached to.

Parameters:
Name Type Description
el String | Selector | Element

Element id, DOM element or selector identifying the new element param {String|Selector|Element} [container] Specifies the actual parent element to use as the parent for this Endpoint's visual representation. See the jsPlumb documentation for a discussion about this.
Source:
  • endpoint-api.js, line 36
Returns:

The Endpoint.

Type
Endpoint

setEnabled(enabled)

Sets whether or not the Endpoint is enabled for drag/drop connections.

Parameters:
Name Type Description
enabled Boolean

Whether or not the Endpoint is enabled.
Source:
  • endpoint-api.js, line 38

setEndpoint(ep)

Sets the underlying visual representation to use for this Endpoint. ep is an object in the same form that you would pass as the endpoint parameter to jsPlumb.addEndpoint or jsPlumb.makeSource.

Parameters:
Name Type Description
ep Object

Parameters for the endpoint
Source:
  • endpoint-api.js, line 14

setHover(hover, ignoreAttachedElements)

Sets/unsets the hover state of this component.

Parameters:
Name Type Argument Default Description
hover Boolean

Hover state boolean
ignoreAttachedElements Boolean <optional>
 false

If true, does not notify any attached elements of the change in hover state. Used mostly by jsPlumb internally, to avoid infinite loops.
Inherited From:
Source:
  • uicomponent.js, line 33

setHoverPaintStyle(style, doNotRepaint)

Sets the paint style to use when the mouse is hovering over the component. This is null by default. The hover paint style is applied as extensions to the paintStyle; it does not entirely replace it. This is because people will most likely want to change just one thing when hovering, say the color for example, but leave the rest of the appearance the same.

Parameters:
Name Type Argument Description
style Object

Style to use when the mouse is hovering.
doNotRepaint Boolean <optional>

If true, the component will not be repainted. Useful when setting things up initially.
Inherited From:
Source:
  • uicomponent.js, line 31

setLabel(label)

Sets the component's label.

Parameters:
Name Type Description
label String | Function | Object

Label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" }. Note that this uses innerHTML on the label div, so keep that in mind if you need escaped HTML.
Inherited From:
Source:
  • overlaycomponent.js, line 27

setPaintStyle(style, doNotRepaint)

Sets the component's paint style and then repaints the component.

Parameters:
Name Type Argument Default Description
style Object

Style to use.
doNotRepaint Boolean <optional>
 false

If true, the component will not be repainted.
Inherited From:
Source:
  • uicomponent.js, line 35

setParameter(name, value)

Sets a parameter on the component

Parameters:
Name Type Description
name String

Name of the parameter to set
value Object

Value to set
Inherited From:
Source:
  • uicomponent.js, line 5

setParameters(params)

Sets all parameters on the component.

Parameters:
Name Type Description
params Object

Parameters to set.
Inherited From:
Source:
  • uicomponent.js, line 9

setType(typeId, params, doNotRepaint)

This function sets a type for the given component. It replaces all existing types. For a full discussion of the concept of types, see the jsPlumb documentation.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to set.
params Object <optional>

Optional parameter object to expand.
doNotRepaint Boolean <optional>
 false

Tells jsPlumb not to repaint after setting the type.
Inherited From:
Source:
  • uicomponent.js, line 15

setVisible(visible, doNotChangeConnections, doNotNotifyOtherEndpoint)

Sets whether or not the Endpoint is currently visible.

Parameters:
Name Type Argument Default Description
visible Boolean

Whether or not the Endpoint should be visible.
doNotChangeConnections Boolean <optional>
 false

Instructs jsPlumb to not pass the visible state on to any attached Connections.
doNotNotifyOtherEndpoint Boolean <optional>
 false

Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections.
Source:
  • endpoint-api.js, line 40

showOverlay(overlayId)

Shows the overlay specified by the given id.

Parameters:
Name Type Description
overlayId String

Id of the overlay to show.
Inherited From:
Source:
  • overlaycomponent.js, line 18

showOverlays()

Shows all Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 20

suspendEvents(val)

Sets whether or not events are suspended.

Parameters:
Name Type Description
val Boolean

Whether or not to suspend events.
Inherited From:
Source:
  • util-api.js, line 26

toggleType(typeId, params, doNotRepaint)

Toggles the given type on the component.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to toggle.
params Object <optional>

Optional params to use if the type does not exist and jsPlumb applies it.
doNotRepaint Boolean <optional>
 false

Tells jsPlumb not to repaint after toggling the type.
Inherited From:
Source:
  • uicomponent.js, line 27

unbind(event)

Clears either all listeners, or listeners for some specific event.

Parameters:
Name Type Argument Description
event String <optional>

Optional. constrains the clear to just listeners for this event.
Inherited From:
Source:
  • util-api.js, line 25