# Elementos

- Human documentation: [https://docs.univer.ai/es-ES/guides/boards/features/core/elements](https://docs.univer.ai/es-ES/guides/boards/features/core/elements)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/boards/features/core/elements.md](https://docs.univer.ai/es-ES/guides/boards/features/core/elements.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [boards/features/core/elements.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/features/core/elements.es-ES.mdx)

---

Los elementos son el contenido visible de un Board: texto, imágenes, formas y conectores. La facade `FBoard` mantiene sus cambios en la ruta normal de comandos, por lo que participan en deshacer, rehacer y la colaboración.

## Leer elementos

Obtén el Board activo antes de leer su página activa. Usa descriptores cuando necesites identificadores, tipos, límites y orden estables sin depender de la instantánea interna completa.

```ts
const board = univerAPI.getActiveBoard()
if (!board) throw new Error('No active board')

const elements = board.describeElements()
const shapes = board.findElements({
  elementType: univerAPI.Enum.BoardElementType.Shape,
})
```

## Insertar formas y texto

Prefiere los métodos de inserción semánticos a construir instantáneas de bajo nivel. En `insertShape`, la geometría se define en `transform`; el objeto de forma devuelto ofrece las API de texto y estilo.

```ts
const shape = board.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,
  transform: { left: 80, top: 80, width: 180, height: 100 },
  name: 'Review card',
})
if (!shape) throw new Error('Cannot insert shape')

shape.getText().setText('Review')
shape.setRotation(6)
```

Usa `insertText` para texto independiente, `insertImage` para imágenes y las variantes por lotes para añadir varios elementos con un solo comando.

## Editar el texto de una forma

Utiliza la forma devuelta por `insertShape()` a continuación o en el ejemplo anterior. `getText()` devuelve un objeto [FShapeText](https://docs.univer.ai/es-ES/reference/facade/shape-text.md) activo. Lee el texto con `getPlainText()`, reemplázalo por completo con `setText()` y configura la fuente, el color y la alineación.

```ts
if (!shape) throw new Error('Shape is not available')
const shapeText = shape.getText()
console.log(shapeText.getPlainText())
shapeText
  .setText('Quarterly review')
  .setFontSize(18)
  .setColor('#2563eb')
  .setBold(true)
  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)
  .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)
```

`setText()` reemplaza el texto existente. Utiliza `setRichText()` para combinar varios estilos. Para editar texto enriquecido existente, llama a `getRichText()?.copy()`, modifica el constructor y pásalo a `setRichText()`. Los cambios del constructor no se aplican automáticamente. Consulta también los [estilos de texto](https://docs.univer.ai/es-ES/reference/facade/shape-text.md#settextstyle) y los [márgenes y la disposición del cuadro de texto](https://docs.univer.ai/es-ES/reference/facade/shape-text.md#settextboxoptions).

```ts
const richText = univerAPI.newRichText()
  .text('Quarterly ')
  .bold('review')
shapeText.setRichText(richText)
```

## Conectar elementos

Los conectores pueden asociarse a identificadores de elementos existentes. Conserva el conector devuelto o su identificador si después necesitas modificar su estilo, etiqueta o extremos.

```ts
const target = board.insertShape({
  shapeType: univerAPI.Enum.ShapeTypeEnum.Rect,
  transform: { left: 360, top: 80, width: 180, height: 100 },
})
if (!target) throw new Error('Cannot insert target')

const connector = board.insertConnector({
  fromElementId: shape.getId(),
  toElementId: target.getId(),
  style: { endMarker: { type: 'filledTriangle', size: 'md' } },
})
if (!connector) throw new Error('Cannot insert connector')
```

## Transformar y organizar elementos

Modifica solo las propiedades necesarias. Los métodos de orden, alineación, distribución y diseño automático también aceptan identificadores de elementos.

```ts
if (!board.setElementTransform(shape.getId(), { left: 120, top: 140, rotation: 12 })) {
  throw new Error('Cannot transform shape')
}

if (!board.bringElementsToFront([shape.getId()])) {
  throw new Error('Cannot bring shape to front')
}
```

## Eliminar elementos

Usa `removeElement` para un elemento o `removeElements` para eliminar varios de forma atómica. Ambos devuelven si el comando se completó correctamente.

```ts
if (!board.removeElements([connector.id, target.getId()])) {
  throw new Error('Cannot remove elements')
}
```

Para grupos enmarcados y carriles, continúa con [Contenedores y carriles](https://docs.univer.ai/es-ES/guides/boards/features/core/containers.md). Consulta también la [referencia de la facade de Boards](https://docs.univer.ai/es-ES/reference/facade/board.md) y el [modelo de datos de elementos](https://docs.univer.ai/es-ES/guides/boards/model/board-elements.md).