jsPlumb 1.3.5

Summary

jsPlumb 1.3.5
Properties
overlays	List of Overlays for this component.
Functions
addOverlay	Adds an Overlay to the Connection.
getOverlay	Gets an overlay, by ID.
hideOverlay	Hides the overlay specified by the given id.
showOverlay	Shows the overlay specified by the given id.
removeAllOverlays	Removes all overlays from the Connection, and then repaints.
setLabel	Sets the Connection’s label.
Properties
Defaults	These are the default settings for jsPlumb.
connectorClass	The CSS class to set on Connection elements.
endpointClass	The CSS class to set on Endpoint elements.
overlayClass	The CSS class to set on an Overlay that is an HTML element.
Functions
bind	Bind to an event on jsPlumb.
clearListeners	Clears either all listeners, or listeners for some specific event.
addClass	Helper method to abstract out differences in setting css classes on the different renderer types.
removeClass	Helper method to abstract out differences in setting css classes on the different renderer types.
hasClass	Helper method to abstract out differences in testing for css classes on the different renderer types.
addEndpoint	Adds an Endpoint to a given element or elements.
addEndpoints	Adds a list of Endpoints to a given element or elements.
animate	This is a wrapper around the supporting library’s animate function; it injects a call to jsPlumb in the ‘step’ function (creating the ‘step’ function if necessary).
connect	Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).
deleteEndpoint	Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too)
deleteEveryEndpoint	Deletes every Endpoint, and their associated Connections, in this instance of jsPlumb.
detach	Detaches and then removes a Connection.
detachAllConnections	Removes all an element’s Connections.
detachEveryConnection	Remove all Connections from all elements, but leaves Endpoints in place.
draggable	Initialises the draggability of some element or elements.
extend	Wraps the underlying library’s extend functionality.
getDefaultEndpointType	Returns the default Endpoint type.
getDefaultConnectionType	Returns the default Connection type.
getConnections	Gets all or a subset of connections currently managed by this jsPlumb instance.
getAllConnections	Gets all connections, as a map of { scope -> [ connection...
getDefaultScope	Gets the default scope for connections and endpoints.
getEndpoint	Gets an Endpoint by UUID
hide	Sets an element’s connections to be hidden.
makeTarget	Makes some DOM element a Connection target, allowing you to drag connections to it without having to register any Endpoints on it first.
makeSource	Makes some DOM element a Connection source, allowing you to drag connections from it without having to register any Endpoints on it first.
ready	Helper method to bind a function to jsPlumb’s ready event.
repaint	Repaints an element and its connections.
repaintEverything	Repaints all connections.
removeAllEndpoints	Removes all Endpoints associated with a given element.
setAutomaticRepaint	Sets/unsets automatic repaint on window resize.
setDefaultScope	Sets the default scope for Connections and Endpoints.
setDraggable	Sets whether or not a given element is draggable, regardless of what any jsPlumb command may request.
setRepaintFunction	Sets the function to fire when the window size has changed and a repaint was fired.
setMouseEventsEnabled	Sets whether or not mouse events are enabled.
setSuspendDrawing	Suspends drawing operations.
setRenderMode	Sets render mode: jsPlumb.CANVAS, jsPlumb.SVG or jsPlumb.VML.
show	Sets an element’s connections to be visible.
sizeCanvas	Helper to size a canvas.
toggleVisible	Toggles visibility of an element’s Connections.
toggleDraggable	Toggles draggability (sic?)
unload	Unloads jsPlumb, deleting all storage.
Connection	The connecting line between two Endpoints.
Functions and Properties
Connection	Connection constructor.
sourceId	Id of the source element in the connection.
targetId	Id of the target element in the connection.
scope	Optional scope descriptor for the connection.
endpoints	Array of [source, target] Endpoint objects.
isDetachable	Returns whether or not this connection can be detached from its target/source endpoint.
setDetachable	Sets whether or not this connection is detachable.
setConnector
connector	The underlying Connector for this Connection (eg.
bind	Bind to an event on the Connection.
setPaintStyle	Sets the Connection’s paint style and then repaints the Connection.
setHoverPaintStyle	Sets the paint style to use when the mouse is hovering over the Connection.
setHover	Sets/unsets the hover state of this Connection.
repaint	Repaints the Connection.
Endpoint	Models an endpoint.
Functions
Endpoint	Endpoint constructor.
bind	Bind to an event on the Endpoint.
setPaintStyle	Sets the Endpoint’s paint style and then repaints the Endpoint.
setHoverPaintStyle	Sets the paint style to use when the mouse is hovering over the Endpoint.
setHover	Sets/unsets the hover state of this Endpoint.
isVisible	Returns whether or not the Endpoint is currently visible.
setVisible	Sets whether or not the Endpoint is currently visible.
Properties
canvas	The Endpoint’s Canvas.
connections	List of Connections this Endpoint is attached to.
scope	Scope descriptor for this Endpoint.
Functions
addConnection	Adds a Connection to this Endpoint.
detach	Detaches the given Connection from this Endpoint.
detachAll	Detaches all Connections this Endpoint has.
detachFrom	Removes any connections from this Endpoint that are connected to the given target endpoint.
detachFromConnection	Detach this Endpoint from the Connection, but leave the Connection alive.
getElement	Returns the DOM element this Endpoint is attached to.
setElement	Sets the DOM element this Endpoint is attached to.
getUuid	Returns the UUID for this Endpoint, if there is one.
isConnectedTo	Returns whether or not this endpoint is connected to the given Endpoint.
isFull	Returns whether or not the Endpoint can accept any more Connections.
setDragAllowedWhenFull	Sets whether or not connections can be dragged from this Endpoint once it is full.
setStyle	Sets the paint style of the Endpoint.
paint	Paints the Endpoint, recalculating offset and anchor positions if necessary.
Connectors.Straight	The Straight connector draws a simple straight line between the two anchor points.
Connectors.Flowchart	Provides ‘flowchart’ connectors, consisting of vertical and horizontal line segments.
Functions
Constructor
Endpoints.Dot	A round endpoint, with default radius 10 pixels.
Functions
Constructor
Endpoints.Rectangle	A Rectangular Endpoint, with default size 20x20.
Functions
Constructor
Endpoints.Image	Draws an image as the Endpoint.
Functions
Constructor
Endpoints.Blank	An Endpoint that paints nothing (visible) on the screen.
Endpoints.Triangle	A triangular Endpoint.
Functions
Constructor
Overlays.Arrow	An arrow overlay, defined by four points: the head, the two sides of the tail, and a ‘foldback’ point at some distance along the length of the arrow that lines from each tail point converge into.
Functions
Constructor
Overlays.PlainArrow	A basic arrow.
Functions
Constructor	See Overlays.Arrow for allowed parameters for this overlay.
Overlays.Diamond	A diamond.
Functions
Constructor	See Overlays.Arrow for allowed parameters for this overlay.
Overlays.Label	A Label overlay.
Functions
Constructor
setLabel	sets the label’s, um, label.
StateMachine constructor

Properties

overlays

List of Overlays for this component.

Functions

addOverlay

this.addOverlay = function( overlay )

Adds an Overlay to the Connection.

Parameters

overlay

Overlay to add.

getOverlay

this.getOverlay = function( id )

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.

hideOverlay

this.hideOverlay = function( id )

Hides the overlay specified by the given id.

showOverlay

this.showOverlay = function( id )

Shows the overlay specified by the given id.

removeAllOverlays

this.removeAllOverlays = function()

Removes all overlays from the Connection, and then repaints.

setLabel

this.setLabel = function( l )

Sets the Connection’s label.

Parameters

l	label to set. May be a String, a Function that returns a String, or a params object containing { “label”, “labelStyle”, “location”, “cssClass” }

Properties

Defaults

These are the default settings for jsPlumb. They are what will be used if you do not supply specific pieces of information to the various API calls. A convenient way to implement your own look and feel can be to override these defaults by including a script somewhere after the jsPlumb include, but before you make any calls to jsPlumb.

Properties

Anchor The default anchor to use for all connections (both source and target). Default is “BottomCenter”.
Anchors The default anchors to use ([source, target]) for all connections. Defaults are [“BottomCenter”, “BottomCenter”].
Connector The default connector definition to use for all connections. Default is “Bezier”.
Container Optional selector or element id that instructs jsPlumb to append elements it creates to a specific element.
DragOptions The default drag options to pass in to connect, makeTarget and addEndpoint calls. Default is empty.
DropOptions The default drop options to pass in to connect, makeTarget and addEndpoint calls. Default is empty.
Endpoint The default endpoint definition to use for all connections (both source and target). Default is “Dot”.
Endpoints The default endpoint definitions ([ source, target ]) to use for all connections. Defaults are [“Dot”, “Dot”].
EndpointStyle The default style definition to use for all endpoints. Default is fillStyle:”#456”.
EndpointStyles The default style definitions ([ source, target ]) to use for all endpoints. Defaults are empty.
EndpointHoverStyle The default hover style definition to use for all endpoints. Default is null.
EndpointHoverStyles The default hover style definitions ([ source, target ]) to use for all endpoints. Defaults are null.
HoverPaintStyle The default hover style definition to use for all connections. Defaults are null.
LabelStyle The default style to use for label overlays on connections.
LogEnabled Whether or not the jsPlumb log is enabled. defaults to false.
Overlays The default overlay definitions. Defaults to an empty list.
MaxConnections The default maximum number of connections for an Endpoint. Defaults to 1.
MouseEventsEnabled Whether or not mouse events are enabled when using the canvas renderer. Defaults to true. The idea of this is just to give people a way to prevent all the mouse listeners from activating if they know they won’t need mouse events.
PaintStyle The default paint style for a connection. Default is line width of 8 pixels, with color “#456”.
RenderMode What mode to use to paint with. If you’re on IE<9, you don’t really get to choose this. You’ll just get VML. Otherwise, the jsPlumb default is to use Canvas elements.
Scope The default “scope” to use for connections. Scope lets you assign connections to different categories.

connectorClass

The CSS class to set on Connection elements. This value is a String and can have multiple classes; the entire String is appended as-is.

endpointClass

The CSS class to set on Endpoint elements. This value is a String and can have multiple classes; the entire String is appended as-is.

overlayClass

The CSS class to set on an Overlay that is an HTML element. This value is a String and can have multiple classes; the entire String is appended as-is.

Functions

bind

Bind to an event on jsPlumb.

Parameters

event

the event to bind. Available events on jsPlumb are:

jsPlumbConnection : notification that a new Connection was established. jsPlumb passes the new Connection to the callback.
jsPlumbConnectionDetached : notification that a Connection was detached. jsPlumb passes the detached Connection to the callback.
click : notification that a Connection was clicked. jsPlumb passes the Connection that was clicked to the callback.
dblclick : notification that a Connection was double clicked. jsPlumb passes the Connection that was double clicked to the callback.
endpointClick : notification that an Endpoint was clicked. jsPlumb passes the Endpoint that was clicked to the callback.
endpointDblClick : notification that an Endpoint was double clicked. jsPlumb passes the Endpoint that was double clicked to the callback.

callback

function to callback. This function will be passed the Connection/Endpoint that caused the event, and also the original event.

clearListeners

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

Parameters

event

optional. constrains the clear to just listeners for this event.

addClass

this.addClass = function( el,
clazz )

Helper method to abstract out differences in setting css classes on the different renderer types.

removeClass

this.removeClass = function( el,
clazz )

Helper method to abstract out differences in setting css classes on the different renderer types.

hasClass

this.hasClass = function( el,
clazz )

Helper method to abstract out differences in testing for css classes on the different renderer types.

addEndpoint

this.addEndpoint = function( el,
params,
referenceParams )

Adds an Endpoint to a given element or elements.

Parameters

el	Element to add the endpoint to. Either an element id, a selector representing some element(s), or an array of either of these.
params	Object containing Endpoint constructor arguments. For more information, see Endpoint.
referenceParams	Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements. The allowed values in this object are anything that ‘params’ can contain. See Endpoint.

Returns

The newly created Endpoint, if el referred to a single element. Otherwise, an array of newly created Endpoints.

Parameters

target	element to add the Endpoint to. Either an element id, a selector representing some element(s), or an array of either of these.
endpoints	List of objects containing Endpoint constructor arguments. one Endpoint is created for each entry in this list. See Endpoint’s constructor documentation.
referenceParams	Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements.

Returns

List of newly created Endpoints, one for each entry in the ‘endpoints’ argument.

animate

this.animate = function( el,
properties,
options )

This is a wrapper around the supporting library’s animate function; it injects a call to jsPlumb in the ‘step’ function (creating the ‘step’ function if necessary). This only supports the two-arg version of the animate call in jQuery, the one that takes an ‘options’ object as the second arg. MooTools has only one method, a two arg one. Which is handy. YUI has a one-arg method, so jsPlumb merges ‘properties’ and ‘options’ together for YUI.

Parameters

el	Element to animate. Either an id, or a selector representing the element.
properties	The ‘properties’ argument you want passed to the library’s animate call.
options	The ‘options’ argument you want passed to the library’s animate call.

Returns

void

connect

this.connect = function( params,
referenceParams )

Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).

Parameters

params	Object containing constructor arguments for the Connection. See Connection’s constructor documentation.
referenceParams	Optional object containing more constructor arguments for the Connection. Typically you would pass in data that a lot of Connections are sharing here, such as connector style etc, and then use the main params for data specific to this Connection.

Returns

The newly created Connection.

deleteEndpoint

this.deleteEndpoint = function( object )

Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too)

Parameters

object

either an Endpoint object (such as from an addEndpoint call), or a String UUID.

Returns

void

deleteEveryEndpoint

this.deleteEveryEndpoint = function()

Deletes every Endpoint, and their associated Connections, in this instance of jsPlumb. Does not unregister any event listeners (this is the only difference between this method and jsPlumb.reset).

Returns

void

detach

this.detach = function()

Detaches and then removes a Connection. From 1.3.5 this method has been altered to remove support for specifying Connections by various parameters; you can now pass in a Connection as the first argument and an optional parameters object as a second argument. If you need the functionality this method provided before 1.3.5 then you should use the getConnections method to get the list of Connections to detach, and then iterate through them, calling this for each one.

Parameters

connection	the Connection to detach
params	optional parameters to the detach call. valid values here are fireEvent : defaults to false; indicates you want jsPlumb to fire a connection detached event. The thinking behind this is that if you made a programmatic call to detach an event, you probably don’t need the callback. forceDetach : defaults to false. allows you to override any beforeDetach listeners that may be registered.

Returns

true if successful, false if not.

detachAllConnections

this.detachAllConnections = function( el,
params )

Removes all an element’s Connections.

Parameters

el	either the id of the element, or a selector for the element.
params	optional parameters. alowed values: fireEvent : defaults to true, whether or not to fire the detach event.

Returns

void

detachEveryConnection

this.detachEveryConnection = function( params )

Remove all Connections from all elements, but leaves Endpoints in place.

Parameters

params

optional params object containing: fireEvent : whether or not to fire detach events. defaults to true.

Returns

void

draggable

Initialises the draggability of some element or elements. You should use this instead of y our library’s draggable method so that jsPlumb can setup the appropriate callbacks. Your underlying library’s drag method is always called from this method.

Parameters

el	either an element id, a list of element ids, or a selector.
options	options to pass through to the underlying library

Returns

void

extend

this.extend = function( o1,
o2 )

Wraps the underlying library’s extend functionality.

Parameters

o1	object to extend
o2	object to extend o1 with

Returns

o1, extended with all properties from o2.

getDefaultEndpointType

this.getDefaultEndpointType = function()

Returns the default Endpoint type. Used when someone wants to subclass Endpoint and have jsPlumb return instances of their subclass. you would make a call like this in your class’s constructor: jsPlumb.getDefaultEndpointType().apply(this, arguments);

Returns

the default Endpoint function used by jsPlumb.

getDefaultConnectionType

this.getDefaultConnectionType = function()

Returns the default Connection type. Used when someone wants to subclass Connection and have jsPlumb return instances of their subclass. you would make a call like this in your class’s constructor: jsPlumb.getDefaultConnectionType().apply(this, arguments);

Returns

the default Connection function used by jsPlumb.

getConnections

this.getConnections = function( options )

Gets all or a subset of connections currently managed by this jsPlumb instance. If only one scope is passed in to this method, the result will be a list of connections having that scope (passing in no scope at all will result in jsPlumb assuming you want the default scope). If multiple scopes are passed in, the return value will be a map of { scope -> [ connection... ] }.

Parameters scope - if the only argument to getConnections is a string, jsPlumb will treat that string as a scope filter, and return a list of connections that are in the given scope. options - if the argument is a JS object, you can specify a finer-grained filter:

scope may be a string specifying a single scope, or an array of strings, specifying multiple scopes.
source either a string representing an element id, or a selector. constrains the result to connections having this source.
target either a string representing an element id, or a selector. constrains the result to connections having this target.

getAllConnections

this.getAllConnections = function()

Gets all connections, as a map of { scope -> [ connection... ] }.

getDefaultScope

this.getDefaultScope = function()

Gets the default scope for connections and endpoints. a scope defines a type of endpoint/connection; supplying a scope to an endpoint or connection allows you to support different types of connections in the same UI. but if you’re only interested in one type of connection, you don’t need to supply a scope. this method will probably be used by very few people; it’s good for testing though.

getEndpoint

Gets an Endpoint by UUID

Parameters

uuid	the UUID for the Endpoint

Returns

Endpoint with the given UUID, null if nothing found.

hide

this.hide = function( el,
changeEndpoints )

Sets an element’s connections to be hidden.

Parameters

el	either the id of the element, or a selector for the element.
changeEndpoints	whether not to also hide endpoints on the element. by default this is false.

Returns

void

makeTarget

Makes some DOM element a Connection target, allowing you to drag connections to it without having to register any Endpoints on it first. When a Connection is established, the endpoint spec that was passed in to this method is used to create a suitable Endpoint (the default will be used if you do not provide one).

Parameters

string id or element selector for the element to make a target.

params

JS object containing parameters: endpoint optional. specification of an endpoint to create when a connection is created. scope optional. scope for the drop zone. dropOptions optional. same stuff as you would pass to dropOptions of an Endpoint definition. deleteEndpointsOnDetach optional, defaults to true. whether or not to delete any Endpoints created by a connection to this target if the connection is subsequently detached. this will not remove Endpoints that have had more Connections attached to them after they were created.

makeSource

Makes some DOM element a Connection source, allowing you to drag connections from it without having to register any Endpoints on it first. When a Connection is established, the endpoint spec that was passed in to this method is used to create a suitable Endpoint (the default will be used if you do not provide one).

Parameters

string id or element selector for the element to make a source.

params

JS object containing parameters: endpoint optional. specification of an endpoint to create when a connection is created. parent optional. the element to add Endpoints to when a Connection is established. if you omit this, Endpoints will be added to ‘el’. scope optional. scope for the connections dragged from this element. dragOptions optional. same stuff as you would pass to dragOptions of an Endpoint definition. deleteEndpointsOnDetach optional, defaults to false. whether or not to delete any Endpoints created by a connection from this source if the connection is subsequently detached. this will not remove Endpoints that have had more Connections attached to them after they were created.

ready

this.ready = function( fn )

Helper method to bind a function to jsPlumb’s ready event.

repaint

this.repaint = function( el )

Repaints an element and its connections. This method gets new sizes for the elements before painting anything.

Parameters

el	either the id of the element or a selector representing the element.

Returns

void

Returns

void

removeAllEndpoints

this.removeAllEndpoints = function( el )

Removes all Endpoints associated with a given element. Also removes all Connections associated with each Endpoint it removes.

Parameters

el	either an element id, or a selector for an element.

Returns

void

setAutomaticRepaint

this.setAutomaticRepaint = function( value )

Sets/unsets automatic repaint on window resize.

Parameters

value

whether or not to automatically repaint when the window is resized.

Returns: void

setDefaultScope

this.setDefaultScope = function( scope )

Sets the default scope for Connections and Endpoints. A scope defines a type of Endpoint/Connection; supplying a scope to an Endpoint or Connection allows you to support different types of Connections in the same UI. If you’re only interested in one type of Connection, you don’t need to supply a scope. This method will probably be used by very few people; it just instructs jsPlumb to use a different key for the default scope.

Parameters

scope

scope to set as default.

setDraggable

this.setDraggable = _setDraggable; this.setDebugLog = function( debugLog )

Sets whether or not a given element is draggable, regardless of what any jsPlumb command may request.

Parameters

el	either the id for the element, or a selector representing the element.

Returns

void

setRepaintFunction

this.setRepaintFunction = function( f )

Sets the function to fire when the window size has changed and a repaint was fired.

Parameters

f	Function to execute.

Returns: void

setMouseEventsEnabled

this.setMouseEventsEnabled = function( enabled )

Sets whether or not mouse events are enabled. Default is true.

Parameters

enabled

whether or not mouse events should be enabled.

Returns

void

setSuspendDrawing

Suspends drawing operations. This can be used when you have a lot of connections to make or endpoints to register; it will save you a lot of time.

setRenderMode

this.setRenderMode = function( mode )

Sets render mode: jsPlumb.CANVAS, jsPlumb.SVG or jsPlumb.VML. jsPlumb will fall back to VML if it determines that what you asked for is not supported (and that VML is). If you asked for VML but the browser does not support it, jsPlumb uses SVG.

Returns

the render mode that jsPlumb set, which of course may be different from that requested.

show

this.show = function( el,
changeEndpoints )

Sets an element’s connections to be visible.

Parameters

el	either the id of the element, or a selector for the element.
changeEndpoints	whether or not to also change the visible state of the endpoints on the element. this also has a bearing on other connections on those endpoints: if their other endpoint is also visible, the connections are made visible.

Returns

void

sizeCanvas

this.sizeCanvas = function( canvas,
x,
y,
w,
h )

Helper to size a canvas. You would typically use this when writing your own Connector or Endpoint implementation.

Parameters

x	[int] x position for the Canvas origin
y	[int] y position for the Canvas origin
w	[int] width of the canvas
h	[int] height of the canvas

Returns

void

toggleVisible

Toggles visibility of an element’s Connections.

Parameters

el	either the element’s id, or a selector representing the element.
changeEndpoints	whether or not to also toggle the endpoints on the element.

Returns

void, but should be updated to return the current state

toggleDraggable

Toggles draggability (sic?) of an element’s Connections.

Parameters

el	either the element’s id, or a selector representing the element.

Returns

The current draggable state.

unload

this.unload = function()

Unloads jsPlumb, deleting all storage. You should call this from an onunload attribute on the <body> element.

Returns

void

Connection

The connecting line between two Endpoints.

Summary

Functions and Properties
Connection	Connection constructor.
sourceId	Id of the source element in the connection.
targetId	Id of the target element in the connection.
scope	Optional scope descriptor for the connection.
endpoints	Array of [source, target] Endpoint objects.
isDetachable	Returns whether or not this connection can be detached from its target/source endpoint.
setDetachable	Sets whether or not this connection is detachable.
setConnector
connector	The underlying Connector for this Connection (eg.
bind	Bind to an event on the Connection.
setPaintStyle	Sets the Connection’s paint style and then repaints the Connection.
setHoverPaintStyle	Sets the paint style to use when the mouse is hovering over the Connection.
setHover	Sets/unsets the hover state of this Connection.
repaint	Repaints the Connection.

Functions and Properties

Connection

var Connection = function( params )

Connection constructor.

Parameters

source	either an element id, a selector for an element, or an Endpoint.
target	either an element id, a selector for an element, or an Endpoint
scope	scope descriptor for this connection. optional.
container	optional id or selector instructing jsPlumb where to attach all the elements it creates for this connection. you should read the documentation for a full discussion of this.
endpoint	Optional. Endpoint definition to use for both ends of the connection.
endpoints	Optional. Array of two Endpoint definitions, one for each end of the Connection. This and ‘endpoint’ are mutually exclusive parameters.
endpointStyle	Optional. Endpoint style definition to use for both ends of the Connection.
endpointStyles	Optional. Array of two Endpoint style definitions, one for each end of the Connection. This and ‘endpoint’ are mutually exclusive parameters.
paintStyle	Parameters defining the appearance of the Connection. Optional; jsPlumb will use the defaults if you supply nothing here.
hoverPaintStyle	Parameters defining the appearance of the Connection when the mouse is hovering over it. Optional; jsPlumb will use the defaults if you supply nothing here (note that the default hoverPaintStyle is null).
overlays	Optional array of Overlay definitions to appear on this Connection.
drawEndpoints	if false, instructs jsPlumb to not draw the endpoints for this Connection. Be careful with this: it only really works when you tell jsPlumb to attach elements to the document body. Read the documentation for a full discussion of this.

sourceId

Id of the source element in the connection.

targetId

Id of the target element in the connection.

scope

Optional scope descriptor for the connection.

endpoints

Array of [source, target] Endpoint objects.

isDetachable

this.isDetachable = function()

Returns whether or not this connection can be detached from its target/source endpoint. by default this is false; use it in conjunction with the ‘reattach’ parameter.

setDetachable

this.setDetachable = function( detachable )

Sets whether or not this connection is detachable.

setConnector

this.setConnector = function( connector,
doNotRepaint )

Sets the Connection’s connector (eg “Bezier”, “Flowchart”, etc). You pass a Connector definition into this method

the same thing that you would set as the ‘connector’ property on a jsPlumb.connect call.

Parameters

connector

Connector definition

connector

The underlying Connector for this Connection (eg. a Bezier connector, straight line connector, flowchart connector etc)

bind

Bind to an event on the Connection.

Parameters

event

the event to bind. Available events on a Connection are:

click : notification that a Connection was clicked.
dblclick : notification that a Connection was double clicked.
mouseenter : notification that the mouse is over a Connection.
mouseexit : notification that the mouse exited a Connection.

callback

function to callback. This function will be passed the Connection that caused the event, and also the original event.

setPaintStyle

Sets the Connection’s paint style and then repaints the Connection.

Parameters

style

Style to use.

setHoverPaintStyle

Sets the paint style to use when the mouse is hovering over the Connection. 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	Style to use when the mouse is hovering.
doNotRepaint	if true, the Connection will not be repainted. useful when setting things up initially.

setHover

Sets/unsets the hover state of this Connection.

Parameters

hover	hover state boolean
ignoreAttachedElements	if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops.

repaint

this.repaint = function( params )

Repaints the Connection.

Endpoint

Models an endpoint. Can have 1 to ‘maxConnections’ Connections emanating from it (set maxConnections to -1 to allow unlimited). Typically, 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.

Summary

Functions
Endpoint	Endpoint constructor.
bind	Bind to an event on the Endpoint.
setPaintStyle	Sets the Endpoint’s paint style and then repaints the Endpoint.
setHoverPaintStyle	Sets the paint style to use when the mouse is hovering over the Endpoint.
setHover	Sets/unsets the hover state of this Endpoint.
isVisible	Returns whether or not the Endpoint is currently visible.
setVisible	Sets whether or not the Endpoint is currently visible.
Properties
canvas	The Endpoint’s Canvas.
connections	List of Connections this Endpoint is attached to.
scope	Scope descriptor for this Endpoint.
Functions
addConnection	Adds a Connection to this Endpoint.
detach	Detaches the given Connection from this Endpoint.
detachAll	Detaches all Connections this Endpoint has.
detachFrom	Removes any connections from this Endpoint that are connected to the given target endpoint.
detachFromConnection	Detach this Endpoint from the Connection, but leave the Connection alive.
getElement	Returns the DOM element this Endpoint is attached to.
setElement	Sets the DOM element this Endpoint is attached to.
getUuid	Returns the UUID for this Endpoint, if there is one.
isConnectedTo	Returns whether or not this endpoint is connected to the given Endpoint.
isFull	Returns whether or not the Endpoint can accept any more Connections.
setDragAllowedWhenFull	Sets whether or not connections can be dragged from this Endpoint once it is full.
setStyle	Sets the paint style of the Endpoint.
paint	Paints the Endpoint, recalculating offset and anchor positions if necessary.

Functions

Endpoint

var Endpoint = function( params )

Endpoint constructor.

Parameters

anchor	definition of the Anchor for the endpoint. You can include one or more Anchor definitions here; if you include more than one, jsPlumb creates a ‘dynamic’ Anchor, ie. an Anchor which changes position relative to the other elements in a Connection. Each Anchor definition can be either a string nominating one of the basic Anchors provided by jsPlumb (eg. “TopCenter”), or a four element array that designates the Anchor’s location and orientation (eg, and this is equivalent to TopCenter, [ 0.5, 0, 0, -1 ]). To provide more than one Anchor definition just put them all in an array. You can mix string definitions with array definitions.
endpoint	optional Endpoint definition. This takes the form of either a string nominating one of the basic Endpoints provided by jsPlumb (eg. “Rectangle”), or an array containing [name,params] for those cases where you don’t wish to use the default values, eg. [ “Rectangle”, { width:5, height:10 } ].
paintStyle	endpoint style, a js object. may be null.
hoverPaintStyle	style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null.
source	element the Endpoint is attached to, of type String (an element id) or element selector. Required.
canvas	canvas element to use. may be, and most often is, null.
container	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	optional list of Connections to configure the Endpoint with.
isSource	boolean. indicates the endpoint can act as a source of new connections. Optional; defaults to false.
maxConnections	integer; defaults to 1. a value of -1 means no upper limit.
dragOptions	if isSource is set to true, you can supply arguments for the underlying library’s drag method. Optional; defaults to null.
connectorStyle	if isSource is set to true, this is the paint style for Connections from this Endpoint. Optional; defaults to null.
connectorHoverStyle	if isSource is set to true, this is the hover paint style for Connections from this Endpoint. Optional; defaults to null.
connector	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	optional array of Overlay definitions that will be applied to any Connection from this Endpoint.
isTarget	boolean. indicates the endpoint can act as a target of new connections. Optional; defaults to false.
dropOptions	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	optional boolean that 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.

bind

Bind to an event on the Endpoint.

Parameters

event

the event to bind. Available events on an Endpoint are:

click : notification that a Endpoint was clicked.
dblclick : notification that a Endpoint was double clicked.
mouseenter : notification that the mouse is over a Endpoint.
mouseexit : notification that the mouse exited a Endpoint.

callback

function to callback. This function will be passed the Endpoint that caused the event, and also the original event.

setPaintStyle

Sets the Endpoint’s paint style and then repaints the Endpoint.

Parameters

style

Style to use.

setHoverPaintStyle

Sets the paint style to use when the mouse is hovering over the Endpoint. 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	Style to use when the mouse is hovering.
doNotRepaint	if true, the Endpoint will not be repainted. useful when setting things up initially.

setHover

Sets/unsets the hover state of this Endpoint.

Parameters

hover	hover state boolean
ignoreAttachedElements	if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops.

isVisible

this.isVisible = function()

Returns whether or not the Endpoint is currently visible.

setVisible

this.setVisible = function( v,
doNotChangeConnections,
doNotNotifyOtherEndpoint )

Sets whether or not the Endpoint is currently visible.

Parameters

visible	whether or not the Endpoint should be visible.
doNotChangeConnections	Instructs jsPlumb to not pass the visible state on to any attached Connections. defaults to false.
doNotNotifyOtherEndpoint	Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections. defaults to false.

Properties

canvas

The Endpoint’s Canvas.

connections

List of Connections this Endpoint is attached to.

scope

Scope descriptor for this Endpoint.

Functions

addConnection

this.addConnection = function( connection )

Adds a Connection to this Endpoint.

Parameters

connection

the Connection to add.

detach

this.detach = function( connection,
ignoreTarget,
forceDetach,
fireEvent )

Detaches the given Connection from this Endpoint.

Parameters

connection	the Connection to detach.
ignoreTarget	optional; tells the Endpoint to not notify the Connection target that the Connection was detached. The default behaviour is to notify the target.

detachAll

this.detachAll = function( fireEvent )

Detaches all Connections this Endpoint has.

Parameters

fireEvent

whether or not to fire the detach event. defaults to false.

detachFrom

this.detachFrom = function( targetEndpoint,
fireEvent )

Removes any connections from this Endpoint that are connected to the given target endpoint.

Parameters

targetEndpoint	Endpoint from which to detach all Connections from this Endpoint.
fireEvent	whether or not to fire the detach event. defaults to false.

detachFromConnection

this.detachFromConnection = function( connection )

Detach this Endpoint from the Connection, but leave the Connection alive. Used when dragging.

Parameters

connection

Connection to detach from.

getElement

this.getElement = function()

Returns the DOM element this Endpoint is attached to.

setElement

this.setElement = function( el )

Sets the DOM element this Endpoint is attached to.

getUuid

this.getUuid = function()

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

isConnectedTo

this.isConnectedTo = function( endpoint )

Returns whether or not this endpoint is connected to the given Endpoint.

Parameters

endpoint

Endpoint to test.

isFull

this.isFull = function()

Returns whether or not the Endpoint can accept any more Connections.

setDragAllowedWhenFull

this.setDragAllowedWhenFull = function( 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

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

setStyle

Sets the paint style of the Endpoint. This is a JS object of the same form you supply to a jsPlumb.addEndpoint or jsPlumb.connect call. TODO move setStyle into EventGenerator, remove it from here. is Connection’s method currently setPaintStyle ? wire that one up to setStyle and deprecate it if so.

Parameters

style

Style object to set, for example {fillStyle:”blue”}.

@deprecated use setPaintStyle instead.

paint

this.paint = function( params )

Paints the Endpoint, recalculating offset and anchor positions if necessary. This does NOT paint any of the Endpoint’s connections.

Parameters

timestamp	optional timestamp advising the Endpoint of the current paint time; if it has painted already once for this timestamp, it will not paint again.
canvas	optional Canvas to paint on. Only used internally by jsPlumb in certain obscure situations.
connectorPaintStyle	paint style of the Connector attached to this Endpoint. Used to get a fillStyle if nothing else was supplied.

Connectors.Straight

The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters.

Connectors.Flowchart

Provides ‘flowchart’ connectors, consisting of vertical and horizontal line segments.

Summary

Functions
Constructor

Functions

Constructor

Parameters

stub	minimum length for the stub at each end of the connector. defaults to 30 pixels.

Endpoints.Dot

A round endpoint, with default radius 10 pixels.

Summary

Functions
Constructor

Functions

Constructor

Parameters

radius

radius of the endpoint. defaults to 10 pixels.

Endpoints.Rectangle

A Rectangular Endpoint, with default size 20x20.

Summary

Functions
Constructor

Functions

Constructor

Parameters

width	width of the endpoint. defaults to 20 pixels.
height	height of the endpoint. defaults to 20 pixels.

Endpoints.Image

Draws an image as the Endpoint.

Summary

Functions
Constructor

Functions

Constructor

Parameters

src	location of the image to use.

Endpoints.Blank

An Endpoint that paints nothing (visible) on the screen. Supports cssClass and hoverClass parameters like all Endpoints.

Endpoints.Triangle

A triangular Endpoint.

Summary

Functions
Constructor

Functions

Constructor

Parameters

width	width of the triangle’s base. defaults to 55 pixels.
height	height of the triangle from base to apex. defaults to 55 pixels.

Overlays.Arrow

An arrow overlay, defined by four points: the head, the two sides of the tail, and a ‘foldback’ point at some distance along the length of the arrow that lines from each tail point converge into. The foldback point is defined using a decimal that indicates some fraction of the length of the arrow and has a default value of 0.623. A foldback point value of 1 would mean that the arrow had a straight line across the tail.

Summary

Functions
Constructor

Functions

Constructor

Parameters

length	distance in pixels from head to tail baseline. default 20.
width	width in pixels of the tail baseline. default 20.
fillStyle	style to use when filling the arrow. defaults to “black”.
strokeStyle	style to use when stroking the arrow. defaults to null, which means the arrow is not stroked.
lineWidth	line width to use when stroking the arrow. defaults to 1, but only used if strokeStyle is not null.
foldback	distance (as a decimal from 0 to 1 inclusive) along the length of the arrow marking the point the tail points should fold back to. defaults to 0.623.
location	distance (as a decimal from 0 to 1 inclusive) marking where the arrow should sit on the connector. defaults to 0.5.
direction	indicates the direction the arrow points in. valid values are -1 and 1; 1 is default.

Overlays.PlainArrow

A basic arrow. This is in fact just one instance of the more generic case in which the tail folds back on itself to some point along the length of the arrow: in this case, that foldback point is the full length of the arrow. so it just does a ‘call’ to Arrow with foldback set appropriately.

Summary

Functions
Constructor	See Overlays.Arrow for allowed parameters for this overlay.

Functions

Constructor

See Overlays.Arrow for allowed parameters for this overlay.

Overlays.Diamond

A diamond. Like PlainArrow, this is a concrete case of the more generic case of the tail points converging on some point...it just happens that in this case, that point is greater than the length of the the arrow.

this could probably do with some help with positioning...due to the way it reuses the Arrow paint code, what Arrow thinks is the center is actually 1/4 of the way along for this guy. but we don’t have any knowledge of pixels at this point, so we’re kind of stuck when it comes to helping out the Arrow class. possibly we could pass in a ‘transpose’ parameter or something. the value would be -l/4 in this case - move along one quarter of the total length.

Summary

Functions
Constructor	See Overlays.Arrow for allowed parameters for this overlay.

Functions

Constructor

See Overlays.Arrow for allowed parameters for this overlay.

Overlays.Label

A Label overlay. For all different renderer types (SVG/Canvas/VML), jsPlumb draws a Label overlay as a styled DIV. Version 1.3.0 of jsPlumb introduced the ability to set css classes on the label; this is now the preferred way for you to style a label. The ‘labelStyle’ parameter is still supported in 1.3.0 but its usage is deprecated. Under the hood, jsPlumb just turns that object into a bunch of CSS directive that it puts on the Label’s ‘style’ attribute, so the end result is the same.

Summary

Functions
Constructor
setLabel	sets the label’s, um, label.
StateMachine constructor

Functions

Constructor

Parameters

cssClass	optional css class string to append to css class. This string is appended “as-is”, so you can of course have multiple classes defined. This parameter is preferred to using labelStyle, borderWidth and borderStyle.
label	the label to paint. May be a string or a function that returns a string. Nothing will be painted if your label is null or your label function returns null. empty strings will be painted.
location	distance (as a decimal from 0 to 1 inclusive) marking where the label should sit on the connector. defaults to 0.5.

setLabel

this.setLabel = function( l )

sets the label’s, um, label. you would think i’d call this function ‘setText’, but you can pass either a Function or a String to this, so it makes more sense as ‘setLabel’.

StateMachine constructor

Allowed parameters

curviness	measure of how “curvy” the connectors will be. this is translated as the distance that the Bezier curve’s control point is from the midpoint of the straight line connecting the two endpoints, and does not mean that the connector is this wide. The Bezier curve never reaches its control points; they act as gravitational masses. defaults to 10.
margin	distance from element to start and end connectors, in pixels. defaults to 5.
proximityLimit	sets the distance beneath which the elements are consider too close together to bother with fancy curves. by default this is 80 pixels.
loopbackRadius	the radius of a loopback connector. optional; defaults to 25.

jsPlumb 1.3.5

Properties

overlays

Functions

addOverlay

Parameters

getOverlay

hideOverlay

showOverlay

removeAllOverlays

setLabel

Parameters

Properties

Defaults

Properties

connectorClass

endpointClass

overlayClass

Functions

bind

Parameters

clearListeners

Parameters

addClass

removeClass

hasClass

addEndpoint

Parameters

Returns

See Also

addEndpoints

Parameters

Returns

See Also

animate

Parameters

Returns

connect

Parameters

Returns

deleteEndpoint

Parameters

Returns

deleteEveryEndpoint

Returns

detach

Parameters

Returns

detachAllConnections

Parameters

Returns

detachEveryConnection

Parameters

Returns

See Also

draggable

Parameters

Returns

extend

Parameters

Returns

getDefaultEndpointType

Returns

getDefaultConnectionType

Returns

getConnections

getAllConnections

getDefaultScope

getEndpoint

Parameters

Returns

hide

Parameters

Returns

makeTarget

Parameters

makeSource

Parameters

ready

repaint