DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG
Show:

Endpoint Class

Models an Endpoint - one end of a Connection. An Endpoint has an underlying Anchor, which is what determines the Endpoint's position. Each Endpoint can have 1 to maxConnections connections emanating from it (set maxConnections to -1 to allow unlimited Connections; the default is 1).

You never need to create an Endpoint directly. When you provide an Endpoint definition to an appropriate jsPlumb method, you can do so either as a string, or as an array of the form [String, Object]. In the former case, the string must be the name of some available Endpoint, such as "Dot" or "Rectangle". In the latter case, the first argument to the array is the Endpoint name, and the second is a JS object containing constructor parameters for the Endpoint, for instance

[ "Dot", { radius:75 } ]

Constructor

Endpoint

(
  • params
)

Parameters:

  • params Object

    Constructor parameters.

    • [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=true] Boolean optional

      Whether or not the Endpoint should be enabled for mouse events (drag/drop).

    • [paintStyle=null] Object optional

      Endpoint style, a js object. may be null.

    • [hoverPaintStyle=null] Object optional

      Style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null.

    • [cssClass=null] String optional

      CSS class to set on the display element associated with this Endpoint.

    • [hoverClass=null] String optional

      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=false] Boolean optional

      Indicates the endpoint can act as a source of new connections. Optional; defaults to false.

    • [maxConnections=1] Integer optional

      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=true] Boolean optional

      Sets whether connections to/from this Endpoint should be detachable or not.

    • [isTarget=false] Boolean optional

      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=false] Boolean optional

      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.

    • [connectionType] String optional

      Optional descriptor for the type of connections this endpoint is a source for. Used when dragging new connections.

    • [dragProxy] String | Array optional

      Optional endpoint definition for the endpoint to use as the drag endpoint when dragging a new connection. If you provide this it will override any other means of determining what the drag endpoint should look like.

Methods

addClass

(
  • class
)

Inherited from jsPlumbUIComponent:

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

Parameters:

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

addOverlay

(
  • overlaySpec
)

Adds an Overlay to the component.

Parameters:

  • overlaySpec Object

    Specification of the Overlay to add.

addType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

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

Parameters:

  • typeId String

    Id of the type to add.

  • [params] Object optional

    Optional params to use when applying the type.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after adding the type.

bind

(
  • event
  • listener
  • [insertAtStart=false]
)

Inherited from jsPlumbUtil.EventGenerator:

Binds a listener to one or more events.

Parameters:

  • event String | String

    Name(s) of the event(s) to bind to. Note that if you provide multiple event names they all are bound with the same function.

  • listener Function

    Function to execute.

  • [insertAtStart=false] Boolean optional

    Whether or not to insert this listener at the start of the listener list, so it is fired before the other currently registered listeners.

cleanupListeners

()

Inherited from jsPlumbUtil.EventGenerator:

Removes all listeners.

clearTypes

