Complete the editbar guide - #44
Conversation
| - [`$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 |
There was a problem hiding this comment.
@mafanya23 а нужно ли тут дробить текст на подразделы? Что мы этим хотели показать?
There was a problem hiding this comment.
Хотела выделить, что базовые контролы настраиваются просто внутри свойства properties, а для комплексных нужно еще свойство $properties
| - [`$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 |
There was a problem hiding this comment.
@mafanya23 especially for this type - речь же идет про все типы фигур, а не конкретного типа, так?
There was a problem hiding this comment.
Да, наверное, здесь лучше написать especially for the $shape group of Diagram items, i.e. for all shapes
|
|
||
| ## Configure Editbar for shapes | ||
|
|
||
| ### Configuring Editbar for shapes |
There was a problem hiding this comment.
@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.
|
|
||
| **Related sample:** [Diagram Editor. Default mode. PERT сhart with the legend](https://snippet.dhtmlx.com/w8mrh3ay?mode=js) | ||
|
|
||
| ### Configuring Editbar for the grid area |
There was a problem hiding this comment.
@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.
| **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 |
There was a problem hiding this comment.
@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.
| **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 |
There was a problem hiding this comment.
@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.
| **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 |
There was a problem hiding this comment.
@mafanya23 хотелось бы дополнить этот раздел описанием, и сам пример по аналогии с примерами выше/ниже, то есть код целиком.
| 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 |
There was a problem hiding this comment.
@mafanya23 этот пример не про динамическое отображение Editbar, скорей про базовую конфигурацию и переопределение определенных типов элементов (фигур)
| 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: { |
There was a problem hiding this comment.
@mafanya23 тут можно привести весь конфиг, он не большой. При этом было бы не плохо описать, что происходит в примере. Если очень кратко, то метод hasOwnProperty проверяет на наличие в объекте собственного свойства, указанного в качестве аргумента. И когда условие выполняется, мы отображаем определенный контрол. Например, в объекте есть свойство title, тогда мы отобразим контрол, который будет отвечать за отображение/изменение данного свойства. С остальными по аналогии, будет так же.
There was a problem hiding this comment.
Заметил описание есть пониже, возможно стоит чуть больше разбавить?)
|
|
||
| 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 |
There was a problem hiding this comment.
@mafanya23 в задаче есть еще два не плохих примера которые можно показать с описанием. Хотелось бы рассказать о них в гайде. Покажут как пользоваться сервисными свойствами.
There was a problem hiding this comment.
Там где про сервисные свойства, нужно таблички с предупреждениями показать дополнительно
There was a problem hiding this comment.
Добавила раздел Redefining service properties of basic controls в главу про создание кастомных контролов
- resolved conflicts in the editbar and shapebar guides - editbar: kept the rewritten guide, applied the link normalization and formatting fixes from next across the whole file - shapebar: took the updated links and grammar from next, kept the "Shapebar" capitalization from the branch
- describe the parameters and the return value of a function set as a value of the properties config - note that such a function can be set for any properties key, including the type of a shape and $default - explain that the configuration of a shape type replaces the one of its group and that a custom config replaces the default one - specify when the Editbar rebuilds its set of controls and that modifying a selected item only refreshes the control values - mention that the built-in $shape config is a function as well - fix the broken anchor link, the events that call $handler and the list of cases when $default is applied
- split the section into 4 steps: choosing a property, specifying a function, setting conditions, checking the Editbar rebuilding - move the general rules before the $shape example - specify which methods allow checking the state of the editor within a function set for the $default property - extend the $default example with the selection and data checks - link the API pages of the Diagram Editor and of the used methods
- describe what controls suit the grid area, shapes, groups, swimlanes, lines and line titles, with the related examples - specify how the controls address the nested properties of groups and swimlanes and which of them need redefining their keys - explain the key and wrap configs of basic controls and merge the sections on redefining basic and complex controls - note that a button works only with the $on or $handler property - fix the mode of the editor in the line title example, since line titles are available in the default mode only
- correct the description of the properties config, which sets the controls per type of an element and not per control property - specify the hidden, disabled and readOnly configs of controls - note that a custom control inherits the config of the control specified in its type property, including the key config - rename the section on service properties and correct the wording of the sentences on the grid area and the custom HTML content
2 participants
Rewrites the Editbar guide (
docs/guides/diagram_editor/editbar.md), which previously covered only the sixpropertiesgroups, into a full guide on configuring Editbar controls. Also unifies the "Shapebar" spelling in the Shapebar guide.What's new in the guide
editbarobject properties, and the difference between basic and complex controls.keyandwrapconfigs of basic controls, thehidden,disabledandreadOnlyconfigs, and the$propertiesservice property of complex controls.style,header,subHeaderColsandsubHeaderRowsobjects and which controls need redefining their keys.typeproperty, plus the descriptions of the$on,$handler,$setValueand$layoutservice properties.itemandeditorparameters, setting the conditions for rendering the controls, and the cases when the Editbar rebuilds its set of controls.Corrections
$lineTitleproperty used themindmapmode, while line titles are available in the default mode only.$handlerservice property is called on the events of the Form and its control, and not on thechangeevent of DataCollection.$defaultconfiguration is applied not only when there are no selected elements or several elements are selected, but also when the Diagram contains no data.