Merge pull request #65 from DHTMLX/next

Docs updates for v6.1

Author: mafanya23

docs/api/data_collection/parse_method.md

@@ -8,24 +8,39 @@ description: You can learn about the parse method of data collection in the docu
 
 ### Description
 
-@short: Loads data from a local data source
+@short: Loads data from a local data source into a diagram and processes them
 
 ### Usage
 
 ~~~jsx
 parse(
-    data: array | string, 
+    data: object[] | { data: object[]; links: object[] } | string,
     driver?: object | string
 ): void;
 ~~~
 
 ### Parameters
 
-- `data` - (required) the data to load. You can load data in any supported data format
+- `data: object[] | { data: object[]; links: object[] } | string` - (required) the data to load. You can load data in any supported data format. The data structure depends on the diagram mode:
+    - for the default, org chart and mindmap Diagram modes it is set as an array that contains a set of data objects
+    ~~~jsx
+    data: object[]; // an array of all shapes and connections
+    ~~~
+    - for the PERT Diagram mode it is an object with:
+      -  the `data` array (for shapes: "task", "milestone", "project") 
+      -  the `links` array (for connections between shapes) 
+    ~~~jsx
+    {
+        data: object[]; // an array of shapes (tasks, milestones, projects)
+        links: object[] // an array of connections between the shapes
+    };
+    ~~~
 - `driver` - (optional) DataDriver or type of data ("json", "csv", "xml"), "json" by default
 
 ### Example
 
