Skip to main content

BrowserUIModel

Concrete implementation of the VisuallyJs model for use in a browser environment, by providing the fetchUrl method (using the browser's fetch API).

Extends

Methods

addAllEdgesToSelection()

addAllEdgesToSelection(): void

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

Returns

void

Inherited from

VisuallyJsModel.addAllEdgesToSelection


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.

Inherited from

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

Inherited from

VisuallyJsModel.addFactoryGroup


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

Inherited from

VisuallyJsModel.addFactoryNode


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.

Inherited from

VisuallyJsModel.addGroup


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

Inherited from

VisuallyJsModel.addGroupTemplate


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

Inherited from

VisuallyJsModel.addGroupWithTemplate


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

Inherited from

VisuallyJsModel.addNewPort


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.

Inherited from

VisuallyJsModel.addNode


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

Inherited from

VisuallyJsModel.addNodes


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

Inherited from

VisuallyJsModel.addPathToSelection


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.

Inherited from

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

Inherited from

VisuallyJsModel.addToGroup


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

Inherited from

VisuallyJsModel.addToSelection


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

Inherited from

VisuallyJsModel.append


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

Inherited from

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

Inherited from

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

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

VisuallyJsModel.bindUnchecked


clear()

clear(): VisuallyJsModel

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

Returns

VisuallyJsModel

The current Toolkit instance.

Inherited from

VisuallyJsModel.clear


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

Inherited from

VisuallyJsModel.clearEdgeGeometry


clearSelection()

clearSelection(): void

Clears the current selection and fires a selectionCleared event.

Returns

void

Inherited from

VisuallyJsModel.clearSelection


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

Inherited from

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

Inherited from

VisuallyJsModel.connect


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

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.eachNode


eachVertex()

eachVertex(fn): void

Combines eachNode and eachGroup into one method.

Parameters

fn

(idx, vertex) => void

Returns

void

Inherited from

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

Inherited from

VisuallyJsModel.exists


exportData()

exportData(params?): any

Exports the current data to JSON.

Parameters

params?

ExportOptions

Export parameters

Returns

any

JSON payload.

Inherited from

VisuallyJsModel.exportData


fetchUrl()

fetchUrl(options): void

Method stub for subclasses to implement for fetching a URL

Parameters

options

UrlFetchOptions

Returns

void

Overrides

VisuallyJsModel.fetchUrl


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

Inherited from

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

Inherited from

VisuallyJsModel.findGraphObject


flushUndoRedo()

flushUndoRedo(): void

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

Returns

void

Inherited from

VisuallyJsModel.flushUndoRedo


getAllEdges()

getAllEdges(): Edge[]

Get all Edges in the model

Returns

Edge[]

Inherited from

VisuallyJsModel.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[]

Inherited from

VisuallyJsModel.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[]

Inherited from

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

Inherited from

VisuallyJsModel.getCluster


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.

Inherited from

VisuallyJsModel.getClusters


getDescendants()

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

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

Parameters

vertex

Group

Returns

(Node | Group)[]

Inherited from

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

Inherited from

VisuallyJsModel.getEdge


getEdgeCount()

getEdgeCount(): number

Returns the total number of edges in the graph.

Returns

number

Inherited from

VisuallyJsModel.getEdgeCount


getEdges()

getEdges(params?): Edge[]

Gets a set of edges.

Parameters

params?

EdgeSelectionParams

Options for the edge selection

Returns

Edge[]

Inherited from

VisuallyJsModel.getEdges


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

Inherited from

VisuallyJsModel.getEdgeType


getGraph()

getGraph(): Graph

Returns the current Graph.

Returns

Graph

The underlying Graph.

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.getGroupAt


getGroupCount()

getGroupCount(): number

Returns the total number of group in the Graph.

Returns

number

Inherited from

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

Inherited from

VisuallyJsModel.getGroupId


getGroups()

getGroups(): Group[]

Returns all the Groups in the Graph.

Returns

Group[]

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.getModel


getNode()

getNode(nodeId): Node

Gets the Node with the given id.

Parameters

nodeId

string

Returns

Node

Inherited from

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

Inherited from

VisuallyJsModel.getNodeAt


getNodeCount()

getNodeCount(): number

Returns the count of nodes in the Graph.

Returns

number

The count of Nodes in the Graph.

Inherited from

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

Inherited from

VisuallyJsModel.getNodeId


getNodes()

getNodes(): Node[]

Returns all the nodes in the Graph.

Returns

Node[]

All the Nodes in the graph.

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.getObjectInfo


getPath()

getPath(params): Path

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

Parameters

params

PathOptions

Path spec params

Returns

Path

Inherited from

VisuallyJsModel.getPath


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.

Inherited from

VisuallyJsModel.getPort


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.

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.getRenderer


getSelection()

getSelection(): VisuallyJsSelection

Gets the current Selection for this model

Returns

VisuallyJsSelection

Current Selection.

Inherited from

VisuallyJsModel.getSelection


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.

Inherited from

VisuallyJsModel.getType


getVertex()

getVertex(id): Node | Group

Gets the Vertex with the given id.

Parameters

id

string

Returns

Node | Group

Inherited from

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

Inherited from

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

Inherited from

VisuallyJsModel.isDescendantGroup


load()

load(params): VisuallyJsModel

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

Parameters

params

LoadOptions

Load options.

Returns

VisuallyJsModel

Inherited from

VisuallyJsModel.load


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.

Inherited from

VisuallyJsModel.mergeTransaction


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

Inherited from

VisuallyJsModel.openTransaction


redo()

redo(): void

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

Returns

void

Inherited from

VisuallyJsModel.redo


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

Inherited from

VisuallyJsModel.remove


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.

Inherited from

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

Inherited from

VisuallyJsModel.removeFromGroup


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

Inherited from

VisuallyJsModel.removeFromSelection


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

Inherited from

VisuallyJsModel.removeGroup


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.

Inherited from

VisuallyJsModel.removeNode


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

Inherited from

VisuallyJsModel.removePort


render()

render(container, options?, templateRenderer?): Surface

Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the model 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 rules for paint styles etc.

Parameters

container

BrowserElement

The Element to render into

options?

VanillaSurfaceOptions

Render options

templateRenderer?

TemplateRenderer<any>

Returns

Surface


renderDiagram()

renderDiagram(container, options?): Diagram

Renders a Diagram into the given element, using the provided options.

Parameters

container

BrowserElement

The Element to render into

options?

DiagramOptions

Options for the diagram.

Returns

Diagram


renderPaper()

renderPaper(container, options?, defaults?, templateRenderer?): Paper

Configures the given element as a Paper, registering it so that it reflects any changes to the underlying data. If there is any data in the model 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 rules for paint styles etc.

Parameters

container

BrowserElement

The Element to render into

options?

PaperOptions

Render options

defaults?

PaperDefaults

templateRenderer?

TemplateRenderer<any>

Mainly for internal use, or for certain advanced usage scenarios.

Returns

Paper


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

Inherited from

VisuallyJsModel.resolveNode


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

Inherited from

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

Inherited from

VisuallyJsModel.save


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

Inherited from

VisuallyJsModel.select


selectAllEdges()

selectAllEdges(): VisuallyJsSelection

Gets all edges in the model as a VisuallyJsSelection.

Returns

VisuallyJsSelection

Inherited from

VisuallyJsModel.selectAllEdges


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

Inherited from

VisuallyJsModel.selectDescendants


setAutoSave()

setAutoSave(autoSaveOptions): void

Sets options for the auto save mechanism.

Parameters

autoSaveOptions

AutoSaveOptions

Returns

void

Inherited from

VisuallyJsModel.setAutoSave


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

Inherited from

VisuallyJsModel.setMaxSelectedEdges


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

Inherited from

VisuallyJsModel.setMaxSelectedNodes


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

Inherited from

VisuallyJsModel.setSelection


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

Inherited from

VisuallyJsModel.setSelectionCapacityPolicy


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

Inherited from

VisuallyJsModel.setSource


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

Inherited from

VisuallyJsModel.setSuspendRendering


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

Inherited from

VisuallyJsModel.setTarget


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

Inherited from

VisuallyJsModel.setType


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

Inherited from

VisuallyJsModel.toggleSelection


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

Inherited from

VisuallyJsModel.toJSON


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.

Inherited from

VisuallyJsModel.transaction


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

Inherited from

VisuallyJsModel.unbind


undo()

undo(): void

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

Returns

void

Inherited from

VisuallyJsModel.undo


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

Inherited from

VisuallyJsModel.update


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

Inherited from

VisuallyJsModel.updateEdge


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

Inherited from

VisuallyJsModel.updateGroup


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

Inherited from

VisuallyJsModel.updateNode


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

Inherited from

VisuallyJsModel.updatePort


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

Inherited from

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

Inherited from

VisuallyJsModel.updateVertices