Yes we have markdown in our mindmap

http://i.imgur.com/tysJGT7.png

Also fixed a layout bug in the pos calculation.

Author: jaredly

demo/mindmap/index.less

@@ -85,9 +85,13 @@ body {
     border-color: magenta;
   }
 
+  &-editing {
+    border-color: green;
+  }
+
   &_main {
     padding: 20px;
-    width: 100px;
+    width: 200px;
   }
 
   &_children {

views/mindmap/actions.js

@@ -5,6 +5,28 @@ var movement = require('./movement')
 
 module.exports = {
 
+  createBefore: function (id) {
+    id = id || this.view.active
+    var node = this.db.nodes[id]
+      , pos
+    if (id === this.view.root) {
+      pos = {
+        pid: id,
+        type: node.type,
+        ix: 0
+      }
+    } else {
+      pos = {
+        pid: node.parent,
+        type: node.type,
+        ix: this.db.nodes[node.parent].children.indexOf(id),
+      }
+    }
+    this.executeCommand('create', pos, (err, cmd) => {
+      this.edit(cmd.id)
+    })
+  },
+
   createAfter: function (id, split, after) {
     id = id || this.view.active
     var node = this.db.nodes[id]
@@ -42,6 +64,9 @@ module.exports = {
     }
   },
 
+  joinUp: function () {},
+  removeEmpty: function () {},
+
   moveDown: function (id) {
     id = id || this.view.active
     if (this.view.mode === 'visual') {

views/mindmap/calcpos.js

@@ -1,8 +1,8 @@
 
-module.exports = function calcPos(root, nodes, xsep, ysep, heights) {
+module.exports = function calcPos(root, nodes, xsep, ysep, cellHeight, heights) {
   var tree = crawl(root, nodes)
 
-  var {boxes, height, width} = calcBoxes(tree, 100, xsep, 1, ysep)
+  var {boxes, height, width} = calcBoxes(tree, cellHeight, xsep, 1, ysep)
   var links = []
   var rbox = boxes[root]
     , rx = 0//rbox.x
@@ -69,8 +69,8 @@ function calcBoxes(data, cellHeight, xsep, pxscale, ysep) {
     var x = node.x * width
       , y = node.y * height
     boxes[node.id] = {
-      x: y - node.width/2 * xs,
-      y: x,
+      x: y,
+      y: x - node.width/2 * xs,
       height: node.width * xs,
       width: ys,
     }

views/mindmap/index.js

@@ -58,18 +58,30 @@ var Mindmap = React.createClass({
     var positions = calcPos(
       this.props.store.view.root,
       this.props.store.actions.db.nodes,
+      20,
       100,
-      100,
+      200,
       this.state.heights);
     return positions
   },
 
   render: function () {
     var positions = this.calcPositions()
+    var bodies = {
+      default: {editor: null, renderer: null}
+    }
+    if (this.props.nodePlugins) {
+      for (var i=0; i<this.props.nodePlugins.length; i++) {
+        if (this.props.nodePlugins[i].bodies) {
+          bodies = extend(bodies, this.props.nodePlugins[i].bodies)
+        }
+      }
+    }
     return <div className='Mindmap'>
       <Movable
         height={this.props.height}
         width={this.props.width}
+        bodies={bodies}
         positions={positions}
         reCalc={this._reCalc}
         onHeight={this._onHeight}
@@ -100,7 +112,8 @@ var Movable = React.createClass({
         if (this.state.activeNode === state.activeNode) return
         var aid = state.activeNode
           , pos = props.positions.boxes[aid]
-          , nx = this.state.left + pos.x
+        if (!pos) return
+        var nx = this.state.left + pos.x
           , ny = this.state.top + pos.y
           , margin = 100
           , dx = 0
@@ -111,16 +124,16 @@ var Movable = React.createClass({
         if (ny - margin < 0) {
           dy -= ny - margin
         }
-        if (nx + pos.height + margin > this.props.width) {
-          dx -= nx + pos.height + margin - this.props.width
+        if (nx + pos.width + margin > this.props.width) {
+          dx -= nx + pos.width + margin - this.props.width
         }
-        if (ny + pos.width + margin > this.props.height) {
-          dy -= ny + pos.width + margin - this.props.height
+        if (ny + pos.height + margin > this.props.height) {
+          dy -= ny + pos.height + margin - this.props.height
         }
-        this.setState({
+        return {
           left: this.state.left + dx,
           top: this.state.top + dy,
-        })
+        }
       },
     })
   ],
@@ -129,7 +142,8 @@ var Movable = React.createClass({
     var aid = this.props.store.view.active
       , ppos = this.props.positions.boxes[aid]
       , npos = nextProps.positions.boxes[aid]
-      , dx = ppos.x - npos.x
+    if (!ppos || !npos) return
+    var dx = ppos.x - npos.x
       , dy = ppos.y - npos.y
       , nx = this.state.left + dx + npos.x
       , ny = this.state.top + dy + npos.y
@@ -215,6 +229,7 @@ var Movable = React.createClass({
         onHeight={this.props.onHeight}
         positions={positions.boxes}
         plugins={this.props.nodePlugins}
+        bodies={this.props.bodies}
         store={this.props.store}
         key={this.props.store.view.root}
         id={this.props.store.view.root}

views/mindmap/keys.js

@@ -34,6 +34,9 @@ module.exports = {
     'move down': {
       normal: 'shift+alt+down, shift+alt+j',
     },
+    'create before': {
+      normal: 'shift+o',
+    },
     'create after': {
       normal: 'o',
     },

views/mindmap/node.js

@@ -1,6 +1,7 @@
 var React = require('react/addons')
   , cx = React.addons.classSet
   , PT = React.PropTypes
+  , SimpleBody = require('../body/simple')
 
   , Listener = require('../../listener')
 
@@ -86,11 +87,21 @@ var MindmapNode = React.createClass({
       'MindmapNode': true,
       'MindmapNode-hiding': this.props.hiding,
       'MindmapNode-active': this.state.isActive,
-      'MindmapNode-collapsed': this.state.node.collapsed,
+      'MindmapNode-editing': this.state.editState,
+      'MindmapNode-collapsed': this.state.node.children && this.state.node.children.length && this.state.node.collapsed,
     })
+    var body = this.props.bodies[this.state.node.type] || this.props.bodies['default']
     return <div style={style} className={cls}>
       <div onClick={this._onClick} className='MindmapNode_main'>
-        {this.state.node.content}
+        {SimpleBody({
+          editor: body.editor,
+          renderer: body.renderer,
+          node: this.state.node,
+          isActive: this.state.isActive,
+          editState: this.state.editState,
+          actions: this.props.store.actions,
+          store: this.props.store,
+        })}
       </div>
       {this.state.node.children.length ? <div className='MindmapNode_children'>
         {!this.state.lazyChildren && this.state.node.children.map((id, i) =>