DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG
Show:

jsPlumbToolkitInstance Class

An instance of the jsPlumb Toolkit. Each instance is backed by a Graph, and has zero or more Renderers attached.

Creating an instance

You create an instance of the jsPlumb Toolkit via the static method jsPlumbToolkit.newInstance(params). The contents of params are any valid constructor parameters as detailed here.

Rendering data

An instance of the jsPlumb Toolkit does not itself handle rendering the data to your UI; to do that, you must call the render method of your Toolkit instance:

var myToolkit = jsPlumbToolkit.newInstance();
var aRenderer = myToolkit.render({
  container:"someElementId",
  ...other params, possibly..
});

Operating on the dataset

In general, you will operate on the dataset via the jsPlumbToolkitInstance object, because any attached Renderers will for the most part sort themselves out based on the data model. Occasionally you will want to perform some view-specific operation such as highlighting a Path, or hiding some Nodes, etc. These sorts of operations are executed on the Renderer and not on the Toolkit object.

Constructor

jsPlumbToolkitInstance

(
  • params
)

Parameters:

  • params Object

    Constructor parameters

    • [idFunction] Function optional

      Optional function to use to extract an id from a Node's data. The default is to retrieve the id property.

    • [typeFunction] Function optional

      Optional function to use to extract a type identifier from a Node's data. The default is to retrieve the property defined by typeProperty.

    • [typeProperty="type"] String optional

      Optional name of the property that identifies a Node's type from its data. The default is type.

    • [edgeIdFunction] Function optional

      Optional function to use to extract an id from an Edge's data. The default is to retrieve the id property.

    • [edgeTypeFunction] Function optional

      Optional function to use to extract a type identifier from an Edge's data. The default is to retrieve the property defined by edgeTypeProperty.

    • [edgeTypeProperty="type"] Function optional

      Optional name of the property that identifies an Edge's type from its data. The default is type.

    • [portIdFunction] Function optional

      Optional function to use to extract an id from a Port's data. The default is to retrieve the id property.

    • [portTypeFunction] Function optional

      Optional function to use to extract a type identifier from a Port's data. The default is to retrieve the type property.

    • [model] Object optional

      Model of Node, Edge and Port definitions. See documentation.

    • [beforeConnect] Function optional

      Optional function that will be called prior to any edge being established (either programmatically or via the mouse). It is passed the (source, target) of the proposed edge and if it returns anything other than boolean true, the edge is aborted. If not supplied, the default behaviour of this function is to honor the allowLoopback, allowNodeLoopback and maxConnections parameters on any Node or Port definitions you supplied to this Toolkit via the model.

    • [beforeMoveConnection] Function optional

      Optional function that will be called prior to any existing edge being moved (either programmatically or via the mouse). It is passed the source and target of the existing edge, as well as the edge itself, and if it returns anything other than boolean true, the edge move is aborted. If not supplied, the default behaviour of this function is to honor the allowLoopback, allowNodeLoopback and maxConnections parameters on any Node or Port definitions you supplied to this Toolkit via the model.

    • [beforeStartConnect] Function optional

      Optional function that will be called prior to an edge being established. This is different from beforeConnect in that this function is called right at the beginning of a connection drag by attached renderers, and the function is given the node/port that is the source, plus the edge type. If you return false the Edge is aborted. Otherwise your return value is used as the Edge data.

    • [beforeDetach] Function optional

      Optional function that can be used to override connection detachment from the mouse. The function is given (source, target, edge) and is expected to return true to confirm the detach should occur. Any other return value will abort the detach.

    • [beforeStartDetach] Function optional

      Optional function that can be used to override connection detachment from the mouse. Distinct from beforeDetach in that this function is called as soon as the user begins to drag. The function is given (source, target, edge) and is expected to return true to confirm the detach should occur. Any other return value will abort the detach.

    • [nodeFactory] Function optional

      Function to use to generate data for a new Node. Default is to create an object with an id property.

    • [edgeFactory] Function optional

      Function to use to generate data for a new Edge. Default is to create an object with an id property.

    • [portFactory] Function optional

      Function to use to generate data for a new Port. Default is to create an object with an id property.

    • [groupFactory] Function optional

      Function to use to generate data for a new Group. Default is to create an object with an id property.

    • [portExtractor] Function optional

      Optional function to call whenever a Node is added; it extracts, from the Node's data, any Ports that are associated with the Node.

    • [portUpdater] Function optional

      Optional function to call whenever a Port is added, updated or removed. It is expected to return a new value for the Node's backing data, computed from the current list of Ports. See Toolkit docs about data model for more details.

    • [portDataProperty] String optional

      Optional name of a property that represents the ports on some node.

    • [portOrderProperty] String optional

      Optional name of a property in the backing data of each port that represents its ordering in a node. For some datasets the ordering of ports is important. This is only used if you do not supply your own portExtractor, and if you also have supplied a portDataProperty.

    • [autoSave=false] Boolean optional

      Whether or not to automatically save the dataset when changes occur. You must supply the saveUrl property if you set this to true.

    • [saveUrl] String optional

      Url to use when saving automatically.

    • [saveHeaders] Object optional

      Optional HTTP headers to pass when auto saving. If not provided the Toolkit will use its default of Content-Type:"application/json".

    • [onAutoSaveSuccess] Function optional

      Optional function to call on autoSave success.

    • [onAutoSaveError] Function optional

      Optional function to call on autoSave error.

    • [onBeforeAutoSave] Function optional

      Optional function to call before autoSave.

    • [onAfterAutoSave] Function optional

      Optional function to call after autoSave, regardless of auto save success or failure.

    • [doNotUpdateOriginalData=false] Boolean optional

      If true, won't try to update the original data when a Node/Edge is removed.

    • [maxSelectedEdges] Integer optional

      Optional limit for the number of edges allowed to be selected at any one time.

    • [maxSelectedNodes] Integer optional

      Optional limit for the number of nodes allowed to be selected at any one time.

    • [selectionCapacityPolicy] Integer optional

      Optional selection capacity policy. See setSelectionCapacityPolicy docs.

    • [createMissingGroups=false] Boolean optional

      If true, when a Node is added that has a group data member that identifies a Group not known by the Toolkit, a Group with that ID is created.

