思维导图
Board 的思维导图支持是可选功能。当产品需要在 Board 画布中使用思维导图节点及相关交互时,可以添加此功能。
注册思维导图支持
TypeScript
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIZhCN from '@univerjs-pro/boards-mind-ui/locale/zh-CN'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-ui | UniverBoardsMindUIPlugin | UniverBoardsMindMobileUIPlugin |
包的职责
@univerjs-pro/boards-mind将思维导图元素集成到 Board 模型中。@univerjs-pro/boards-mind-ui提供思维导图的编辑、渲染和 UI 交互功能,还为浏览器端编辑器提供@univerjs-pro/boards-mind-ui/locale/*和@univerjs-pro/boards-mind-ui/lib/index.css。
运行时选择
在浏览器端编辑器中,请同时使用这两个包。若要在服务端处理快照,请将模型包与 UniverBoardsPlugin 一同注册,无需使用 UI 包。
打开包含思维导图元素的快照前,请先注册思维导图支持。
Facade API
使用结构化 Facade 操作思维导图,不要独立修改底层形状和连接线。
TypeScript
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。
TypeScript
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)}目标矩形只控制位置,不会修改导图容器的父级、裁剪或缩放它。成功的布局作为一项撤销记录提交。
你觉得这篇文档如何?