Skip to main content

ModelOptions

Constructor options for a VisuallyJs model instance.

Properties​

beforeConnect?​

optional beforeConnect: BeforeConnectInterceptor

Definition of a function to use as a beforeConnect interceptor.

Param​

The source vertex for the new edge

Param​

The target vertex for the new edge

Param​

If true, the new edge came from user activity, with a pointer device or touch input. This will be false whenever the edge is added programmatically, either during a data load or via the addEdge method of VisuallyJsModel.

beforeDetach?​

optional beforeDetach: BeforeDetachInterceptor

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted.

Param​

Edge's source.

Param​

Candidate target for the edge

Param​

The edge that is being detached.

beforeMoveConnection?​

optional beforeMoveConnection: BeforeMoveConnectionInterceptor

A function to run before an edge of the given type is relocated from its current source or target to a new source or target. Returning false from this method will abort the move.

Param​

Candidate source. May be the edge's current source, or may be a new source.

Param​

Candidate target. May be the edge's current target, or may be a new target.

Param​

The edge that is being moved.

beforeStartConnect?​

optional beforeStartConnect: BeforeStartConnectInterceptor

A function to run before an edge of the given type is dragged from the given source. Returning false from this method will abort the connection.

Param​

Param​

beforeStartDetach?​

optional beforeStartDetach: BeforeStartDetachInterceptor

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted. The difference between this and beforeDetach is that this method is fired as soon as a user tries to detach an edge from an endpoint in the UI, whereas beforeDetach allows a user to detach the edge in the UI.

Param​

Param​

data?​

optional data: any

Data to load directly after Toolkit has been created.

defaultCost?​

optional defaultCost: number

The default cost for an edge. Default value is 1.

defaultDirected?​

optional defaultDirected: boolean

Whether edges are directed by default. The default value for this is true - edges are directed by default.

edgeFactory?​

optional edgeFactory: ObjectFactory

Optional factory method used when creating edges via the addFactoryEdge method.

edgeIdFunction?​

optional edgeIdFunction: IdFunction

A function to use to determine the ID of some edge from its data. By default VisuallyJs uses the value of the object's id property.

edgeTypeFunction?​

optional edgeTypeFunction: TypeFunction

A function to use to determine the type of some edge from its data object. By default VisuallyJs uses the value of the object's type property.

edgeTypeProperty?​

optional edgeTypeProperty: string

The name of the property that identifies a given edge's type. By default this is the type property. If you do not set this but you do set typeProperty, that value will be used.

events?​

optional events: ModelEventsOptions

Optional model event mappings to bind

groupFactory?​

optional groupFactory: ObjectFactory

Optional factory method used when creating groups via the addFactoryGroup method.

groupProperty?​

optional groupProperty: string

The name of the property inside nodes/groups that identifies their parent group. This defaults to "group" but can be changed if it clashes with your data model.

groupTemplates?​

optional groupTemplates: Record<string, GroupTemplate>

Optional map of group templates to register on the model.

idFunction?​

optional idFunction: IdFunction

A function to use to determine the ID of some data object. By default VisuallyJs uses the value of the object's id property.

maxSelectedEdges?​

optional maxSelectedEdges: number

The maximum number of edges that can be selected at any one time. Defaults to Infinity.

maxSelectedGroups?​

optional maxSelectedGroups: number

The maximum number of groups that can be selected at any one time. Defaults to Infinity.

maxSelectedNodes?​

optional maxSelectedNodes: number

The maximum number of nodes that can be selected at any one time. Defaults to Infinity.

modelHeightAttribute?​

optional modelHeightAttribute: string

The name of the property inside a vertex's data that identifies its height. Defaults to height.

modelLeftAttribute?​

optional modelLeftAttribute: string

The name of the property inside a vertex's data that identifies its location in the y axis. Defaults to top.

modelRotationAttribute?​

optional modelRotationAttribute: string