Methods

addAllEdgesToSelection

()

Adds all the Edges in the Toolkit instance to the Toolkit's current selection.

addEdge

(
  • params
)
Edge

Adds an Edge to the Graph.

Parameters:

  • params Object

    Method params.

    • source Node | String

      Source Node, or id of the source Node. If given as a string, this may be in "dotted" format, eg. nodeId.portId, to identify a particular port on the source Node.

    • target Node | String

      Target Node, or id of the target Node. If given as a string, this may be in "dotted" format, eg. nodeId.portId, to identify a particular port on the target Node.

    • [cost=1] Integer optional

      Edge cost. This is used when computing shortest paths through the graph. If an Edge is not directed, then the same cost is applied regardless of the direction of traversal.

    • [directed=true] Boolean optional

      Whether or not the Edge is directed.

Returns:

Edge:

The Edge that was added.

addFactoryNode

(
  • type
  • data
  • callback
)

Adds a Node by type, running the data generation for the node through the current NodeFactory. This is different from addNode in that with addNode you are supplying the final data and your NodeFactory is not called. This method can be called with one, two or three arguments. A single argument is considered to be the new Node's type, and a backing data object will be created with this set, and no callback will occur. If you provide two arguments the second argument may be either the new Node's backing data OR a callback to hit with the newly created Node. With three arguments the second argument is the Node's backing data and the third is a callback to hit with the newly created Node.

Parameters:

  • type String

    Required. Type of the object to create. type will be passed as the first argument to your node factory.

  • data Object

    Optional backing data for the Node.

  • callback Function

    Optional function to call with the newly created Node.

addGroup

(
  • data
  • [eventInfo]
  • [doNotFireEvent=false]
)
Group

Adds a new Group.

Parameters:

  • data Object

    Backing data for the Group.

  • [eventInfo] Object optional

    Used internally, sometimes, by the Toolkit.

  • [doNotFireEvent=false] Boolean optional

    If true, a groupAdded event will not be fired by this method. Otherwise a groupAdded event will be fired.

Returns:

Group:

The Group that was added.

addNewPort

(
  • obj
  • type
  • [portData]
)

Adds a new Port to some Node. This will call the current PortFactory to get the data for a new Port.

Parameters:

  • obj Node | String

    Node or id of the Node to add a new Port to.

  • type String

    Type of Port to add.

  • [portData] Object optional

    Optional data to pass to the PortFactory.

addNode

(
  • data
  • [eventInfo]
)
Node

Adds a Node with the given data. If the data is null, the Toolkit creates an empty object and assigns a uuid as the Node's id. If no id can be derived for the given data, the Toolkit creates a uuid and sets it as the data object's 'id' member. This method also calls the current portExtractor function, if one was supplied. Its purpose is to extract any Ports from the data for some given Node.

Parameters:

  • data Object

    The Node's backing data - from your data model.

  • [eventInfo] Object optional

    Optional data member that the Toolkit will pass into any registered event listeners. This can be used by the UI layer, for instance, to track the position on screen of any newly added elements.

Returns:

Node:

A Node object. Your original data is available via the data member. The Node's id is available via the id member.

addNodes

(
  • nodeList
)
JsPlumbToolkitInstance

Adds a list of Nodes.

