Skip to main content

VisuallyJsModel

Core VisuallyJs model functionality. This class provides the basic data model of an directed/undirected graph, and offers methods to add/update/remove nodes, groups, edges and ports. Multiple renderers can share one instance of the model.

Extended by​

Implements​

Methods​

addAllEdgesToSelection()​

addAllEdgesToSelection(): void

Adds all the edges in the model to the current selection.

Returns​

void


addEdge()​

addEdge(params): Edge

Adds an Edge to the Graph.

Parameters​

params​

AddEdgeOptions

Options for the new edge

Returns​

Edge

The Edge that was added.

Implementation of​

WriteableDatasource.addEdge


addFactoryGroup()​

addFactoryGroup(type, data?, continueCallback?, abortCallback?, useTransaction?): void

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.

Parameters​

type​

string

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

data?​

ObjectData

Optional backing data for the Group.

continueCallback?​

Function

Optional function to call with the newly created Group.

abortCallback?​

Function

Optional function to call if the group factory aborted

useTransaction?​

boolean

Returns​

void


addFactoryNode()​

addFactoryNode(type, data?, continueCallback?, abortCallback?, useTransaction?): void

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?​

ObjectData

Optional backing data for the Node.

continueCallback?​

Function

Optional function to call with the newly created Node.

abortCallback?​

Function

Optional function to call if the factory aborted the node add.

useTransaction?​

boolean

Whether or not to add this new factory node in a transaction.

Returns​

void


addGroup()​

addGroup(data, eventInfo?): Group

Adds a new Group.

Parameters​

data​

ObjectData

Backing data for the Group.

eventInfo?​

any

Used internally, sometimes, by VisuallyJs.

Returns​

Group

The Group that was added.


addGroupTemplate()​

addGroupTemplate(name, template): void

Registers a group template with the model.

Parameters​

name​

string

Name of the template.

template​

GroupTemplate

Template content, as a string.

Returns​

void


addGroupWithTemplate()​

addGroupWithTemplate(data, template): Group

Adds a group to the model using a GroupTemplate. This operation runs in a single transaction.

Parameters​

data​

ObjectData

Data for the root group.

template​

The template defining internal structure, OR the name of a registered template.

string | GroupTemplate

Returns​

Group


addNewPort()​

addNewPort(obj, type, portData?): void

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

Parameters​

obj​

node/group or id of the node/group to add a new Port to.

string | Node | Group

type​

string

Type of Port to add.

portData?​

ObjectData

Data to pass to the PortFactory.

Returns​

void


addNode()​

addNode(data, eventInfo?): Node

Adds a Node with the given data. If the data is null, VisuallyJs creates an empty object and assigns a uuid as the Node's id. If no id can be derived for the given data, VisuallyJs 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​

ObjectData

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

eventInfo?​

any

Optional data member that VisuallyJs 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()​

addNodes(nodeList): VisuallyJsModel

Adds a list of Nodes.

Parameters​

nodeList​

ObjectData[]

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

Returns​

VisuallyJsModel


addPathToSelection()​

addPathToSelection(params): void

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​

Path params

edgeFilter?​

(n) => boolean

nodeFilter?​

(n) => boolean

source​

string | Vertex

ID of source, or source Node/Port

strict?​

boolean

target​

string | Vertex

ID of target, or target Node/Port

Returns​

void


addPort()​

addPort(vertex, data): 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.

Parameters​

vertex​

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

string | Node | Group

data​

ObjectData

Data for the Port.

Returns​

Port

The port that was added.

Implementation of​

WriteableDatasource.addPort


addToGroup()​

addToGroup(node, group, position?): boolean

Adds a Node/Group to a Group.

Parameters​

node​

Node to add

string | Node | Group

group​

Group to add the Node/Group to

string | Group

position?​

PointXY

Returns​

boolean

True if added, false otherwise.


addToSelection()​

addToSelection(obj): void

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

Parameters​

obj​

Object to select. May be a Node/Group/Port/Edge or an array of any of these, or a Vertex id, or a Path.

string | string[] | Base | Base[] | Path

Returns​

void


append()​

append(params): VisuallyJsModel

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​

LoadOptions

Append parameters.

Returns​