(
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

Clears all types for a given component.

Parameters:

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after clearing the types.

detach

(
  • connection
)

Detach and cleanup a connection.

Parameters:

detachAll

(
  • [fireEvent=true]
  • [forceDetach=false]
)

Detach all connections for this endpoint.

Parameters:

  • [fireEvent=true] Boolean optional

    Whether or not to fire an event for each detach.

  • [forceDetach=false] Boolean optional

    If true, this call will ignore any beforeDetach interceptors.

detachFrom

(
  • targetEndpoint
  • [fireEvent=true]
)

Detach all Connections from this Endpoint to/from the given target endpoint.

Parameters:

  • targetEndpoint Endpoint

    Endpoint between which and this Endpoint to detach all Connections.

  • [fireEvent=true] Boolean optional

    Whether or not to fire an event.

detachFromConnection

(
  • connection
)

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

Parameters:

fire

(
  • event
  • value
  • originalEvent
)
private

Inherited from jsPlumbUtil.EventGenerator:

Fires an update for the given event.

Parameters:

  • event String

    Event to fire

  • value Object

    Value to pass to the event listener(s).

  • originalEvent Event

    The original event from the browser

getElement

() Element

Gets the Element to which this Endpoint belongs.

Returns:

Element:

The DOM element this Endpoint is attached to.

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.

getLabelOverlay

() Overlay

Returns:

Overlay:

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.

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:

  • overlayId String

    Id of the overlay to retrieve.

Returns:

Overlay:

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

getOverlays

() Array

Gets all the overlays for this component.

Returns:

Array:

List of the component's overlays.

getParameter

(
  • name
)
Object

Inherited from jsPlumbUIComponent:

Gets a parameter from the component

Parameters:

  • name String

    Name of the parameter to get

Returns:

Object:

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

getParameters

() Object

Inherited from jsPlumbUIComponent:

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.

Returns:

Object:

All of the component's parameters.

getType

() String

Inherited from jsPlumbUIComponent:

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

Returns:

String:

The current list of types, empty if none registered.

getUuid

() String

Gets the Endpoint's UUID.

Returns:

String:

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

hasType

(
  • typeId
)
Boolean

Inherited from jsPlumbUIComponent:

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

Parameters:

  • typeId String

    Id of the type to check for

Returns:

Boolean:

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

hideOverlay

(
  • overlayId
)

Hides the overlay specified by the given id.

Parameters:

  • overlayId String

    Id of the overlay to hide.

hideOverlays

()

Hides all Overlays for this component.

isConnectedTo

(
  • endpoint
)
Boolean

Parameters:

Returns:

Boolean:

Whether or not this Endpoint is connected to the given Endpoint.

isEnabled

() Boolean

Returns:

Boolean:

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

isFull

() Boolean

Returns:

Boolean:

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

isHover

() Boolean

Inherited from jsPlumbUIComponent:

Returns whether or not the object is currently in hover state

Returns:

Boolean:

True if in hover state, false if not.

isSuspendEvents

() Boolean

Inherited from jsPlumbUtil.EventGenerator:

Checks whether or not events are currently suspended.

Returns:

Boolean:

True if events are suspended, false otherwise.

isVisible

() Boolean

Returns:

Boolean:

Whether or not the Endpoint is currently visible.

jsPlumbUtil.replace

(
  • inObj
  • path
  • value
)

Inherited from jsPlumbUtil.EventGenerator:

Replaces values inside some JS object according to a given path spec. A path spec is a string in dotted notation, with each component optionally declaring an array index. Some examples are:

foo.bar foo.baz[2] foo.qux[3].baz[3].shwee

The function fails gracefully if the path identifies a non-existent object.

Parameters:

  • inObj Object

    Object to perform replacements inside.

  • path String

    Path to use for replacements

  • value Object

    Value to set.

reapplyTypes

(
  • [params]
)

Inherited from jsPlumbUIComponent:

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

Parameters:

  • [params] Object optional

    Optional params to use when reapplying types.

removeAllOverlays

()

Removes all overlays from the component, and then repaints.

removeClass

(
  • class
)

Inherited from jsPlumbUIComponent:

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:

  • class String

    The class(es) to remove.

removeOverlay

(
  • overlayId
)

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

Parameters:

  • overlayId String

    Id of the overlay to remove.

removeOverlays

(
  • overlayIds
)

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

Parameters:

  • overlayIds ...String

    This function takes an arbitrary number of arguments, each of which is a single overlay id.

removeType

(
  • typeId
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

Removes the given type from the component.

Parameters:

  • typeId String

    Id of the type to remove.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after removing the type.

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:

  • anchorParams Object

    Parameters for the anchor

  • [doNotRepaint Boolean

    = false] Instructs jsPlumb to not repaint after setting the new anchor.

Returns:

Endpoint:

The 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:

  • allowed Boolean

    Whether drag is allowed or not when the Endpoint is full.

setElement

(
  • el
  • [container]
)
Endpoint

Sets the DOM element this Endpoint is attached to.

Parameters:

  • el String | Selector | Element

    Element id, DOM element or selector identifying the new element

  • [container] String | Selector | Element optional

    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.

Returns:

Endpoint:

The Endpoint.

setEnabled

(
  • enabled
)

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

Parameters:

  • enabled Boolean

    Whether or not the Endpoint is enabled.

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:

  • ep Object

    Parameters for the endpoint

setHover

(
  • hover
  • [ignoreAttachedElements=false]
)

Inherited from jsPlumbUIComponent:

Sets/unsets the hover state of this component.

Parameters:

  • hover Boolean

    Hover state boolean

  • [ignoreAttachedElements=false] Boolean optional

    If true, does not notify any attached elements of the change in hover state. Used mostly by jsPlumb internally, to avoid infinite loops.

setHoverPaintStyle

(
  • style
  • [doNotRepaint]
)

Inherited from jsPlumbUIComponent:

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:

  • style Object

    Style to use when the mouse is hovering. The allowed values in this object originally come from valid values in an HTML5 canvas.

    • [fill] String optional

      Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a fill on a Connector will cause the browser to fill the connector's path - probably not what you want.

    • [stroke] String optional

      Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use stroke on Endpoints to define a border.

    • [strokeWidth] Integer optional

      Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)

  • [doNotRepaint] Boolean optional

    If true, the component will not be repainted. Useful when setting things up initially.

setLabel

(
  • label
)

Sets the component's label.

Parameters:

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

setPaintStyle

(
  • style
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

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

Parameters:

  • style Object

    Style to use. The allowed values in this object originally come from valid values in an HTML5 canvas.

    • [fill] String optional

      Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a fill on a Connector will cause the browser to fill the connector's path - probably not what you want.

    • [stroke] String optional

      Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use stroke on Endpoints to define a border.

    • [strokeWidth] Integer optional

      Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)

  • [doNotRepaint=false] Boolean optional

    If true, the component will not be repainted.

setParameter

(
  • name
  • value
)

Inherited from jsPlumbUIComponent:

Sets a parameter on the component

Parameters:

  • name String

    Name of the parameter to set

  • value Object

    Value to set

setParameters

(
  • params
)

Inherited from jsPlumbUIComponent:

Sets all parameters on the component.

Parameters:

  • params Object

    Parameters to set.

setSuspendEvents

(
  • val
)

Inherited from jsPlumbUtil.EventGenerator:

Sets whether or not events are suspended.

Parameters:

  • val Boolean

    Whether or not to suspend events.

setType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

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:

  • typeId String

    Id of the type to set.

  • [params] Object optional

    Optional parameter object to expand.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after setting the type.

setVisible

(
  • visible
  • [doNotChangeConnections=false]
  • [doNotNotifyOtherEndpoint=false]
)

Sets whether or not the Endpoint is currently visible.

Parameters:

  • visible Boolean

    Whether or not the Endpoint should be visible.

  • [doNotChangeConnections=false] Boolean optional

    Instructs jsPlumb to not pass the visible state on to any attached Connections.

  • [doNotNotifyOtherEndpoint=false] Boolean optional

    Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections.

showOverlay

(
  • overlayId
)

Shows the overlay specified by the given id.

Parameters:

  • overlayId String

    Id of the overlay to show.

showOverlays

()

Shows all Overlays for this component.

toggleType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Inherited from jsPlumbUIComponent:

Toggles the given type on the component.

Parameters:

  • typeId String

    Id of the type to toggle.

  • [params] Object optional

    Optional params to use if the type is not currently set and jsPlumb applies it.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after toggling the type.

unbind

(
  • [eventOrListener]
  • [listener]
)

Inherited from jsPlumbUtil.EventGenerator:

Clears either all listeners, or listeners for some specific event, or just some listener. You can call this method with zero, one or two arguments: with zero arguments, all listeners are cleared. With one argument that is a string, all listeners for the specified event type are cleared. With one argument that is a function, it is removed from the appropriate event list. With two arguments, the first is an event type, and the second is a function to be unbound. In fact this is perhaps unnecessary given that you can unbind a function just by passing it.

Parameters:

  • [eventOrListener] String | Function optional

    If a string, constrains the clear to just listeners for the event identified by the string. If a Function, unbinds this function wherever it may have been bound.

  • [listener] Function optional

    If provided, removes just this listener for the given event.

updateClasses

(
  • [classesToAdd]
  • [classesToRemove]
)

Inherited from jsPlumbUIComponent:

Adds/removes classes at the same time, which reduces the number of reflows that occur in the page. Either parameter may be null but of course if you pass only a single parameter to this method then it will be taken to be classesToAdd.

Parameters:

  • [classesToAdd] String | String optional
  • [classesToRemove] String | String optional

Properties

canvas

Element

The Endpoint's drawing area

connections

Array

List of Connections for the Endpoint.

dragProxy

String | Array

Optional spec for the endpoint to use when dragging a new connection

overlays

ListOverlay

List of Overlays for this component.

scope

Array | String

Scope descriptor for the Endpoint.