心智圖
Board 的心智圖支援是選用功能。若產品需要在 Board 畫布中使用心智圖節點與互動功能,請加入這項支援。
註冊心智圖支援
TypeScript
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIZhTW from '@univerjs-pro/boards-mind-ui/locale/zh-TW'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)}目標矩形只控制位置,不會變更容器父級、裁剪或縮放它。成功的布局作為一筆復原記錄提交。
你覺得這篇文檔如何?