VisuallyJsModel


batch()​

batch(fn): void

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 bulk loading objects, or maybe you want to add a Node and one or more Edges before the layout recomputes.

Parameters​

fn​

() => any

Function to run.

Returns​

void

Implementation of​

WriteableDatasource.batch


bind()​

bind<T>(event, listener, insertAtStart?): EventGenerator

Bind a listener to the named event, optionally inserting the listener at the head of the queue for the given event.

Type Parameters​

T​

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters​

event​

any

Name of the event to bind

listener​

(payload, evt?) => any

Function to bind to the event

insertAtStart?​

boolean

Defaults to false. If true, this handler is inserted at the head of the list of listeners for the given event.

Returns​

EventGenerator

Implementation of​

WriteableDatasource.bind

Inherited from​

OptimisticEventGenerator.bind


bindAll()​

bindAll<T>(events, listener, insertAtStart?): EventGenerator

Bind a listener to all of the named events, optionally inserting each one at the head of the queue for the given event.

Type Parameters​

T​

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters​

events​

any[]

listener​

(payload, evt?) => any

insertAtStart?​

boolean

Returns​

EventGenerator

Inherited from​

OptimisticEventGenerator.bindAll


bindUnchecked()​

bindUnchecked<T>(event, listener, insertAtStart?): EventGenerator

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.

Type Parameters​

T​

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters​

event​

string

Name of the event(s) to bind to.

listener​

(a, e?) => any

Function to bind to the given event(s)

insertAtStart?​

boolean

Whether or not to insert this listener at the head of the listener queue. Defaults to false.

Returns​

EventGenerator

Inherited from​

OptimisticEventGenerator.bindUnchecked


clear()​

clear(): VisuallyJsModel

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

Returns​

VisuallyJsModel

The current Toolkit instance.


clearEdgeGeometry()​

clearEdgeGeometry(edge): void

Clears the geometry for some edge. The edge will be repainted using the default route calculation, and an entry will be added to the undo stack.

Parameters​

edge​

Edge

Edge to clear geometry for.

Returns​

void


clearSelection()​

clearSelection(): void

Clears the current selection and fires a selectionCleared event.

Returns​

void


commitTransaction()​

commitTransaction(commitAll?): void

Commits any changes made in the current transaction to the undo stack. If there is no current transaction this method does nothing.

Parameters​

commitAll?​

boolean

Returns​

void

Implementation of​

WriteableDatasource.commitTransaction


connect()​

connect(params): Edge

Connects two nodes/ports (or a combination of the two), by ID. 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​

ConnectOptions

Connect parameters.

Returns​

Edge

The new Edge.


eachEdge()​

eachEdge(fn): void

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

Parameters​

fn​

(idx, edge) => void

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

Returns​

void

Implementation of​

WriteableDatasource.eachEdge


eachGroup()​

eachGroup(fn): void

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

Parameters​

fn​

(idx, group) => void

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

Returns​

void

Implementation of​

WriteableDatasource.eachGroup


eachNode()​

eachNode(fn): void

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

Parameters​

fn​

(idx, node) => void

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

Returns​

void

Implementation of​

WriteableDatasource.eachNode


eachVertex()​

eachVertex(fn): void

Combines eachNode and eachGroup into one method.

Parameters​

fn​

(idx, vertex) => void

Returns​

void

Implementation of​

WriteableDatasource.eachVertex


exists()​

exists(...objects): boolean

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

Parameters​

objects​

...any[]

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()​

exportData(params?): any

Exports the current data to JSON.

Parameters​

params?​

ExportOptions

Export parameters

Returns​

any

JSON payload.


filter()​

filter<T>(spec, includePartials?): VisuallyJsSelection

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.

Type Parameters​

T​

T = any

Parameters​

spec​

(o) => boolean | ObjectData

Either a function which is passed every object in the dataset and expected to return true to indicate inclusion, or an object containing key:value pairs to match in the backing data of each object in the dataset

includePartials?​

boolean

If 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.

Returns​

VisuallyJsSelection

Implementation of​

WriteableDatasource.filter


findGraphObject()​

findGraphObject(spec): Edge | Vertex | Graph

Finds the object that matches the given spec.

Parameters​