+- for the org chart mode of diagram:
+
 ~~~jsx
 const data = [
     {
@@ -50,10 +65,40 @@ const data = [
     { id: "1-3", from: "1", to: "3", type: "line" }
 ];
 
-const diagram = new dhx.Diagram("diagram_container", { type: "org" });
+const diagram = new dhx.Diagram("diagram_container", { 
+    type: "org" 
+});
+
 diagram.data.parse(data);
 ~~~
 
+- for the PERT mode of diagram:
+
+~~~jsx
+const dataset = {
+    data: [
+        { id: "1", text: "Project #1", type: "project", parent: null },
+        { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+        { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+        { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+        { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
+    ],
+    links: [
+        { id: "line-1", source: "1.1", target: "1.2" },
+        { id: "line-2", source: "1.2", target: "2.1" },
+        { id: "line-3", source: "2.1", target: "2.2" },
+    ]
+};
+
+const diagram = new dhx.Diagram("diagram_container", {
+    type: "pert"
+});
+
+diagram.data.parse(dataset);
+~~~
+
 **Related articles**:  [Loading and storing data](../../../guides/loading_data/)
 
-**Related sample**: [Diagram. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/5ign6fyy)
+**Related samples**: 
+- [Diagram. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/5ign6fyy)
+- [Diagram. PERT chart. Initialization](https://snippet.dhtmlx.com/4h5fi7xd)

docs/api/data_collection/serialize_method.md

@@ -8,27 +8,47 @@ description: You can learn about the serialize method of data collection in the
 
 ### Description
 
-@short: Serializes the diagram data into an array of JSON objects
+@short: Exports the current diagram data 
 
 ### Usage
 
 ~~~jsx
-serialize(): array;
+serialize(): object[] | { data: object[]; links: object[] }; 
 ~~~
 
 ### Returns
 
-The method returns an array of JSON objects for each item and link from Diagram
+Depending on the diagram mode, the method returns:
+
+- `object[]` - (for the default, org chart and mindmap Diagram modes) an array of objects for each item and link from Diagram 
+- `{ data: object[]; links: object[] }` - (for the PERT Diagram mode) an object with:
+  - the `data` array of objects (for shapes: "task", "milestone", "project") 
+  - the `links` array of objects (for connections between shapes)
 
 ### Example
 
+- for the default diagram mode
+
 ~~~jsx {6}
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"
 });
 diagram.data.parse(data);
 
-const data = diagram.data.serialize();
+const data = diagram.data.serialize(); // -> [{...}, {...}, {...}, {...}]
+~~~
+
+- for the PERT diagram mode
+
+~~~jsx {6}
+const diagram = new dhx.Diagram("diagram_container", {
+    type: "pert"
+});
+diagram.data.parse(dataset);
+
+const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] };
 ~~~
 
+Note that for the PERT Diagram mode the *links* objects in the exported data object will have [the same types as in the DHTMLX Gantt chart](https://docs.dhtmlx.com/gantt/desktop__link_properties.html). It means that if the type of a link in the Diagram data coincides with some of the Gantt links types, it will remain the same during serialization. If the link type isn't specified or set differently (for example, `type: "line"`), it will be converted into `type: "0"`.
+
 **Related articles**:  [Saving and restoring state](../../../guides/loading_data/#saving-and-restoring-state)

docs/api/diagram/defaultshapetype_property.md

@@ -11,6 +11,7 @@ description: You can learn about the defaultShapeType property in the documentat
 @short: Optional. The default type of a shape
 
 The value is applied, if the shape object doesn't contain the "type" property
+
 ### Usage
 
 ~~~jsx
@@ -37,6 +38,12 @@ defaultShapeType: "card"
 defaultShapeType: "topic"
 ~~~
 
+- In the **PERT** mode of Diagram (type: "pert")
+
+~~~jsx
+defaultShapeType: "task"
+~~~
+
 ### Example
 
 ~~~jsx

docs/api/diagram/lineconfig_property.md

@@ -15,38 +15,46 @@ description: You can learn about the lineConfig property in the documentation of
 ~~~jsx
 lineConfig?: {
     lineType?: "dash" | "line",
-    lineGap?: number
+    lineGap?: number,
+    connectType?: "elbow" | "straight" | "curved" // the "curved" type is used only in the mindmap mode
 };
 ~~~
 
 ### Parameters
 
-The **lineConfig** object contains the following parameter:
+The **lineConfig** object contains the following parameters:
 
 - `lineType` - (optional) the default type of a connector line. The value is applied, if the line object doesn't contain the "type" property
 - `lineGap` - (optional) sets the distance to the right-angled bend of a connector line
+- `connectType` - (optional) sets the connection type of the lines: `"elbow"` | `"straight"` | `"curved"` (the "curved" type is used only in the mindmap Diagram mode). The value is applied, if the line object doesn't contain the "connectType" property
 
 :::info
-The value of the **lineType** setting will be applied, if the line object doesn't contain the identical one
+The values of the **lineType** and **connectType** settings will be applied, if the line object doesn't contain the identical ones.
 :::
 
 ### Default config
 
 ~~~jsx
 lineConfig: {
-  lineType: "line",
-  lineGap: 10
+    lineType: "line",
+    lineGap: 10
 }
 ~~~
 
+The `connectType` parameter has the following default values:
+
+- "elbow" - for the default and org chart Diagram modes
+- "curved" - for the mindmap Diagram mode (this type is used only in the mindmap Diagram mode)
+
 ### Example
 
-~~~jsx {2-5}
+~~~jsx {2-7}
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default",
     lineConfig: {
         lineType: "dash",
-        lineGap: 50
+        lineGap: 50,
+        connectType: "straight"
     },
     // other config parameters
 });
@@ -60,7 +68,8 @@ The result of applying the **lineGap** property is shown in the image below:
 
 **Change log**:
 
-- The **lineGap** parameter is added in v5.0 (check the Migration article)
+- The `connectType` parameter is added in v6.1
+- The `lineGap` parameter is added in v5.0 (check the [Migration article](diagram/migration.md/#42---50))
 - Added in v4.2
 
 **Related articles**: [Setting connections between shapes](../../../lines/#setting-connections-between-shapes)

docs/api/diagram/type_property.md

@@ -13,25 +13,41 @@ description: You can learn about the type property in the documentation of the D
 ### Usage
 
 ~~~jsx
-type: "default" | "org" | "mindmap";
+type: "default" | "org" | "mindmap" | "pert";
 ~~~
 
-### Details
+### Example
 
-DHTMLX Diagram can be initialized in one of three modes:
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+    type: "default" // "org" | "mindmap" | "pert"
+});
+~~~
+
+### Diagram modes
+
+DHTMLX Diagram can be initialized in one of the following modes: "default", "org", "mindmap" or "pert". To apply the necessary mode, specify the corresponding value of the **type** property:
 
 - **type:"default"** is used to visualize relations between some entities
 
 <iframe src="https://snippet.dhtmlx.com/f3uekgjw?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 - **type:"org"** is used to show the structure of a group of people by presenting their relations in a hierarchical order
 
-<iframe src="https://snippet.dhtmlx.com/5ign6fyy?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+<iframe src="https://snippet.dhtmlx.com/5ign6fyy?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 - **type:"mindmap"** is used to arrange information on some topic by representing the main concept surrounded by associated ideas
 
 <iframe src="https://snippet.dhtmlx.com/twd25ww1?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
+- **type:"pert"** is used to show the sequences of tasks and projects, and visualize connections between them. This type of diagram is also useful in estimating the critical path and project planning
+
+<iframe src="https://snippet.dhtmlx.com/4h5fi7xd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**Change log**: 
+
+- The **"pert"** type was added in v6.1
+
 **Related articles**:
 
 - [Overview](../../../)

docs/api/diagram/typeconfig_property.md

@@ -12,12 +12,16 @@ The property does not work in the Editor
 
 ### Description
 
-@short: Optional. An object which defines the direction of the shapes in the mindmap mode of Diagram
+@short: Optional. An object which provides configuration settings for Diagram in the mindmap and PERT modes
 
-If you don't apply the **typeConfig** property, the child shapes will be arranged automatically according to the main algorithm
+For Diagram in the mindmap mode, the `typeConfig` property defines the direction of the shapes. If the property isn't applied, the child shapes will be arranged automatically according to the main algorithm.
+
+For Diagram in the PERT mode, the `typeConfig` property allows setting the format of rendering dates in the task shapes.
 
 ### Usage
 
+- for the mindmap mode
+
 ~~~jsx
 typeConfig?: {
     direction?: "left" | "right";
@@ -29,24 +33,37 @@ typeConfig?: {
         left?: string[],
         right?: string[]
     }
-}    
+}
+~~~
+
+- for the PERT mode
+
+~~~jsx
+typeConfig?: {
+    dateFormat?: string; // %d-%m-%Y by default
+} 
 ~~~
 
 ### Parameters
 
-The **typeConfig** object can include one of two parameters:
+The `typeConfig` object can include one of the following parameters:
 
-- `direction` - (optional) sets the direction of the graph:
-  - *"left"* - puts child shapes of the graph to the left of the root shape
-  - *"right"* - puts child shapes of the graph to the right of the root shape
-- `side` - (optional) an object which sets the mandatory direction for the specified child shapes. The object contains a set of *key:value* pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes
+- for the mindmap mode:
+    - `direction` - (optional) sets the direction of the graph:
+      - *"left"* - puts child shapes of the graph to the left of the root shape
+      - *"right"* - puts child shapes of the graph to the right of the root shape
+    - `side` - (optional) an object which sets the mandatory direction for the specified child shapes. The object contains a set of *key:value* pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes
+- for the PERT mode:
+    - `dateFormat` - (optional) sets the format of rendering dates in the shapes of the **task** type. Affects rendering of dates in the user interface 
 
 :::tip
-You can use either the **direction** attribute or the **side** one. Don't use both of them at the same time!
+You can use either the `direction` attribute or the `side` one for the diagram in the mindmap mode. Don't use both of them at the same time!
 :::
 
 ### Example
 
+- for the mindmap mode:
+
 ~~~jsx {3-5}
 const diagram = new dhx.Diagram("diagram_container", { 
     type: "mindmap",
@@ -70,13 +87,28 @@ const diagram = new dhx.Diagram("diagram_container", {
 });
 ~~~
 
-The other child shapes that are not set in the **side** option will be arranged automatically according to the main algorithm.
+Note that the other child shapes that are not set in the `side` option will be arranged automatically according to the main algorithm.
+
+- for the PERT mode:
+
+~~~jsx {3-5}
+const diagram = new dhx.Diagram("diagram_container", {
+    type: "pert",
+    typeConfig: {
+        dateFormat: "%d/%m/%Y"
+    }
+});
+~~~
+
+**Change log**: 
 
-**Change log**: Added in v3.1.
+- The `dateFormat` property for the PERT mode was added in v6.1
+- Added in v3.1.
 
 **Related articles**: [Arrangement of shapes in the mindmap mode of Diagram](../../../guides/diagram/configuration/#arranging-shapes-in-the-mindmap-mode-of-diagram)
 
 **Related samples**:
 
 - [Diagram. Mindmap mode. Direction ("left" | "right")](https://snippet.dhtmlx.com/pzllujx3)
 - [Diagram. Mindmap mode. Custom sides](https://snippet.dhtmlx.com/atto9ckg)
+- [Diagram and Gantt. PERT chart. Full integration](https://snippet.dhtmlx.com/gcnx4a9h)

docs/api/diagram_editor/editbar/basic_controls/combo.md

@@ -27,6 +27,11 @@ description: You can explore the Combo control of Editbar in the documentation o
     padding?: string | number,
 
     filter?: (item: any, input: string) => boolean,
+    eventHandlers?: {
+        [eventName: string]: {
+            [className: string]: (event: Event, id: string | number) => void | boolean; 
+        };
+    },
     itemHeight?: number | string, // 32 by default
     itemsCount?: boolean | ((count: number) => string),
     listHeight?: number | string, // 224 by default
@@ -75,7 +80,8 @@ Option configuration object inside Combo:
 - `height` - (optional) the height of a control. *"content"* by default
 - `width` - (optional) the width of a control. *"content"* by default
 - `padding` - (optional) sets padding between a cell and a border of a Combo control
-- `filter` - (optional) sets a custom function for filtering Combo options. [Check the details](https://docs.dhtmlx.com/suite/combobox/customization/#custom-filter-for-options).
+- `filter` - (optional) sets a custom function for filtering Combo options. [Check the details](https://docs.dhtmlx.com/suite/combobox/customization/#custom-filter-for-options)
+- `eventHandlers` - (optional) adds event handlers to HTML elements of a custom template of Combo items. [Check the details](https://docs.dhtmlx.com/suite/combobox/api/combobox_eventhandlers_config/)
 - `itemHeight` - (optional) sets the height of a cell in the list of options. *32* by default
 - `itemsCount` - (optional) shows the total number of selected options
 - `listHeight` - (optional) sets the height of the list of options. *224* by default

docs/api/diagram_editor/editbar/config/properties_property.md

@@ -12,7 +12,7 @@ description: You can learn about the properties property of Editbar in the docum
 
 :::info
 The `properties` config allows you to do the following:
-- modify Editbar controls for all or individual Diaram elements base on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md)
+- modify Editbar controls for all or individual Diagram elements based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md)
 - apply custom Editbar control(s) defined via the [`controls`](api/diagram_editor/editbar/config/controls_property.md) property to Diagram elements
 - specify conditions for applying an Editbar control (custom or default) to Diagram elements