Complete the editbar guide #44

mafanya23 · 2024-08-23T10:26:09Z

No description provided.

Sorokin-Oleg · 2024-08-23T13:49:57Z

docs/guides/diagram_editor/editbar.md

- [`$swimlane`](#configure-editbar-for-swimlanes) - allows configuring Editbar controls for all elements with the [**swimlane**](/swimlanes/) type
- [`$line`](#configure-editbar-for-lines) allows configuring Editbar controls for all elements with the [**line**](/lines/) type
- [`$lineTitle`](#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type
+- The `colorpicker`, `spacer` and `button` controls are used for all the Diagram items with the `shape` type


@mafanya23 а нужно ли тут дробить текст на подразделы? Что мы этим хотели показать?

Хотела выделить, что базовые контролы настраиваются просто внутри свойства properties, а для комплексных нужно еще свойство $properties

Sorokin-Oleg · 2024-08-23T13:50:56Z

docs/guides/diagram_editor/editbar.md

- [`$line`](#configure-editbar-for-lines) allows configuring Editbar controls for all elements with the [**line**](/lines/) type
- [`$lineTitle`](#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type
+- The `colorpicker`, `spacer` and `button` controls are used for all the Diagram items with the `shape` type
+    - The configs of the `colorpicker` and `button` controls are redefined especially for this type of Diagram items


@mafanya23 especially for this type - речь же идет про все типы фигур, а не конкретного типа, так?

Да, наверное, здесь лучше написать especially for the $shape group of Diagram items, i.e. for all shapes

Sorokin-Oleg · 2024-08-23T14:11:11Z

docs/guides/diagram_editor/editbar.md

@@ -56,7 +184,8 @@ properties: {

 **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/)

-## Configure Editbar for shapes
+
+### Configuring Editbar for shapes


@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.

Sorokin-Oleg · 2024-08-23T14:11:22Z

docs/guides/diagram_editor/editbar.md

+
+**Related sample:** [Diagram Editor. Default mode. PERT сhart with the legend](https://snippet.dhtmlx.com/w8mrh3ay?mode=js)
+
+### Configuring Editbar for the grid area


@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.

Sorokin-Oleg · 2024-08-23T14:11:27Z

docs/guides/diagram_editor/editbar.md

@@ -77,7 +206,7 @@ properties: {

 **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/)

-## Configure Editbar for group elements
+### Configuring Editbar for group elements


@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.

Sorokin-Oleg · 2024-08-23T14:11:35Z

docs/guides/diagram_editor/editbar.md

@@ -113,7 +242,7 @@ properties: {

 **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/)

-## Configure Editbar for lines
+### Configuring Editbar for lines


@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.

Sorokin-Oleg · 2024-08-23T14:11:39Z

docs/guides/diagram_editor/editbar.md

@@ -131,13 +260,13 @@ properties: {

 **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/)

-## Configure Editbar for line titles
+### Configuring Editbar for line titles


@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.

Sorokin-Oleg · 2024-08-23T14:18:23Z

docs/guides/diagram_editor/editbar.md

+There is a possibility to create an Editbar that will dynamically change depending on certain conditions, e.g.:
+the selected shape type, absence of selected items, the properties of the selected item. Check the example:
+
+~~~jsx


@mafanya23 этот пример не про динамическое отображение Editbar, скорей про базовую конфигурацию и переопределение определенных типов элементов (фигур)

Убрала

Sorokin-Oleg · 2024-08-23T14:23:13Z

docs/guides/diagram_editor/editbar.md

+To make a dynamic Editbar that will change *depending on the properties of a selected shape*, you need to specify a function as a value of the property that defines the [type of a shape](/shapes/default_shapes/) or a [group of items](/guides/items_index/) within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) configuration object:
+
+~~~jsx 
+editbar: {


@mafanya23 тут можно привести весь конфиг, он не большой. При этом было бы не плохо описать, что происходит в примере. Если очень кратко, то метод hasOwnProperty проверяет на наличие в объекте собственного свойства, указанного в качестве аргумента. И когда условие выполняется, мы отображаем определенный контрол. Например, в объекте есть свойство title, тогда мы отобразим контрол, который будет отвечать за отображение/изменение данного свойства. С остальными по аналогии, будет так же.

Заметил описание есть пониже, возможно стоит чуть больше разбавить?)

Обновила

Sorokin-Oleg · 2024-08-23T14:26:51Z

docs/guides/diagram_editor/editbar.md

+
+In the above example the `$shape` property is specified as a function that provides a set of default controls for all Diagram shapes and allows using additional controls, depending on whether a Diagram item has a particular property in its configuration.
+
+## Setting the width of Editbar


@mafanya23 в задаче есть еще два не плохих примера которые можно показать с описанием. Хотелось бы рассказать о них в гайде. Покажут как пользоваться сервисными свойствами.

Там где про сервисные свойства, нужно таблички с предупреждениями показать дополнительно

Добавила раздел Redefining service properties of basic controls в главу про создание кастомных контролов

mafanya23 added 4 commits August 16, 2024 17:01

[update] the editbar guide and properties config page

692a8f5

[update] the editbar guide

dbeb8ae

[update] the editbar and shapebar guides

861a0c1

[update] complete the editbar guide

2ed7df2

mafanya23 requested review from serhiipylypchuk1991 and Sorokin-Oleg August 23, 2024 10:26

mafanya23 self-assigned this Aug 23, 2024

Sorokin-Oleg requested changes Aug 23, 2024

View reviewed changes

mafanya23 added 4 commits August 27, 2024 12:05

Merge branch 'next' into mr-next-editbar-guide-4591

0724aa0

[update] corrections in the editbar guide

d170d1b

[update] complete the editbar guide

eeacb65

[update] minor corrections in the editbar guide

684aca9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Complete the editbar guide #44

Complete the editbar guide #44

mafanya23 commented Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

mafanya23 Aug 27, 2024

Sorokin-Oleg Aug 23, 2024

mafanya23 Aug 27, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

mafanya23 Sep 16, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

mafanya23 Sep 16, 2024

Sorokin-Oleg Aug 23, 2024

Sorokin-Oleg Aug 23, 2024

mafanya23 Sep 16, 2024 •

edited

Loading


		Related sample: [Diagram Editor. Default mode. PERT сhart with the legend](https://snippet.dhtmlx.com/w8mrh3ay?mode=js)

		### Configuring Editbar for the grid area


		In the above example the `$shape` property is specified as a function that provides a set of default controls for all Diagram shapes and allows using additional controls, depending on whether a Diagram item has a particular property in its configuration.

		## Setting the width of Editbar

Complete the editbar guide #44

Are you sure you want to change the base?

Complete the editbar guide #44

Conversation

mafanya23 commented Aug 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mafanya23 Sep 16, 2024 • edited Loading

Choose a reason for hiding this comment

mafanya23 Sep 16, 2024 •

edited

Loading