spec​

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.

string | Edge | Vertex

Returns​

Edge | Vertex | Graph


flushUndoRedo()​

flushUndoRedo(): void

Clears out the undo/redo stacks and discards (neither commits nor rolls back) any existing transaction.

Returns​

void


getAllEdges()​

getAllEdges(): Edge[]

Get all Edges in the model

Returns​

Edge[]

Implementation of​

WriteableDatasource.getAllEdges


getAllEdgesFor()​

getAllEdgesFor(obj, filter?): Edge[]

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

Parameters​

obj​

Vertex

Object to retrieve edges for.

filter?​

(e) => boolean

Optional filter function for edge selection.

Returns​

Edge[]

Implementation of​

WriteableDatasource.getAllEdgesFor


getAncestors()​

getAncestors(vertex): Group[]

Gets a list of groups that are ancestors of the given node/group (or port, for which we first resolve the node/group it resides on). The list of ancestors is ordered in terms of their proximity to the focus, ie. the first entry is the focus vertex's immediate parent.

Parameters​

vertex​

Vertex

Returns​

Group[]

Implementation of​

WriteableDatasource.getAncestors


getCluster()​

getCluster(vertex): Cluster

Calculates the set of nodes and groups (and edges) that are connected to the given vertex.

Parameters​

vertex​

a Cluster - a list of vertices and a list of edges that are connected to the given vertex.

string | Node | Group

Returns​

Cluster


getClusters()​

getClusters(): Cluster[]

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​

Cluster[]

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


getDescendants()​

getDescendants(vertex): (Node | Group)[]

Gets a list of nodes/groups that are descendants of the given group.

Parameters​

vertex​

Group

Returns​

(Node | Group)[]

Implementation of​

WriteableDatasource.getDescendants


getEdge()​

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.

Implementation of​

WriteableDatasource.getEdge


getEdgeCount()​

getEdgeCount(): number

Returns the total number of edges in the graph.

Returns​

number

Implementation of​

WriteableDatasource.getEdgeCount


getEdges()​

getEdges(params?): Edge[]

Gets a set of edges.

Parameters​

params?​

EdgeSelectionParams

Options for the edge selection

Returns​

Edge[]


getEdgeType()​

getEdgeType(edgeData): string

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

Parameters​

edgeData​

ObjectData

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".

Implementation of​

WriteableDatasource.getEdgeType


getGraph()​

getGraph(): Graph

Returns the current Graph.

Returns​

Graph

The underlying Graph.

Implementation of​

WriteableDatasource.getGraph


getGroup()​

getGroup(groupId): Group

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

Parameters​

groupId​

string

Returns​

Group

The requested Group, if found, otherwise null.

Implementation of​

WriteableDatasource.getGroup


getGroupAt()​

getGroupAt(idx): Group

Returns the Group at the given index, null if not found.

Parameters​

idx​

number

Index into group list

Returns​

Group

Implementation of​

WriteableDatasource.getGroupAt


getGroupCount()​

getGroupCount(): number

Returns the total number of group in the Graph.

Returns​

number

Implementation of​

WriteableDatasource.getGroupCount


getGroupId()​

getGroupId(group): string

Gets the id of the Group 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​

group​

Object from which to retrieve id.

string | ObjectData

Returns​

string

Implementation of​

WriteableDatasource.getGroupId


getGroups()​

getGroups(): Group[]

Returns all the Groups in the Graph.

Returns​

Group[]

Implementation of​

WriteableDatasource.getGroups


getGroupType()​

getGroupType(groupData): string

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'.

Parameters​

groupData​

ObjectData

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 model object.

Returns​

string

Either the object's type, or default.

Implementation of​

WriteableDatasource.getGroupType


getModel()​

getModel(): DataModel

Gets the model registered with this VisuallyJs instance, if any. Use VisuallyJs's model to map data model event handlers and other data model considerations such as the maximum number of connections a Port allows

Returns​

DataModel

Current model. May be null.

Implementation of​

WriteableDatasource.getModel


getNode()​

getNode(nodeId): Node

Gets the Node with the given id.

Parameters​

nodeId​

string

Returns​

Node

Implementation of​

WriteableDatasource.getNode


getNodeAt()​

