Основные возможности

Ядро Univer Boards объединяет модель страниц и элементов с интерактивным холстом в браузере. Модель и интерфейс поставляются в двух пакетах Web SDK и работают как самостоятельный объект UNIVER_BOARD.

Возможности

• Страницы и порядок элементов: страницы хранятся в pages, а доступные для отрисовки объекты — в elements каждой страницы; на обоих уровнях используются явные массивы порядка.
• Элементы холста: текст, фигуры, изображения, соединительные линии, группы, контейнеры и кросс-функциональные диаграммы.
• Редактирование через команды: изменения элементов, порядок и родительские связи проходят через единый слой команд с разрешениями и точками подключения для необязательной истории и совместного редактирования.
• Холст в браузере: отрисовка элементов, выделение, преобразования, буфер обмена, редактирование текста, управление областью просмотра и панели.
• Расширяемые адаптеры: необязательные возможности Boards, включая таблицы, интеллект-карты, диаграммы, ресурсы, печать и обмен.
• Хранение данных: создание, восстановление и сохранение снимка IBoardData со страницами, ресурсами, темами и состоянием активной страницы.

Режим пресетов

В настоящее время отдельного пресета для Univer Boards нет. Для модели и браузерного интерфейса используйте режим плагинов.

Режим плагинов

Установка

Добавьте два пакета Boards в среду Univer, описанную в разделе Установка и базовое использование:

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

Регистрация плагинов продукта

Сначала зарегистрируйте общие зависимости отрисовки, документов, рисунков, рукописного ввода и редактирования фигур, а также лицензию , как показано в руководстве по установке, а затем плагины 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 регистрирует модель Board, команды, службы элементов, адаптеры и разрешения. UniverBoardsUIPlugin добавляет отрисованный холст и взаимодействие в браузере.

Настройка меню и панели инструментов холста

Контекстные меню Boards используют общий MenuConfig. Добавьте menu к существующей регистрации UniverUIPlugin, а не UniverBoardsUIPlugin. Пример перемещает пункт дублирования в начало его группы:

Начальная настройка

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 сортирует пункты контекстного меню одного уровня по возрастанию, не перенося их в другую группу. Используйте идентификатор пункта из определения меню продукта: он может отличаться от идентификатора команды.

Обновление во время работы

Импортируйте @univerjs/ui/facade перед созданием univerAPI через FUniver.newAPI(univer). updateMenuConfig() объединяет изменения, сохраняет неуказанные поля и обновляет меню. Настройки также применяются к меню, зарегистрированным позднее.

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

Панель инструментов холста

Boards использует собственную панель инструментов холста и не регистрирует стандартную ленту продукта. gridLayout управляет только общей сеточной лентой Ribbon, а не панелью холста или контекстными меню. Инструменты холста настраиваются через UniverBoardsUIPlugin.toolbar.tools; например, так можно отключить перо при существующей регистрации плагина:

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

toolbar.tools управляет доступностью инструментов, но не их порядком или положением в сетке. Различия между панелью холста и общими меню описаны в справочнике Boards UI.