Интеллект-карты

Поддержка интеллект-карт в Boards необязательна. Добавьте её, если в вашем продукте нужны узлы интеллект-карт и взаимодействие с ними на холсте Board.

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

import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIRuRU from '@univerjs-pro/boards-mind-ui/locale/ru-RU'import '@univerjs-pro/boards-mind/facade'import '@univerjs-pro/boards-mind-ui/lib/index.css'univer.registerPlugin(UniverBoardsMindPlugin)univer.registerPlugin(UniverBoardsMindUIPlugin)

Поддержка мобильных устройств

Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.

Назначение пакетов

• @univerjs-pro/boards-mind интегрирует элементы интеллект-карт с моделью Board.
• @univerjs-pro/boards-mind-ui добавляет редактирование и отрисовку интеллект-карт, а также взаимодействие с ними в интерфейсе. Пакет также предоставляет @univerjs-pro/boards-mind-ui/locale/* и @univerjs-pro/boards-mind-ui/lib/index.css для браузерных редакторов.

Выбор пакетов для среды выполнения

В браузерном редакторе используйте оба пакета. Для обработки снимков на сервере зарегистрируйте пакет модели вместе с UniverBoardsPlugin, а пакеты интерфейса не подключайте.

Зарегистрируйте поддержку интеллект-карт до открытия снимков, содержащих их элементы.

Facade API

Используйте структурированный Facade, а не редактируйте фигуры и соединители по отдельности.

const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active Board')const mindMap = board.insertMindMap({  left: 180,  top: 180,  root: {    text: 'Release',    children: [      { text: 'Product', children: [{ text: 'Scope' }, { text: 'UX' }] },      { text: 'Engineering', children: [{ text: 'API' }, { text: 'QA' }] },      { text: 'Launch', children: [{ text: 'Docs' }] },    ],  },})if (!mindMap) throw new Error('Cannot insert mind map')const qa = mindMap.getNodes().find(node => node.getText() === 'QA')qa?.addChild({ text: 'Automation' })

FBoard предоставляет insertMindMap, getMindMap, getMindMaps. Карта поддерживает поиск узлов и потомков, компоновку, границы, reflow, setLayout, setBranchLineType и удаление. Узлы поддерживают текст, вставку дочерних и соседних узлов, смену родителя, повышение уровня, отделение, порядок, стили и сворачивание.

Размещение в заданных границах

reflow() атомарно размещает и центрирует карту в прямоугольнике координат Board, сохраняя размеры узлов и текста. По умолчанию повторяет попытку с минимальными интервалами. Если карта не помещается, Board не меняется, а результат содержит bounds-too-small и requiredBounds.

const result = mindMap.reflow({  bounds: { left: 80, top: 80, width: 1_000, height: 600 },  padding: 24,})if (!result.success) {  console.warn(result.reason, result.requiredBounds)}

Прямоугольник задаёт только область размещения: родитель, обрезка и размер контейнера не меняются. Успешная компоновка сохраняется как одна операция отмены.