Show:

jsPlumbInstance Class

Extends jsPlumbUtil.EventGenerator
Defined in: doc/api/jsplumb-api.js:10

This class models an instance of jsPlumb. The global object JsPlumb is both a static module and an instance of this class, and it is an instance of this class that is returned from JsPlumb. A jsPlumbInstance manages a set of Endpoints and Connections.

Item Index

Methods

Properties

Methods

addEndpoint

(
  • el
  • [params]
  • [referenceParams]
)
Object | Array

Defined in doc/api/jsplumb-api.js:55

Adds an Endpoint to a given element or elements. See also jsPlumbInstance.addEndpoints.

Parameters:

  • el String | Object | Array

    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 optional

    Object containing Endpoint constructor arguments. For more information, see {@link Endpoint}

  • [referenceParams] Object optional

    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 .

Returns:

Object | Array:

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

addEndpoints

(
  • target
  • endpoints
  • [referenceParams]
)
Array

Defined in doc/api/jsplumb-api.js:65

Adds a list of Endpoints to a given element or elements. See also jsPlumbInstance.addEndpoint.

Parameters:

  • target String | Object | Array

    Element to add the Endpoint to. Either an element id, a selector representing some element(s), or an array of either of these.

  • endpoints Array

    List of objects containing Endpoint constructor arguments. one Endpoint is created for each entry in this list. See {@link Endpoint}'s constructor documentation.

  • [referenceParams] Object optional

    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:

Array:

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

animate

(
  • el
  • [properties]
  • [options]
)

Defined in doc/api/jsplumb-api.js:142

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 String | Element | Selector

    Element to animate. Either an id, or a selector representing the element.

  • [properties] Object optional

    The 'properties' argument you want passed to the library's animate call.

  • [options] Object optional

    The 'options' argument you want passed to the library's animate call.

batch

(
  • fn
  • [doNotRepaintAfterwards=false]
)

Defined in doc/api/jsplumb-api.js:128

Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you set 'doNotRepaintAfterwards' to true)

Parameters:

  • fn Function

    Function to execute while drawing is suspended.

  • [doNotRepaintAfterwards=false] Boolean optional

    If true, will not run a repaint after running the function supplied to this function.

bind

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

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:89

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: doc/api/util-api.js:126

Removes all listeners.

connect

(
  • params
  • referenceParams
)
Connection

Defined in doc/api/jsplumb-api.js:74

Establishes a {@link Connection} between two elements (or {@link Endpoint}s, which are themselves registered to elements).

Parameters:

  • params Object

    Connection params

    • source String | Object | Endpoint

      Source of the connection. May be an id, or an element, or an Endpoint.

    • target String | Object | Endpoint

      Target of the connection. May be an id, or an element, or an Endpoint.

    • [uuids] String optional

      Optional array of UUIDs of the two Endpoints to connect. If you supply this you do not need to supply source or target.

    • [type] String optional

      Optional type for the Connection.

    • [pointer-events] String optional

      Optional pointer-events value for the Connection (only used by the SVG renderer)

    • [connector] String | Array optional

      The type of Connector to use. Defaults to whatever is set in the defaults for the instance. This parameter can be either a String - a named Connector, such as "Straight" - or an array consisting of a Connector name plus constructor parameters. For further information see the main documentation.

  • referenceParams Object

    Optional second set of parameters, which will be merged into a new object along with params. This can be useful if you have some common settings to share between multiple connect calls. Valid values in this object are anything that is valid in params.

Returns:

Connection:

The Connection that was created, or null if either the source or target element was not found (in which case the missin element is also logged).

deleteEndpoint

