Skip to main content

Home > @jsplumbtoolkit/core > JsPlumbToolkit

JsPlumbToolkit class#

Core Toolkit functionality. This class is extended by renderer specific subclasses.

Signature:

export declare abstract class JsPlumbToolkit extends OptimisticEventGenerator implements DataSource 

Extends: OptimisticEventGenerator

Implements: DataSource

Constructors#

ConstructorModifiersDescription
(constructor)(params)Constructs a new instance of the JsPlumbToolkit class

Properties#

PropertyModifiersTypeDescription
_renderersByIdMap<string, ToolkitRenderer<any>>
autoSaveboolean
autoSaveDebounceTimeoutnumber
autoSaveHandler(instance: JsPlumbToolkit) => any
autoSaverAutoSaver
beforeConnect(source: Vertex, target: Vertex, data?: any) => any
beforeDetach(source: Vertex, target: Vertex, edge: Edge, isDiscard?: boolean) => any
beforeMoveConnection(source: Vertex, target: Vertex, edge: Edge) => any
beforeStartConnect(source: Vertex, type: string) => any
beforeStartDetach(source: Vertex, edge: Edge) => any
debugEnabledboolean
defaultCostnumber
defaultDirectedboolean
defaultObjectFactoryObjectFactory
doNotUpdateOriginalDataboolean
edgeFactoryObjectFactory
edgeIdFunctionIdFunction
edgeTypeFunctionTypeFunction
edgeTypePropertystring
enableSubgraphsboolean
graphGraph
graphParams{ portSeparator: string; defaultCost: number; defaultDirected: boolean; enableSubgraphs: boolean; }
groupFactoryObjectFactory
idFunctionIdFunction
modelDataModel
nodeFactoryObjectFactory
onAfterAutoSave() => any
onAutoSaveError() => any
onAutoSaveSuccess() => any
onBeforeAutoSave() => any
portDataPropertystring
portExtractorFunction
portFactoryObjectFactory
portIdFunctionIdFunction
portOrderPropertystring
portSeparatorstring
portTypeFunctionTypeFunction
portTypePropertystring
portUpdaterFunction
saveHeadersany
saveUrlstring
typeFunctionTypeFunction
typePropertystring
undoRedoUndoRedoManager

Methods#

