You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/diagram/autoplace_method.md
+15-6Lines changed: 15 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ description: You can learn about the autoPlace method in the documentation of th
7
7
# autoPlace()
8
8
9
9
:::info
10
-
The **autoPlace()** method works only in the default mode of the diagram and only for shapes
10
+
The `autoPlace()` method works only in the default mode of the diagram and only for shapes
11
11
:::
12
12
13
13
### Description
@@ -16,16 +16,18 @@ The **autoPlace()** method works only in the default mode of the diagram and onl
16
16
17
17
### Usage
18
18
19
-
~~~jsx
19
+
~~~ts
20
20
autoPlace(config?:object): void;
21
21
~~~
22
22
23
23
### Parameters
24
24
25
25
-`config` - (optional) an object with configuration settings of the autoplacement. If not specified, the default settings will be applied. Here you can specify the following parameters:
26
-
-`mode` - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
27
-
-`graphPadding` - (optional) sets the distance between unconnected diagrams, 200 by default
28
-
-`placeMode` - (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
26
+
-`mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
27
+
-`graphPadding` - (optional) sets the distance between unconnected diagrams, *200* by default
28
+
-`placeMode` - (optional) sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
29
+
-`itemPadding` - (optional) minimal padding between items (the minimal value is *1*), *20* by default
30
+
-`levelPadding` - (optional) minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
29
31
30
32
### Example
31
33
@@ -51,6 +53,10 @@ Connector lines with no arrows are aligned "from center to center"; they are str
51
53
52
54
Connector lines are aligned "from side to side".
53
55
56
+
:::note
57
+
If `fromSide` and `toSide` are set on a link, the autoplacement algorithm will preserve those values but will not use them during placement calculation. The key properties that define links are `from` and `to`, while `fromSide` and `toSide` are calculated automatically by the algorithm.
58
+
:::
59
+
54
60
:::info
55
61
To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: "filled"** in the configuration of a [line object](../../../lines/configuration_properties/).
56
62
:::
@@ -94,9 +100,12 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. a s
94
100
95
101
**Change log**:
96
102
103
+
- The `itemPadding` and `levelPadding` parameters are added in v6.1.3
Copy file name to clipboardExpand all lines: docs/guides/diagram/configuration.md
+18-7Lines changed: 18 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -121,29 +121,40 @@ You can specify the position of a diagram on a page and set margins for shapes i
121
121
122
122
## Configuring autoplacement for shapes
123
123
124
-
The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [](../../api/diagram/autoplacement_property.md) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams:
124
+
The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [`autoplacement`](/api/diagram/autoplacement_property/) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams:
-**mode** - (*string*) optional, the mode of connecting shapes, "direct" (by default) or "edges"
140
-
-**graphPadding** - (*number*) optional, sets the distance between unconnected diagrams, "200" by default
141
-
-**placeMode** - (*string*) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
144
+
-`mode` - (*string*) optional, the mode of connecting shapes, *"direct"* (by default) or *"edges"*
145
+
-`graphPadding` - (*number*) optional, sets the distance between unconnected diagrams, *200* by default
146
+
-`placeMode` - (*string*) optional, sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
147
+
-`itemPadding` - (*number*) optional, minimal padding between items (the minimal value is *1*), *20* by default
148
+
-`levelPadding` - (*number*) optional, minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
142
149
143
150
:::note
144
-
The autoplacement will be applied only after the [](../../api/diagram/autoplace_method.md) method is applied. The autoplacement does not work if you use groups or swimlanes.
151
+
Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. It works only in the default mode of the diagram and only for shapes. Autoplacement does not work if you use groups or swimlanes.
145
152
:::
146
153
154
+
155
+
156
+
**Related sample**: [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s)
157
+
147
158
## Adjusting the Diagram scale
148
159
149
160
If necessary, you can scale a diagram to fit your application. It can be done with the help of the [](../../api/diagram/scale_property.md) option.
Copy file name to clipboardExpand all lines: docs/guides/manipulating_items.md
+41-11Lines changed: 41 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,11 @@ description: You can learn about manipulating items in the documentation of the
5
5
---
6
6
# Manipulating items
7
7
8
-
You can easily manipulate Diagram items via the [Diagram Editor](../../guides/diagram_editor/initialization/). 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:
8
+
You can easily manipulate Diagram items via the [Diagram Editor](../../guides/diagram_editor/initialization/). But in this article we'll explore the examples on how to manipulate the items of DHTMLX Diagram via the component's API.
9
+
10
+
## Overview
11
+
12
+
The article contains different sections that cover such questions as:
9
13
10
14
-[how to automatically arrange shapes in the hierarchical order](#arranging-shapes-automatically);
11
15
- how to perform a range of operations over items, in particular:
@@ -30,12 +34,18 @@ The library provides you with the ability to implement auto-placement for shapes
30
34
- to place connected shapes in the symmetric order at once;
31
35
- to arrange data loaded in the JSON format or loaded from the server in the hierarchical structure.
32
36
33
-
To perform the auto-placement, you need to make use of the [](../api/diagram/autoplace_method.md) method. The method can take one parameter:
37
+
To perform the auto-placement, you need to make use of the [`autoPlace()`](/api/diagram/autoplace_method/) method. The method can take one parameter:
38
+
39
+
-`config` - (*object*) optional, an object with configuration settings of the auto-placement. The object can contain the following properties:
40
+
-`mode` - (*string*) optional, the mode of connecting shapes, *"direct"* (by default) or *"edges"*
41
+
-`graphPadding` - (*number*) optional, sets the distance between unconnected diagrams, *200* by default
42
+
-`placeMode` - (*string*) optional, sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
43
+
-`itemPadding` - (*number*) optional, minimal padding between items (the minimal value is *1*), *20* by default
44
+
-`levelPadding` - (*number*) optional, minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
34
45
35
-
-**config** - (*object*) optional, an object with configuration settings of the auto-placement. The object contains two optional properties:
36
-
-**mode** - (*string*) the mode of connecting shapes, "direct" (by default) or "edges"
37
-
-**graphPadding** - (*number*) sets the distance between unconnected diagrams, *"200"* by default
38
-
-**placeMode** - (*string*) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
46
+
:::note
47
+
The `autoPlace()` method works only in the default mode of the diagram and only for shapes. The autoplacement does not work if you use groups or swimlanes.
48
+
:::
39
49
40
50
~~~jsx
41
51
constdiagram=newdhx.Diagram("diagram_container");
@@ -44,7 +54,9 @@ diagram.data.parse(data);
44
54
diagram.autoPlace({
45
55
mode:"edges",
46
56
graphPadding:100,
47
-
placeMode:"radial"
57
+
placeMode:"radial",
58
+
itemPadding:10,
59
+
levelPadding:10
48
60
});
49
61
~~~
50
62
@@ -59,11 +71,29 @@ diagram.data.parse(data);
59
71
diagram.autoPlace();
60
72
~~~
61
73
62
-
There is also the ability to configure settings for the auto-placement by using the [](../api/diagram/autoplacement_property.md) configuration option of Diagram and applying the **autoPlace()** method.
74
+
There is also the ability to configure settings for the auto-placement by using the [`autoplacement`](/api/diagram/autoplacement_property/) configuration option of Diagram and applying the `autoPlace()` method. The example below demonstrates how to generate and arrange a radial dataset using autoplacement.
63
75
64
-
:::note
65
-
The **autoPlace()** method works only in the default mode of the diagram and only for shapes.
Copy file name to clipboardExpand all lines: docs/whats_new.md
+14Lines changed: 14 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,20 @@ description: You can learn a new information about DHTMLX JavaScript Diagram lib
8
8
9
9
If you are updating Diagram from an older version, check [Migration to Newer Version](migration.md) for details.
10
10
11
+
## Version 6.1.3
12
+
13
+
Released on May 21, 2026
14
+
15
+
### Updates
16
+
17
+
- Diagram / Diagram Editor. Improvements in the autoplacement logic. Added the ability to control spacing between shapes and levels via new `itemPadding` and `levelPadding` properties in the [`autoPlace()`](/api/diagram/autoplace_method/) Diagram method and the [`autoplacement`](/api/diagram/autoplacement_property/) configuration object
18
+
19
+
### Fixes
20
+
21
+
- Diagram. Fixed the issue where applying autoplacement resulted in incorrect distances between shapes
22
+
- Diagram. Fixed the issue where calling [`autoPlace()`](/api/diagram/autoplace_method/) ignored [`fromSide` and `toSide`](/lines/configuration_properties/) link values, ensuring the diagram structure remains consistent
23
+
- Diagram. The `Radial` autoplacement algorithm was refactored to fix the issue with critically large distances between shapes, providing a more compact layout
0 commit comments