The name of the property inside a vertex's data that identifies its rotation. Defaults to rotation.

modelTopAttribute?​

optional modelTopAttribute: string

The name of the property inside a vertex's data that identifies its location in the x axis. Defaults to left.

modelWidthAttribute?​

optional modelWidthAttribute: string

The name of the property inside a vertex's data that identifies its width. Defaults to width.

nodeFactory?​

optional nodeFactory: ObjectFactory

Optional factory method used when creating nodes via the addFactoryNode method.

portDataProperty?​

optional portDataProperty: string

The name of a property that will exist inside the backing data for nodes/group, and which represents a list of ports pertaining to that node/group. When a node/group is rendered, if this property is set, VisuallyJs will consider the value of this property to be a list of port data objects. So this property's value should be of type Array<ObjectData>. Note that this mechanism is fine for models where either all vertex types that have ports have them keyed with the same property, or you only have a single vertex type with ports, but for more advanced setups you should look at the portExtractor function.

portExtractor()?​

optional portExtractor: (o, nodeOrGroup) => ObjectData[]

A function to use to extract an array of ports from the data representing some node/group. Whenever a node/group is rendered, VisuallyJs will use this method, if provided, to determine a list of ports for that node/group. If you use this you probably also want to define a portUpdater. Note that if you provide the portDataProperty then you do not need to set this.

Parameters​

o​

ObjectData

nodeOrGroup​

Node | Group

Returns​

ObjectData[]

portFactory?​

optional portFactory: ObjectFactory

Optional factory method used when creating ports via the addFactoryPort method.

portIdFunction?​

optional portIdFunction: IdFunction

A function to use to determine the ID of some port from its data. By default VisuallyJs uses the value of the object's id property.

portOrderProperty?​

optional portOrderProperty: string

The name of a property inside of each port's data that can be used to order the ports. For instance, you might have ports that have a rank property, which is a number. VisuallyJs will sort the ports according to the natural ordering of this property. Note that this mechanism is fine for models where either all vertex types that have ports have them keyed with the same property, or you only have a single vertex type with ports, but for more advanced setups you should look at the portUpdated function.

portSeparator?​

optional portSeparator: string

The character to use in port identifiers. Defaults to ., eg. someVertex.somePort.

portTypeFunction?​

optional portTypeFunction: TypeFunction

A function to use to determine the type of some port from its data object. By default VisuallyJs uses the value of the object's type property.

portTypeProperty?​

optional portTypeProperty: string

The name of the property that identifies a given port's type. By default this is the type property. If you do not set this but you do set typeProperty, that value will be used.

portUpdater()?​

optional portUpdater: (data, nodeOrGroup, ports) => ObjectData

A function to use to update a given node/group's list of ports. This function should return a Javascript object which represents the node/group's backing data. This method is invoked whenever changes to some vertex's ports occur.

Note that if you provide the portDataProperty then you do not need to set this.

Parameters​

data​

ObjectData

nodeOrGroup​

Node | Group

ports​

Port[]

Returns​

ObjectData

selectionCapacityPolicy?​

optional selectionCapacityPolicy: string

Defines the action taken when appending an object that would take the selection above its limit for the given object type. This can be either Selection.DISCARD_EXISTING (the default) or Selection.DISCARD_NEW.

selectionMode?​

optional selectionMode: SelectionMode

Optional mode for VisuallyJs's current selection. Defaults to the Selection default - SelectionModes.mixed.

typeFunction?​

optional typeFunction: TypeFunction

A function to use to determine the type of some data object. By default VisuallyJs uses the value of the object's type property.

typeProperty?​

optional typeProperty: string

The name of the property that identifies a given object's type. By default this is the type property.

undoRedo?​

optional undoRedo: object

Configuration for undo/redo

enabled?​

optional enabled: boolean

Whether or not undo/redo is enabled. Defaults to true.

maximumSize?​

optional maximumSize: number

Maximum size of the undo stack. Defaults to 50.