Parameters:

  • nodeList Array

    An array of objects, one for each Node to be added.

Returns:

JsPlumbToolkitInstance:

The current Toolkit instance.

addPathToSelection

(
  • params
)

Appends the Path from source to target to the current selection. If there is no current selection, obj becomes it. If the Path does not exist, there is no selection.

Parameters:

  • params Object

    Path params

    • source Node | String

      ID of source, or source Node/Port

    • target Node | String

      ID of target, or target Node/Port

addPort

(
  • node
  • data
)
Port

Adds a Port from existing data to some Node. This is distinct from addNewPort, because in this case the data for the Port already exists.

Parameters:

  • node Node | String

    Node or id of the Node to add the Port to.

  • data Object

    Data for the Port.

Returns:

Port:

The port that was added.

addToGroup

(
  • node
  • group
)
Boolean

Adds a Node to a Group.

Parameters:

  • node Node

    Node to add

  • group Group

    Group to add the Node to

Returns:

Boolean:

True if added, false otherwise.

addToSelection

(
  • obj
)

Appends obj to the current selection. If there is no current selection, obj becomes it.

Parameters:

  • obj Node | Edge | Node[] | Edge[] | Path | String

    Object to select. May be a Node/Edge or an array of either of these, or a Node id, or a Path.

append

(
  • params
)
JsPlumbToolkitInstance

Appends some data to the dataset, either via ajax, or directly from a JS object. The only difference between this and load is the events that are fired during the loading process.

Parameters:

  • params Object

    Append parameters.

    • [type="json"] String optional

      Specifies the data type of the data to load. This must match the name of a loader registered with the given instance of the Toolkit.

    • [data] Object optional

      Optional. JSON data to load directly.

    • [url] String optional

      URL to retrieve data from. Optional, but you need to supply either this or data.

    • [jsonp=false] Boolean optional

      Optional, defaults to false. Tells the Toolkit that the data is coming via JSON-P.

    • [onload] Function optional

      Optional callback to execute once the data has loaded. Most often used when you are retrieving remote data (using url and possibly jsonp)

    • [parameters] Object optional

      Optional parameters to pass to the loader.

    • [error] Function optional

      Optional function to call on load error.

Returns:

JsPlumbToolkitInstance:

The current instance of the Toolkit. If you provide data directly to this method you can then chain a load call with a subsequent render.

batch

(
  • fn
)

Suspends rendering and then runs the given function, unsuspending rendering afterwards and doing a refresh. This method is just a convenience method that handles suspending and subsequent enabling of rendering. You might use this if you're adding a whole load of Nodes or Edges, or maybe you want to add a Node and one or more Edges before the layout recomputes.

Parameters:

  • fn Object

clear

() JsPlumbToolkitInstance

Fires a 'graphClearStart' event, clears the graph, then fires a graphClearEnd event.

Returns:

JsPlumbToolkitInstance:

The current Toolkit instance.

clearSelection

()

Clears the current selection and fires a selectionCleared event.

connect

(
  • params
)
Edge

Connects two nodes/ports (or a combination of the two), by ID. This function does not know about the DOM: you cannot pass it DOM elements or selectors. By default, this method will create nodes that are missing. Port ids are specified with a dotted syntax, eg foo.bar refers to the port "bar" on the node "foo".

Parameters:

  • params Object

    Connect parameters.

    • source Object | String

      Either the data for a node, or a node id as a string, representing the source node in the connection.

    • target Object | String

      Either the data for a node, or a node id as a string, representing the target node in the connection

    • [cost=1] Number optional

      Optional; the cost of the connection.

    • [directed=false] Boolean optional

      Optional, defaults to false. Whether the edge is directed.

    • [doNotCreateMissingNodes=false] Boolean optional

      Optional, defaults to false. Whether to NOT create nodes that do not exist yet. Sorry about the double negative.

    • [data] Object optional

      Optional backing data for the Edge. Here you might like to set id:'some value' if you need o retrieve the Edge by id later on.

Returns:

Edge:

The new Edge.

eachEdge

(
  • fn
)

Iterates through all Edges in the Toolkit one at a time. You should not perform destructive editing of the dataset inside one of these loops.

Parameters:

  • fn Function

    A function that takes (index, edge) as arguments and is applied for every Node in the Toolkit instance.

eachGroup

(
  • fn
)

Iterates through all Groups in the Toolkit one at a time. You should not perform destructive editing of the dataset inside one of these loops.

Parameters:

  • fn Function

    A function that takes (index, node) as arguments and is applied for every Node in the Toolkit instance.

eachNode

(
  • fn
)

Iterates through all Nodes in the Toolkit one at a time. You should not perform destructive editing of the dataset inside one of these loops.

