Network - manipulation

Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.

Options

When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.

nametypedefaultdescription
enabled Boolean false Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.
initiallyActive Boolean true Toggle whether the toolbar is visible initially or if only the edit button is visible initially.
locale String 'en' Select the locale. By default, the language is English. If you want to use another language, you will need to define your own locale and refer to it here.
locales Object defaultLocales Locales object. By default only 'en' and 'nl' are supported. Take a look at the locales section below for more explaination on how to customize this.
functionality Object Object You can use this object to switch certain functionalities on or off. By default they are all on.
handlerFunctions Object Object These functions are inserted before the action is performed. If a node is going to be added through the manipulation system, the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do.
controlNodeStyle Object ObjectYou can supply any styling information you'd like here. All fields described in the nodes module are allowed except obviously for id, x, y and fixed.

Default:
{
  shape:'dot',
  size:6,
  color: {
    background: '#ff0000',
    border: '#3c3c3c',
    highlight: {
      background: '#07f968',
      border: '#3c3c3c'
    }
  },
  borderWidth: 2,
  borderWidthSelected: 2
}

Methods

This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

namereturnsdescription
enableEditMode() noneProgramatically enable the edit mode. Similar effect to pressing the edit button.
disableEditMode()noneProgramatically disable the edit mode. Similar effect to pressing the close icon (small cross in the corner of the toolbar).
addNodeMode() noneGo into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this mode, call disableEditMode(). The callback functions defined in handlerFunctions still apply. To use these methods without having the manipulation GUI, make sure you set enabled to false.
editNodeMode() noneGo into editNode mode. The explaination from addNodeMode applies here as well.
addEdgeMode() noneGo into addEdge mode. The explaination from addNodeMode applies here as well.
editEdgeMode() noneGo into editEdge mode. The explaination from addNodeMode applies here as well.
deleteSelected() noneDelete selected. Having edit mode or manipulation enabled is not required.

Events

There are no events emitted by the layout module.

Locales

The locales object has the following format:

var locales = {
  en: {
    edit: 'Edit',
    del: 'Delete selected',
    back: 'Back',
    addNode: 'Add Node',
    addEdge: 'Add Edge',
    editNode: 'Edit Node',
    editEdge: 'Edit Edge',
    addDescription: 'Click in an empty space to place a new node.',
    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
    createEdgeError: 'Cannot link edges to a cluster.',
    deleteClusterError: 'Clusters cannot be deleted.',
    editClusterError: 'Clusters cannot be edited.'
  }
}

If you want to define your own locale, you can change the key ('en' here) and change all the string. You can then use your new key in the locale option.