Éléments d’un Board
Les pages d’un Board stockent les objets graphiques dans elements et leur ordre d’affichage dans elementOrder. Chaque élément possède un id stable, un type et une propriété transform qui décrit sa position et ses dimensions sur le canevas.
Champs communs aux éléments
| Champ | Type | Description |
|---|---|---|
| id | string | Identifiant de l’élément, unique dans la page. |
| type | BoardElementType | Type d’élément, par exemple text, shape, image, connector, container, table ou group. |
| transform | IBoardElementTransform | Position, dimensions, rotation, échelle, inclinaison et retournement. |
| parentId? | string | Identifiant du conteneur ou du groupe parent. |
| laneId? | string | Identifiant du couloir lorsque l’élément se trouve dans un diagramme à couloirs. |
| name? | string | Nom de l’élément lisible par l’utilisateur. |
| description? | string | Métadonnées d’accessibilité ou propres à l’application. |
| visible? | boolean | Indique si l’élément doit être affiché. |
| selectable? | boolean | Indique si l’élément peut être sélectionné dans l’éditeur. |
| locked? | boolean | Indique si la modification est verrouillée. |
| custom? | `Record<string, unknown> | null` |
Types d’éléments
| Type | Données supplémentaires | Utilisation courante |
|---|---|---|
text | text, textStyle, textData | Notes adhésives, libellés et blocs de texte enrichi. |
shape | shapeData | Rectangles, flèches, légendes et formes personnalisées. |
image | source, imageSourceType, crop | Images incorporées. |
connector | connectorData | Lignes et flèches reliées à des points libres ou à des formes. |
container | containerData | Cadres, zones, couloirs, paquetages UML et frontières de système. |
table | tableId | Éléments de tableau fournis par le plugin de tableaux pour Boards. |
chart | chartId | Éléments de graphique. |
media | mediaType, source | Espaces réservés aux contenus audio et vidéo. |
group | children | Collections d’éléments regroupés. |
Conteneurs
Les conteneurs définissent le comportement d’appartenance avec containerData.behavior et les règles de capture avec containerData.capturePolicy. Utilisez les méthodes de conteneur de la Facade pour déplacer les éléments vers ou hors d’un conteneur afin de préserver la cohérence de l’ordre et des relations parent-enfant.
board.wrapElementsInContainer(['task-1', 'task-2'], { title: 'Sprint 1',})Couloirs
Un diagramme à couloirs est un conteneur doté de containerData.swimlane. Chaque couloir possède un identifiant stable, un titre, une valeur d’ordre, une taille et, éventuellement, un état replié.
board.setSwimlaneLanes('lane-board', { orientation: 'horizontal', lanes: [ { id: 'todo', title: 'Todo', order: 0, size: 240 }, { id: 'doing', title: 'Doing', order: 1, size: 240 }, ],})Connecteurs
Les connecteurs utilisent des extrémités et des données de routage. Les extrémités peuvent être des points libres, des contours de formes, des points de connexion ou des lignes de vie. Pour modifier les connecteurs, privilégiez les opérations de la Facade ou les actions de l’interface, car les données de routage dépendent souvent de la géométrie.
Que pensez-vous de ce guide ?