Parameters:

  • fn Function

    A function that takes (index, node) as arguments and is applied for every Node in the Toolkit instance.

exists

(
  • objects
)
Boolean

Returns whether or not object(s) exist for the given id(s).

Parameters:

  • objects Object...

    List of ids to check existence for. This method takes an arbitrary number of arguments.

Returns:

Boolean:

True if objects exist for all given ids, false otherwise.

exportData

(
  • params
)
Object

Exports the current data to JSON.

Parameters:

  • params Object

    Export parameters

    • [type="json"] String optional

      Specifies the data type in which to format the data. This must match the name of an exporter registered with the given instance of the Toolkit.

    • [parameters] Object optional

      Optional parameters to pass to the exporter. If you write a custom exporter you may wish to use this.

Returns:

Object:

JSON payload.

findGraphObject

(
  • spec
)
Node | Port

Finds the Graph object that matches the given spec.

Parameters:

  • spec String | Node | Port

    If a string, a Node/Port matching that id is retrieved. Otherwise if spec is already a Graph object (Node or Port), it is returned.

Returns:

Node | Port:

Node or Port matching the spec, null if no match or spec was not a Graph object.

getAllEdges

() Edge[]

Get all Edges in the Toolkit instance.

Returns:

getAllEdgesFor

(
  • obj
  • [filter]
)
Edge[]

Gets all edges for the given Node, Port or Group.

Parameters:

  • obj Node | Por | !Group

    Object to retrieve edges for.

  • [filter] Function optional

    Optional filter function for edge selection.

Returns:

Edge[]:

a list of Edges.

getClusters

() Array

Calculates "clusters" of nodes (and groups), where a 'cluster' is a set of Nodes/Groups that are connected. Direction of connections is not taken into account. Nodes that are children of Groups are included in all cluster calculations, which might cause some weird situations, but this functionality is mostly intended just for Nodes anyway.

Returns:

Array:

An array of arrays, each entry being a list of nodes in the cluster.

getEdge

(
  • edgeId
)
Edge

Gets an Edge by id, or if the given object is already an Edge, hands that back.

Parameters:

  • edgeId String

    ID of the Edge to retrieve.

Returns:

Edge:

The requested Edge, if found, otherwise null.

getEdgeCount

() Number

Returns the total number of Edges.

Returns:

Number:

The total number of Edges in the Graph.

getEdgeFactory

() Function

Gets the current EdgeFactory.

Returns:

Function:

Current Edge Factory; see documentation for a discussion.

getEdgeId

(
  • edge
)
String

Gets the id of the Edge represented by the given arguments. If this is a JS object, we extract the id using the current edgeIdFunction. Otherwise we just pass it back as-is.

Parameters:

  • edge Object

    Edge from which to retrieve id.

Returns:

String:

Edge's id, if we could resolve it, otherwise the object we were given.

getEdges

(
  • params
)
Edge[]

Gets a set of edges.

Parameters:

  • params Object

    parameters for the select call

    • [source] Node | String optional

      Source Node or id of source Node from which to select Edges.

    • [target] Node | String optional

      Target Node or id of target Node from which to select Edges.

Returns:

Edge[]:

a list of edges corresponding to the given params.

getEdgeType

(
  • edgeData
)
String

Gets the type of the Edge represented by the given JS object.

Parameters:

  • edgeData Object

    Edge's data. Note: this is NOT an Edge object, it is the backing data. You can use getType to get the type for some Toolkit object.

Returns:

String:

Either the Edge's type, if set, or "default".

getGraph

() Graph

Returns the current Graph.

Returns:

Graph:

The underlying Graph.

getGroup

(
  • groupId
)
Group

Gets a Group by its ID, or if the object is already a Group, hands that back.

Parameters:

  • groupId Object

Returns:

Group:

The requested Group, if found, otherwise null.

getGroupAt

(
  • idx
)
Group

Returns the Group at the given index.

Parameters:

  • idx Number

    Index into group list

Returns:

Group:

a Group, or null if not found.

getGroupCount

() Number

Returns the total number of Groups

Returns:

Number:

The total number of Groups in the Graph.

getGroupFactory

() Function

Gets the current GroupFactory.

Returns:

Function:

Current Group Factory; see documentation for a discussion.

getGroups

() Group[]

Returns all the Groups in the Graph.

Returns:

Group[]:

All the Groups in the graph.

getModel

() Object

Gets the model registered with this Toolkit instance, if any. Models may be registered on the Toolkit or on each individual Surface. In general it is a good idea to use the Toolkit's model to map data model event handlers and other data model considerations such as the maximum number of connections a Port allows, and each Surface's model definition to configure view concerns.

Returns:

Object:

Current model. May be null.

getNode

(
  • nodeId
)
Node

Gets a Node by id, or if the given object is already a Node, hands that back.

