🎉 1.0.0 released, breaking changes included

Author: SSShooter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "0.19.8",
+  "version": "1.0.0",
   "description": "Mind elixir is a free open source mind map core.",
   "main": "dist/MindElixir.js",
   "scripts": {

readme.md

@@ -16,9 +16,15 @@
   </a>
 </p>
 
+[中文 README](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
+
 Mind elixir is a free open source mind map core.
 
-[中文](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
+- High performance
+- Small size
+- Framework agnostic
+- Pluginable
+- Build-in drag and drop / node edit plugin
 
 ## Try now
 
@@ -68,17 +74,16 @@ import MindElixir, { E } from 'mind-elixir'
 
 ### Init
 
+**Breaking Change** since 1.0.0, `data` should be passed to `init()`, not `options`.
+
 ```javascript
 import MindElixir, { E } from 'mind-elixir'
 import { exportSvg, exportPng } from '../dist/painter'
 import example from '../dist/example1'
 
 let options = {
-  el: '#map',
+  el: '#map', // or HTMLDivElement
   direction: MindElixir.LEFT,
-  // create new map data
-  data: MindElixir.new('new topic') or example,
-  // the data return from `.getAllData()`
   draggable: true, // default true
   contextMenu: true, // default true
   toolBar: true, // default true
@@ -114,11 +119,17 @@ let options = {
 }
 
 let mind = new MindElixir(options)
-mind.init()
+
+mind.install(plugin) // install your plugin
+
+// create new map data
+const data = MindElixir.new('new topic')
+// or `example`
+// or the data return from `.getAllData()`
+mind.init(data)
 
 // get a node
 E('node-id')
-
 ```
 
 ### Data Structure
@@ -170,21 +181,11 @@ mind.getAllDataString() // stringify object
 mind.getAllDataMd() // markdown
 ```
 
-### Export as image
-
-**WIP**
-
-```javascript
-import painter from 'mind-elixir/dist/painter'
-painter.exportSvg()
-painter.exportPng()
-```
-
 ### Operation Guards
 
 ```javascript
 let mind = new MindElixir({
-  ...
+  // ...
   before: {
     insertSibling(el, obj) {
       console.log(el, obj)
@@ -204,10 +205,20 @@ let mind = new MindElixir({
 })
 ```
 
+### Export as image
+
+**WIP**
+
+```javascript
+import painter from 'mind-elixir/dist/painter'
+painter.exportSvg()
+painter.exportPng()
+```
+
 ## Doc
 
 https://doc.mind-elixir.com/
 
 ## Thanks
 
-[canvg](https://github.com/canvg/canvg)
+[canvg](https://github.com/canvg/canvg)

src/dev.ts

@@ -20,8 +20,6 @@ const options = {
   newTopicName: '子节点',
   direction: MindElixir.SIDE,
   // direction: MindElixir.RIGHT,
-  data: MindElixir.new('new topic'),
-  // data: example,
   locale: 'en',
   draggable: true,
   editable: true,
@@ -62,7 +60,9 @@ const options = {
 }
 
 const mind = new (MindElixir as any)(options)
-mind.init()
+
+const data = MindElixir.new('new topic')
+mind.init(example) // or try `example`
 function sleep() {
   return new Promise<void>((res, rej) => {
     setTimeout(() => res(), 1000)
@@ -72,12 +72,11 @@ console.log('test E function', E('bd4313fbac40284b'))
 const mind2 = new (MindElixirLite as any)({
   el: document.querySelector('#map2'),
   direction: 2,
-  data: example2,
   draggable: false,
   // overflowHidden: true,
   nodeMenu: true,
 })
-mind2.init()
+mind2.init(example2)
 window.currentOperation = null
 mind.bus.addListener('operation', operation => {
   console.log(operation)

src/exampleData/1.cn.js

@@ -37,7 +37,7 @@ export default {
                 id: 'c1f1e245b0a89f9b',
               },
               {
-                topic: 'new MindElixir({...}).init()',
+                topic: 'new MindElixir({...}).init(data)',
                 id: 'c1f1ebc7072c8928',
               },
             ],

src/exampleData/1.js

@@ -27,7 +27,7 @@ export default {
                 topic: "import MindElixir from 'mind-elixir'",
                 id: 'c1f1e245b0a89f9b',
               },
-              { topic: 'new MindElixir({...}).init()', id: 'c1f1ebc7072c8928' },
+              { topic: 'new MindElixir({...}).init(data)', id: 'c1f1ebc7072c8928' },
             ],
           },
           {

src/index.lite.ts

@@ -25,6 +25,7 @@ import {
   initSide,
   setLocale,
   expandNode,
+  refresh,
 } from './interact'
 import {
   processPrimaryNode,
@@ -43,8 +44,6 @@ import mobileMenu from './plugin/mobileMenu'
 import Bus from './utils/pubsub'
 
 import './index.less'
-import './plugin/toolBar.less'
-import './plugin/mobileMenu.less'
 
 import './iconfont/iconfont.js'
 
@@ -109,10 +108,20 @@ export interface MindElixirInstance {
   primaryNodeVerticalGap: number,
   mobileMenu: boolean,
 
+  container: HTMLElement,
+  map: HTMLElement,
+  root: HTMLElement,
+  box: HTMLElement,
+  svg2nd: SVGElement,
+  linkController:SVGElement,
+  P2: HTMLElement,
+  P3: HTMLElement,
+  line1:SVGElement,
+  line2:SVGElement,
+  linkSvgGroup:SVGElement,
 }
 export interface Options {
   el: string | Element,
-  data: MindElixirData,
   direction?: number,
   locale?: string,
   draggable?: boolean,
@@ -134,7 +143,6 @@ export interface Options {
 const $d = document
 function MindElixir(this: MindElixirInstance, {
   el,
-  data,
   direction,
   locale,
   draggable,
@@ -156,8 +164,6 @@ function MindElixir(this: MindElixirInstance, {
   }
   if (!box) return new Error('MindElixir: el is not a valid element')
   this.mindElixirBox = box
-  this.nodeData = data.nodeData
-  this.linkData = data.linkData || {}
   this.locale = locale
   this.toolBar = toolBar === undefined ? true : toolBar
   this.keypress = keypress === undefined ? true : keypress
@@ -194,6 +200,52 @@ function MindElixir(this: MindElixirInstance, {
       // console.log(operation, this.history)
     }
   })
+
+  console.log('ME_version ' + MindElixir.version)
+  this.mindElixirBox.className += ' mind-elixir'
+  this.mindElixirBox.innerHTML = ''
+
+  this.container = $d.createElement('div') // map container
+  this.container.className = 'map-container'
+
+  if (this.overflowHidden) this.container.style.overflow = 'hidden'
+
+  this.map = $d.createElement('div') // map-canvas Element
+  this.map.className = 'map-canvas'
+  this.map.setAttribute('tabindex', '0')
+  this.container.appendChild(this.map)
+  this.mindElixirBox.appendChild(this.container)
+  this.root = $d.createElement('root')
+
+  this.box = $d.createElement('children')
+  this.box.className = 'box'
+
+  // infrastructure
+
+  this.svg2nd = createLinkSvg('svg2nd') // main link container
+
+  this.linkController = createLinkSvg('linkcontroller') // bezier controller container
+  this.P2 = $d.createElement('div') // bezier P2
+  this.P3 = $d.createElement('div') // bezier P3
+  this.P2.className = this.P3.className = 'circle'
+  this.line1 = createLine(0, 0, 0, 0) // bezier auxiliary line1
+  this.line2 = createLine(0, 0, 0, 0) // bezier auxiliary line2
+  this.linkController.appendChild(this.line1)
+  this.linkController.appendChild(this.line2)
+
+  this.linkSvgGroup = createLinkSvg('topiclinks') // storage user custom link svg
+
+  this.map.appendChild(this.root)
+  this.map.appendChild(this.box)
+  this.map.appendChild(this.svg2nd)
+  this.map.appendChild(this.linkController)
+  this.map.appendChild(this.linkSvgGroup)
+  this.map.appendChild(this.P2)
+  this.map.appendChild(this.P3)
+
+  if (this.overflowHidden) {
+    this.container.style.overflow = 'hidden'
+  } else initMouseEvent(this)
 }
 
 MindElixir.prototype = {
@@ -226,60 +278,11 @@ MindElixir.prototype = {
   initSide,
   setLocale,
   expandNode,
+  refresh,
 
-  init: function() {
-    /**
-     * @function
-     * @global
-     * @name E
-     * @param {string} id Node id.
-     * @return {TargetElement} Target element.
-     * @example
-     * E('bd4313fbac40284b')
-     */
-    addParentLink(this.nodeData)
-    console.log('ME_version ' + MindElixir.version)
-    this.mindElixirBox.className += ' mind-elixir'
-    this.mindElixirBox.innerHTML = ''
-
-    this.container = $d.createElement('div') // map container
-    this.container.className = 'map-container'
-
-    if (this.overflowHidden) this.container.style.overflow = 'hidden'
-
-    this.map = $d.createElement('div') // map-canvas Element
-    this.map.className = 'map-canvas'
-    this.map.setAttribute('tabindex', '0')
-    this.container.appendChild(this.map)
-    this.mindElixirBox.appendChild(this.container)
-    this.root = $d.createElement('root')
-
-    this.box = $d.createElement('children')
-    this.box.className = 'box'
-
-    // infrastructure
-
-    this.svg2nd = createLinkSvg('svg2nd') // main link container
-
-    this.linkController = createLinkSvg('linkcontroller') // bezier controller container
-    this.P2 = $d.createElement('div') // bezier P2
-    this.P3 = $d.createElement('div') // bezier P3
-    this.P2.className = this.P3.className = 'circle'
-    this.line1 = createLine(0, 0, 0, 0) // bezier auxiliary line1
-    this.line2 = createLine(0, 0, 0, 0) // bezier auxiliary line2
-    this.linkController.appendChild(this.line1)
-    this.linkController.appendChild(this.line2)
-
-    this.linkSvgGroup = createLinkSvg('topiclinks') // storage user custom link svg
-
-    this.map.appendChild(this.root)
-    this.map.appendChild(this.box)
-    this.map.appendChild(this.svg2nd)
-    this.map.appendChild(this.linkController)
-    this.map.appendChild(this.linkSvgGroup)
-    this.map.appendChild(this.P2)
-    this.map.appendChild(this.P3)
-
+  init: function(data:MindElixirData) {
+    this.nodeData = data.nodeData
+    this.linkData = data.linkData || {}
     // plugin
     this.toolBar && toolBar(this)
 
@@ -289,10 +292,10 @@ MindElixir.prototype = {
       this.contextMenu && contextMenu(this, this.contextMenuOption)
     }
 
+    addParentLink(this.nodeData)
     this.toCenter()
     this.layout()
     this.linkDiv()
-    if (!this.overflowHidden) initMouseEvent(this)
   },
 }