getNodeAt(idx): Node

Returns the Node at the given index.

Parameters​

idx​

number

Returns​

Node

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

Implementation of​

WriteableDatasource.getNodeAt


getNodeCount()​

getNodeCount(): number

Returns the count of nodes in the Graph.

Returns​

number

The count of Nodes in the Graph.

Implementation of​

WriteableDatasource.getNodeCount


getNodeId()​

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 from which to retrieve id.

string | ObjectData

Returns​

string

Implementation of​

WriteableDatasource.getNodeId


getNodes()​

getNodes(): Node[]

Returns all the nodes in the Graph.

Returns​

Node[]

All the Nodes in the graph.

Implementation of​

WriteableDatasource.getNodes


getNodeType()​

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​

ObjectData

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.

Implementation of​

WriteableDatasource.getNodeType


getObjectInfo()​

getObjectInfo<T>(obj): ObjectInfo<T>

Finds information related to the given object, which may be an existing model object, a Node/Group/Edge id, or the backing data for some object.

Type Parameters​

T​

T

Parameters​

obj​

A Node/Group/Edge id, or Node, Port, Group or Edge

string | Node | Edge | Group | Port | ObjectData

Returns​

ObjectInfo<T>

ObjectInfo

Implementation of​

WriteableDatasource.getObjectInfo


getPath()​

getPath(params): Path

Gets a Path from some source vertex to some target vertex.

Parameters​

params​

PathOptions

Path spec params

Returns​

Path


getPort()​

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.


getPortId()​

getPortId(port): 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.

Parameters​

port​

ObjectData

Returns​

string

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

Implementation of​

WriteableDatasource.getPortId


getPortType()​

getPortType(port): string

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

Parameters​

port​

ObjectData

Returns​

string

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

Implementation of​

WriteableDatasource.getPortType


getRenderer()​

getRenderer<E>(id): VisuallyJsRenderer<E>

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)

Type Parameters​

E​

E

Parameters​

id​

string

ID of the renderer to retrieve.

Returns​

VisuallyJsRenderer<E>

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


getSelection()​

getSelection(): VisuallyJsSelection

Gets the current Selection for this model

Returns​

VisuallyJsSelection

Current Selection.


getType()​

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​

obj​

Base

Object to retrieve type for

Returns​

string

The object's type.

Implementation of​

WriteableDatasource.getType


getVertex()​

getVertex(id): Node | Group

Gets the Vertex with the given id.

Parameters​

id​

string

Returns​

Node | Group

Implementation of​

WriteableDatasource.getVertex


isAncestor()​

isAncestor(focus, possibleAncestor): boolean

Returns whether or not possibleAncestor is in fact an ancestor of the given focus node/group

Parameters​

focus​

Vertex

Vertex to test

possibleAncestor​

Group

Group which may be an ancestor of focus

Returns​

boolean

Implementation of​

WriteableDatasource.isAncestor


isDescendantGroup()​

isDescendantGroup(possibleDescendant, ancestor): boolean

Determine whether possibleDescendant is in fact a descendant of the ancestor group

Parameters​

possibleDescendant​

Group

Group to test

ancestor​

Group

Ancestor group

Returns​

boolean

Implementation of​

WriteableDatasource.isDescendantGroup


load()​

load(params): VisuallyJsModel

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

Parameters​

params​

LoadOptions

Load options.

Returns​

VisuallyJsModel


mergeTransaction()​

mergeTransaction(fn): string | false

Opens a transaction and runs the given function. If the function returns true, the model changes from this transaction are merged with the previous entry on the undo stack, to form a new compound action, which can then be treated atomically. If the function return false, the transaction is rolled back and nothing is merged. If an uncommitted transaction is active when this method is called, the actions in this transaction are appended to the transaction in progress. This method is useful for situations where some user activity has resulted in a model change, and you want to respond with a further set of model changes, but you want to be able to undo/redo all of the actions as one unit.

Parameters​

fn​

() => any

Returns​

string | false

A string providing the associated transaction's ID, null if nothing was merged to a transaction.


openTransaction()​

openTransaction(cleanupAction?): string

Opens a transaction.

Parameters​

cleanupAction?​

TransactionCleanupAction

