Características principales

El núcleo de Univer Boards combina un modelo de páginas y elementos con un lienzo interactivo en el navegador. El modelo y la interfaz se distribuyen en dos paquetes de Web SDK y funcionan como una unidad UNIVER_BOARD independiente.

Funciones

• Páginas y orden de elementos: almacena las páginas en pages y los objetos dibujables en elements, con matrices de orden explícitas en ambos niveles.
• Elementos del lienzo: trabaja con texto, formas, imágenes, conectores, grupos, contenedores y carriles.
• Edición mediante comandos: dirige los cambios, el orden y las relaciones padre-hijo por una capa de comandos con permisos y puntos de integración para el historial y la colaboración opcionales.
• Lienzo del navegador: renderiza elementos y ofrece selección, transformaciones, portapapeles, edición de texto, controles de vista y paneles.
• Adaptadores extensibles: añade funciones opcionales de Boards como tablas, mapas mentales, gráficos, recursos, impresión e intercambio.
• Persistencia: crea, restaura y guarda una instantánea IBoardData con páginas, recursos, temas y el estado de la página activa.

Modo plugin

Instalación

Añade los dos paquetes de Boards al entorno de Univer descrito en Instalación y uso básico:

pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui

npm install @univerjs-pro/boards @univerjs-pro/boards-ui

yarn add @univerjs-pro/boards @univerjs-pro/boards-ui

bun add @univerjs-pro/boards @univerjs-pro/boards-ui

Registro de los plugins del producto

Registra primero las dependencias compartidas de renderizado, documentos, dibujo, tinta y edición de formas, además de la licencia , como indica la guía de instalación; después registra los plugins de Boards:

import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import '@univerjs-pro/boards-ui/lib/index.css'univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin)

UniverBoardsPlugin registra el modelo Board, los comandos, los servicios de elementos, los adaptadores y los permisos. UniverBoardsUIPlugin añade el lienzo renderizado y las interacciones del navegador.

Modo preset

Univer Boards no ofrece actualmente un preset específico. Usa el modo plugin tanto para el modelo como para la interfaz del navegador.

Configuración de menús y barra de herramientas del lienzo

Los menús contextuales de Boards utilizan el MenuConfig compartido. Añade menu al registro existente de UniverUIPlugin, no a UniverBoardsUIPlugin. Este ejemplo coloca Duplicar al principio de su grupo:

Configuración inicial

import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'board.menu.duplicate-selection': { order: -1 },}univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })

order ordena de menor a mayor los elementos del mismo nivel del menú contextual, sin moverlos a otro grupo. Utiliza el identificador del elemento de la definición del menú del producto; puede diferir del de la orden.

Actualizaciones en ejecución

Importa @univerjs/ui/facade antes de crear univerAPI con FUniver.newAPI(univer). updateMenuConfig() combina los cambios, conserva los campos no especificados y actualiza los menús. La configuración también se aplica a los menús registrados posteriormente.

import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'board.menu.duplicate-selection': { order: 5 },})

Barra de herramientas del lienzo

Boards utiliza su propia barra de herramientas del lienzo y no registra un Ribbon estándar del producto. gridLayout solo controla el Ribbon compartido en cuadrícula; no reorganiza la barra del lienzo ni los menús contextuales. Configura las herramientas mediante UniverBoardsUIPlugin.toolbar.tools, por ejemplo para desactivar el lápiz en el registro existente:

import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'univer.registerPlugin(UniverBoardsUIPlugin, {  toolbar: { tools: { pen: false } },})

toolbar.tools controla la disponibilidad de las herramientas, no su orden ni su posición en una cuadrícula. Consulta la referencia de Boards UI para distinguir los controles del lienzo de los menús compartidos.