Elementos

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.

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.

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 activo. Lee el texto con getPlainText(), reemplázalo por completo con setText() y configura la fuente, el color y la alineación.

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 y los márgenes y la disposición del cuadro de texto.

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.

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.

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.

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

Para grupos enmarcados y carriles, continúa con Contenedores y carriles. Consulta también la referencia de la facade de Boards y el modelo de datos de elementos.