Abstract Adds an Edge to the Graph.
Options for the new edge
Optional source: ToolkitRenderer<any>The renderer that was the source of the action. Optional, used internally.
Optional doNotFireEvent: booleanOptional. Won't fire an event if this is true. For internal use only.
The Edge that was added.
Adds a Group by type, running the data generation for the node through the current GroupFactory. This is
different from addGroup in that with addGroup you are supplying the final data and your GroupFactory is
not called. This method can be called with one, two or three arguments. A single argument is considered to be
the new Group'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 Group's backing data OR a callback to
hit with the newly created Group. With three arguments the second argument is the Group's backing data and the
third is a callback to hit with the newly created Group.
Required. Type of the object to create. type will be passed as the first argument to your group factory.
Optional data: ObjectDataOptional backing data for the Group.
Optional continueCallback: FunctionOptional function to call with the newly created Group.
Optional abortCallback: FunctionOptional function to call if the group factory aborted
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.
Required. Type of the object to create. type will be passed as the first argument to your node factory.
Optional data: ObjectDataOptional backing data for the Node.
Optional continueCallback: FunctionOptional function to call with the newly created Node.
Optional abortCallback: FunctionOptional function to call if the factory aborted the node add.
Adds a new Port to some Node. This will call the current portFactory to get the data for a new Port.
node/group or id of the node/group to add a new Port to.
Type of Port to add.
Optional portData: ObjectDataData to pass to the PortFactory.
Optional doNotFireEvent: booleanAdds 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.
The Node's backing data - from your data model.
Optional eventInfo: anyOptional 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.
Optional doNotFireEvent: booleanA Node object. Your original data is available via the data member. The Node's id is available via the id member.
Adds a list of Nodes.
An array of objects, one for each Node to be added.
The current Toolkit instance.
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.
Path params
Optional edgeOptional nodeID of source, or source Node/Port
Optional strict?: booleanID of target, or target Node/Port
Adds a Port from existing data to some Node/Group. This is distinct from addNewPort, because in this
case the data for the Port already exists.
Node/Group or id of the Node/Group to add the Port to.
Data for the Port.
Optional doNotFireEvent: booleanThe port that was added.
Adds a Node/Group to a Group.
Node to add
Group to add the Node/Group to
Optional sourceGroup: GroupOptional Group the Node previously belonged to.
Optional position: PointXYOptional previous position of the Node in sourceGroup.
Optional source: ToolkitRenderer<any>For internal use. Identifies the renderer that instigated this model change. This renderer will not subsequently respond to the model change, since it already knows about it and its UI has been changed accordingly already.
True if added, false otherwise.
Appends obj to the current selection. If there is no current selection, obj becomes it.
Object to select. May be a Node/Group/Port/Edge or an array of any of these, or a Vertex id, or a Path.
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.
Append parameters.
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.
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.
Bind an event listener. This method can be used with a type parameter by call sites; although it's not necessary it can be helpful to use this to ensure you've thought about what the payload to your event handler is going to be.
Name of the event(s) to bind to.
Function to bind to the given event(s)
Optional e: anyOptional insertAtStart: booleanWhether or not to insert this listener at the head of the listener queue. Defaults to false.
Removes a transient vertex from the underlying dataset, and from the list of transient vertices for the given renderer. Removes any edges attached to the transient node. None of these operations occur within a transaction and none are propagated to all attached renderers: only the renderer that invokes this method is notified of the deletion of edges and the node.
Fires a 'graphClearStart' event, clears the graph, then fires a graphClearEnd event.
The current Toolkit instance.
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".
Connect parameters.
The new Edge.
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.
A function that takes (index, edge) as arguments and is applied for every Node in the Toolkit instance.
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.
A function that takes (index, node) as arguments and is applied for every Node in the Toolkit instance.
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.
A function that takes (index, node) as arguments and is applied for every Node in the Toolkit instance.
Exports the current data to JSON.
Optional params: ExportOptionsExport parameters
JSON payload.
Filter the dataset and return a Selection containing matches. You can optionally provide a type parameter to indicate the type of objects you expect back in the Selection.
Either a function which is passed every object in the dataset and expected to return true to indicate inclusion, or an object containg key:value pairs to match in the backing data of each object in the dataset
Optional includePartials: booleanIf true, objects whose data matches one or more, but not all, of the pairs in spec will be included in the result. By default objects have to match all the pairs in spec to be included in the result.
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.
An array of arrays, each entry being a list of nodes in the cluster.
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.
Edge from which to retrieve id.
Edge's id, if we could resolve it, otherwise the object we were given.
Gets the type of the Edge represented by the given JS 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.
Either the Edge's type, if set, or "default".
Gets the type of the Group 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'.
Groups's data. Note: this is NOT a Group object, it is the backing data. You can use
getType to get the type for some Toolkit object.
Either the object's type, or default.
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'.
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.
Either the object's type, or default.
Finds information related to the given object, which may be an existing Toolkit object, a Node/Group/Edge id, or the backing data for some object.
A Node/Group/Edge id, or Node, Port, Group or Edge
A JS object containing obj (the Toolkit object), id (the Node/Port/Group/Edge ID), type ("Port", "Node", "Group", "Edge")
Gets a Path from some source vertex to some target vertex.
Path spec params
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.
Port's id, if we could resolve it, otherwise the object we were given.
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)
ID of the renderer to retrieve.
Either a Renderer that was registered against the given id, or null if none found.
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.
Object to retrieve type for
The object's type.
Loads some data, either via ajax, or directly from a JS object.
Load options.
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.
Protected Abstract loadMethod stub for subclasses to implement for loading data.
Opens a transaction.
Optional cleanupAction: TransactionCleanupActionWhat to do if a transaction already exists. If you supply nothing, or an inappropriate value, here and there is a current transaction, then an Error is thrown.
Removes an Edge from the Graph.
The Edge to remove, as either an Edge object or its id.
Optional source: anyThe source for the removeEdge operation. For internal use.
The current Toolkit instance.
Removes a Node/Group from a Group.
Node/Group to remove, or its id, or the data representing it.
Optional doNotFireEvent: booleanFor internal use. If true, a group:removeMember event will not be fired as a result of
this operation. Otherwise it will.
Optional targetGroup: GroupFor internal use. Group to which the Node is being moved, if that applies.
Optional source: ToolkitRenderer<any>For internal use. The renderer in which user activity caused this method to be called. We echo that out in the event parameters, allowing renderers to not respond to events they raised.
The Group from which the Node was removed.
Removes obj from the current selection
Object to deselect. May be a Node/Edge/Group/Port or an array of any of these, or a Vertex id, or a Path.
Removes the given Group from the dataset.
Group or ID of Group to remove.
Optional removeChildren: booleanIf true, Nodes/Groups that are members of the Group will also be removed. Defaults to false.
Optional doNotFireEvent: booleanIf true, a group:removed will not be fired as a result of this
operation. Otherwise it will.
Removes the given Node, which may be passed in as the actual Node object, or its id.
Either a Node, or its ID.
Optional doNotFireEvent: booleanThe current Toolkit instance.
Removes a Port from the dataset.
If a string is passed in here, it may represent the full ID of some port, ie in "vertex.port" notation,
or it may be the ID of the vertex on which the port to be removed resides. If you do not pass a string to this argument you can pass a Port instead, or you can
pass the Node/Group on which the port resides (in which case you'll also need to provide a value for portId)
Optional portId: stringId of the port to remove from the given node. Only required if you did not provide a full port ID, or the Port itself, to vertexOrId.
True if the port existed and was removed, false otherwise.
Saves the current data via ajax POST to a given URL.
Save parameters
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.
Selects all descendants of some Node or Group, and, optionally, the Node/Group itself.
Node/Group, or ID of Node/Group, to select
Optional includeFocus: booleanWhether or not to include the focus node/group in the returned dataset. Defaults to false.
Optional includeEdges: booleanWhether or not to include edges in the returned dataset. Defaults to false.
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.
True if you want the backing data to be updated, false otherwise.
Sets obj as the current selection for this instance of the jsPlumb Toolkit.
Object to select. May be a Node/Edge/Group or an array of any of these, or a Node/Group id, or a Path.
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.
One of Selection.DISCARD_EXISTING (which removes the 0th entry from the list before insertion of the new value) or Selection.DISCARD_NEW.
Suspends or re-enables rendering. This method simply round-robins all the registered renderers
and calls setSuspendRendering on each of them.
True to suspend rendering, false to enable it.
Optional thenRefresh: booleanDefaults to false. If true, a refresh will be called on all renderers after rendering is unsuspended.
Sets the type of the given object. This will do two things:
type as the property that indicates their type.Object to set the type for.
Type to set on the object.
Toggles whether or not the given obj forms part of the current selection.
Object to select. May be a Node/Group/Port/Edge or an array of any of these, or a Vertex id, or a Path.
Opens a transaction and runs the given function within it, then commits the transaction. If your function returns false (boolean false, not false-y), the transaction is rolled back instead of committed.
Function to run.
Optional cleanupAction: TransactionCleanupActionWhat to do if a transaction already exists.
Unbind the given event listener, or all listeners. If you call this method with no arguments then all event listeners are unbound.
Optional eventOrListener: string | FunctionEither an event name, or an event handler function
Optional listener: FunctionIf eventOrListener is defined, this is the event handler to unbind.
Updates the given object, notifying any renderers to do a repaint.
Either a Node, Group, Port or Edge, or, as a string, the id of some Node, Group, Port or Edge.
Optional updates: ObjectDataAn 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.
Optional reason: stringUpdates the given Edge, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.
Either an Edge, an Edge id, or the backing data for an Edge.
Optional updates: ObjectDataAn 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.
Optional reason: stringUpdates the given Group, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.
Either a Group, a Group id, or the backing data for a Group.
Optional updates: ObjectDataAn 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.
Optional reason: stringUpdates the given Node, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.
Either a Node, a Node id, or the backing data for a Node.
Optional updates: ObjectDataAn 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.
Optional reason: stringUpdates the given Port, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.
Either a Port, or a full Port id
Optional updates: ObjectDataAn 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.
Optional reason: stringUpdates the given Node/Group, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.
Either a Node/Group, a Node/Group id, or the backing data for a Node/Group.
Optional updates: ObjectDataAn 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.
Optional reason: string
Core functionality. When using JsPlumb this class is the one that you'll interact with the most - you can manage the data model, select/deselect objects, import/export data.
This class is extended by renderer specific subclasses.