Parameters:

  • nodeId String

    ID of the Node to retrieve.

Returns:

Node:

The requested Node, if found, otherwise null.

getNodeAt

() Object

Returns the Node at the given index.

Returns:

Object:

The Node at the given index, null if not found.

getNodeCount

() Number

Returns the count of nodes in the Graph.

Returns:

Number:

The count of Nodes in the Graph.

getNodeFactory

() Function

Gets the current NodeFactory.

Returns:

Function:

Current Node Factory; see documentation for a discussion.

getNodeId

(
  • node
)
String

Gets the id of the Node represented by the given arguments. If this is a JS object, we extract the id using the current idFunction. Otherwise we just pass it back as-is.

Parameters:

  • node Object

    Object from which to retrieve id.

Returns:

String:

The Node's id, if the current idFunction was able to resolve it, or the given object.

getNodes

() Node[]

Returns all the nodes in the Graph.

Returns:

Node[]:

All the Nodes in the graph.

getNodeType

(
  • nodeData
)
String

Gets the type of the Node represented by the given JS object. We first try for a return value from the current typeFunction, but if that returns nothing we just return 'default'.

Parameters:

  • nodeData Object

    Node's data. Note: this is NOT a Node object, it is the backing data. You can use getType to get the type for some Toolkit object.

Returns:

String:

Either the object's type, or default.

getObjectInfo

(
  • obj
  • [elementResolver]
)
Object

Finds information related to the given object, which may be a DOM node or an existing Toolkit object. This function is useful for mapping some UI element to its underlying data.

Parameters:

  • obj String | Element | Node | Port

    An element id, node id, DOM element, Node or Port.

  • [elementResolver] Function optional

    For internal use. Resolves a Node or Port into its DOM element.

Returns:

Object:

A JS object containing obj (the Toolkit object), id (the Node/Port ID), type ("port" or "node"), els - a map of Surface ids to [ Surface, Element ] pairs, one for each Surface that has rendered the given Node/Port.

getPath

(
  • params
)
Path

Gets a Path from some source Node/Port to some target Node/Port.

Parameters:

  • params Object

    Path spec params

    • source Node | Port | String

      Source node or port, or id of source node/port

    • target Node | Port | String

      Target node or port, or id of target node/port

    • [strict=true] Boolean optional

      Sets whether or not paths are searched strictly by the given source/target. If, for instance, you supply a node as the source, but there are only edges connected to ports on that node, by default these edges will be ignored. Switching strict to false will mean these edges are considered.

    • [nodeFilter] Function optional

      Optional function that is given each Node's backing data and asked to return true or false - true means include the Node, false means exclude it.

    • [edgeFilter] Function optional

      Optional function that is given each Edge's backing data and asked to return true or false - true means include the Edge, false means exclude it.

Returns:

Path:

a Path object. Even if no path exists you will get a return value - but it will just be empty.

getPort

(
  • portId
)
Port

Gets a port by its full id

Parameters:

  • portId String

    ID of the Port to retrieve, in nodeId.portId syntax.

Returns:

Port:

The requested port, if found, otherwise null.

getPortFactory

() Function

Gets the current PortFactory.

Returns:

Function:

Current Port Factory; see documentation for a discussion.

getPortId

() String

Gets the id of the Port represented by the given arguments. If this is a JS object, we extract the id using the current portIdFunction. Otherwise we just pass it back as-is.

Returns:

String:

Port's id, if we could resolve it, otherwise the object we were given.

getPortType

() String

Gets the type of the Port represented by the given JS object

Returns:

String:

Either the port's type, if set, or "default".

getRenderer

(
  • id
)
AbstractRenderer

Gets a renderer by the id parameter supplied to the render call (which is by default null, and only renderers for which an id was supplied are retrievable via this method)

Parameters:

  • id String

    ID of the renderer to retrieve.

Returns:

AbstractRenderer:

Either a Renderer that was registered against the given id, or null if none found.

getRenderers

() Object

Gets all renderers registered on this instance of the jsPlumb Toolkit.

Returns:

Object:

A map of id-> Renderer pairs.

getSelection

() Selection

Gets the current Selection for this Toolkit instance.

Returns:

Selection:

Current Selection.

getSourceEdgesFor

(
  • obj
  • [filter]
)
Edge[]

Gets all edges where the given Node, Port or Group is the source.

Parameters:

  • obj Node | Port

    Object to retrieve edges for.

  • [filter] Function optional

    Optional filter function for edge selection.

Returns:

Edge[]:

a list of Edges.

getType

(
  • obj
)
String

Gets the type of the given Object. This is not a type such as Node, Port or Edge - this is the type of the object as defined by your system to identify types; these are the types used to lookup objects in the view.

Parameters:

Returns:

