Check API

docs/api/data_collection/afteradd_event.md

@@ -13,14 +13,20 @@ description: You can learn about the afterAdd event of data collection in the do
 ### Usage
 
 ~~~jsx
-afterAdd: (newItem: object) => void;
+afterAdd: (
+    newItem: object, 
+    batch: object[], 
+    index: number
+) => void;
 ~~~
 
 ### Parameters
 
-The callback of the event takes the following parameter:
+The callback of the event takes the following parameters:
 
 - `newItem` - (required) the object of an added item
+- `batch` - (required) an array of all items added within the same operation
+- `index` - (required) the index the item is added at
 
 ### Example
 

docs/api/data_collection/afterremove_event.md

@@ -13,14 +13,20 @@ description: You can learn about the afterRemove event of data collection in the
 ### Usage
 
 ~~~jsx
-afterRemove: (removedItem: object) => void;
+afterRemove: (
+    removedItem: object, 
+    batch: object[], 
+    index: number
+) => void;
 ~~~
 
 ### Parameters
 
-The callback of the event takes the following parameter:
+The callback of the event takes the following parameters:
 
 - `removedItem` - (required) the object of a removed item
+- `batch` - (required) an array of all items removed within the same operation
+- `index` - (required) the index the item is removed from
 
 ### Example
 

docs/api/data_collection/beforeadd_event.md

@@ -13,14 +13,20 @@ description: You can learn about the beforeAdd event of data collection in the d
 ### Usage
 
 ~~~jsx
-beforeAdd: (newItem: object) => boolean | void;
+beforeAdd: (
+    newItem: object, 
+    batch: object[], 
+    index: number
+) => boolean | void;
 ~~~
 
 ### Parameters
 
-The callback of the event takes the following parameter:
+The callback of the event takes the following parameters:
 
 - `newItem` - (required) the object of an added item
+- `batch` - (required) an array of all items added within the same operation
+- `index` - (required) the index the item is added at
 
 ### Returns
 

docs/api/data_collection/beforeremove_event.md

@@ -13,14 +13,20 @@ description: You can learn about the beforeRemove event of data collection in th
 ### Usage
 
 ~~~jsx
-beforeRemove: (removedItem: any) => boolean | void;
+beforeRemove: (
+    removedItem: object, 
+    batch: object[], 
+    index: number
+) => boolean | void;
 ~~~
 
 ### Parameters
 
-The callback of the event takes the following parameter:
+The callback of the event takes the following parameters:
 
 - `removedItem` - (required)  the object of an item to remove
+- `batch` - (required) an array of all items removed within the same operation
+- `index` - (required) the index the item is removed from
 
 ### Returns
 

docs/api/diagram/groupmousedown_event.md

@@ -17,7 +17,8 @@ If a pointing device button is pressed while the pointer is over a swimlane, the
 ~~~jsx
 groupMouseDown: (
     id: string | number, 
-    event: MouseEvent
+    event: MouseEvent, 
+    position?: object
 ) => void;
 ~~~
 
@@ -27,6 +28,7 @@ The callback of the event takes the following parameters:
 
 - `id` - (required) the id of a group
 - `event` - (required) a native HTML event object
+- `position` - (optional) an object with the `x` and `y` coordinates of the pointer relative to the diagram container
 
 ### Example
 

docs/api/diagram/itemmousedown_event.md

@@ -17,7 +17,8 @@ If a pointing device button is pressed while the pointer is over a swimlane, the
 ~~~jsx
 itemMouseDown: (
     id: string | number, 
-    event: MouseEvent
+    event: MouseEvent, 
+    position?: object
 ) => void;
 ~~~
 
@@ -27,6 +28,7 @@ The callback of the event takes the following parameters:
 
 - `id` - (required) the id of an item
 - `event` - (required) a native HTML event object
+- `position` - (optional) an object with the `x` and `y` coordinates of the pointer relative to the diagram container
 
 ### Example
 

docs/api/diagram/lineconfig_property.md

@@ -14,7 +14,9 @@ description: You can learn about the lineConfig property in the documentation of
 
 ~~~jsx
 lineConfig?: {
-    lineType?: "dash" | "line",
+    lineType?: "line" | "dash" | "none",
+    arrowsHidden?: boolean,
+    lineDirection?: "forwardArrow" | "backArrow",
     lineGap?: number,
     connectType?: "elbow" | "straight" | "curved" // the "curved" type is used only in the mindmap mode
 };
