Skip to content

Commit cfa0e51

Browse files
serhiipylypchuk1991serhiipylypchuk1991
authored
Merge pull request #34 from DHTMLX/sp-next-editbar-configuration
Editbar configuration guide and API description
2 parents f4d108d + c2a7125 commit cfa0e51

File tree

4 files changed

+222
-43
lines changed

4 files changed

+222
-43
lines changed

‎docs/api/diagram_editor/editbar/config/controls_property.md

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,38 @@ description: You can learn about the controls property of Editbar in the documen
1111
@short: Optional. A set of configurations that defines one or several custom controls
1212

1313
:::info
14-
The `controls` property allows you to create custom Editbar controls based on [**Basic controls**](/api/diagram_editor/editbar/basic_controls_overview/) and/or [**Complex controls**](/api/diagram_editor/editbar/complex_controls_overview). Use the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property to apply the custom control(s) to the needed elements.
14+
The `controls` property allows you to create custom **Editbar** controls based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md). Use the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property to apply the custom control(s) to the needed elements (shapes, groups, swimlanes, etc.).
1515

1616
Refer to the [**Editbar configuration**](guides/diagram_editor/editbar.md) guide for more information about configuring!
1717
:::
1818

19+
:::important
20+
We do not recommend you to redefine default controls when creating a custom control. Use individual name for each custom control!
21+
:::
22+
1923
### Usage
2024

2125
~~~jsx
2226
controls?: {
2327
[type: string]: object, // custom control
24-
// another control
2528
};
2629
~~~
2730

2831
### Parameters
2932

30-
- `type` - the type name of a new control
31-
- `object` - the configuration object of a new control
33+
- `type` - the type name of a custom control
34+
- `object` - the configuration object of a new control based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md)
3235

3336
~~~jsx
3437
controls: {
35-
estimate: { ... }, // create new "estimate" control with custom configurations
36-
// another control
38+
estimate: { /*...*/ }, // create new "estimate" control with custom configurations
39+
// another control
3740
}
3841
~~~
3942

4043
### Example
4144