String:

The object's type.

getTypeFunction

() Function

Returns the type function that is currently in use.

Returns:

Function:

Function currently being used to determine types of nodes from their data. The default is to look for a type member in the data.

load

(
  • params
)
JsPlumbToolkitInstance

Loads some data, either via ajax, or directly from a JS object.

Parameters:

  • params Object

    Load parameters.

    • [type="json"] String optional

      Specifies the data type of the data to load. This must match the name of a loader registered with the given instance of the Toolkit.

    • [data] Object optional

      Optional. JSON data to load directly.

    • [url] String optional

      URL to retrieve data from. Optional, but you need to supply either this or data.

    • [jsonp=false] Boolean optional

      Optional, defaults to false. Tells the Toolkit that the data is coming via JSON-P.

    • [onload] Function optional

      Optional callback to execute once the data has loaded. Most often used when you are retrieving remote data (using url and possibly jsonp)

    • [parameters] Object optional

      Optional parameters to pass to the loader.

    • [error] Function optional

      Optional function to call on load error.

    • [headers] Object optional

      Optional map of HTTP header values, if loading via URL.

Returns:

JsPlumbToolkitInstance:

The current instance of the Toolkit. If you provide data directly to this method you can then chain a load call with a subsequent render.

remove

(
  • obj
)

Removes whatever is identified by obj, which may be one of a number of things.

Parameters:

  • obj Node | Group | Edge | Selection | Path

    Either a Node id, a Node, a Group ID, a Group, an Edge, or Selection or Path whose Nodes/Ports and Edges to remove.

removeEdge

(
  • edge
  • [source]
)
JsPlumbToolkitInstance

Removes an Edge from the Graph.

Parameters:

  • edge Edge | String

    The Edge to remove, as either an Edge object or its id.

  • [source] Object optional

    The source for the removeEdge operation. For internal use.

Returns:

JsPlumbToolkitInstance:

The current Toolkit instance.

removeFromGroup

(
  • node
  • [doNotFireEvent=false]
)
Group

Removes a Node from a Group.

Parameters:

  • node Node

    Node to remove

  • [doNotFireEvent=false] Boolean optional

    If true, a group:removeMember event will not be fired as a result of this operation. Otherwise it will.

Returns:

Group:

The Group from which the Node was removed.

removeFromSelection

(
  • obj
)

Removes obj from the current selection

Parameters:

  • obj Node | Edge | Node[] | Edge[] | Path | String

    Object to deselect. May be a Node/Edge or an array of either of these, or a Node id, or a Path, or a DOM element.

removeGroup

(
  • group
  • [removeChildNodes=false]
  • [doNotFireEvent=false]
)
JsPlumbToolkitInstance

Removes the given Group from the dataset.

Parameters:

  • group Group | String

    Group or ID of Group to remove.

  • [removeChildNodes=false] Boolean optional

    If true, Nodes that are members of the Group will also be removed.

  • [doNotFireEvent=false] Boolean optional

    If true, a groupRemoved will not be fired as a result of this operation. Otherwise it will.

Returns:

JsPlumbToolkitInstance:

The current toolkit instance.

removeNode

(
  • node
)
JsPlumbToolkitInstance

Removes the given Node, which may be passed in as the actual Node object, or its id.

Parameters:

  • node Node | String

    Either a Node, or its ID.

Returns:

JsPlumbToolkitInstance:

The current Toolkit instance.

removePort

(
  • node
  • portId
)
Boolean

Removes the Port with the given id from the given Node.

Parameters:

  • node Node | String

    Either a node id, or a Node, from which the Port should be removed.

  • portId String

    Id of the port to remove from the given node.

Returns:

Boolean:

True if the port existed and was removed, false otherwise.

render

(
  • params
)

Configures the given element as a renderer, registering it so that it reflects any changes to the underlying data. This method turns the given element into a Surface if it is not already one. If there is any data in the Toolkit at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as jsPlumb rules for endpoints, paint styles etc.

