Merge branch 'dev' of https://github.com/kitygraph/kityminder into dev

demo/dev.html

@@ -16,5 +16,6 @@
 <script>
     minder = KM.createMinder(kityminder);
     minder.execCommand("switchlayout","default");
+    minder.execCommand("appendchildnode",new MinderNode());
 </script>
 </html>
\ No newline at end of file

dist/dev.php

@@ -13,18 +13,12 @@ $dependency = Array(
     'src/core/minder.module.js',
     'src/core/minder.command.js',
     'src/core/minder.node.js',
-    'src/core/minder.select.js',
     'src/module/history.js',
     'src/module/icon.js',
     'src/module/layout.js',
     'src/module/layout.default.js',
     'src/module/layout.green.js',
-    'src/module/mouse.js',
-    'src/module/keyboard.js',
-    'src/module/editor.js',
-    'src/module/editor.cursor.js',
-    'src/module/editor.range.js',
-    'src/module/editor.receiver.js'
+    'src/core/minder.select.js',
 );
 
 $content = "";

spec/index.php

+<?php
+/**
+ * Created by PhpStorm.
+ * User: dongyancen
+ * Date: 14-1-15
+ * Time: 下午6:50
+ */
+Header('Location:../spec/tools/list.php');
+?>
\ No newline at end of file

src/core/minder.command.js