What 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.

Returns​

string

Implementation of​

WriteableDatasource.openTransaction


redo()​

redo(): void

Redo the latest operation that was undone, if there is one. Otherwise does nothing.

Returns​

void


remove()​

remove(obj, doNotRemoveGroupChildren?): void

Attempts to identify the given argument as a model object, and, if successful, removes it. If you pass in a group or group ID to this method, the group and all of its children will, by default, be removed. You can override that behaviour by setting doNotRemoveGroupChildren to true.

Parameters​

obj​

any

A string representing the ID of some model object, or a model object of some type.

doNotRemoveGroupChildren?​

boolean

Whether or not to remove group children. Defaults to false, ie. group children will be removed by default.

Returns​

void


removeEdge()​

removeEdge(edge, renderer?): VisuallyJsModel

Removes an Edge from the Graph.

Parameters​

edge​

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

string | Edge

renderer?​

any

The source for the removeEdge operation. For internal use.

Returns​

VisuallyJsModel

The model instance.

Implementation of​

WriteableDatasource.removeEdge


removeFromGroup()​

removeFromGroup(node): Group

Removes a Node/Group from a Group.

Parameters​

node​

Node/Group to remove, or its id, or the data representing it.

string | Node | Group | ObjectData

Returns​

Group


removeFromSelection()​

removeFromSelection(obj): void

Removes obj from the current selection

Parameters​

obj​

Object to deselect. May be a Node/Edge/Group/Port or an array of any of these, or a Vertex id, or a Path.

string | Base | Base[] | Path

Returns​

void


removeGroup()​

removeGroup(group, removeChildren?, doNotFireEvent?): boolean

Removes the given Group from the dataset.

Parameters​

group​

Group or ID of Group to remove.

string | Group

removeChildren?​

boolean

If true, Nodes/Groups that are members of the Group will also be removed. Defaults to false.

doNotFireEvent?​

boolean

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

Returns​

boolean


removeNode()​

removeNode(node): boolean

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

Parameters​

node​

Either a Node, or its ID.

string | Vertex

Returns​

boolean

True if node removed, false if not.


removePort()​

removePort(vertexOrId, portId?): boolean

Removes a Port from the dataset, returning true if the port existed and was removed and false otherwise.

Parameters​

vertexOrId​

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)

string | Node | Group | Port

portId?​

string

Id 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.

Returns​

boolean


resolveNode()​

resolveNode(v): Node | Group

For the given vertex, resolves the node/group it pertains to. If the vertex is already a node/group, it is returned. Otherwise, if it is a port, the parent of the port is returned.

Parameters​

v​

Vertex

Returns​

Node | Group


rollbackTransaction()​

rollbackTransaction(): void

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.

Returns​

void

Implementation of​

WriteableDatasource.rollbackTransaction


save()​

save(params): VisuallyJsModel

Saves data via ajax POST to a given URL. By default this method sends the return value of #exportData as its payload, but you can provide your own data to save if you wish.

Parameters​

params​

SaveOptions

Save parameters

Returns​

VisuallyJsModel


select()​

select(obj, includeEdges?): VisuallyJsSelection

Gets an ad-hoc selection

Parameters​

obj​

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

string | string[] | Base | VisuallyJsSelection | Base[] | Path

includeEdges?​

boolean

If true, include edges between vertices

Returns​

VisuallyJsSelection


selectAllEdges()​

selectAllEdges(): VisuallyJsSelection

Gets all edges in the model as a VisuallyJsSelection.

Returns​

VisuallyJsSelection


selectDescendants()​

selectDescendants(obj, includeFocus?, includeEdges?): VisuallyJsSelection

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

Parameters​

obj​

Node/Group, or ID of Node/Group, to select

string | Node | Group

includeFocus?​

boolean

Whether or not to include the focus node/group in the returned dataset. Defaults to false.

includeEdges?​

boolean

Whether or not to include edges in the returned dataset. Defaults to false.

Returns​

VisuallyJsSelection

Graph Query​


setAutoSave()​

setAutoSave(autoSaveOptions): void

Sets options for the auto save mechanism.

Parameters​

autoSaveOptions​

AutoSaveOptions

Returns​

void