42-
~~~jsx {16-26}
45+
~~~jsx {16-28}
4346
const editor = new dhx.DiagramEditor("editor_container", {
4447
type: "org",
4548
view: {
@@ -51,26 +54,30 @@ const editor = new dhx.DiagramEditor("editor_container", {
5154
width: 300,
5255
properties: {
5356
$shape: [
54-
{ type: "estimate" },
55-
{ type: "name" }
57+
{ type: "estimate" }, // apply the "estimate" custom control
58+
{ type: "name" } // apply the "name" custom control
5659
]
5760
},
5861
controls: {
59-
estimate: {
62+
// create the "estimate" custom control
63+
estimate: {
6064
type: "fieldset",
6165
label: "Time estimate",
6266
rows: [
6367
{ type: "datepicker", key: "date_start", label: "Date start" },
6468
{ type: "datepicker", key: "date_end", label: "Date end" }
6569
]
6670
},
71+
// create the "name" custom control
6772
name: { type: "input", label: "Name", key: "name" }
6873
}
6974
}
7075
}
7176
});
7277
~~~
7378

74-
**Change log**: Added in v6.0
79+
**Change log**: The property was added in v6.0
80+
81+
**Related article:** [**Editbar configuration**](guides/diagram_editor/editbar.md)
7582

76-
**Related sample**: [Diagram Editor. Default mode. PERT сhart with the legend](https://snippet.dhtmlx.com/w8mrh3ay)
83+
**Related sample:** [Diagram Editor. Default mode. PERT сhart with the legend](https://snippet.dhtmlx.com/w8mrh3ay?mode=wide)

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

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ description: You can learn about the properties property of Editbar in the docum
88

99
### Description
1010

11-
@short: Optional. A set of configurations that modify controls for Diagram elements (shapes, groups, swimlanes, etc.)
11+
@short: Optional. A set of configurations that modify controls for Diagram elements (shapes, groups, swimlanes etc.)
1212

1313
:::info
14-
The `properties` property allows you to do the following:
15-
- modify editbar controls for all or individual Diagram elements based on [**Basic controls**](/api/diagram_editor/editbar/basic_controls_overview/) and/or [**Complex controls**](/api/diagram_editor/editbar/complex_controls_overview)
16-
- apply custom editbar control(s) defined via the [`controls`](api/diagram_editor/editbar/config/controls_property.md) property to Diagram elements
17-
- specify conditions for applying an editbar control (custom or default) to Diagram elements
14+
The `properties` config allows you to do the following:
15+
- 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)
16+
- apply custom Editbar control(s) defined via the [`controls`](api/diagram_editor/editbar/config/controls_property.md) property to Diagram elements
17+
- specify conditions for applying an Editbar control (custom or default) to Diagram elements
1818

1919
Refer to the [**Editbar configuration**](guides/diagram_editor/editbar.md) guide for more information about configuring!
2020
:::
@@ -24,13 +24,12 @@ Refer to the [**Editbar configuration**](guides/diagram_editor/editbar.md) guide
2424
~~~jsx
2525
properties?: {
2626
[type: string]: object[] | function, // custom configurations for controls applied to Diagram elements
27-
// ...
2827
};
2928
~~~
3029

3130
### Parameters
3231

33-
- `type` - the type name of a Diagram element
32+
- `type` - the name of a Diagram element or group of elements
3433
- `object` - the configuration object of a Diagram element
3534

3635
or
@@ -39,23 +38,37 @@ properties?: {
3938
- `item` - (optional) the object of the selected element
4039
- `editor` - (required) the object of the Diagram editor
4140

42-
~~~jsx {3-4,8-15}
41+
You can configure Editbar controls for a separate Diagram element, for instance **rectangle**, **circle**, **card** etc.:
42+
43+
~~~jsx
44+
properties: {
45+
// modify Editbar controls for individual elements (shapes)
46+
rectangle: {}, // configure controls for the "rectangle" type
47+
circle: {}, // configure controls for the "circle" type
48+
card: {}, // configure controls for the "card" type
49+
estimate: {}, // configure controls for the custom "estimate" type
50+
// other elements
51+
}
52+
~~~
53+
54+
You can also configure Editbar controls for a separate group of Diagram elements. There are the following service properties to configure groups:
55+
56+
- [`$default`](guides/diagram_editor/editbar.md#configure-editbar-for-the-grid-area) - allows configuring Editbar controls if no elements are selected, or more than one element is selected
57+
- [`$shape`](guides/diagram_editor/editbar.md#configure-editbar-for-shapes) - allows configuring Editbar controls for all shapes including custom shapes
58+
- [`$group`](guides/diagram_editor/editbar.md#configure-editbar-for-group-elements) - allows configuring Editbar controls for all elements with the "group" type
59+
- [`$swimlane`](guides/diagram_editor/editbar.md#configure-editbar-for-swimlanes) - allows configuring Editbar controls for all elements with the "swimlane" type
60+
- [`$line`](guides/diagram_editor/editbar.md#configure-editbar-for-lines) - allows configuring Editbar controls for all elements with the "line" type
61+
- [`$lineTitle`](guides/diagram_editor/editbar.md#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the "lineTitle" type
62+
63+
~~~jsx
4364
properties: {
44-
// modify the estimate element (shape)
45-
estimate: // Diagram element
46-
{ ... } // configuration object
47-
48-
// or
49-
50-
$shape: // type of Diagram elements
51-
({ item, editor }) => { // the callback function that returns the configuration object
52-
const controls = [
53-
// some configurations
54-
];
55-
// ... custom logic here
56-
return controls;
57-
},
58-
//... another element
65+
$default: {},
66+
$shape: {},
67+
$group: {},
68+
$swimlane: {},
69+
$line: {},
70+
$lineTitle: {},
71+
// ... other parameters
5972
}
6073
~~~
6174

@@ -111,6 +124,8 @@ const editor = new dhx.DiagramEditor("editor_container", {
111124
});
112125
~~~
113126

114-
**Change log**: Added in v6.0
127+
**Change log**: The property was added in v6.0
128+
129+
**Related article:** [**Editbar configuration**](guides/diagram_editor/editbar.md)
115130

116-
**Related sample**: [Diagram Editor. Default mode. Network PERT chart](https://snippet.dhtmlx.com/wdijghbn)
131+
**Related sample:** [Diagram Editor. Default mode. Customization of editbar. Added shape counter](https://snippet.dhtmlx.com/ealq0m4l?mode=wide)

‎docs/guides/diagram_editor/editbar.md

Lines changed: 162 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,170 @@
11
---
2-
sidebar_label: Editbar TODO
2+
sidebar_label: Editbar
33
title: Editor Guides - Editbar
44
description: You can learn about the Editbar of editor in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
55
---
66

7-
# Editbar
7+
# Editbar
88

9-
Здесь мы рассказываем как настроить Editbar и перечисляем несколько сценариев как настроить контролы с небольшими комментариями как в коде так и вне его.
9+
You can configure Editbar controls for each Diagram element separately and for a [group of elements](/guides/items_index) taking into account various conditions. For this purpose, use the Editbar [`properties`](api/diagram_editor/editbar/config/properties_property.md) config.
1010

11-
Даем ссылки на [Basic controls](/api/diagram_editor/editbar/basic_controls_overview/) и [Complex controls](/api/diagram_editor/editbar/complex_controls_overview/), в которых детально расписаны всевозможные свойства (смотреть задачи https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4537 / https://tracker.webix.io/agiles/87-97/88-554?issue=DHX-4538)
11+
If you want to configure Editbar controls for an individual [shape](/category/shapes), you need to specify the corresponding **shape type** within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config as shown in the example below:
1212

13-
Даем ссылки и детально рассказываем как настраивать контролы внутри свойств [`properties`](api/diagram_editor/editbar/config/properties_property.md) и [`controls`](api/diagram_editor/editbar/config/controls_property.md)
13+
~~~jsx {6-9}
14+
const editor = new dhx.DiagramEditor("editor_container", {
15+
type: "default",
16+
view: {
17+
editbar: {
18+
properties: {
19+
rectangle: [ // configure editbar controls for the "pert" shape
20+
{ type: "arrange", $properties: { angle: { hidden: true } }},
21+
// ... other Editbar controls configuration
22+
],
23+
// ... other shapes configuration
24+
},
25+
// ...
26+
},
27+
// ...
28+
}
29+
});
30+
~~~
31+
32+
To configure a [group of elements](/guides/items_index), you need to use the following service properties within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config:
33+
34+
- [`$default`](#configure-editbar-for-the-grid-area) - allows configuring Editbar controls if no elements are selected, or more than one element is selected
35+
- [`$shape`](#configure-editbar-for-shapes) - allows configuring Editbar controls for [all shapes including custom shapes](/category/shapes)
36+
- [`$group`](#configure-editbar-for-group-elements) - allows configuring Editbar controls for all elements with the [**group**](/groups/) type
37+
- [`$swimlane`](#configure-editbar-for-swimlanes) - allows configuring Editbar controls for all elements with the [**swimlane**](/swimlanes/) type
38+
- [`$line`](#configure-editbar-for-lines) allows configuring Editbar controls for all elements with the [**line**](/lines/) type
39+
- [`$lineTitle`](#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type
40+
41+
<iframe src="https://snippet.dhtmlx.com/ealq0m4l?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
42+
43+
## Configure Editbar for the grid area
44+
45+
The `$default` service property allows configuring Editbar controls if no elements are selected, or more than one element is selected.
46+
47+
~~~jsx
48+
properties: {
49+
$default: [
50+
{
51+
type: "gridStep",
52+
readOnly: true,
53+
// ...
54+
},
55+
// ...
56+
]
57+
}
58+
~~~
59+
60+
**Related complex controls:** [Grid step](/api/diagram_editor/editbar/complex_controls/gridstep/), [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/)
61+
62+
## Configure Editbar for shapes
63+
64+
The `$shape` service property allows configuring Editbar controls for [all shapes including custom shapes](/category/shapes).
65+
66+
~~~jsx
67+
properties: {
68+
$shape: [
69+
{
70+
type: "position",
71+
$properties: {
72+
dx: { disabled: true },
73+
// ...
74+
},
75+
// ...
76+
},
77+
// ...
78+
]
79+
}
80+
~~~
81+
82+
**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Position](/api/diagram_editor/editbar/complex_controls/position/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
83+
84+
## Configure Editbar for group elements
85+
86+
The `$group` service property allows configuring Editbar controls for all elements with the [**group**](/groups/) type.
87+
88+
~~~jsx
89+
properties: {
90+
$group: [
91+
{
92+
type: "header",
93+
label: "Group header style",
94+
// ...
95+
},
96+
// ...
97+
]
98+
}
99+
~~~
100+
101+
**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
102+
103+
## Configure Editbar for swimlanes
104+
105+
The `$swimlane` service property allows configuring Editbar controls for all elements with the [**swimlane**](/swimlanes/) type.
106+
107+
~~~jsx
108+
properties: {
109+
$swimlane: [
110+
{
111+
type: "header",
112+
label: "Swimlane header style",
113+
// ...
114+
},
115+
// ...
116+
]
117+
}
118+
~~~
119+
120+
**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
121+
122+
## Configure Editbar for lines
123+
124+
The `$line` service property allows configuring Editbar controls for all elements with the [**line**](/lines/) type.
125+
126+
~~~jsx
127+
properties: {
128+
$line: [
129+
{
130+
type: "lineShape",
131+
label: "Line connection type",
132+
// ...
133+
},
134+
// ...
135+
]
136+
}
137+
~~~
138+
139+
**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Line shape](/api/diagram_editor/editbar/complex_controls/lineshape/), [Pointer view](/api/diagram_editor/editbar/complex_controls/pointerview/)
140+
141+
## Configure Editbar for line titles
142+
143+
The `$lineTitle` service property allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type.
144+
145+
~~~jsx
146+
properties: {
147+
$lineTitles: [
148+
{
149+
type: "textAlign",
150+
label: "Text align",
151+
// ...
152+
},
153+
// ...
154+
]
155+
}
156+
~~~
157+
158+
**Related complex controls:** [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
159+
160+
## Create and configure custom Editbar controls
161+
162+
You can use the [`controls`](api/diagram_editor/editbar/config/controls_property.md) property of the Editbar view to create a custom control based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md).
163+
164+
:::warning
165+
We do not recommend you to use a default control type (refer to the [***Basic controls***](api/diagram_editor/editbar/basic_controls_overview.md) and/or [***Complex controls***](api/diagram_editor/editbar/complex_controls_overview.md)) as the name for a custom control. Use the unique name for each custom control to avoid errors!
166+
:::
167+
168+
After creating a custom control, you need to apply it to the needed Diagram element via the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property.
169+
170+
<iframe src="https://snippet.dhtmlx.com/w8mrh3ay?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

‎docs/guides/diagram_editor/shapebar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Depending on the chosen elements, the configuration of items of a particular sec
2929

3030
1. Rendering of basic sections
3131

32-
You can render [a basic set of shapes](api/diagram_editor/shapebar/config/sections_property.md#basic) using the `sections` configuration object. For example:
32+
You can render a basic set of shapes using the `sections` configuration object. For example:
3333

3434
~~~jsx
3535
const editor = new dhx.DiagramEditor("editor_container", {

0 commit comments

Comments
 (0)