@@ -24,7 +26,9 @@ lineConfig?: {
 
 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
+- `lineType` - (optional) the default type of a connector line: `"line"` | `"dash"` | `"none"`. The value is applied, if the line object doesn't contain the `"type"` property
+- `arrowsHidden` - (optional) hides the arrow heads on the connector lines
+- `lineDirection` - (optional) defines which end of the line carries an arrow: `"forwardArrow"` | `"backArrow"`
 - `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
 
@@ -37,6 +41,8 @@ The values of the `lineType` and `connectType` settings will be applied, if the
 ~~~jsx
 lineConfig: {
     lineType: "line",
+    lineDirection: "forwardArrow",
+    arrowsHidden: false,
     lineGap: 10
 }
 ~~~

docs/api/diagram/linemousedown_event.md

@@ -15,7 +15,8 @@ description: You can learn about the lineMouseDown event in the documentation of
 ~~~jsx
 lineMouseDown: (
     id: string | number, 
-    event: MouseEvent
+    event: MouseEvent, 
+    position?: object
 ) => void;
 ~~~
 
@@ -25,6 +26,7 @@ The callback of the event takes the following parameters:
 
 - `id` - (required) the id of a connector line
 - `event` - (required) a native HTML event object
+- `position` - (optional) an object with the `x` and `y` coordinates of the pointer relative to the diagram container
 
 ### Example
 

docs/api/diagram/margin_property.md

@@ -26,7 +26,7 @@ margin?: {
 The `margin` object can include the following parameters:
 
 - `itemX` - (optional) horizontal space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md))
-- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md))
+- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md)). Defaults to `20` for the mindmap mode and to `40` for the other modes
 - `x` - (optional) horizontal space between the start of a diagram and the first item
 - `y` - (optional) vertical space between the start of a diagram and the first item
 
@@ -35,10 +35,13 @@ The `margin` object can include the following parameters:
 ~~~jsx
 margin: {
     x: 40, y: 40,
-    itemX: 40, itemY: 40
+    itemX: 40,
+    itemY: 40 // 20 for the mindmap mode
 }
 ~~~
 
+The `itemY` parameter defaults to `20` for [type: "mindmap"](api/diagram/type_property.md) and to `40` for the other Diagram modes.
+
 ### Example
 
 ~~~jsx

docs/api/diagram/shapemousedown_event.md

@@ -15,7 +15,8 @@ description: You can learn about the shapeMouseDown event in the documentation o
 ~~~jsx
 shapeMouseDown: (
     id: string | number, 
-    event: MouseEvent
+    event: MouseEvent, 
+    position?: object
 ) => void;
 ~~~
 
@@ -25,6 +26,7 @@ The callback of the event takes the following parameters:
 
 - `id` - (required) the id of a shape
 - `event` - (required) a native HTML event object
+- `position` - (optional) an object with the `x` and `y` coordinates of the pointer relative to the diagram container
 
 ### Example
 

docs/api/diagram/showitem_method.md

@@ -13,12 +13,16 @@ description: You can learn about the showItem method in the documentation of the
 ### Usage
 
 ~~~jsx
-showItem(id: string | number): void;
+showItem(
+    id: string | number, 
+    dir?: "left" | "right"
+): void;
 ~~~
 
 ### Parameters
 
 - `id` - (required) the **ID** of the target item
+- `dir` - (optional) the branch direction to expand when showing an item under a collapsed mindmap root: `"left"` | `"right"`
 
 ### Example
 

docs/api/diagram_editor/editbar/complex_controls/pointerview.md

@@ -62,8 +62,8 @@ The **Pointer view** control is available only for the `line` element in the *de
 ### Service properties
 
 - `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Pointer view** control based on the basic controls:
-    - `backArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the end of connector
-    - `forwardArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the start of connector
+    - `backArrow` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the arrow type at the end of connector
+    - `forwardArrow` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the arrow type at the start of connector
 
 ## Example
 

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

@@ -16,6 +16,12 @@ description: You can learn about the width property of Editbar in the documentat
 width?: number;
 ~~~
 
+### Default config
+
+~~~jsx
+width: 300
+~~~
+
 ### Example
 
 ~~~jsx {9}

docs/api/diagram_editor/editor/events/afteritemresize_event.md

@@ -19,7 +19,7 @@ description: You can learn about the afterItemResize event of editor in the docu
     height: number,
     x: number,
     y: number,
-    dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+    dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw"
 }) => void;
 ~~~
 

docs/api/diagram_editor/editor/events/beforeitemresize_event.md

@@ -19,7 +19,7 @@ description: You can learn about the beforeItemResize event of editor in the doc
     height: number,
     x: number,
     y: number,
-    dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "ne"
+    dir: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw"
 }) => boolean | void;
 ~~~
 

docs/api/inline_editor/beforeeditorediting_event.md