Parameters:

  • params Object

    Method parameters

    • container Element | Selector

      Element to convert into a Surface.

    • [id] String optional

      Optional id to register the created Surface against. You can then retrieve the Surface via toolkit.getRenderer(id). If you do not provide this, one will be assigned. The ID is written as the renderer's id property.

    • [elementsDraggable=true] Boolean optional

      Whether or not elements in the Surface should be draggable.

    • [dragOptions] Object optional

      Options for draggable elements.

    • [events] Object optional

      Optional event bindings. See documentation.

    • [miniview] Object optional

      Optional miniview configuration. See documentation.

    • [mode="Pan"] String optional

      Mode to initialize the Surface in.

    • [panDistance=50] Number optional

      How far a pan nudge should move the UI (in pixels).

    • [enablePan=true] Boolean optional

      Whether or not panning (via mouse drag) is enabled.

    • [enableWheelZoom=true] Boolean optional

      Whether or not zooming with the mouse wheel is enabled.

    • [wheelFilter] String optional

      Optional CSS selector representing elements that should not respond to wheel zoom.

    • [wheelSensitivity=10] Number optional

      How many pixels each click of the mouse wheel represents when zooming. Note that this value, while expressed in pixels, is mapped in a variety of ways depending on the browser.

    • [enablePanButtons=true] Boolean optional

      Whether or not to show the pan nudge buttons on the borders of the widgets.

    • [padding] Number optional

      Optional values for padding in the x/y axes to leave around the content. This is only of any use if you have disabled panning via mouse drag, since in that case the user sees only scroll bars and has no way of navigating beyond the content. Some padding makes the UI nicer to use. Default is [0,0].

    • [lassoFilter] String optional

      Optional selector for elements on which a mousedown should not cause the lasso to activate.

    • [consumeRightClick=true] Boolean optional

      Useful for development: set this to false if you don't want the widget to consume context menu clicks.

    • [jsPlumb] Object optional

      Optional set of jsPlumb Defaults to use for this renderer. The format and allowed properties is that of the Defaults object in jsPlumb. You can also set display properties in the model.

    • [enhancedModel=true] Boolean optional

      If false, there will be no support for preconfigured parameters or functions in the definitions inside a Model. You will want to set this for Angular if you use the 2-way data binding.

save

(
  • params
)
JsPlumbToolkitInstance

Saves the current data via ajax POST to a given URL.

Parameters:

  • params Object

    Save parameters

    • [type="json"] String optional

      Specifies the data type in which to format the data. This must match the name of an exporter registered with the given instance of the Toolkit.

    • url String

      URL to POST data to.

    • [parameters] Object optional

      Optional parameters to pass to the exporter. If you write a custom exporter you may wish to use this.

    • [success] Function optional

      Callback to execute once the data has saved successfully.

    • [error] Function optional

      Callback to execute if there was an error saving the data.

    • [headers] Object optional

      Optional headers to set on the ajax request. By default, the Toolkit will send a Content-Type:"application/json" header. If you provide your own headers this header will continue to be sent, unless of course you override it.

Returns:

JsPlumbToolkitInstance:

The current instance of the Toolkit. If you provide data directly to this method you can then chain a load call with a subsequent render.

select

(
  • obj
  • [includeEdges=false]
)

Gets an ad-hoc selection

Parameters:

  • obj Node | Port | Edge | Node[] | Port[] | Edge[] | Path | String

    Object to select. May be a Node/Port/Edge or an array of either

  • [includeEdges=false] Boolean optional

    If true, include edges between nodes/ports. of these, or a Node id, a Selection, or a Path.

selectAll

()

Sets the current selection to be every node in the toolkit instance.

selectAllEdges

() Selection

Gets all edges in the Toolkit instance as a Selection object.

Returns:

selectDescendants

(
  • obj
  • [includeRoot=false]
  • [includeEdges=false]
)

Selects all descendants of some Node, and, optionally, the Node itself.

Parameters:

  • obj Node | Port | Edge | Node[] | Port[] | Edge[] | Path | String

    Object to select. May be a Node/Port/Edge or an array of either of these, or a Node id, a Selection, or a Path.

  • [includeRoot=false] Boolean optional

    Whether or not to include the root node in the returned dataset.

  • [includeEdges=false] Boolean optional

    Whether or not to include edges in the returned dataset.

setDoNotUpdateOriginalData

(
  • update
)

Sets whether or not the original dataset will be updated whenever a node/edge is removed or added. This functionality is suspended when a load operation is taking place. Note that for this functionality to work there must be a manager registered for the given data type in jsPlumbToolkitIO. The Toolkit ships with a manager for the default json datatype, but if you have your own custom datatype you will need to provide one of these to support this functionality. See the documentation on data loading for a full discussion.

Parameters:

  • update Boolean

    True if you want the backing data to be updated, false otherwise.

setEdgeFactory

(
  • f
)

Sets the current EdgeFactory.

Parameters:

  • f Function

    Edge factory to set as current; see documentation for a discussion

setGroupFactory

(
  • f
)

Sets the current GroupFactory.

Parameters:

  • f Function

    Group factory to set as current; see documentation for a discussion

setMaxSelectedEdges

(
  • maxEdges
)

Sets the maximum number of edges that may be selected at any one time. Default is Infinity.

Parameters:

  • maxEdges Integer

    Max number of edges allowed to be selected at once.

setMaxSelectedNodes

(
  • maxNodes
)

Sets the maximum number of nodes that may be selected at any one time. Default is Infinity.

