The original

Act as a camera on the canvas, animating, zooming, and focusing.

Configuration items for the layout must be contained in an object named manipulation.

Preview complete configuration items

var options = {
  manipulation: {
    enabled: false.initiallyActive: false.addNode: true.addEdge: true.editNode: undefined.editEdge: true.deleteNode: true.deleteEdge: true.controlNodeStyle: {// all node options are valid.
    }
  }
}

network.setOptions(options);
Copy the code

Configuration Item Details

The name of the type The default instructions
enabled Boolean false Turn on or off the visual operating system. This property is optional. This configuration item is set to true if any of the following is used.
initiallyActive Boolean true When true, the “Add Node” and “Add edge” buttons in the toolbar are displayed

When false, only the ‘Edit’ button is displayed.
addNode Boolean or Function true When true, the “Add Node” button is displayed in the toolbar

This function is called when the user clicks the canvas in Add Node mode. This function receives two variables: a property of the node that can be created and a callback function.

Example: var options = {

                manipulation: {

                    addNode: function(nodeData,callback) {

                                          nodeData.label = ‘hello world’;

                                          callback(nodeData);

                                        }

                     }

            }

This function changes the label attribute of the new node to “Hello World”. If you do not want to create a node, you can either not call callback, or make the callback argument null or without arguments.
addEdge Boolean or Function true To invoke the
editNode Function undefined A node can only be edited if a handler is provided.

If the value of this configuration item is undefined, node editing is disabled.

This function is called when a node is selected and the Edit Node button on the toolbar is pressed. What this function does is the same asaddNodeFunction the same
editEdge Boolean or Function true If true, you can switch edits on the side in the toolbar.

If a function is provided, it is called when an edge is selected and the Edit Edge button on the toolbar is pressed.

In the initial state of node editing, you can drag side endpoints to connect to different nodes and then call andaddEdgeFunction A function that has the same function.

If the value is an object, ifeditWithOutDragProperty specifies the function, which is called immediately (without dragging any endpoints) and is the same as the addEdge function. If the callback is not performed, the edge remains edited until the state is released.

To cancel, you can call callback without calling it, or make the callback argument null or without arguments.
deleteNode Boolean or Function true If true, the “show” “delete selected” button in the toolbar after the node is selected.

If it is a function, it is called when a node is selected and the Delete Selected button is pressed. This function receives a callback and an object with a selected array of node ids and a selected array of edge ids. These are the items that will be deleted when the callback is executed.
deleteEdge Boolean or Function true If true, the “show” “delete selected” button in the toolbar after the selected edge.

If it is a function, it is called when an edge is selected and the Delete Selected button is pressed. This function receives a callback and an object with a selected array of node ids and a selected array of edge ids. These are the items that will be deleted when the callback is executed.
controlNodeStyle Object Object You can configure any style information in this configuration item. Configuration items in the node module are allowed, exceptx.y 和 fixed. Default value:

{

    shape:’dot’,

    size:6,

    color: {

        background: ‘#ff0000’,

        border: ‘#3c3c3c’,

        highlight: {

            background: ‘#07f968’,

            border: ‘#3c3c3c’

        }

    },

    borderWidth: 2,

    borderWidthSelected: 2

}