setMaxSelectedEdges()​

setMaxSelectedEdges(maxEdges): void

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

Parameters​

maxEdges​

number

Max number of edges allowed to be selected at once.

Returns​

void


setMaxSelectedNodes()​

setMaxSelectedNodes(maxNodes): void

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

Parameters​

maxNodes​

number

Max number of nodes allowed to be selected at once.

Returns​

void


setSelection()​

setSelection(obj): void

Sets obj as the current selection for this model.

Parameters​

obj​

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

string | Base | Base[] | Path

Returns​

void


setSelectionCapacityPolicy()​

setSelectionCapacityPolicy(policy): void

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.

Returns​

void


setSource()​

setSource(edge, o): any

Sets the source for the given edge to be the given vertex.

Parameters​

edge​

Edge

Edge to set source for.

o​

ID of vertex, or vertex.

string | PointXY | Vertex

Returns​

any


setSuspendRendering()​

setSuspendRendering(v, thenRefresh?): void

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?​

boolean

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

Returns​

void


setTarget()​

setTarget(edge, o): any

Sets the target for the given edge to be the given vertex.

Parameters​

edge​

Edge

Edge to set target for.

o​

ID of vertex, or vertex.

string | PointXY | Vertex

Returns​

any


setType()​

setType(obj, newType): void

Sets the type of the given object. This will do two things - first it will 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. Secondly, this method will attempt to apply a type definition for the new type, if one is found.

Parameters​

obj​

Base

Object to set the type for.

newType​

string

Type to set on the object.

Returns​

void


toggleSelection()​

toggleSelection(obj): void

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

Parameters​

obj​

Object to select. May be a Node/Group/Port/Edge or an array of any of these, or a Vertex id, or a Path.

string | Base | Base[] | Path

Returns​

void


toJSON()​

toJSON(): any

Helper method to allow JSON.stringify to be called with an instance of VisuallyJs as argument (JSON.stringify looks for a toJSON() method on each object it is attempting to serialise). This method generates the same output as calling exportData().

Returns​

any


transaction()​

transaction(fn, cleanupAction?): string | false

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.

Parameters​

fn​

() => any

Function to run.

cleanupAction?​

TransactionCleanupAction

What to do if a transaction already exists.

Returns​

string | false

A string providing the transaction's ID, null if no transaction was created.


unbind()​

unbind(eventOrListener?, listener?): EventGenerator

Unbind the given event listener, or all listeners. If you call this method with no arguments then all event listeners are unbound.

Parameters​

eventOrListener?​

Either an event name, or an event handler function

string | Function

listener?​

Function

If eventOrListener is defined, this is the event handler to unbind.

Returns​

EventGenerator

Implementation of​

WriteableDatasource.unbind

Inherited from​

OptimisticEventGenerator.unbind


undo()​

undo(): void

Undo the latest operation, if there is one. Otherwise does nothing.

Returns​

void


update()​

update(object, updates?): void

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

Parameters​

object​

Base

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

updates?​

ObjectData

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​

void


updateEdge()​

updateEdge(obj, updates?): void

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​

obj​

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

string | Edge

updates?​

ObjectData

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​

void


updateGroup()​

updateGroup(group, updates?): void

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​

group​

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

string | Group | ObjectData

updates?​

ObjectData

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​

void


updateNode()​

updateNode(node, updates?): void

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​

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

string | Node | ObjectData

updates?​

ObjectData

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​

void


updatePort()​

updatePort(port, updates?): void

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​

Either a Port, or a full Port id

string | Port

updates?​

ObjectData

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​

void


updateVertex()​

updateVertex(vertex, updates?): void

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.

Parameters​

vertex​

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

string | Node | Group | Port | ObjectData

updates?​

ObjectData

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​

void

Implementation of​

WriteableDatasource.updateVertex


updateVertices()​

updateVertices(updates, cleanupAction?): void

Updates the given list of vertices. This method runs in a transaction, by default appending itself to any current transaction (as updating a list of vertices is the common end result of various operations on the data model), but you can provide your own cleanup action if desired.

Parameters​

updates​

object[]

cleanupAction?​

TransactionCleanupAction

Returns​

void

Implementation of​

WriteableDatasource.updateVertices