Parameters:

  • maxNodes Integer

    Max number of nodes allowed to be selected at once.

setNodeFactory

(
  • f
)

Sets the current NodeFactory.

Parameters:

  • f Function

    Node factory to set as current; see documentation for a discussion

setPortFactory

(
  • f
)

Sets the current PortFactory.

Parameters:

  • f Function

    Port factory to set as current; see documentation for a discussion

setSelection

(
  • obj
)

Sets obj as the current selection for this instance of the jsPlumb Toolkit.

Parameters:

  • obj Node | Edge | Node[] | Edge[] | Path | String

    Object to select. May be a Node/Edge or an array of either of these, or a Node id, or a Path.

setSelectionCapacityPolicy

(
  • policy
)

Sets The action taken when appending an edge or node that would take the selection above its limit for that given type. Depends on the current capacityPolicy, which can be either Selection.DISCARD_EXISTING (the default) or Selection.DISCARD_NEW.

Parameters:

  • policy String

    One of Selection.DISCARD_EXISTING (which removes the 0th entry from the list before insertion of the new value) or Selection.DISCARD_NEW.

setSource

(
  • edge
  • o
)

Sets the source Node/Port for some Edge.

Parameters:

  • edge Edge

    Edge to set source for.

  • o Node | Port | String

    Node/Port/id for new Edge source

setSuspendRendering

(
  • v
  • [thenRefresh=false]
)

Suspends or re-enables rendering. This method simply round-robins all the registered renderers and calls setSuspendRendering on each of them.

Parameters:

  • v Boolean

    True to suspend rendering, false to enable it.

  • [thenRefresh=false] Boolean optional

    If true, a refresh will be called on all renderers after rendering is unsuspended.

setTarget

(
  • edge
  • o
)

Sets the target Node/Port for some Edge.

Parameters:

  • edge Edge

    Edge to retarget.

  • o Node | Port | String

    Node/Port/id for new Edge target

setType

(
  • obj
  • type
)

Sets the type of the given object. This will do two things:

  1. update the appropriate property in the object's data to this new value. You can set what properties define types, but by default each of Node, Edge and Port use type as the property that indicates their type.
  2. attempt to apply a type definition for the new type, if one is found. NB this only applies to Edge objects, as at version 1.1.0. Support for Nodes (including switching node templates) is a possible future enhancement.

Parameters:

  • obj Node | Port | Edge

    Object to set the type for.

  • type String

    Type to set on the object.

toggleSelection

(
  • obj
)

Toggles whether or not the given obj forms part of the current selection.

Parameters:

  • obj Node | Edge | Node[] | Edge[] | Path | String

    Object to select. May be a Node/Edge or an array of either of these, or a Node id, or a Path, or a DOM element.

update

(
  • object
  • [updates]
)
Node | Port | Edge

Updates the given object, notifying any renderers to do a repaint.

Parameters:

  • object Node | Port | Edge | String

    Either a Node, Port or Edge, or, as a string, the id of some Node or Port.

  • [updates] Object optional

    An object with path->value pairs. Path can be in dotted notation. You do not actually have to supply this, although in most cases you will want to. But there are edge cases in which you might simply wish to kick off a repaint.

Returns:

Node | Port | Edge:

The object that was updated, or null if not found.

updateEdge

(
  • edge
  • [updates]
)

Updates the given Edge, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.

Parameters:

  • edge Edge | String | Object

    Either an Edge, an Edge id, or the backing data for an Edge.

  • [updates] Object optional

    An object with path->value pairs. Path can be in dotted notation. You do not actually have to supply this, although in most cases you will want to. But there are edge cases in which you might simply wish to kick off a repaint.

updateNode

(
  • node
  • [updates]
)

Updates the given Group, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.

Parameters:

  • node Group | String | Object

    Either a Group, a Group id, or the backing data for a Group.

  • [updates] Object optional

    An object with path->value pairs. Path can be in dotted notation. You do not actually have to supply this, although in most cases you will want to. But there are edge cases in which you might simply wish to kick off a repaint.

updateNode

(
  • node
  • [updates]
)

Updates the given Node, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.

Parameters:

  • node Node | String | Object

    Either a Node, a Node id, or the backing data for a Node.

  • [updates] Object optional

    An object with path->value pairs. Path can be in dotted notation. You do not actually have to supply this, although in most cases you will want to. But there are edge cases in which you might simply wish to kick off a repaint.

updatePort

(
  • port
  • [updates]
)

Updates the given Port, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.

Parameters:

  • port Port | String | Object

    Either a Port, a Port id, or the backing data for a Port.

  • [updates] Object optional

    An object with path->value pairs. Path can be in dotted notation. You do not actually have to supply this, although in most cases you will want to. But there are edge cases in which you might simply wish to kick off a repaint.