Elementos del tablero
Las páginas del tablero almacenan objetos dibujables en elements y su orden visual en elementOrder. Cada elemento tiene un id estable, un type y un transform que describe su posición y tamaño en el lienzo.
Campos de elementos comunes
| Campo | Tipo | Descripción |
|---|---|---|
| id | string | Id. del elemento, único dentro de la página. |
| type | BoardElementType | Tipo de elemento, como text, shape, image, connector, container, table o group. |
| transform | IBoardElementTransform | Valores de posición, tamaño, rotación, escala, sesgo y giro. |
| parentId? | string | Id. de grupo o contenedor principal. |
| laneId? | string | Id. de carril de carril cuando el elemento está dentro de un carril. |
| name? | string | Nombre del elemento legible por humanos. |
| description? | string | Accesibilidad o metadatos de la aplicación. |
| visible? | boolean | Si el elemento debe representarse. |
| selectable? | boolean | Si el editor puede seleccionar el elemento. |
| locked? | boolean | Si la edición está bloqueada. |
| custom? | `Registro<cadena, desconocido> | null` |
Tipos de elementos
| Tipo | Extra datos | Uso típico |
|---|---|---|
text | text, textStyle, textData | Notas adhesivas, etiquetas y bloques de texto enriquecido. |
shape | shapeData | Rectángulos, flechas, leyendas y formas personalizadas. |
image | source, imageSourceType, crop | Imágenes incrustadas. |
connector | connectorData | Líneas y flechas adjuntas a puntos o formas libres. |
container | containerData | Marcos, áreas, carriles, paquetes UML y límites del sistema. |
table | tableId | Elementos de tabla de tablero proporcionados por el complemento de tabla. |
chart | chartId | Elementos de gráfico. |
media | mediaType, source | Marcadores de posición de audio y vídeo. |
group | children | Colecciones de elementos agrupados. |
Contenedores
Los contenedores definen el comportamiento de membresía con containerData.behavior y capturan reglas con containerData.capturePolicy. Utilice los métodos del contenedor de fachada para mover elementos hacia adentro y hacia afuera para que el orden y las relaciones principales se mantengan consistentes.
board.wrapElementsInContainer(['task-1', 'task-2'], { title: 'Sprint 1',})Carriles
Un carril es un contenedor con containerData.swimlane. Los carriles tienen identificaciones estables, títulos, valores de pedido, tamaños y un estado contraído opcional.
board.setSwimlaneLanes('lane-board', { orientation: 'horizontal', lanes: [ { id: 'todo', title: 'Todo', order: 0, size: 240 }, { id: 'doing', title: 'Doing', order: 1, size: 240 }, ],})Conectores
Los conectores utilizan puntos finales y datos de enrutamiento. Los puntos finales pueden ser puntos libres, límites de formas, sitios de conexión o líneas de vida. Prefiera operaciones de fachada o acciones de interfaz de usuario para la edición de conectores porque los datos de enrutamiento a menudo dependen de la geometría.
¿Cómo es esta guía?