インストールと使用
Mind Elixirのインストールと使用の簡単な紹介。
インストール
npm i mind-elixir -S
使用
import MindElixir from 'mind-elixir'
let options = {
el: '#map', // または HTMLDivElement
}
let mind = new MindElixir(options)
// 新しいマップデータの作成
const data = MindElixir.new('新しいトピック')
mind.init(data)
他の設定については完全な設定を参照してください。
警告
Mind Elixirはマウントされるときにコンテナの高さが100%になるため、コンテナの高さを必ず設定してください。そうしないと表示が異常になります。
<div id="map"></div>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
マインドマップの操作
- 操作は一般的なマインドマップアプリと基本的に同じです。
- ショートカットはショートカットセクションで確認できます。
- マウスの左クリックでノードをドラッグしたり、複数のノードを選択したりできます。
- マウスの右クリックでキャンバスをドラッグできます。
- "接続"を選択した後、別のノードをクリックすると、2つのノードを接続できます。
データのエクスポートと更新
ユーザーがマインドマップを操作すると、データが変更されます。最新のデータを取得するには、getData
メソッドを呼び出すことができます。データの形式についてはデータのエクスポートを参照してく ださい。
const data = mind.getData()
現在のマインドマップを新しいデータセット全体で更新する必要がある場合は、refresh
メソッドを使用できます。
mind.refresh(data)