Manipulating items
You can easily manipulate Diagram items via the Diagram Editor. But in this article we'll explore the examples on how to manipulate the items of DHTMLX Diagram via the component's API. The article contains different sections that cover such questions as:
- how to automatically arrange shapes in the hierarchical order;
- how to perform a range of operations over items, in particular:
- add/update/delete items;
- check if an item exists in the diagram and get it;
- select a certain item;
- scroll to a necessary item to make it visible on the screen, if there are many items in the diagram;
- expand/collapse items;
- find items that meet some criteria;
- filter diagram to render particular items;
- how to manage the drag-n-drop of child items of a group;
- how to operate the swimlane and its cells, namely:
- set/reset the active swimlane;
- get the type of the subheader of a swimlane;
- add/remove/move a column/row;
- get the id/index of a cell and check which actions can be done over the cell.
Arranging shapes automatically
The library provides you with the ability to implement auto-placement for shapes and connectors of the diagram initialized in the default mode. The auto-placement allows you:
- to place connected shapes in the symmetric order at once;
- to arrange data loaded in the JSON format or loaded from the server in the hierarchical structure.
To perform the auto-placement, you need to make use of the autoPlace() method. The method can take one parameter:
- config - (object) optional, an object with configuration settings of the auto-placement. The object contains two optional properties:
- mode - (string) the mode of connecting shapes, "direct" (by default) or "edges"
- graphPadding - (number) sets the distance between unconnected diagrams, "200" by default
- placeMode - (string) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);
diagram.autoPlace({
mode: "edges",
graphPadding: 100,
placeMode: "radial"
});
Related sample: Diagram. Default mode. Autoplacement
In case you don't pass the parameter to the method, the default settings will be applied.
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);
diagram.autoPlace();
There is also the ability to configure settings for the auto-placement by using the autoplacement configuration option of Diagram and applying the autoPlace() method.
The autoPlace() method works only in the default mode of the diagram and only for shapes.
Adding an item
To add a new item into a diagram, apply the add() method of the data object.
diagram.data.add({ id: "3.2", text: "New Item", parent: "3" });
For example, we've added a new shape object that has the following attributes:
- id - (string|number) the unique id of a shape
- text - (string) the text to be rendered in a shape
- parent - (string|number) the id of the parent shape
You can check all available properties of shape objects in the API section.
Related sample: Diagram. Data. Add/delete item
Getting an item
You can get the object of an item by passing its id to the getItem() method of the data object. For example:
const shape = diagram.data.getItem(1);
After getting an item, you can access its original properties, as follows:
const shape = diagram.data.getItem(1);
const text = shape.text;
Getting the id of an item
If the id of an item is unknown, you can use the getId() method to get it. The method takes the index of the item as a parameter:
const id = diagram.data.getId(0); // -> returns "1"
Getting the index of an item
You can get the index of an item by passing its id to the getIndex() method:
const id = diagram.data.getIndex("1"); // -> returns 0