無框架依賴的思惟導圖內核 Mind Elixir 開源啦

時間 2019-11-07

標籤框架依賴思惟內核 mind elixir 開源欄目設計模式简体版

原文原文鏈接

Github 地址： https://github.com/ssshooter/...javascript

試用地址： https://mindelixir.ink/html

Mind elixir 是一個免費開源的思惟導圖內核java

當即試用

https://mindelixir.ink/#/node

在項目中使用

安裝

NPM

npm i mind-elixir -S

import MindElixir, { E } from 'mind-elixir'

script 標籤引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir@0.6.1/dist/mind-elixir.js"></script>

HTML 結構

<div class="outer">
  <div id="map"></div>
</div>
<style>
  .outer {
    position: relative;
    margin: 50px;
  }
  #map {
    height: 500px;
    width: 100%;
    overflow: auto;
  }
</style>

初始化

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT,
  data: MindElixir.new('new topic'), // 也能夠把 getDataAll 獲得的數據初始化
  draggable: true, // 啓用拖動 default true
  contextMenu: true, // 啓用右鍵菜單 default true
  toolBar: true, // 啓用工具欄 default true
  nodeMenu: true, // 啓用節點菜單 default true
  keypress: true, // 啓用快捷鍵 default true
})
mind.init()

// get a node
E('node-id')

Data Export

mind.getAllData()
// see src/example.js

使用提示

direction 選項

direction 選項可選 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。git

HTML 結構

掛載的目標須要定寬高，能夠是百分百；外層元素建議設置 position: relative;，不然菜單位置以視窗爲標準分佈。github

E 函數

在使用節點操做方法時須要傳入的參數能夠藉助 E 函數得到。npm

mind.insertSibling(E('bd4313fbac40284b'))

文檔

https://inspiring-golick-3c01...bash

依賴

hotkeys-jsssh

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。