MethodModifiersDescription
addAllEdgesToSelection()Adds all the Edges in the Toolkit instance to the Toolkit's current selection.
addEdge(params, source, doNotFireEvent)Adds an Edge to the Graph.
addFactoryGroup(type, data, continueCallback, abortCallback)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.
addFactoryNode(type, data, continueCallback, abortCallback)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.
addGroup(data, eventInfo, doNotFireEvent)Adds a new Group.
addNewPort(obj, type, portData, doNotFireEvent)Adds a new Port to some Node. This will call the current portFactory to get the data for a new Port.
addNode(data, eventInfo, doNotFireEvent)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.
addNodes(nodeList)Adds a list of Nodes.
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.
addPort(vertex, data, doNotFireEvent)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.
addToGroup(node, group, sourceGroup, position, source)Adds a Node/Group to a Group.
addToSelection(obj)Appends obj to the current selection. If there is no current selection, obj becomes it.
append(params)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.
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.
clear()Fires a 'graphClearStart' event, clears the graph, then fires a graphClearEnd event.
clearSelection()Clears the current selection and fires a selectionCleared event.
commitTransaction()Commits any changes made in the current transaction to the undo stack. If there is no current transaction this method does nothing.
connect(params)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".
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.
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.
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.
eachVertex(fn)Combines eachNode and eachGroup into one method.
exists(objects)Returns whether or not object(s) exist for the given id(s).
exportData(params)Exports the current data to JSON.
filter(spec, includePartials)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.
findGraphObject(spec)Finds the object that matches the given spec.
flushUndoRedo()Clears out the undo/redo stacks and discards (neither commits nor rolls back) any existing transaction.
getAllEdges()Get all Edges in the Toolkit instance.
getAllEdgesFor(obj, filter)Gets all edges for the given Node, Port or Group.
getClusters()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.
getEdge(edgeId)Gets an Edge by id, or if the given object is already an Edge, hands that back.
getEdgeCount()Returns the total number of edges in the graph.
getEdgeId(edge)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.
getEdges(params)Gets a set of edges.
getEdgeType(edgeData)Gets the type of the Edge represented by the given JS object.
getGraph()Returns the current Graph.
getGroup(groupId)Gets a Group by its ID, or if the object is already a Group, hands that back.
getGroupAt(idx)Returns the Group at the given index, null if not found.
getGroupCount()Returns the total number of group in the Graph.
getGroups()Returns all the Groups in the Graph.
getModel()Gets the model registered with this Toolkit instance, if any. 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
getNode(nodeId)Gets the Node with the given id.
getNodeAt(idx)Returns the Node at the given index.
getNodeCount()Returns the count of nodes in the Graph.
getNodeId(node)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.
getNodes()Returns all the nodes in the Graph.
getNodeType(nodeData)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'.
getObjectInfo(obj)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.
getPath(params)Gets a Path from some source vertex to some target vertex.
getPort(portId)Gets a port by its full id
getPortId(port)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.
getPortType(port)Gets the type of the Port represented by the given JS object
getRenderer(id)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)
getRenderers()Gets all renderers registered on this instance of the jsPlumb Toolkit.
getSelection()Gets the current Selection for this Toolkit instance.
getType(obj)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.
getTypeFunction()Returns the type function that is currently in use.
getVertex(id)gets the Vertex with the given id.
load(params)Loads some data, either via ajax, or directly from a JS object.
loadData(options)Method stub for subclasses to implement for loading data.
openTransaction(cleanupAction)Opens a transaction.
redo()Redo the latest operation that was undone, if there is one. Otherwise does nothing.
remove(obj)Attempts to identify the given argument as a model object, and, if successful, removes it.
removeEdge(edge, source)Removes an Edge from the Graph.
removeFromGroup(node, doNotFireEvent, targetGroup, source)Removes a Node/Group from a Group.
removeFromSelection(obj)Removes obj from the current selection
removeGroup(group, removeChildren, doNotFireEvent)Removes the given Group from the dataset.
removeNode(node, doNotFireEvent)Removes the given Node, which may be passed in as the actual Node object, or its id.
removePort(vertexOrId, portId)Removes a Port from the dataset.
rollbackTransaction()Rolls back the current transaction, undoing any changes to the data model made in the transaction. If there is no current transaction this method does nothing.
save(params)Saves the current data via ajax POST to a given URL.
select(obj, includeEdges)Gets an ad-hoc selection
selectAllEdges()Gets all edges in the Toolkit instance as a Selection object.
selectDescendants(obj, includeFocus, includeEdges)Selects all descendants of some Node or Group, and, optionally, the Node/Group itself.
setAutoSave(autoSaveOptions)Sets options for the auto save mechanism.
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.
setMaxSelectedEdges(maxEdges)Sets the maximum number of edges that may be selected at any one time. Default is Infinity.
setMaxSelectedNodes(maxNodes)Sets the maximum number of nodes that may be selected at any one time. Default is Infinity.
setSelection(obj)Sets obj as the current selection for this instance of the jsPlumb Toolkit.
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.
setSource(edge, o, doNotFireEvent)Sets the source for the given edge to be the given vertex.
setSuspendGraph(v)Sets whether operations on the underlying graph are
setSuspendRendering(v, thenRefresh)Suspends or re-enables rendering. This method simply round-robins all the registered renderers and calls setSuspendRendering on each of them.
setTarget(edge, o, doNotFireEvent)Sets the target for the given edge to be the given vertex.
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.
toggleSelection(obj)Toggles whether or not the given obj forms part of the current selection.
transaction(fn, cleanupAction)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.
undo()Undo the latest operation, if there is one. Otherwise does nothing.
update(object, updates)Updates the given object, notifying any renderers to do a repaint.
updateEdge(obj, 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.
updateGroup(group, 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.
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.
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.
updateVertex(vertex, updates)Updates the given Node/Group, notifying any Renderers to do a redraw. If autoSave is set, this method will cause the dataset to be saved.