@@ -47,8 +47,8 @@ const diagram = new dhx.Diagram("diagram_container", {
 diagram.data.parse(data);
 
 // attaching a handler to the event
-diagram.events.on("beforeEditorEditing", (value, id, key, subId) => {
-    console.log(value, id, key, subId);
+diagram.events.on("beforeEditorEditing", (value, currentValue, id, key, subId) => {
+    console.log(value, currentValue, id, key, subId);
     return true;
 });
 ~~~

docs/groups/configuration_properties.md

@@ -27,7 +27,7 @@ const data = [
         fixed?: boolean, // false by default
         style?: {
             strokeWidth?: number, // 1 by default
-            stroke?: string, // "#DEDEDE" by default
+            stroke?: string, // "#B8C6D6" by default
             fill?: string,
             overFill?: string,
             partiallyFill?: string
@@ -78,7 +78,7 @@ The `open` property works when a `header` is initialized with the `closable` att
 - `fixed` - (optional) enables/disables the ability to move and resize the group; *false* by default
 - `style` - (optional) an object with the style settings of the group. The object can contain the following attributes:
     - `strokeWidth` - (optional) the width of the group border, 1 by default
-    - `stroke` - (optional) the color of the border of the group, "#DEDEDE" by default
+    - `stroke` - (optional) the color of the border of the group, "#B8C6D6" by default
     - `fill` - (optional) the background color of the group
     - `overFill` - (optional) the background color of the group when the user is holding the item and moving it into/outside the group *providing that the whole item is inside the group*
     - `partiallyFill` - (optional) the background color of the group when the user is holding the item and moving it into/outside the group *providing that a part of the item is out of the group and other settings are not defined via the `exitArea` attribute*
@@ -162,14 +162,14 @@ const data = [
         height?: number,
         groupChildren?: (string | number)[],
         style?: {
-            fill?: string, // "#20B56D08" by default
-            stroke?: string, // "#20B56D33" by default
+            fill?: string, // "#20B56D0F" by default
+            stroke?: string, // "#20B56D66" by default
             borderStyle?: string, // "dashed" by default
         },
         header?: {
-            height?: number, // 40 by default
+            height?: number, // 64 by default
             text?: string, // generated automatically by the text property
-            closable?: boolean, // false by default
+            closable?: boolean, // true by default
             enable?: boolean, // true by default
             fill?: string // "inherit" by default
         }
@@ -200,9 +200,9 @@ The properties below are generated automatically. They are calculated during the
     - `stroke` - (optional) the color of the border of the project
     - `borderStyle` - (optional) the style of the project border
 - `header` - (optional) an object with configuration attributes of the header of the project. The attributes are:
-    - `height` - (optional) the height of the header, 40 by default
+    - `height` - (optional) the height of the header, 64 by default
     - `text` - (optional) the text to be rendered in the header (generated automatically by the `text` property)
-    - `closable` - (optional) shows/hides an icon intended to expand/collapse a group; *false* by default
+    - `closable` - (optional) shows/hides an icon intended to expand/collapse a group; *true* by default
     - `enable` - (optional) shows/hides the header of the project; *true* by default
     - `fill` - (optional) the background color of the header 
 

docs/line_titles/configuration_properties.md

@@ -22,7 +22,7 @@ const data = [
         parent: string | number, 
 
         distance?: number, // 50 by default
-        autoPosition?: boolean, // true by default
+        autoPosition?: boolean, // false by default
         editable?: boolean, // true by default
         fixed?: boolean, // false by default
         hidden?: boolean, // false by default
@@ -32,7 +32,7 @@ const data = [
         lineHeight?: string | number, // 14 by default
         fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
         fontColor?: string, // "#4C4C4C" by default
-        fontWeight?: string, // "500" by default
+        fontWeight?: string, // "normal" by default
         textAlign?: "center" | "left" | "right" // "center" by default
     },
     // more line objects
@@ -48,7 +48,7 @@ Each line title object can include the following properties:
 - `parent` - (required) the id of the line to display the title for
 - `text` - (required) the text of the line title
 - `distance` - (optional) specifies the distance to the point of displaying the title on the line in the range from 0 to 100, 50 by default
-- `autoPosition` - (optional) defines the direction of the text, if set to *true* - the direction of the text is the same as that of the line, *false* - the direction of the text is always horizontal, *true* by default
+- `autoPosition` - (optional) defines the direction of the text, if set to *true* - the direction of the text is the same as that of the line, *false* - the direction of the text is always horizontal, *false* by default
 - `editable` - (optional) enables/disables the ability to edit the text of the item by double-clicking on it, *true* by default
 - `fixed` - (optional) enables/disables the ability to fix the text of the item with the specified `distance` value, *false* by default
 - `hidden` - (optional) defines whether the text will be hidden, *false* by default 
@@ -57,7 +57,7 @@ Each line title object can include the following properties:
 - `lineHeight` - (optional) the height of the text line, 14 by default
 - `fontStyle` - (optional) the style of the text font: `"normal"` (default), `"italic"`, `"oblique"`
 - `fontColor` - (optional) the color of the text font, "#4C4C4C" by default
-- `fontWeight` - (optional) the text font weight, possible values are: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`; values `"100"`-`"900"`, where `"400"` is the same as normal, and `"600"`+ is the boldest font; `"500"` by default
+- `fontWeight` - (optional) the text font weight, possible values are: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`; values `"100"`-`"900"`, where `"400"` is the same as normal, and `"600"`+ is the boldest font; `"normal"` by default
 - `textAlign` - (optional) the alignment of the text: `"center"`(default), `"left"`, `"right"`
 
 ### Example