(
  • object
  • [doNotRepaintAfterwards=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:759

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

Parameters:

  • object String | Endpoint

    Either a string, representing the endpoint's uuid, or an Endpoint.

  • [doNotRepaintAfterwards=false] Boolean optional

    Indicates whether or not to repaint everything after this call.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

deleteEveryEndpoint

() JsPlumbInstance

Defined in doc/api/jsplumb-api.js:767

Deletes every Endpoint and their associated Connections. Distinct from {@link jsPlumbInstance#reset} because we dont clear listeners here, so for that reason this function is often the best way to reset a jsPlumb instance.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

detach

(
  • connection
  • [params]
)
Boolean

Defined in doc/api/jsplumb-api.js:695

Detaches a Connection.

Parameters:

  • connection Connection

    The Connection to detach

  • [params] Object optional

    Optional parameters to the detach call.

    • [fireEvent=false] Boolean optional

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

      Allows you to override any beforeDetach listeners that may be registered.

Returns:

Boolean:

True if successful, false if not.

detachAllConnections

(
  • el
  • [params]
  • [paramsforceDetach=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:709

Removes all an element's Connections.

Parameters:

  • el Object

    Either the id of the element, or a selector for the element.

  • [params] Object optional

    Optional parameters.

    • [fireEvent=true] Boolean optional

      Whether or not to fire the detach event.

  • [paramsforceDetach=false] Boolean optional

    If true, this call will ignore any beforeDetach interceptors.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

detachEveryConnection

(
  • [params]
  • [paramsforceDetach=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:718

Remove all Connections from all elements, but leaves Endpoints in place ((unless a connection is set to auto delete its Endpoints).

Parameters:

  • [params] Object optional

    optional params object for the call

    • [fireEvent=true] Boolean optional

      Whether or not to fire detach events

  • [paramsforceDetach=false] Boolean optional

    If true, this call will ignore any beforeDetach interceptors.

Returns:

JsPlumbInstance:

The current jsPlumb Instance

doWhileSuspended

() deprecated

Defined in doc/api/jsplumb-api.js:136

Deprecated: Will be removed in version 2.0.0

Original method name for the batch function.

draggable

(
  • el
  • [options]
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:728

Initialises some element or elements to be draggable. You should use this instead of your 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 Object

    Either an element id, an element, a list of element ids, or a selector.

  • [options] Object optional

    Options to pass through to the underlying library. A common use case in jQueryUI, for instance, is to provide a containment parameter:

        `jsPlumb.draggable("someElementId", {
       containment:"parent"
     });`

Returns:

JsPlumbInstance:

The current jsPlumb instance.

empty

(
  • el
)

Defined in doc/api/jsplumb-api.js:649

Empties out the given element: all Endpoints and Connections belonging to child elements, as well as - of course - the child elements themselves. Endpoints and Connections belonging to the element itself are retained.

Parameters:

  • el String | Element | Selector

    The element in question.

extend

(
  • o1
  • o2
  • [filterList]
)
Object static

Defined in doc/api/jsplumb-api.js:174

Extends o1 with the properties of o2, optionally filtering via the values in filterList.

Parameters:

  • o1 Object

    Object to extend into

  • o2 Object

    Object to extend from

  • [filterList] String optional

    Optional list of property names to filter by - if this is provided, only values whose keys are in this list will be copied into o1.

Returns:

Object:

The object into which values were extended.

fire

(
  • event
  • value
  • originalEvent
)
private

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:97

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

getAllConnections

() Object

Defined in doc/api/jsplumb-api.js:396

Gets all Connections the given jsPlumbInstance is managing.

Returns:

Object:

All connections, as a map of the form:

{ scope -> [ connection... ] }

getConnections

(
  • scope
  • options
  • [flat=false]
)
Array | Map

Defined in doc/api/jsplumb-api.js:184

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 String

    If the first argument supplied to this function is a string, it is treated as a scope filter, and this method will return a list of connections that are in the given scope. use '*' for all scopes.

  • options Object

    Filter options

    • [scope] String | String optional

      may be a string specifying a single scope, or an array of strings, specifying multiple scopes. Also may have the value '*', indicating any scope.

    • [source] String | String | Selector optional

      either a string representing an element id, a selector, or an array of ids. Also may have the value '*', indicating any source. Constrains the result to connections having this/these element(s) as source.

    • [target] String | String | Selector optional

      either a string representing an element id, a selector, or an array of ids. Also may have the value '*', indicating any target. Constrains the result to connections having this/these element(s) as target.

  • [flat=false] Boolean optional

    return results in a flat array (don't return an object whose keys are scopes and whose values are lists per scope).

Returns:

Array | Map:

If only one scope was requested, a list of Connections that match the criteria. Otherwise, a map of [scope->connection lists].

getContainer

() Element

Defined in doc/api/jsplumb-api.js:42

Gets the current element in use as the Container for the given jsPlumbInstance

Returns:

Element:

The current element in use as the Container.

getDefaultConnectionType

() static

Defined in doc/api/jsplumb-api.js:163

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.

getDefaultEndpointType

() static

Defined in doc/api/jsplumb-api.js:152

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.

getDefaultScope

() String

Defined in doc/api/jsplumb-api.js:404

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.

Returns:

String:

The default scope for the given jsPlumbInstance

getEndpoint

(
  • uuid
)
Endpoint

Defined in doc/api/jsplumb-api.js:423

Gets an Endpoint by UUID

Parameters:

  • uuid String

    The UUID for the Endpoint

Returns:

Endpoint:

Endpoint with the given UUID, null if nothing found.

getEndpoints

(
  • el
)
Endpoint[]

Defined in doc/api/jsplumb-api.js:416

Gets the list of Endpoints for a given element.

Parameters:

  • el String | Element | Selector

    The element to get endpoints for.

Returns:

Endpoint[]:

An array of Endpoints for the specified element.

getInstance

(
  • [_defaults]
)

Defined in doc/api/jsplumb-api.js:677

Gets a new instance of jsPlumb.

Parameters:

  • [_defaults] Object optional

    Optional default settings for the new instance.

getRenderMode

() String

Defined in doc/api/jsplumb-api.js:671

Gets the current render mode for this instance of jsPlumb.

Returns:

String:

The current render mode - "svg" or "vml".

getScope

(
  • Element
)
String

Defined in doc/api/jsplumb-api.js:532

Gets the source or target scope of some element that has that has been configured as a connection source with makeTarget and/or makeSource, defaulting to the source scope if the element has been configured for both.

Parameters:

  • Element Element | String

    to get source or target scope for.

Returns:

String:

Source or Target scope (you will get Source if the element is both a source and a target), or the default scope if nothing was explicitly set.

getSelector

(
  • [context]
  • spec
)

Defined in doc/api/jsplumb-api.js:743

This method takes the given selector spec and, using the current underlying library, turns it into a selector from that library. This method exists really as a helper function for those applications where you're writing jsPlumb code that will target more than one library (such as in the case of the jsPlumb demo pages).

Parameters:

  • [context] Element | Selector optional

    An element to search from. may be omitted (not null: omitted. as in you only pass one argument to the function)

  • spec String

    A valid selector string.

getSourceScope

(
  • Element
)
String

Defined in doc/api/jsplumb-api.js:518

Gets the source scope of some element that has that has been configured as a connection source with makeSource

Parameters:

  • Element Element | String

    to get source scope for.

Returns:

String:

Source scope, or the default scope if nothing was explicitly set.

getTargetScope

(
  • Element
)
String

Defined in doc/api/jsplumb-api.js:525

Gets the target scope of some element that has that has been configured as a connection source with makeTarget

Parameters:

  • Element Element | String

    to get target scope for.

Returns:

String:

Target scope, or the default scope if nothing was explicitly set.

getType

(
  • id
  • typeDescriptor
)
Object

Defined in doc/api/jsplumb-api.js:774

Returns the given type's specification.

Parameters:

  • id String

    Id of the type to retrieve

  • typeDescriptor String

    "connection" or "endpoint" - the category of Type to get.

Returns:

Object:

Type specification, it if exists, null otherwise.

hide

(
  • el
  • [changeEndpoints=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:331

Sets an element's connections to be hidden.

Parameters:

  • el String | Element | Selector

    Element to hide connections for.

  • [changeEndpoints=false] Boolean optional

    Whether not to also hide endpoints on the element.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

importDefaults

(
  • defaults
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:18

Imports all the given defaults into this instance of jsPlumb.

Parameters:

  • defaults Object

    The defaults to import.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

isHoverSuspended

() Boolean

Defined in doc/api/jsplumb-api.js:319

Returns:

Boolean:

Whether or not hover effects are currently suspended.

isSource

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:555

Returns whether or not the given element is registered as a connection source.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

True if source, false if not.

isSourceEnabled

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:562

Returns whether or not the given connection source is enabled.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

True if enabled, false if not.

isSuspendDrawing

() Boolean

Defined in doc/api/jsplumb-api.js:122

Returns whether or not drawing is currently suspended.

Returns:

Boolean:

True if drawing suspended, false otherwise.

isSuspendEvents

() Boolean

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:121

Checks whether or not events are currently suspended.

Returns:

Boolean:

True if events are suspended, false otherwise.

isTarget

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:585

Returns whether or not the given element is registered as a connection target.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

True if source, false if not.

isTargetEnabled

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:592

Returns whether or not the given connection target is enabled.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

True if enabled, false if not.

jsPlumbUtil.replace

(
  • inObj
  • path
  • value
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:131

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.

makeSource

(
  • el
  • params
)

Defined in doc/api/jsplumb-api.js:458

Makes some DOM element(s) a Connection source, allowing you to drag connections from it/them without having to first register any Endpoints. 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:

  • el String | Element | Selector

    String id, element, or element selector for the element(s) to make a source.

  • params Object

    Parameters for the call

    • [endpoint] String | Array optional

      Specification of an endpoint to create when a connection is created.

    • [parent] String | Element optional

      The element to add Endpoints to when a Connection is established. if you omit this, Endpoints will be added to 'el'.

    • [scope] String optional

      Scope for the connections dragged from this element.

    • [dragOptions] Object optional

      Same stuff as you would pass to dragOptions of an Endpoint definition.

    • [deleteEndpointsOnDetach=false] Boolean optional

      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.

    • [filter] Function optional

      Function to call when the user presses the mouse button to start a drag. This function is passed the original event and the element on which the associated makeSource call was made. If it returns anything other than false, the drag begins as usual. But if it returns false (the boolean false, not just something falsey), the drag is aborted.

makeTarget

(
  • el
  • params
)

Defined in doc/api/jsplumb-api.js:431

Makes some DOM element(s) a Connection target, allowing you to drag connections to it/them without having to first register any Endpoints. 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:

  • el String | Element | Selector

    Element(s) to turn into a connection target.

  • params Object

    Parameters for the call

    • [endpoint] String | Array optional

      Specification of an Endpoint to create when a Connection is established.

    • [scope] String optional

      Scope for the drop zone.

    • [dropOptions] Object optional

      Same stuff as you would pass to dropOptions of an Endpoint definition.

    • [deleteEndpointsOnDetach=true] Boolean optional

      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.

    • [maxConnections=-1] Integer optional

      Specifies the maximum number of Connections that can be made to this element as a target.

    • [onMaxConnections] Function optional

      Function to call when user attempts to drop a connection but the limit has been reached. The callback signature should look like this: function( { element, connection, maxConnection }, originalEvent )

off

(
  • el
  • event
  • fn
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:1042

Cancel delegate event handling for the given function. Note that unlike with 'on' you do not supply a list of child selectors here: it removes event delegation from all of the child selectors for which the given function was registered (if any).

Parameters:

  • el Element | Element | String

    Either an Element, or a CSS selector (if you want to specify an ID you must prepend it with '#'), or an array of Elements, from which to remove the event listener.

  • event String

    Event ID.

  • fn Function

    Event handler function.

Returns:

JsPlumbInstance:

The current jsPlumb instance; you can chain this method.

on

(
  • el
  • [children]
  • event
  • fn
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:1029

Register an event handler, optionally as a delegate for some set of descendant elements. Note that this method takes either 3 or 4 arguments - if you supply 3 arguments it is assumed you have omitted the children parameter, and that the event handler should be bound directly to the given element.

Parameters:

  • el Element | Element | String

    Either an Element, or a CSS selector (if you want to specify an ID you must prepend it with '#'), or an array of Elements.

  • [children] String optional

    Comma-delimited list of selectors identifying allowed children.

  • event String

    Event ID.

  • fn Function

    Event handler function.

Returns:

JsPlumbInstance:

The current jsPlumb instance; you can chain this method.

ready

(
  • fn
)

Defined in doc/api/jsplumb-api.js:599

Helper method to bind a function to jsPlumb's ready event. You should use this method instead of your library's equivalent, to ensure that jsPlumb has loaded properly before you start to use it. This is particularly true in the case of YUI, because of the asynchronous nature of the module loading process.

Parameters:

  • fn Function

    Function to call once the instance is ready.

recalculateOffsets

(
  • el
)

Defined in doc/api/jsplumb-api.js:363

Recalculates the offsets of all child elements of some element. If you have Endpoints registered on the descendants of some element and you make changes to that element's markup, it is possible that the location of each Endpooint relative to the origin of the element may have changed. So you call this to tell jsPlumb to recalculate. You need to do this because, for performance reasons, jsplumb won't calculate these offsets on the fly.

Parameters:

  • el String | Element | Selector

    The element for which to recalculate offsets.

registerConnectionType

(
  • typeId
  • type
)

Defined in doc/api/jsplumb-api.js:796

Registers the given connection type on this instance of jsPlumb.

Parameters:

  • typeId String

    Id of the type

  • type Object

    Object containing the type specification.

registerConnectionTypes

(
  • types
)

Defined in doc/api/jsplumb-api.js:789

Registers all of the given connection types on this instance of jsPlumb. types is expected to contain keys with typeids and values with type specification objects.

Parameters:

  • types Object

    Object containing the type specifications.

registerEndpointType

(
  • typeId
  • type
)

Defined in doc/api/jsplumb-api.js:803

Registers the given endpoint type on this instance of jsPlumb.

Parameters:

  • typeId String

    Id of the type

  • type Object

    Object containing the type specification.

registerEndpointTypes

(
  • types
)

Defined in doc/api/jsplumb-api.js:782

Registers all of the given Endpoint types on this instance of jsPlumb. types is expected to contain keys with typeids and values with type specification objects.

Parameters:

  • types Object

    Object containing the type specifications.

remove

(
  • el
)

Defined in doc/api/jsplumb-api.js:641

Removes the given element from the DOM, along with all Endpoints associated with it, and their connections. This also removes all Endpoints and Connections belonging to child elements, as well as - of course - the child elements themselves.

Parameters:

  • el String | Element | Selector

    The element in question.

removeAllEndpoints

(
  • el
  • [recurse=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:629

Removes all Endpoints associated with a given element. Also removes all Connections associated with each Endpoint it removes. jsPlumb expects that the element referenced here exists in the DOM. If it does not, or you are uncertain whether it will exist or not, use {@link jsPlumbInstance#remove}.

Parameters:

  • el String | Element | Selector

    The element in question.

  • [recurse=false] Boolean optional

    Whether or not to recurse down through this elements children and remove their endpoints too.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

repaint

(
  • el
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:607

Repaints an element and its connections.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

repaintEverything

(
  • [clearEdits=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:621

Repaints all connections and endpoints.

Parameters:

  • [clearEdits=false] Boolean optional

    If true, clear all edits made since last paint (anchors having moved, conenctions edited, absolute overlay positions etc)

Returns:

JsPlumbInstance:

The current jsPlumb instance.

reset

()

Defined in doc/api/jsplumb-api.js:656

Removes all endpoints and connections and clears the listener list. To keep listeners call {@link jsPlumbInstance#deleteEveryEndpoint} instead of this.

restoreDefaults

() JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:26

Restores the default settings to "factory" values.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

revalidate

(
  • el
)

Defined in doc/api/jsplumb-api.js:615

Clears the offset and size cache for an element, then repaints it and its connections.

Parameters:

  • el String | Element | Selector

    The element in question.

select

(
  • [params]
)
Selection

Defined in doc/api/jsplumb-api.js:204

Selects a set of Connections, using the filter options from the getConnections method, and returns an object that allows you to perform an operation on all of the Connections at once.

The return value from any of these operations is the original list of Connections, allowing operations to be chained (for 'setter' type operations). 'getter' type operations return an array of values, where each entry is of the form:

[ Connection, return value ]

Parameters:

  • [params] Object optional

    Filter parameters. All of the values in this object are optional; if you supply no parameters at all you will get back all of the current Connections in the given jsPlumb instance.

    • [scope] String | String optional

      scope - see getConnections

    • [source] String | String optional
      • see getConnections
    • [target] String | String optional
      • see getConnections
    • [connections] Connection[] optional
      • an existing list of Connections. If you supply this, 'source' and 'target' will be ignored.

Returns:

Selection:

A list of Connections on which operations may be executed. 'Setter' type operations can be chained; 'getter' type operations return an array of [Connection, value] pairs, one entry for each Connection in the list returned. The full list of operations is as follows (where not specified, the operation's effect or return value is the same as the corresponding method on Connection) :

  • addClass : Adds a class to all the Connections in the list.
  • addOverlay : Adds an Overlay to all the Connections in the list.
  • addType : Adds a type to all the Connections in the list.
  • detach : Detaches all the Connections in the list. Not chainable, and does not return anything.
  • each(function(connection)...) : Allows you to specify your own function to execute; this function is chainable.
  • get(index) : Returns the Connection at 'index' in the list.
  • getHoverPaintStyle
  • getLabel
  • getOverlay
  • getPaintStyle
  • getParameter
  • getParameters
  • getType
  • getZIndex
  • hasType
  • hideOverlay
  • hideOverlays
  • isDetachable
  • isHover
  • isReattach
  • isVisible
  • length : returns the length of the list.
  • removeAllOverlays
  • removeClass
  • removeOverlay
  • removeOverlays
  • removeType
  • repaint
  • setConnector
  • setDetachable
  • setHover
  • setHoverPaintStyle
  • setLabel
  • setPaintStyle
  • setParameter
  • setParameters
  • setReattach
  • setType
  • showOverlay
  • showOverlays

selectEndpoints

(
  • [params]
)
Selection

Defined in doc/api/jsplumb-api.js:267

Selects a set of Endpoints and returns an object that allows you to execute various different methods on them at once. The return value from any of these operations is the original list of Endpoints, allowing operations to be chained (for 'setter' type operations). 'getter' type operations return an array of values, where each entry is of the form:

[ Endpoint, return value ]

Parameters:

  • [params] Object optional

    Filter parameters.

    • [scope=jsPlumb.DefaultScope] String | String optional

      Scope(s) to match

    • [source] String | Element | Selector | Array optional
      • limits returned endpoints to those that are declared as a source endpoint on any elements identified.
    • [target] String | Element | Selector | Array optional
      • limits returned endpoints to those that are declared as a target endpoint on any elements identified.
    • [element] String | Element | Selector | Array optional
      • limits returned endpoints to those that are declared as either a source OR a target endpoint on any elements identified.

Returns:

Selection:

A list of Endpoints on which operations may be executed. 'Setter' type operations can be chained; 'getter' type operations return an array of [Endpoint, value] pairs, one entry for each Endpoint in the list returned.

The full list of operations is as follows (where not specified, the operation's effect or return value is the same as the corresponding method on Endpoint) :

  • setHover
  • removeAllOverlays
  • setLabel
  • addClass
  • addOverlay
  • removeClass
  • removeOverlay
  • removeOverlays
  • showOverlay
  • hideOverlay
  • showOverlays
  • hideOverlays
  • setPaintStyle
  • setHoverPaintStyle
  • setParameter
  • setParameters
  • setAnchor
  • getLabel
  • getOverlay
  • isHover
  • isDetachable
  • getParameter
  • getParameters
  • getPaintStyle
  • getHoverPaintStyle
  • detachAll : Detaches all the Connections from every Endpoint in the list. not chainable and does not return anything.
  • delete : Deletes every Endpoint in the list. not chainable and does not return anything.
  • length : returns the length of the list.
  • get(index) : returns the Endpoint at 'index' in the list.
  • each(function(endpoint)...) : allows you to specify your own function to execute; this function is chainable.

setContainer

(
  • container
)

Defined in doc/api/jsplumb-api.js:33

Sets the current element to use as the Container for the given jsPlumbInstance - the element that will be the parent for all artefacts added by jsPlumb. By default, the Container is set to the offsetParent of the first element on which connect, addEndpoint, makeSource or makeTarget is called, but you are encouraged to set a Container either in the arguments to the jsPlumb.newInstance(...) method, or via jsPlumbInstance.importDefaults.

Parameters:

  • container String | Element | Selector

    Either an element id, a DOM element, or a selector from the underlying library

setDefaultScope

(
  • scope
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:683

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 String

    Scope to set as default.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

setDraggable

(
  • el
  • draggable
)

Defined in doc/api/jsplumb-api.js:48

Sets whether or not the given element(s) should be draggable, regardless of what a particular method may request.

Parameters:

  • el String | Object | Array

    Some identifier for the element(s) - may be a string id, a selector, or an array of ids/selectors

  • draggable Boolean

    Whether or not the given element(s) should be draggable.

setHoverSuspended

(
  • hover
)

Defined in doc/api/jsplumb-api.js:324

Sets whether or not hover effects should be suspended. jsPlumb uses this internally during various drag/drop operations, and it is exposed because it might also be useful for you too.

Parameters:

  • hover Boolean

    whether or not to set hover suspended.

setIdChanged

(
  • oldId
  • newId
)

Defined in doc/api/jsplumb-api.js:381

Notify jsPlumb that the element with oldId has had its id changed to newId. This method is equivalent to what jsPlumb does itself in the second step of the setId method.

Parameters:

  • oldId String

    Previous element id

  • newId String

    Element's new id

setParent

(
  • el
  • newParent
)

Defined in doc/api/jsplumb-api.js:389

Switches the parent of the element to be the newParent, updating jsPlumb references to the element as necessary.

Parameters:

  • el Selector | Element

    Element to re-parent

  • newParent Selector | Element | String

    Selector, DOM element, or id of new parent.

setRenderMode

(
  • mode
)
String

Defined in doc/api/jsplumb-api.js:662

Sets render mode. 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.

Parameters:

  • mode String

    One of jsPlumb.SVG orjsPlumb.VML.

Returns:

String:

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

setScope

(
  • el
  • Space
)

Defined in doc/api/jsplumb-api.js:511

Sets the source and target scope of some element that has been configured as a connection source and target with makeTarget and makeSource. If the element is only a source or only a target, this method will just set what it can.

Parameters:

  • el Element | String

    Element to set source and target scope for.

  • Space String

    delimited list of scopes. Note, though, that multiple scopes is supported by the jquery flavour only programmatcally, not with drag/drop connections.

setSource

(
  • connection
  • source
  • [doNotRepaint=false]
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:91

Sets the source for some Connection. A connectionMoved event is fired.

Parameters:

  • connection Connection

    The connection to set the source for

  • source String | Element | Endpoint

    Either an element, element id, or existing Endpoint. If you pass an element or element id for an element that has been registered as a Connection source via makeSource, the Endpoint properties from that call are used.

  • [doNotRepaint=false] Boolean optional

    If true, the Connection will not be repainted after the source is changed.

Returns:

JsPlumbInstance:

The current jsPlumb instance

setSourceEnabled

(
  • el
  • state
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:539

Sets the enabled state of one or more elements that were previously made a connection source with the makeSource method.

Parameters:

  • el String | Element | Selector

    The element in question.

  • state Boolean

    True to enable the element(s), false to disable it.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

setSourceScope

(
  • el
  • Space
)

Defined in doc/api/jsplumb-api.js:497

Sets the source scope of some element that has been configured as a connection source with makeSource

Parameters:

  • el Element | String

    Element to set source scope for.

  • Space String

    delimited list of scopes. Note, though, that multiple scopes is supported by the jquery flavour only programmatcally, not with drag/drop connections.

setSuspendDrawing

(
  • val
  • [repaintAfterwards=false]
)
Boolean

Defined in doc/api/jsplumb-api.js:113

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

Parameters:

  • val Boolean

    Indicates whether to suspend or not

  • [repaintAfterwards=false] Boolean optional

    Instructs jsPlumb to do a full repaint after changing the suspension state.

Returns:

Boolean:

The value of the suspend drawing flag before this method was called.

setSuspendDrawing

(
  • val
  • [doNotRepaintAfterwards=false]
)

Defined in doc/api/jsplumb-api.js:752

Sets whether or not drawing is suspended. you should use this when doing bulk painting, like when first drawing a UI.

Parameters:

  • val Boolean

    Whether or not to suspend drawing.

  • [doNotRepaintAfterwards=false] Boolean optional

    If true, jsPlumb won't run a full repaint. Otherwise it will.

setSuspendEvents

(
  • val
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:116

Sets whether or not events are suspended.

Parameters:

  • val Boolean

    Whether or not to suspend events.

setTarget

(
  • connection
  • target
  • [doNotRepaint=false]
)
JsPlumbInstance chainable

Defined in doc/api/jsplumb-api.js:102

Sets the target for some Connection. A connectionMoved event is fired.

Parameters:

  • connection Connection

    The connection to set the target for

  • target String | Element | Endpoint

    Either an element, element id, or existing Endpoint. If you pass an element or element id for an element that has been registered as a Connection target via makeTarget, the Endpoint properties from that call are used.

  • [doNotRepaint=false] Boolean optional

    If true, the Connection will not be repainted after the target is changed.

Returns:

JsPlumbInstance:

The current jsPlumb instance

setTargetEnabled

(
  • el
  • state
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:569

Sets the enabled state of one or more elements that were previously made a connection target with the makeTarget method. method.

Parameters:

  • el String | Element | Selector

    The element in question.

  • state Boolean

    True to enable the element(s), false to disable it.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

setTargetScope

(
  • el
  • Space
)

Defined in doc/api/jsplumb-api.js:504

Sets the target scope of some element that has been configured as a connection source with makeTarget

Parameters:

  • el Element | String

    Element to set target scope for.

  • Space String

    delimited list of scopes. Note, though, that multiple scopes is supported by the jquery flavour only programmatcally, not with drag/drop connections.

show

(
  • el
  • [changeEndpoints=false]
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:339

Sets an element's connections to be visible.

Parameters:

  • el String | Element | Selector

    Element to show connections for.

  • [changeEndpoints=false] Boolean optional

    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:

JsPlumbInstance:

The current jsPlumb instance.

toggleDraggable

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:356

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

Parameters:

  • el String | Element | Selector

    The element for which to toggle draggability.

Returns:

Boolean:

The current draggable state.

toggleSourceEnabled

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:548

Toggles the source enabled state of the given element or elements.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

The current enabled state of the source.

toggleTargetEnabled

(
  • el
)
Boolean

Defined in doc/api/jsplumb-api.js:578

Toggles the target enabled state of the given element or elements.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

Boolean:

The current enabled state of the target.

toggleVisible

(
  • el
  • [changeEndpoints=false]
)
Null

Defined in doc/api/jsplumb-api.js:348

Toggles visibility of an element's Connections.

Parameters:

  • el String | Element | Selector

    Element to toggle visibility for.

  • [changeEndpoints=false] Boolean optional

    Whether or not to also toggle the endpoints on the element.

Returns:

Null:

But should be updated to return the current state.

unbind

(
  • [eventOrListener]
  • [listener]
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:106

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.

unmakeEverySource

() JsPlumbInstance

Defined in doc/api/jsplumb-api.js:485

Resets all elements in this instance of jsPlumb so that none of them are connection sources.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

unmakeEveryTarget

() JsPlumbInstance

Defined in doc/api/jsplumb-api.js:491

Resets all elements in this instance of jsPlumb so that none of them are connection targets.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

unmakeSource

(
  • el
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:478

Sets the given element to no longer be a connection source.

Parameters:

  • el String | Element | Selector

    The element in question.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

unmakeTarget

(
  • el
)
JsPlumbInstance

Defined in doc/api/jsplumb-api.js:451

Sets the given element to no longer be a connection target.

Parameters:

  • el String | Element | Selector

    Element to unmake as a connection target.

Returns:

JsPlumbInstance:

The current jsPlumb instance.

Properties

connectorClass

String

Defined in doc/api/jsplumb-api.js:815

The CSS class(es) to set on Connection elements. This value is a String and can have multiple classes; the entire String is appended as-is (this is true of all the CSS properties in a jsPlumbInstance).

Defaults

Object

Defined in doc/api/jsplumb-api.js:899

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.

Defaults.Anchor

String

Defined in doc/api/jsplumb-api.js:906

The default anchor to use for all connections (both source and target). Default is "Bottom".

Defaults.Anchors

String

Defined in doc/api/jsplumb-api.js:911

The default anchors to use as ([source, target]) for all connections. Defaults are ["Bottom", "Bottom"].

Defaults.ConnectionOverlays

Object

Defined in doc/api/jsplumb-api.js:921

The default overlay definitions for Connections. Defaults to an empty list.

Defaults.ConnectionsDetachable

Boolean

Defined in doc/api/jsplumb-api.js:916

Whether or not connections are detachable by default (using the mouse). Defaults to true.

Defaults.Connector

String

Defined in doc/api/jsplumb-api.js:926

Name of the default connector definition to use for all connections. Default is "Bezier".

Defaults.Container

Element | String

Defined in doc/api/jsplumb-api.js:931

Optional selector or element id that instructs jsPlumb to append elements it creates to a specific element.

Defaults.DoNotThrowErrors

Boolean

Defined in doc/api/jsplumb-api.js:936

Defaults to false; whether or not to throw errors if a user specifies an unknown anchor, endpoint or connector type.

Defaults.DragOptions

Object

Defined in doc/api/jsplumb-api.js:941

The default drag options to pass in to {@link jsPlumbInstance#connect}, {@link jsPlumbInstance#makeTarget} and {@link jsPlumbInstance#addEndpoint} calls. Default is empty.

Defaults.DropOptions

Object

Defined in doc/api/jsplumb-api.js:946

The default drop options to pass in to {@link jsPlumbInstance#connect}, {@link jsPlumbInstance#makeTarget} and {@link jsPlumbInstance#addEndpoint} calls. Default is empty.

Defaults.Endpoint

String

Defined in doc/api/jsplumb-api.js:951

The name of the default endpoint to use for all connections (both source and target). Default is "Dot".

Defaults.EndpointHoverStyle

Object

Defined in doc/api/jsplumb-api.js:971

The default hover style definition to use for all endpoints. Default is null.

Defaults.EndpointHoverStyles

Object

Defined in doc/api/jsplumb-api.js:976

The default hover style definitions ([ source, target ]) to use for all endpoints. Defaults are null.

Defaults.Endpoints

String

Defined in doc/api/jsplumb-api.js:956

The names of the default endpoint definitions ([ source, target ]) to use for all connections. Defaults are ["Dot", "Dot"].

Defaults.EndpointStyle

Object

Defined in doc/api/jsplumb-api.js:961

The default style definition to use for all endpoints. Default is { fillStyle:"#456" }

Defaults.EndpointStyles

Object

Defined in doc/api/jsplumb-api.js:966

The default style definitions ([ source, target ]) to use for all endpoints. Defaults are empty.

Defaults.HoverPaintStyle

Object

Defined in doc/api/jsplumb-api.js:981

The default hover style definition to use for all connections. Defaults are null.

Defaults.LabelStyle

Object deprecated

Defined in doc/api/jsplumb-api.js:986

Deprecated: Labels should be styled with CSS nowadays.

The default style to use for label overlays on connections.

Defaults.LogEnabled

Boolean

Defined in doc/api/jsplumb-api.js:992

Whether or not the jsPlumb log is enabled. defaults to false.

Defaults.MaxConnections

Integer

Defined in doc/api/jsplumb-api.js:1002

The default maximum number of connections for an Endpoint. Defaults to 1.

Defaults.Overlays

Object

Defined in doc/api/jsplumb-api.js:997

The default overlay definitions (for both Connections and Endpoint). Defaults to an empty list.

Defaults.PaintStyle

Object

Defined in doc/api/jsplumb-api.js:1007

The default paint style for a connection. Default is line width of 8 pixels, with color "#456".

Defaults.ReattachConnections

Boolean

Defined in doc/api/jsplumb-api.js:1012

Whether or not to reattach Connections that a user has detached with the mouse and then dropped. Default is false.

Defaults.RenderMode

String

Defined in doc/api/jsplumb-api.js:1017

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, jsPlumb uses SVG. Note that from 1.6.0 onwards, support for Canvas has been removed.

Defaults.Scope

String

Defined in doc/api/jsplumb-api.js:1022

The default "scope" to use for connections. Scope lets you assign connections to different categories.

Default: "_jsPlumb_Default_Scope"

draggingClass

String

Defined in doc/api/jsplumb-api.js:863

The CSS class(es) to set on connections that are being dragged. This value is a String and can have multiple classes; the entire String is appended as-is.

elementDraggingClass

String

Defined in doc/api/jsplumb-api.js:869

The CSS class(es) to set on connections whose source or target element is being dragged, and on their endpoints too. This value is a String and can have multiple classes; the entire String is appended as-is.

endpointAnchorClassPrefix

String

Defined in doc/api/jsplumb-api.js:876

The prefix for the CSS class to set on Endpoints that have dynamic anchors whose individual locations have declared an associated CSS class. This value is a String and, unlike the other classes, is expected to contain a single value, as it is used as a prefix for the final class: '_' is appended, where "" is the CSS class associated with the current dynamic anchor location.

endpointClass

String

Defined in doc/api/jsplumb-api.js:827

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

endpointConnectedClass

String

Defined in doc/api/jsplumb-api.js:833

The CSS class(es) to set on an Endpoint element when its Endpoint has at least one connection. This value is a String and can have multiple classes; the entire String is appended as-is.

endpointDropAllowedClass

String

Defined in doc/api/jsplumb-api.js:845

The CSS class(es) to set on an Endpoint on which a drop will be allowed (during drag and drop). This value is a String and can have multiple classes; the entire String is appended as-is.

endpointDropForbiddenClass

String

Defined in doc/api/jsplumb-api.js:851

The CSS class(es) to set on an Endpoint on which a drop will be forbidden (during drag and drop). This value is a String and can have multiple classes; the entire String is appended as-is.

endpointFullClass

String

Defined in doc/api/jsplumb-api.js:839

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

hoverClass

String

Defined in doc/api/jsplumb-api.js:821

The CSS class(es) to set on Connection or Endpoint elements when hovering. This value is a String and can have multiple classes; the entire String is appended as-is.

overlayClass

String

Defined in doc/api/jsplumb-api.js:857

The CSS class(es) 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.

SVG

String static

Defined in doc/api/jsplumb-api.js:892

Constant for use with the setRenderMode method

VML

String static

Defined in doc/api/jsplumb-api.js:885

Constant for use with the setRenderMode method