@@ -24,7 +24,7 @@ kity.extendClass( Minder, {
     execCommand: function ( name ) {
         name = name.toLowerCase();
 
-        var cmdArgs = utils.argsToArray(arguments,1),
+        var cmdArgs = Utils.argsToArray( arguments, 1 ),
             cmd, stoped, result, eventParams;
         var me = this;
         cmd = this._getCommand( name );

src/core/minder.js

@@ -15,6 +15,7 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
     constructor: function ( options ) {
         this._options = Utils.extend( window.KITYMINDER_CONFIG || {}, MinderDefaultOptions, options );
         this._layoutStyles = {};
+        this._currentStyle = "";
         this._initEvents();
         this._initMinder();
         this._initSelection();
@@ -54,6 +55,13 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
     getLayoutStyle: function ( name ) {
         return this._layoutStyles[ name ];
     },
+    getCurrentStyle: function () {
+        return this._currentStyle;
+    },
+    setCurrentStyle: function ( name ) {
+        this._currentStyle = name;
+        return name;
+    },
     getRenderTarget: function () {
         return this._renderTarget;
     }

src/core/minder.select.js

 // 选区管理
-kity.extendClass( Minder, function(){
-    function highlightNode(km,node){
+kity.extendClass( Minder, function () {
+    function highlightNode( km, node ) {
         node.setData( "highlight", true );
         km.renderNode( node );
     }
-    function unhighlightNode(km,node){
+
+    function unhighlightNode( km, node ) {
         node.setData( "highlight", false );
         km.renderNode( node );
     }
@@ -14,52 +15,53 @@ kity.extendClass( Minder, function(){
         },
         getSelectedNodes: function () {
             //如果没有选中节点，默认是root节点
-            if(this._selectedNodes.length == 0){
-                this._selectedNodes.push(this.getRoot())
+            if ( this._selectedNodes.length === 0 ) {
+                this._selectedNodes.push( this.getRoot() );
             }
             //不能克隆返回，会对当前选区操作，从而影响querycommand
             return this._selectedNodes;
         },
-        getSelectedNode:function(){
-            return this.getSelectedNodes()[0]
+        getSelectedNode: function () {
+            return this.getSelectedNodes()[ 0 ];
         },
-        removeAllSelectedNodes:function(){
-            utils.each(this.getSelectedNodes(),function(i,n){
-                unhighlightNode(this,n);
-            });
-            this._selectedNodes = []
+        removeAllSelectedNodes: function () {
+            var me = this;
+            Utils.each( this.getSelectedNodes(), function ( i, n ) {
+                unhighlightNode( me, n );
+            } );
+            this._selectedNodes = [];
         },
         select: function ( nodes ) {
             this.removeAllSelectedNodes();
             var me = this;
-            utils.each( utils.isArray(nodes) ? nodes : [nodes],function(i,n){
-                me._selectedNodes.push(n);
-                highlightNode(this,n)
-            });
+            utils.each( utils.isArray( nodes ) ? nodes : [ nodes ], function ( i, n ) {
+                me._selectedNodes.push( n );
+                highlightNode( me, n );
+            } );
             return this;
         },
         isNodeSelected: function ( node ) {
-            return node.getData('highlight') === true
+            return node.getData( 'highlight' ) === true
         },
         //当前选区中的节点在给定的节点范围内的保留选中状态，没在给定范围的取消选中，给定范围中的但没在当前选中范围的也做选中效果
         toggleSelect: function ( nodes ) {
-            nodes = utils.isArray(nodes) ? nodes : [nodes];
-            var selectedNodes = this.getSelectedNodes().slice(0);
+            nodes = utils.isArray( nodes ) ? nodes : [ nodes ];
+            var selectedNodes = this.getSelectedNodes().slice( 0 );
             this.removeAllSelectedNodes();
-            for(var i= 0,n; n = selectedNodes[i];){
-                var index = utils.indexOf(nodes,n);
-                if(index != -1){
-                    nodes.push(n);
+            for ( var i = 0, n; n = selectedNodes[ i ]; ) {
+                var index = utils.indexOf( nodes, n );
+                if ( index != -1 ) {
+                    nodes.push( n );
                     i++;
-                }else{
-                    unhighlightNode(this,n);
-                    selectedNodes.splice(i,1)
+                } else {
+                    unhighlightNode( this, n );
+                    selectedNodes.splice( i, 1 )
                 }
             }
             var me = this;
-            utils.each(nodes,function(i,n){
-                highlightNode(me,n)
-            });
+            utils.each( nodes, function ( i, n ) {
+                highlightNode( me, n )
+            } );
             this._selectedNodes = nodes;
         }
     }

src/module/layout.default.js

 KityMinder.registerModule( "LayoutDefault", function () {
-	var defaultHeight = 35;
 	var _target = this.getRenderTarget();
 	var minderWidth = _target.clientWidth;
 	var minderHeight = _target.clientHeight;
-
+	var minder = this;
 	var ConnectBezier = kity.createClass( "ConnectBezier", ( function () {
 		function mid( a, b ) {
 			return ( a + b ) / 2;
@@ -137,292 +136,212 @@ KityMinder.registerModule( "LayoutDefault", function () {
 			}
 		};
 	} )() );
-
-	var updateConnect = function ( minder, nodes, action ) {
-		switch ( action ) {
-		case "rendernode":
-			( function () {
-				if ( !( nodes instanceof Array ) ) {
-					nodes = [ nodes ];
-				}
-				for ( var i = 0; i < nodes.length; i++ ) {
-					var curnode = nodes[ i ];
-					if ( !curnode.getParent() ) {
-						return false;
-					} else {
-						var parent = curnode.getParent();
-						var connectExist = curnode.getData( "connect" );
-						if ( connectExist ) {
-							connectExist.updateConnection();
-						} else {
-							var _connect = new ConnectBezier( parent.getRenderContainer(), curnode.getRenderContainer() );
-							var nodeD = curnode.getData( "style" );
-							_connect.stroke( new kity.Pen( nodeD.stroke, nodeD.strokeWidth ) );
-							curnode.setData( "connect", _connect );
-							minder.getRenderContainer().addShape( _connect );
-						}
-					}
-				}
-			} )();
-			break;
-		case "removenode":
-			( function () {
-				if ( ( nodes instanceof Array ) === false ) {
-					nodes = [ nodes ];
-				}
-
-				function removeConnect( node ) {
-					var connect = node._connect;
-					if ( connect && connect.remove ) {
-						connect.remove();
-					}
-				}
-				for ( var i = 0; i < nodes.length; i++ ) {
-					nodes[ i ].traverse( removeConnect );
-				}
-			} )();
-		}
+	var nodeDefautStyle = {
+		radius: 10,
+		fill: "skyblue",
+		stroke: "orange",
+		color: "black",
+		padding: [ 5, 10, 5, 10 ],
+		fontSize: 20,
+		margin: [ 0, 10, 10, 50 ]
 	};
-
-	var updateBranchHeight = function ( node, appendSide, root, isAdd, oldParent ) {
-		var siblings = ( function () {
-			if ( !isAdd ) {
-				return oldParent.getChildren();
-			} else if ( parent === root ) {
-				return root.getData( "layer" + appendSide )[ 1 ];
-			} else {
-				return node.getParent().getChildren();
-			}
-		} )();
-		var parent = isAdd ? node.getParent() : oldParent;
-		node.setData( "branchheight", defaultHeight + 10 );
-		if ( isAdd ) {
-			var add = ( ( siblings.length === 1 && node.getParent() !== root ) ? 0 : ( defaultHeight + 10 ) );
-			while ( parent || ( parent === root ) ) {
-				var branchheight = parent.getData( appendSide + "Height" ) || parent.getData( "branchheight" ) || 0;
-				if ( parent === root ) {
-					parent.setData( appendSide + "Height", branchheight + add );
-				} else {
-					parent.setData( "branchheight", branchheight + add );
-				}
-				parent = parent.getParent();
+	var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
+		return {
+			constructor: function ( node ) {
+				var txt = this._txt = new kity.Text();
+				var rect = this._rect = new kity.Rect();
+				this._node = node;
+				var container = node.getRenderContainer();
+				container.addShapes( [ rect, txt ] );
+				node.setData( "shape", this );
+				var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
+				node.setData( "style", Utils.extend( ND, node.getData( "style" ) ) );
+				var _style = node.getData( "style" );
+				txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
+				var _txtHeight = txt.getHeight();
+				txt.translate( _style.padding[ 3 ], _txtHeight + _style.padding[ 0 ] );
+				this.update();
+			},
+			update: function () {
+				var node = this._node;
+				var txt = this._txt;
+				var rect = this._rect;
+				var _style = node.getData( "style" );
+				txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
+				var _txtHeight = txt.getHeight();
+				var _rectWidth = _style.padding[ 1 ] + _style.padding[ 3 ] + txt.getWidth();
+				var _rectHeight = _style.padding[ 0 ] + _style.padding[ 2 ] + _txtHeight;
+				rect.fill( _style.fill ).stroke( _style.stroke ).setRadius( _style.radius ).setWidth( _rectWidth ).setHeight( _rectHeight );
+				if ( node.getData( "highlight" ) ) {
+					rect.stroke( new kity.Pen( "white", 3 ) );
 				}
-
-			if ( siblings.length === 1 ) {
-				return false;
-			} else {
-				return true;
 			}
+		};
+	} )() );
+	var root = this.getRoot();
+	//更新连线
+	var updateConnect = function ( minder, node, action ) {
+		var _style = node.getData( "style" );
+		if ( !node.getParent() ) return false;
+		var start = node.getParent().getRenderContainer();
+		var end = node.getRenderContainer();
+		var _connect = node.getData( "connect" );
+		if ( action === "remove" ) {
+			_connect.remove();
 		} else {
-			var dec = node.getData( "branchheight" );
-			do {
-				var branchheight2 = parent.getData( appendSide + "Height" ) || parent.getData( "branchheight" ) || 0;
-				if ( parent === root ) {
-					parent.setData( appendSide + "Height", branchheight2 - dec );
-				} else {
-					parent.setData( "branchheight", branchheight2 - dec );
+			if ( _connect ) _connect.updateConnection();
+			else {
+				_connect = new ConnectBezier( start, end );
+				node.setData( "connect", _connect );
+				minder.getRenderContainer().addShape( _connect );
+				_connect.stroke( _style.stroke );
 			}
-				parent = parent.getParent();
-			} while ( parent );
-			return true;
 		}
 	};
-
-	var reAnalyze = function ( km, layerArray, appendSide ) {
-		for ( var lv = 0; lv < layerArray.length; lv++ ) {
-			var lvData = layerArray[ lv ];
-			for ( var i = 0; i < lvData.length; i++ ) {
-				var children = ( lv === 0 ? layerArray[ 1 ] : lvData[ i ].getChildren() );
-				if ( !children || children.length === 0 ) continue;
-				var branchheight = lvData[ i ].getData( appendSide + "Height" ) || lvData[ i ].getData( "branchheight" );
-				var sY = lvData[ i ].getData( "y" ) + ( children[ 0 ].getData( "branchheight" ) - branchheight ) / 2;
-				for ( var j = 0; j < children.length; j++ ) {
-					children[ j ].setData( "y", sY );
-					var part1 = ( children[ j ].getData( "branchheight" ) - 10 ) / 2 + 10;
-					var part2 = ( children[ j + 1 ] ? ( children[ j + 1 ].getData( "branchheight" ) - 10 ) / 2 : 0 );
-					sY += ( part1 + part2 );
-				}
-				km.renderNodes( children );
+	//求并集
+	var uSet = function ( a, b ) {
+		for ( var i = 0; i < a.length; i++ ) {
+			var idx = b.indexOf( a[ i ] );
+			if ( idx !== -1 ) {
+				b.splice( idx, 1 );
 			}
 		}
+		return a.concat( b );
 	};
-
-	var createChildNode = function ( km, parent, index ) {
-		var root = km.getRoot();
-		var appendSide = parent.getData( "appendside" );
-		var _node = new MinderNode();
-		_node.setData( "branchheight", 0 );
-		parent.insertChild( _node, index );
-
-		_node.setData( "appendside", appendSide );
-
-		var parentX = parent.getData( "x" );
-		var parentWidth = parent.getRenderContainer().getWidth();
-		if ( parent.getData( "align" ) === "center" ) parentWidth = parentWidth / 2;
-
-		switch ( appendSide ) {
-		case "left":
-			_node.setData( "x", parentX - parentWidth - 50 );
-			_node.setData( "align", "right" );
-			break;
+	//绘制node
+	var drawNode = function ( node ) {
+		var container = node.getRenderContainer();
+		var shape = node.getData( "shape" );
+		if ( !shape ) new MinderNodeShape( node );
+		else shape.update();
+		updateConnect( minder, node );
+	};
+	//调整node的位置
+	var translateNode = function ( node ) {
+		var _style = node._style;
+		var nodeShape = node.getRenderContainer();
+		var align = node.getData( "align" );
+		var _rectHeight = nodeShape.getHeight();
+		var _rectWidth = nodeShape.getWidth();
+		switch ( align ) {
 		case "right":
-			_node.setData( "x", parentX + parentWidth + 50 );
-			_node.setData( "align", "left" );
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
+			break;
+		case "center":
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
 			break;
 		default:
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
 			break;
 		}
-
-		var layer = parent.getData( "layer" ) + 1;
-		var layerArray = root.getData( "layer" + appendSide );
-		layerArray[ layer ] = layerArray[ layer ] || [];
-		var layerData = layerArray[ layer ];
-		var insertPos = 0;
-		_node.setData( "layer", layer );
-
-		//遍历层级链
-		var getIndexList = function ( node ) {
-			var indexList = [];
-			var parent = node;
-			do {
-				indexList.push( parent.getIndex() );
-				parent = parent.getParent();
-			} while ( parent );
-			return indexList.reverse();
+		updateConnect( minder, node );
 	};
 
-		//比较两个层级链的大小
-		var indexLarger = function ( List1, List2 ) {
-			var larger = true;
-			for ( var i = 0; i < List1.length; i++ ) {
-				if ( List1[ i ] == List2[ i ] ) {
-					continue;
-				}
-				if ( List1[ i ] < List2[ i ] ) {
-					larger = false;
-				}
-				break;
-			}
-			return larger;
+	//以某个节点为seed对整体高度进行更改计算
+	var updateLayoutVertical = function ( node, parent, action ) {
+		var effectSet = []; //用于返回受影响的节点集
+		if ( !parent ) {
+			return [ node ];
+		}
+		var _style = node.getData( "style" );
+		var marginTop = _style.margin[ 0 ],
+			marginBottom = _style.margin[ 2 ];
+		var appendside = node.getData( "appendside" );
+		var branchheight = node.getData( "branchheight" ) || node.getRenderContainer().getHeight() + marginTop + marginBottom;
+		var countY = function ( node, appendside ) {
+			var centerY = node.getData( "y" );
+			var nodeBranchHeight = node.getData( appendside + "Height" ) || node.getData( "branchheight" );
+			var nodeChildren = node.getData( appendside + "List" ) || node.getChildren();
+			var sY = centerY - nodeBranchHeight / 2;
+			for ( var i = 0; i < nodeChildren.length; i++ ) {
+				var childBranchHeight = nodeChildren[ i ].getData( "branchheight" );
+				nodeChildren[ i ].setData( "y", sY + marginTop + childBranchHeight / 2 );
+				sY += childBranchHeight;
+			}
+			return nodeChildren;
 		};
 
-		//选定合适的位置插入节点
-		for ( var l = layerData.length - 1; l >= 0; l-- ) {
-			var nodeIndexList = getIndexList( _node );
-			if ( !indexLarger( getIndexList( layerData[ l ] ), nodeIndexList ) ) {
-				insertPos = l + 1;
-				break;
-			}
-		}
-
-		layerData.splice( insertPos, 0, _node );
-
-		if ( parent === root ) {
-			var leftCount = parent.getData( "layerleft" );
-			var rightCount = parent.getData( "layerright" );
-			leftCount = leftCount[ 1 ] ? leftCount[ 1 ].length : 0;
-			rightCount = rightCount[ 1 ] ? rightCount[ 1 ].length : 0;
-			if ( rightCount > leftCount && rightCount > 1 ) {
-				parent.setData( "appendside", "left" );
-			} else {
-				parent.setData( "appendside", "right" );
+		if ( action !== "remove" ) {
+			node.setData( "branchheight", branchheight );
 		}
+		var siblings = parent.getData( appendside + "List" ) || parent.getChildren();
+		var getChildHeight = function ( node, appendside ) {
+			var sum = 0;
+			var children = node.getData( appendside + "List" ) || node.getChildren();
+			for ( var i = 0; i < children.length; i++ ) {
+				sum += children[ i ].getData( "branchheight" );
 			}
+			return sum;
+		};
+		//方案：
+		//增加节点时：1.节点和大于1
+		//删除节点时：1.剩余节点和大于等于1
+		if ( ( action === "remove" && siblings.length > 0 ) || siblings.length > 1 ) {
+			//更新branchheight
+			var prt = parent;
+			do {
+				var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom;
+				var childH = getChildHeight( prt, appendside );
+				var branchH = ( minH > childH ? minH : childH );
 
-		var reAnal = updateBranchHeight( _node, appendSide, root, true );
-		//判断是重绘全部还是只是添加节点
-		if ( reAnal ) {
-			reAnalyze( km, layerArray, appendSide );
+				if ( prt.getParent() ) {
+					prt.setData( "branchheight", branchH );
 				} else {
-			_node.setData( "y", _node.getParent().getData( "y" ) );
-			km.renderNode( _node );
-		}
-		return _node;
+					prt.setData( appendside + "Height", branchH );
+				}
+				prt = prt.getParent();
+			} while ( prt );
+			//遍历
+			var effectRange = [ root ];
+			var _buffer = effectRange;
+			while ( _buffer.length !== 0 ) {
+				_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) );
+				effectSet.push( _buffer[ 0 ] );
+				_buffer.shift();
+			}
+		} else if ( action !== "remove" ) {
+			node.setData( "y", parent.getData( "y" ) );
+			effectSet = [ node ];
+		}
+		return effectSet;
 	};
 
-	var setX = function ( node ) {
+	//以某个节点为seed对水平方向进行调整
+	var updateLayoutHorizon = function ( node ) {
+		var effectSet = [];
+		if ( !node.getParent() ) {
+			return [ node ];
+		}
+		node.preTraverse( function ( n ) {
+			var _style = n.getData( "style" );
 			var parent = node.getParent();
-		if ( !parent ) return false;
+			var _parentStyle = parent.getData( "style" );
 			var parentX = parent.getData( "x" );
+			var parentAlign = parent.getData( "align" );
 			var parentWidth = parent.getRenderContainer().getWidth();
-		if ( parent.getData( "align" ) === "center" ) {
-			parentWidth = parentWidth / 2;
-		}
-		var side = node.getData( "appendside" );
-		if ( side === "left" ) {
-			node.setData( "x", parentX - parentWidth - 50 );
-		} else {
-			node.setData( "x", parentX + parentWidth + 50 );
+			if ( parentAlign === "center" ) parentWidth = parentWidth / 2;
+			var selfAppendSide = n.getData( "appendside" );
+			if ( selfAppendSide === "right" )
+				n.setData( "x", parentX + parentWidth + _style.margin[ 3 ] + _parentStyle.margin[ 1 ] );
+			else
+				n.setData( "x", parentX - parentWidth - _style.margin[ 3 ] - _parentStyle.margin[ 1 ] );
+			effectSet.push( n );
+		} );
+		return effectSet;
+	};
+
+	var updateArrangement = function ( node, action ) {
+		var set1 = updateLayoutHorizon( node );
+		var set2 = updateLayoutVertical( node, node.getParent(), action );
+		//获取水平方向和垂直方向受影响的点的并集然后进行统一translate
+		var set = uSet( set1, set2 );
+		for ( var i = 0; i < set.length; i++ ) {
+			translateNode( set[ i ] );
 		}
 	};
 	var _style = {
 		renderNode: function ( node ) {
-			var km = this;
-			var styledefault = {
-				radius: 10,
-				fill: "yellow",
-				stroke: "orange",
-				color: "black",
-				padding: [ 5, 10, 5, 10 ],
-				fontSize: 20
-			};
-			var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
-				return {
-					constructor: function ( container ) {
-						this.rect = new kity.Rect();
-						this.text = new kity.Text();
-						this.shape = new kity.Group();
-						this.shape.addShapes( [ this.rect, this.text ] );
-						container.addShape( this.shape, "nodeShape" );
-					},
-					highlight: function () {
-						this.rect.stroke( new kity.Pen( "white", 3 ) );
-					},
-					unhighlight: function () {
-						this.rect.stroke( this.NormalInfo );
-					}
-				};
-			} )() );
-
-			var kR = node.getRenderContainer();
-			var nodeShape = node.getData( "nodeshape" ) || new MinderNodeShape( kR );
-			node.setData( "nodeshape", nodeShape );
-			var nd = JSON.parse( JSON.stringify( styledefault ) );
-			var nodeD = Utils.extend( nd, node.getData( "style" ) );
-			node.setData( "style", nodeD );
-			var _style = nodeD;
-			nodeShape.text
-				.setContent( node.getData( "text" ) || "Node" )
-				.setSize( nodeD.fontSize )
-				.fill( nodeD.color );
-			var txtWidth = nodeShape.text.getWidth();
-			var txtHeight = nodeShape.text.getHeight();
-			var _padding = _style.padding;
-
-			var _rectWidth = txtWidth + _padding[ 1 ] + _padding[ 3 ];
-			var _rectHeight = txtHeight + _padding[ 0 ] + _padding[ 2 ];
-			nodeShape.text
-				.setX( _padding[ 3 ] ).setY( _padding[ 0 ] + txtHeight );
-
-			nodeShape.NormalInfo = new kity.Pen( _style.stroke, _style.strokeWidth );
-			nodeShape.rect.setWidth( _rectWidth ).setHeight( _rectHeight ).stroke( nodeShape.NormalInfo ).fill( _style.fill ).setRadius( _style.radius );
-			switch ( node.getData( "align" ) ) {
-			case "center":
-				nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
-				break;
-			case "right":
-				nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
-				break;
-			default:
-				nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
-				break;
-			}
-			if ( node.getData( "highlight" ) ) {
-				nodeShape.highlight();
-			} else {
-				nodeShape.unhighlight();
-			}
-			updateConnect( this, node, "rendernode" );
+			drawNode( node );
 		},
 		initStyle: function () {
 			var _root = this.getRoot();
@@ -433,70 +352,82 @@ KityMinder.registerModule( "LayoutDefault", function () {
 				stroke: "orange",
 				color: "black",
 				padding: [ 10, 10, 10, 10 ],
-				fontSize: 30
+				fontSize: 30,
+				margin: [ 0, 0, 0, 0 ]
 			} );
 			_root.setData( "x", minderWidth / 2 );
 			_root.setData( "y", minderHeight / 2 );
 			_root.setData( "layer", 0 );
 			_root.setData( "align", "center" );
 			_root.setData( "text", "I am the root" );
-			//标记左子树和右子树的元素
-			_root.setData( "layerleft", [
-				[ _root ]
-			] );
-			_root.setData( "layerright", [
-				[ _root ]
-			] );
-			_root.setData( "indexList", [ 0 ] );
-			_root.setData( "leftHeight", 0 );
-			_root.setData( "rightHeight", 0 );
 
-			//标记根节点以及添加子树的方向
 			_root.setData( "appendside", "right" );
-			_root.preTraverse( function ( node ) {
-				minder.renderNode( node );
-			} );
-		},
-		createChildNode: function ( parent ) {
-			return createChildNode( this, parent );
+			var children = _root.getChildren();
+			_root.setData( "leftList", [] );
+			_root.setData( "rightList", [] );
+
+			minder.renderNode( _root );
+
+			var _rootRenderContainer = _root.getRenderContainer();
+			_root.setData( "leftHeight", _rootRenderContainer.getHeight() );
+			_root.setData( "rightHeight", _rootRenderContainer.getHeight() );
+			updateArrangement( _root );
+
+			//如果是从其他style切过来的，需要重新布局
+			if ( children.length !== 0 ) {
+				var leftList = _root.getData( "leftList" );
+				var rightList = _root.getData( "rightList" );
+				for ( var i = 0; i < children.length; i++ ) {
+					if ( i % 2 === 0 ) {
+						rightList.push( children[ i ] );
+						children[ i ].setData( "appendside", "right" );
+					} else {
+						leftList.push( children[ i ] );
+						children[ i ].setData( "appendside", "left" );
+					}
+				}
+			}
 		},
-		createSiblingNode: function ( sibling ) {
-			var root = this.getRoot();
-			var parent = sibling.getParent();
+		appendChildNode: function ( parent, node ) {
+			var appendside = parent.getData( "appendside" );
 			if ( parent === root ) {
-				parent.setData( "appendside", sibling.getData( "appendside" ) );
+				var leftList = parent.getData( "leftList" );
+				var rightList = parent.getData( "rightList" );
+				var sibling = parent.getChildren();
+				if ( sibling.length >= 2 && rightList.length > leftList.length ) {
+					appendside = "left";
+				} else {
+					appendside = "right";
 				}
-			var index = sibling.getIndex() + 1;
-			if ( parent ) {
-				return createChildNode( this, parent, index );
+				parent.setData( "appendside", appendside );
+				node.setData( "appendside", appendside );
+				parent.getData( appendside + "List" ).push( node );
+			}
+			if ( appendside === "left" ) {
+				node.setData( "align", "right" );
 			} else {
-				return false;
+				node.setData( "align", "left" );
 			}
+			if ( parent.getChildren().indexOf( node ) === -1 ) parent.appendChild( node );
+			drawNode( node );
+			updateArrangement( node, "append" );
+		},
+		appendSiblingNode: function ( sibling, node ) {
+			var parent = sibling.getParent();
+			var index = sibling.getIndex() + 1;
+			parent.appendChild( node, index );
+			drawNode( node );
+			updateArrangement( node, "append" );
 		},
 		removeNode: function ( nodes ) {
 			var root = this.getRoot();
 			for ( var i = 0; i < nodes.length; i++ ) {
 				var parent = nodes[ i ].getParent();
 				if ( parent ) {
-					var appendSide = nodes[ i ].getData( "appendside" );
-					var layer = nodes[ i ].getData( "layer" );
 					parent.removeChild( nodes[ i ] );
-					var layerArray = root.getData( "layer" + appendSide );
-					var layerData = layerArray[ layer ];
-					//移除层结构中的node
-					for ( var j = 0; j < layerData.length; j++ ) {
-						if ( layerData[ j ] === nodes[ i ] ) {
-							layerData.splice( j, 1 );
-							break;
-						}
-					}
-					var reAnal = updateBranchHeight( nodes[ i ], appendSide, root, false, parent );
-					if ( reAnal ) {
-						reAnalyze( this, layerArray, appendSide );
-					}
 				}
 			}
-			updateConnect( this, nodes, "removenode" );
+			this.setContentChanged( true );
 		}
 	};
 	this.addLayoutStyle( "default", _style );

src/module/layout.js

@@ -7,8 +7,8 @@ KityMinder.registerModule( "LayoutModule", function () {
 				if ( !_style ) return false;
 				km.renderNode = _style.renderNode;
 				km.initStyle = _style.initStyle;
-				km.createChildNode = _style.createChildNode;
-				km.createSiblingNode = _style.createSiblingNode;
+				km.appendChildNode = _style.appendChildNode;
+				km.appendSiblingNode = _style.appendSiblingNode;
 				km.removeNode = _style.removeNode;
 				//清空节点上附加的数据
 				var _root = km.getRoot();
@@ -21,35 +21,42 @@ KityMinder.registerModule( "LayoutModule", function () {
 			}
 		};
 	} )() );
-	var CreateChildNodeCommand = kity.createClass( "CreateChildNodeCommand", ( function () {
+	var AppendChildNodeCommand = kity.createClass( "AppendChildNodeCommand", ( function () {
 		return {
 			base: Command,
-			execute: function ( km, parent ) {
-				return km.createChildNode( parent );
+			execute: function ( km, node ) {
+				var parent = km.getSelectedNode();
+				km.appendChildNode( parent, node );
+				km.select( node );
+				return node;
 			}
 		};
 	} )() );
-	var CreateSiblingNodeCommand = kity.createClass( "CreateSiblingNodeCommand", ( function () {
+	var AppendSiblingNodeCommand = kity.createClass( "AppendSiblingNodeCommand", ( function () {
 		return {
 			base: Command,
-			execute: function ( km, sibling ) {
-				return km.createSiblingNode( sibling );
+			execute: function ( km, node ) {
+				//km.select( node );
+				var sibling = km.getSelectedNode();
+				km.appendSiblingNode( sibling, node );
+				km.select( node );
+				return node;
 			}
 		};
 	} )() );
 	var RemoveNodeCommand = kity.createClass( "RemoveNodeCommand", ( function () {
 		return {
 			base: Command,
-			execute: function ( km, node ) {
-				km.removeNode( node );
+			execute: function ( km, nodes ) {
+				km.removeNode( nodes );
 			}
 		};
 	} )() );
 
 	return {
 		"commands": {
-			"createchildnode": CreateChildNodeCommand,
-			"createsiblingnode": CreateSiblingNodeCommand,
+			"appendchildnode": AppendChildNodeCommand,
+			"appendsiblingnode": AppendSiblingNodeCommand,
 			"removenode": RemoveNodeCommand,
 			"switchlayout": SwitchLayoutCommand
 		}