Элементы доски
Страницы доски хранят доступные для отрисовки объекты в elements, а порядок их отображения — в elementOrder. У каждого элемента есть постоянный id, тип type и объект transform, описывающий его положение и размер на холсте.
Общие поля элементов
| Поле | Тип | Описание |
|---|---|---|
| id | string | Идентификатор элемента, уникальный в пределах страницы. |
| type | BoardElementType | Тип элемента, например text, shape, image, connector, container, table или group. |
| transform | IBoardElementTransform | Положение, размер, поворот, масштаб, наклон и отражение. |
| parentId? | string | Идентификатор родительского контейнера или группы. |
| laneId? | string | Идентификатор дорожки, если элемент находится внутри кросс-функциональной диаграммы. |
| name? | string | Понятное пользователю имя элемента. |
| description? | string | Метаданные для специальных возможностей или приложения. |
| visible? | boolean | Нужно ли отображать элемент. |
| selectable? | boolean | Можно ли выбрать элемент в редакторе. |
| locked? | boolean | Заблокировано ли редактирование. |
| custom? | `Record<string, unknown> | null` |
Типы элементов
| Тип | Дополнительные данные | Типичное применение |
|---|---|---|
text | text, textStyle, textData | Стикеры, подписи и блоки форматированного текста. |
shape | shapeData | Прямоугольники, стрелки, выноски и пользовательские фигуры. |
image | source, imageSourceType, crop | Встроенные изображения. |
connector | connectorData | Линии и стрелки, соединённые со свободными точками или фигурами. |
container | containerData | Рамки, области, кросс-функциональные диаграммы, пакеты UML и границы систем. |
table | tableId | Элементы таблиц на доске, предоставляемые плагином таблиц. |
chart | chartId | Элементы диаграмм. |
media | mediaType, source | Заполнители для аудио и видео. |
group | children | Сгруппированные наборы элементов. |
Контейнеры
Контейнеры определяют поведение вложенных элементов с помощью containerData.behavior, а правила их захвата — с помощью containerData.capturePolicy. Для перемещения элементов в контейнер и из него используйте методы контейнеров Facade API, чтобы порядок элементов и родительские связи оставались согласованными.
board.wrapElementsInContainer(['task-1', 'task-2'], { title: 'Sprint 1',})Кросс-функциональные диаграммы
Кросс-функциональная диаграмма — это контейнер с containerData.swimlane. У дорожек есть постоянные идентификаторы, заголовки, значения порядка, размеры и необязательное состояние свёртывания.
board.setSwimlaneLanes('lane-board', { orientation: 'horizontal', lanes: [ { id: 'todo', title: 'Todo', order: 0, size: 240 }, { id: 'doing', title: 'Doing', order: 1, size: 240 }, ],})Соединительные линии
Соединительные линии используют конечные точки и данные маршрутизации. Конечными точками могут быть свободные точки, границы фигур, точки соединения или линии жизни. Для редактирования соединительных линий предпочтительно использовать операции Facade API или действия в интерфейсе, поскольку данные маршрутизации часто зависят от геометрии.
Насколько полезно это руководство?