マインドマップ
Board のマインドマップ機能は任意です。Board キャンバス内でマインドマップのノードや操作が必要な場合に追加してください。
マインドマップ機能の登録
import { UniverBoardsMindPlugin } from '@univerjs-pro/boards-mind'import { UniverBoardsMindUIPlugin } from '@univerjs-pro/boards-mind-ui'import BoardsMindUIJaJP from '@univerjs-pro/boards-mind-ui/locale/ja-JP'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 を使います。
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)}矩形は配置領域です。コンテナの親変更、クリッピング、サイズ変更は行いません。成功した配置は 1 回の元に戻す操作にまとめられます。
このガイドはいかがですか？