test

kity @ 8b33f729

-Subproject commit 682bc4b4200af7a7c4997758307bc9b1b6e4e291
+Subproject commit 8b33f729a570f3501769d16ad4c329c0e7f4e08d

src/module/layout.default.js

@@ -419,9 +419,9 @@ KityMinder.registerModule( "LayoutDefault", function () {
 			drawNode( node );
 		},
 		initStyle: function () {
+			minder.getRenderContainer().clear();
 			//绘制root并且调整到正确位置
 			var _root = this.getRoot();
-			minder.getRenderContainer().clear();
 			minder.handelNodeInsert( _root );
 			var rc = new RootShape( _root );
 			translateNode( _root );

src/module/layout.green.js

@@ -3,282 +3,383 @@ KityMinder.registerModule( "LayoutGreen", function () {
 	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;
-		}
-
-		function getSnapPoints( snaper ) {
-			if ( snaper.getSnapPoints ) {
-				return snaper.getSnapPoints();
-			}
-			var box = snaper.getRenderBox();
-			var x1 = box.x,
-				x2 = box.x + box.width,
-				y1 = box.y,
-				y2 = box.y + box.height,
-				xm = mid( x1, x2 ),
-				ym = mid( y1, y2 );
-			return [ {
-					x: xm,
-					y: y1,
-					type: 'top'
-				}, // top
-				{
-					x: x2,
-					y: ym,
-					type: 'right'
-				}, // right
-				{
-					x: xm,
-					y: y2,
-					type: 'bottom'
-				}, // bottom
-				{
-					x: x1,
-					y: ym,
-					type: 'left'
-				} // left
-			];
-		}
-		var DIR_NORMALS = {
-			top: new kity.Vector( 0, -1 ),
-			left: new kity.Vector( -1, 0 ),
-			bottom: new kity.Vector( 0, 1 ),
-			right: new kity.Vector( 1, 0 )
-		};
-
-		function fillNormal( snapPoint ) {
-			if ( snapPoint.normal ) {
-				return;
-			}
-			snapPoint.normal = DIR_NORMALS[ snapPoint.type ] || DIR_NORMALS.left;
-		}
+	var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
 		return {
-			base: kity.Bezier,
-			constructor: function ( start, end ) {
-				this.callBase();
-				this.setStartSnaper( start );
-				this.setEndSnaper( end );
-				this.init();
-				this.updateConnection();
-			},
-			init: function () {
-				this.addPoint( this.startBesierPoint = new kity.BezierPoint() );
-				this.addPoint( this.endBesierPoint = new kity.BezierPoint() );
-			},
-			bindSnaper: function ( snaper ) {
-				var me = this;
-				snaper.on( 'shapeupdate', function () {
-					me.updateConnection();
-				} );
-			},
-			setStartSnaper: function ( snaper ) {
-				this.start = snaper;
-				this.bindSnaper( snaper );
-			},
-			setEndSnaper: function ( snaper ) {
-				this.end = snaper;
-				this.bindSnaper( snaper );
-			},
-			isReady: function () {
-				return !!( this.start && this.end );
+			constructor: function ( node ) {
+				this._show = false;
+				this._node = node;
+				var iconShape = this.shape = new kity.Group();
+				iconShape.class = "shicon";
+				iconShape.icon = this;
+				var circle = this._circle = new kity.Circle().fill( "white" ).stroke( "gray" ).setRadius( 5 );
+				var plus = this._plus = new kity.Path();
+				plus.getDrawer()
+					.moveTo( -3, 0 )
+					.lineTo( 3, 0 )
+					.moveTo( 0, -3 )
+					.lineTo( 0, 3 );
+				plus.stroke( "gray" );
+				var dec = this._dec = new kity.Path();
+				dec.getDrawer()
+					.moveTo( -3, 0 )
+					.lineTo( 3, 0 );
+				dec.stroke( "gray" );
+				minder.getRenderContainer().addShape( iconShape );
+				iconShape.addShapes( [ circle, plus, dec ] );
+				node.setData( "shicon", this );
+				this.update();
+				this.switchState();
 			},
-			calcEndPoints: function () {
-				var startEnds = getSnapPoints( this.start ),
-					endEnds = getSnapPoints( this.end );
-				var nearStart, nearEnd, minDistance = Number.MAX_VALUE;
-				var i, j, startEnd, endEnd, distance;
-
-				// 寻找最近的粘附点
-				// 暴力解法：可优化但不必要，因为点集不会很大
-				for ( i = 0; i < startEnds.length; i++ ) {
-					for ( j = 0; j < endEnds.length; j++ ) {
-						distance = Math.abs( startEnds[ i ].x - endEnds[ j ].x ) + Math.abs( startEnds[ i ].y - endEnds[ j ].y ) * 0.5; //Vector.fromPoints( startEnds[i], endEnds[j] ).length();
-						if ( distance < minDistance ) {
-							minDistance = distance;
-							nearStart = startEnds[ i ];
-							nearEnd = endEnds[ j ];
-						}
-					}
+			switchState: function () {
+				if ( !this._show ) {
+					this._plus.setOpacity( 0 );
+					this._dec.setOpacity( 1 );
+					this._show = true;
+				} else {
+					this._plus.setOpacity( 1 );
+					this._dec.setOpacity( 0 );
+					this._show = false;
 				}
-				return {
-					start: nearStart,
-					end: nearEnd
-				};
+				return this._show;
 			},
-			updateConnection: function () {
-				if ( !this.isReady() ) {
-					return false;
+			update: function () {
+				var node = this._node;
+				var Layout = node.getData( "layout" );
+				var nodeShape = node.getRenderContainer();
+				var nodeX, nodeY = ( node.getType() === "main" ? Layout.y : ( Layout.y + nodeShape.getHeight() / 2 - 5 ) );
+				if ( Layout.appendside === "left" ) {
+					nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x - 6;
+				} else {
+					nodeX = nodeShape.getRenderBox().closurePoints[ 0 ].x + 6;
 				}
-				var endPoints = this.calcEndPoints(),
-					startEnd = endPoints.start,
-					endEnd = endPoints.end;
-
-				fillNormal( startEnd );
-				fillNormal( endEnd );
-
-				var pointVector = kity.Vector.fromPoints( startEnd, endEnd );
-
-				var forward = kity.Vector.projection( pointVector, startEnd.normal );
-				var backward = kity.Vector.projection( kity.Vector.reverse( pointVector ), endEnd.normal );
-
-				forward = kity.Vector.multipy( forward, 0.5 );
-				forward = kity.Vector.add( startEnd, forward );
-				backward = kity.Vector.multipy( backward, 0.5 );
-				backward = kity.Vector.add( endEnd, backward );
-
-				this.startBesierPoint.setVertex( startEnd.x, startEnd.y );
-				this.startBesierPoint.setForward( forward.x, forward.y );
-
-				this.endBesierPoint.setVertex( endEnd.x, endEnd.y );
-				this.endBesierPoint.setBackward( backward.x, backward.y );
+				this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) );
+			},
+			remove: function () {
+				this.shape.remove();
 			}
 		};
 	} )() );
-	var nodeDefautStyle = {
-		radius: 10,
-		fill: "beige",
-		stroke: "orange",
-		strokeWidth: 1,
-		color: "black",
-		padding: [ 5, 10, 5, 10 ],
-		fontSize: 20,
-		margin: [ 50, 5, 0, 5 ]
-	};
-	var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
+	//主分支
+	var MainBranch = kity.createClass( "DefaultMainBranch", ( 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();
+				var txt = this._txt = new kity.Text();
+				var rect = this._rect = new kity.Rect();
+				var shicon = this._shicon = new ShIcon( node );
 				container.addShapes( [ rect, txt ] );
-				var Layout = node.getData( "layout" );
-				Layout.shape = this;
-				var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
-				Layout.style = Utils.extend( ND, Layout.style );
-				var _style = Layout.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 ] );
+				var connect = this._connect = new kity.Group();
+				var bezier = connect.bezier = new kity.Bezier();
+				var circle = connect.circle = new kity.Circle();
+				connect.addShapes( [ bezier, circle ] );
+				minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
+				var Layout = {
+					radius: 0,
+					fill: "white",
+					color: "black",
+					padding: [ 5.5, 20, 5.5, 20 ],
+					fontSize: 20,
+					margin: [ 0, 10, 30, 50 ],
+					shape: this,
+					align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
+					appendside: node.getData( "layout" ).appendside
+				};
+				node.setData( "layout", Layout );
+				txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 );
 				this.update();
 			},
 			update: function () {
-				var node = this._node;
 				var txt = this._txt;
 				var rect = this._rect;
-				var _style = node.getData( "layout" ).style;
-				txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
+				var node = this._node;
+				var Layout = node.getData( "layout" );
+				txt.setContent( node.getData( "text" ) ).fill( Layout.color );
+				var _txtWidth = txt.getWidth();
 				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 ) );
+				var _rectWidth = _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
+				var _rectHeight = _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
+				rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius );
+				this.updateConnect();
+				this.updateShIcon();
+			},
+			updateConnect: function () {
+				var rootX = minder.getRoot().getData( "layout" ).x;
+				var rootY = minder.getRoot().getData( "layout" ).y;
+				var connect = this._connect;
+				var node = this._node;
+				var Layout = node.getData( "layout" );
+				var parent = node.getParent();
+				var nodeShape = node.getRenderContainer();
+				var nodeClosurePoints = nodeShape.getRenderBox().closurePoints;
+				var sPos;
+				var endPos;
+				if ( Layout.appendside === "left" ) {
+					sPos = new kity.BezierPoint( rootX - 30, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
+					endPos = new kity.BezierPoint( nodeClosurePoints[ 2 ].x, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
 				} else {
-					rect.stroke( new kity.Pen( _style.stroke, _style.strokeWidth ) );
+					sPos = new kity.BezierPoint( rootX + 30, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
+					endPos = new kity.BezierPoint( nodeClosurePoints[ 3 ].x, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
 				}
+				var sPosV = sPos.getVertex();
+				var endPosV = endPos.getVertex();
+				sPos.setVertex( rootX, rootY );
+				connect.bezier.setPoints( [ sPos, endPos ] ).stroke( "white" );
+				connect.circle.setCenter( endPosV.x + ( Layout.appendside === "left" ? 3 : -3 ), endPosV.y ).fill( "white" ).stroke( "gray" ).setRadius( 2 );
+			},
+			updateShIcon: function () {
+				this._shicon.update();
+			},
+			clear: function () {
+				this._node.getRenderContainer().clear();
+				this._connect.remove();
+				this._shicon.remove();
 			}
 		};
 	} )() );
-	//更新连线
-	var updateConnect = function ( minder, node, action ) {
+	//子分支
+	var SubBranch = kity.createClass( "DefaultSubBranch", ( function () {
+		return {
+			constructor: function ( node ) {
+				this._node = node;
+				var container = node.getRenderContainer();
+				var txt = this._txt = new kity.Text();
+				var underline = this._underline = new kity.Path();
+				var shicon = this._shicon = new ShIcon( node );
+				var highlightshape = this._highlightshape = new kity.Rect();
+				container.addShapes( [ highlightshape, underline, txt ] );
+				var connect = this._connect = new kity.Path();
+				minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
+				var Layout = {
+					stroke: new kity.Pen( "white", 1 ).setLineCap( "round" ).setLineJoin( "round" ),
+					color: "white",
+					padding: [ 5, 10, 5.5, 10 ],
+					fontSize: 12,
+					margin: [ 0, 10, 20, 5 ],
+					shape: this,
+					align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
+					appendside: node.getData( "layout" ).appendside
+				};
+				node.setData( "layout", Layout );
+				txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 10 );
+				highlightshape.fill( "chocolate" ).translate( -1, 0 );
+				this.update();
+			},
+			update: function () {
+				var node = this._node;
+				var Layout = node.getData( "layout" );
+				var underline = this._underline;
+				var highlightshape = this._highlightshape;
+				var txt = this._txt;
+				txt.setContent( node.getData( "text" ) ).fill( Layout.color ).setSize( Layout.fontSize );
+				var _txtWidth = txt.getWidth();
+				var _txtHeight = txt.getHeight();
+				var sY = Layout.padding[ 0 ] + _txtHeight / 2;
+				underline.getDrawer()
+					.clear()
+					.moveTo( 0, _txtHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] )
+					.lineTo( _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ], _txtHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] );
+				underline.stroke( Layout.stroke );
+				highlightshape
+					.setWidth( _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ] )
+					.setHeight( _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ] )
+					.setOpacity( node.getData( "highlight" ) ? 1 : 0 );
+				this.updateConnect();
+				this.updateShIcon();
+			},
+			updateConnect: function () {
+				var connect = this._connect;
+				var node = this._node;
+				var parentShape = node.getParent().getRenderContainer();
+				var parentBox = parentShape.getRenderBox();
+				var parentLayout = node.getParent().getData( "layout" );
 				var Layout = node.getData( "layout" );
-		var _style = Layout.style;
-		if ( !node.getParent() ) return false;
-		var start = node.getParent().getRenderContainer();
-		var end = node.getRenderContainer();
-		var _connect = Layout.connect;
-		if ( action === "remove" ) {
-			_connect.remove();
+				var Shape = node.getRenderContainer();
+				var sX, sY = parentLayout.y;
+				var nodeX, nodeY = Shape.getRenderBox().closurePoints[ 1 ].y;
+				if ( Layout.appendside === "left" ) {
+					sX = parentBox.closurePoints[ 1 ].x - parentLayout.margin[ 1 ];
+					nodeX = Shape.getRenderBox().closurePoints[ 0 ].x;
+					connect.getDrawer()
+						.clear()
+						.moveTo( sX, sY )
+						.lineTo( sX, nodeY > sY ? ( nodeY - Layout.margin[ 3 ] ) : ( nodeY + Layout.margin[ 3 ] ) );
+					if ( nodeY > sY ) connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY, 0, 1 );
+					else connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY );
+					connect.stroke( Layout.stroke );
 				} else {
-			if ( _connect ) _connect.updateConnection();
-			else {
-				_connect = new ConnectBezier( start, end );
-				Layout.connect = _connect;
-				minder.getRenderContainer().addShape( _connect );
-				_connect.stroke( _style.stroke );
+					sX = parentBox.closurePoints[ 0 ].x + parentLayout.margin[ 1 ];
+					nodeX = Shape.getRenderBox().closurePoints[ 1 ].x + 1;
+					connect.getDrawer()
+						.clear()
+						.moveTo( sX, sY )
+						.lineTo( sX, nodeY > sY ? ( nodeY - Layout.margin[ 3 ] ) : ( nodeY + Layout.margin[ 3 ] ) );
+					if ( nodeY > sY ) connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY );
+					else connect.getDrawer().carcTo( Layout.margin[ 3 ], nodeX, nodeY, 0, 1 );
+					connect.stroke( Layout.stroke );
 				}
+			},
+			updateShIcon: function () {
+				this._shicon.update();
+			},
+			clear: function () {
+				this._node.getRenderContainer().clear();
+				this._connect.remove();
+				this._shicon.remove();
 			}
 		};
-	//求并集
-	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 );
-			}
+	} )() );
+	//根节点
+	var RootShape = kity.createClass( "DefaultRootShape", ( function () {
+		return {
+			constructor: function ( node ) {
+				var container = node.getRenderContainer();
+				var txt = this._txt = new kity.Text();
+				var rect = this._rect = new kity.Rect();
+				container.addShapes( [ rect, txt ] );
+				this._node = node;
+				var Layout = {
+					shape: this,
+					x: minderWidth / 2,
+					y: minderHeight / 2,
+					align: "center",
+					appendside: node.getData( "layout" ).appendside || "right",
+					leftList: [],
+					rightList: [],
+					color: "white",
+					fontSize: 20,
+					fill: "cadetblue",
+					stroke: null,
+					padding: [ 10.5, 10, 10.5, 10 ],
+					radius: 15,
+					margin: [ 0, 0, 0, 0 ]
+				};
+				node.setData( "layout", Layout );
+				node.setData( "text", "Minder Root" );
+				txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 );
+				this.update();
+			},
+			update: function () {
+				var txt = this._txt;
+				var rect = this._rect;
+				var connect = this._connect;
+				var node = this._node;
+				var Layout = node.getData( "layout" );
+				txt.setContent( node.getData( "text" ) ).fill( Layout.color );
+				var _txtWidth = txt.getWidth();
+				var _txtHeight = txt.getHeight();
+				var _rectWidth = _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
+				var _rectHeight = _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
+				rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius );
+			},
+			clear: function () {
+				this._node.getRenderContainer().clear();
 			}
-		return a.concat( b );
 		};
+	} )() );
 	//流程：绘制->计算Y坐标->计算X坐标->translate
 	//绘制node
 	var drawNode = function ( node ) {
-		var container = node.getRenderContainer();
 		var shape = node.getData( "layout" ).shape;
-		if ( !shape ) new MinderNodeShape( node );
-		else shape.update();
-		updateConnect( minder, node );
+		shape.update();
 	};
 
 	//以某个节点为seed对整体高度进行更改计算
-	var updateLayoutVertical = function ( node ) {
-		var Layout = node.getData( "layout" );
-		var parent = node.getParent();
-		var parentLayout = parent.getData( "layout" );
-		var effectSet = [];
-		var parentHeight = parent.getRenderContainer().getHeight();
-		var _style = Layout.style;
-		var parentY = parentLayout.y;
-		var marginTop = _style.margin[ 0 ];
-		var marginBottom = _style.margin[ 2 ];
-		Layout.y = parentY + parentHeight / 2 + marginTop + marginBottom;
-		effectSet.push( node );
+	var updateLayoutVertical = function ( node, parent, action ) {
+		var effectSet = [ node ]; //用于返回受影响的节点集
+		if ( !parent ) {
 			return effectSet;
+		}
+		var Layout = node.getData( "layout" );
+		var marginTop = Layout.margin[ 0 ],
+			marginBottom = Layout.margin[ 2 ];
+		var appendside = Layout.appendside;
+		var branchheight = Layout.branchheight || node.getRenderContainer().getHeight() + marginTop + marginBottom;
+		var countY = function ( node, appendside ) {
+			var nodeLayout = node.getData( "layout" );
+			var centerY = nodeLayout.y;
+			var nodeBranchHeight = nodeLayout[ appendside + "Height" ] || nodeLayout.branchheight;
+			var nodeChildren = nodeLayout[ appendside + "List" ] || node.getChildren();
+			var sY = centerY - nodeBranchHeight / 2;
+			if ( nodeChildren.length === 1 ) {
+				var childrenLayout = nodeChildren[ 0 ].getData( "layout" );
+				childrenLayout.y = centerY;
+			} else {
+				for ( var i = 0; i < nodeChildren.length; i++ ) {
+					var childrenLayout1 = nodeChildren[ i ].getData( "layout" );
+					if ( !childrenLayout1.shape ) break;
+					var childBranchHeight = childrenLayout1.branchheight;
+					childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
+					sY += childBranchHeight;
+				}
+			}
+			return nodeChildren;
 		};
+		Layout.branchheight = branchheight;
 
-	//以某个节点为seed对水平方向进行调整
-	var updateLayoutHorizon = function ( node, parent ) {
-		var effectSet = [];
-		var Layout = node.getData( "layout" );
-		var _style = Layout.style;
-		var marginLeft = _style.margin[ 3 ];
-		var marginRight = _style.margin[ 1 ];
-		var nodeWidth = node.getRenderContainer().getWidth();
-		Layout.branchwidth = nodeWidth + marginLeft + marginRight;
-		var prt = parent;
-		while ( prt ) {
-			var children = prt.getChildren();
-			var parentWidth = prt.getRenderContainer().getWidth() + marginLeft + marginRight;
+		var parentLayout = parent.getData( "layout" );
+		var siblings = parentLayout[ appendside + "List" ] || parent.getChildren();
+		var getChildHeight = function ( node, appendside ) {
 			var sum = 0;
+			var nodeLayout = node.getData( "layout" );
+			var children = nodeLayout[ appendside + "List" ] || node.getChildren();
 			for ( var i = 0; i < children.length; i++ ) {
-				sum += children[ i ].getData( "layout" ).branchwidth;
+				var childLayout = children[ i ].getData( "layout" );
+				if ( childLayout.shape ) sum += childLayout.branchheight;
 			}
+			return sum;
+		};
+		var prt = parent;
+		do {
+			var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom;
+			var childH = getChildHeight( prt, appendside );
+			var branchH = ( minH > childH ? minH : childH );
 			var prtLayout = prt.getData( "layout" );
-			prtLayout.branchwidth = ( sum > parentWidth ? sum : parentWidth );
-			prtLayout.childrenwidth = sum;
-			prt = prt.getParent();
-		}
 
+			if ( prt.getParent() ) {
+				prtLayout.branchheight = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
+			} else {
+				prtLayout[ appendside + "Height" ] = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
+			}
+			prt = prt.getParent();
+		} while ( prt );
+		//遍历
 		var _buffer = [ minder.getRoot() ];
 		while ( _buffer.length !== 0 ) {
-			var childrenC = _buffer[ 0 ].getChildren();
-			var parentLayout = _buffer[ 0 ].getData( "layout" );
-			var parentX = parentLayout.x;
-			var parentChildrenWidth = parentLayout.childrenwidth;
-			var sX = parentX - parentChildrenWidth / 2;
-			for ( var j = 0; j < childrenC.length; j++ ) {
-				var layoutC = childrenC[ j ].getData( "layout" );
-				layoutC.x = sX + layoutC.branchwidth / 2;
-				sX += layoutC.branchwidth;
-			}
-			_buffer = _buffer.concat( childrenC );
+			_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) );
 			effectSet.push( _buffer[ 0 ] );
 			_buffer.shift();
 		}
 		return effectSet;
 	};
+
+	//以某个节点为seed对水平方向进行调整(包括调整子树)
+	var updateLayoutHorizon = function ( node ) {
+		var nodeLayout = node.getData( "layout" );
+		var effectSet = [ node ]; //返回受影响（即需要进行下一步translate的节点）
+		var parent = node.getParent();
+		var appendside = nodeLayout.appendside;
+		var selfWidth = node.getRenderContainer().getWidth();
+		if ( parent ) {
+			var parentLayout = parent.getData( "layout" );
+			var parentWidth = parent.getRenderContainer().getWidth();
+			if ( parentLayout.align === "center" ) parentWidth = parentWidth / 2;
+
+			var parentX = parentLayout.x;
+			switch ( appendside ) {
+			case "left":
+				nodeLayout.x = parentX - parentWidth - parentLayout.margin[ 1 ] - nodeLayout.margin[ 3 ];
+				break;
+			case "right":
+				nodeLayout.x = parentX + parentWidth + parentLayout.margin[ 1 ] + nodeLayout.margin[ 3 ];
+				break;
+			default:
+				break;
+			}
+		}
+		return effectSet;
+	};
+
 	//调整node的位置
 	var translateNode = function ( node ) {
 		var Layout = node.getData( "layout" );
@@ -297,6 +398,21 @@ KityMinder.registerModule( "LayoutGreen", function () {
 			nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
 			break;
 		}
+		if ( Layout.shape ) {
+			if ( Layout.shape.updateConnect ) Layout.shape.updateConnect();
+			if ( Layout.shape.updateShIcon ) Layout.shape.updateShIcon();
+		}
+	};
+
+	//求并集
+	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 _style = {
 		renderNode: function ( node ) {
@@ -305,79 +421,170 @@ KityMinder.registerModule( "LayoutGreen", function () {
 		initStyle: function () {
 			//绘制root并且调整到正确位置
 			var _root = this.getRoot();
-			this.getRenderContainer().clear().addShape( _root.getRenderContainer().clear() );
-			var minder = this;
-			_root.setData( "text", _root.getData( "text" ) || "I am the root" );
-			_root.setData( "layout", {} );
-			var Layout = _root.getData( "layout" );
-			Layout.style = {
-				radius: 20,
-				fill: "darkgreen",
-				stroke: "orange",
-				color: "black",
-				padding: [ 10, 10, 10, 10 ],
-				fontSize: 30,
-				margin: [ 0, 5, 0, 5 ]
-			};
-			Layout.x = minderWidth / 2;
-			Layout.y = 50;
-			Layout.align = "center";
-			drawNode( _root );
+			minder.getRenderContainer().clear();
+			minder.handelNodeInsert( _root );
+			var rc = new RootShape( _root );
 			translateNode( _root );
-
+			var box = _root.getRenderContainer().getRenderBox();
+			_root.setPoint( box.x, box.y );
 			var _buffer = _root.getChildren();
-			_root.children = [];
+			var Layout = _root.getData( "layout" );
+			//根据保存的xy值初始化左右子树
+			if ( _buffer.length !== 0 ) {
+				for ( var i = 0; i < _buffer.length; i++ ) {
+					var point = _buffer[ i ].getPoint();
+					if ( point && point.x && point.y ) {
+						if ( point.x > Layout.x ) {
+							Layout.rightList.push( _buffer[ i ] );
+						} else {
+							Layout.leftList.push( _buffer[ i ] );
+						}
+					} else {
+						break;
+					}
+				}
+			}
+			//如果是从其他style切过来的，需要重新布局
 			while ( _buffer.length !== 0 ) {
-				var parent = _buffer[ 0 ].getParent();
 				_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
+				var prt = _buffer[ 0 ].getParent();
+				_buffer[ 0 ].clearLayout();
 				_buffer[ 0 ].children = [];
-				_buffer[ 0 ].setData( "layout", {} );
-				this.appendChildNode( parent, _buffer[ 0 ] );
+				this.appendChildNode( prt, _buffer[ 0 ] );
 				_buffer.shift();
 			}
 		},
 		appendChildNode: function ( parent, node, index ) {
-			node.setData( "layout", {} );
-			var Layout = node.getData( "layout" );
-			var parentLayout = parent.getData( "layout" );
-			var minder = this;
+			minder.handelNodeInsert( node );
+			var _root = this.getRoot();
+			var childbranch;
+			if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
 			if ( parent.getChildren().indexOf( node ) === -1 ) {
 				if ( !index ) parent.appendChild( node );
 				else parent.insertChild( node, index );
 			}
-			minder.handelNodeInsert( node );
-			drawNode( node );
-			Layout.align = "center";
-			//调整影响到的节点位置
-			var set1 = updateLayoutVertical( node );
-			var set2 = updateLayoutHorizon( node, parent );
+			var parentLayout = parent.getData( "layout" );
+			var Layout = node.getData( "layout" );
+			if ( parent.getType() === "root" ) {
+				node.setType( "main" );
+				var leftList = parentLayout.leftList;
+				var rightList = parentLayout.rightList;
+				var sibling = parent.getChildren();
+				var aside = Layout.appendside;
+				if ( !aside ) {
+					if ( rightList.length > 1 && rightList.length > leftList.length ) {
+						aside = "left";
+					} else {
+						aside = "right";
+					}
+					Layout.appendside = aside;
+				}
+				if ( leftList.indexOf( node ) !== -1 ) {
+					Layout.appendside = "left";
+				} else if ( rightList.indexOf( node ) !== -1 ) {
+					Layout.appendside = "right";
+				} else {
+					parentLayout.appendside = aside;
+					parentLayout[ aside + "List" ].push( node );
+				}
+				childbranch = new MainBranch( node );
+			} else {
+				node.setType( "sub" );
+				Layout.appendside = parentLayout.appendside;
+				childbranch = new SubBranch( node );
+			}
+			var set1 = updateLayoutVertical( node, parent, "append" );
+			var set2 = updateLayoutHorizon( node );
 			var set = uSet( set1, set2 );
 			for ( var i = 0; i < set.length; i++ ) {
 				translateNode( set[ i ] );
+				var box = set[ i ].getRenderContainer().getRenderBox();
+				set[ i ].setPoint( box.x, box.y );
 			}
+			//var shicon = new ShIcon( node );
 		},
 		appendSiblingNode: function ( sibling, node ) {
+			var siblingLayout = sibling.getData( "layout" );
+			if ( !node.getData( "layout" ) ) {
+				node.setData( "layout", {} );
+			}
+			var Layout = node.getData( "layout" );
 			var parent = sibling.getParent();
 			var index = sibling.getIndex() + 1;
+			var appendside = siblingLayout.appendside;
+			Layout.appendside = appendside;
 			this.appendChildNode( parent, node, index );
 		},
 		removeNode: function ( nodes ) {
 			var root = this.getRoot();
-			var minder = this;
 			for ( var i = 0; i < nodes.length; i++ ) {
 				var parent = nodes[ i ].getParent();
 				if ( parent ) {
-					nodes[ i ].getRenderContainer().remove();
-					updateConnect( minder, nodes[ i ], "remove" );
+					var _buffer = [ nodes[ i ] ];
+					var parentLayout = parent.getData( "layout" );
+					while ( _buffer.length !== 0 ) {
+						_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
+						_buffer[ 0 ].getData( "layout" ).shape.clear();
+						_buffer[ 0 ].getRenderContainer().remove();
+						var prt = _buffer[ 0 ].getParent();
+						prt.removeChild( _buffer[ 0 ] );
+						_buffer.shift();
+					}
+					if ( parent === root ) {
+						var Layout = nodes[ i ].getData( "layout" );
+						var appendside = Layout.appendside;
+						var sideList = parentLayout[ appendside + "List" ];
+						var idx = sideList.indexOf( nodes[ i ] );
+						sideList.splice( idx, 1 );
+					}
 					parent.removeChild( nodes[ i ] );
-					updateLayoutHorizon( parent, nodes[ i ] );
+					var set = updateLayoutVertical( nodes[ i ], parent, "remove" );
+					for ( var j = 0; j < set.length; j++ ) {
+						translateNode( set[ j ] );
+					}
 				}
 			}
-		},
-		updateLayout: function ( node ) {
-			drawNode( node );
 		}
 	};
 	this.addLayoutStyle( "green", _style );
-	return {};
+	return {
+
+	};
+	// return {
+	// 	"events": {
+	// 		"click": function ( e ) {
+	// 			var ico = e.kityEvent.targetShape.container;
+	// 			if ( ico.class === "shicon" ) {
+	// 				var isShow = ico.icon.switchState();
+	// 				var node = ico.icon._node;
+	// 				var _buffer;
+	// 				if ( isShow ) {
+	// 					_buffer = node.getChildren();
+	// 					while ( _buffer.length !== 0 ) {
+	// 						minder.appendChildNode( _buffer[ 0 ].getParent(), _buffer[ 0 ] );
+	// 						_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
+	// 						_buffer.shift();
+	// 					}
+	// 				} else {
+	// 					var Layout = node.getData( "layout" );
+	// 					var marginTop = Layout.margin[ 0 ];
+	// 					var marginBottom = Layout.margin[ 2 ];
+	// 					Layout.branchheight = node.getRenderContainer().getHeight() + marginTop + marginBottom;
+	// 					_buffer = node.getChildren();
+	// 					while ( _buffer.length !== 0 ) {
+	// 						try {
+	// 							_buffer[ 0 ].getData( "layout" ).shape.clear();
+	// 						} catch ( error ) {}
+	// 						_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
+	// 						_buffer.shift();
+	// 					}
+	// 					var set = updateLayoutVertical( node, node.getParent(), "append" );
+	// 					for ( var i = 0; i < set.length; i++ ) {
+	// 						translateNode( set[ i ] );
+	// 					}
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+	// };
 } );
\ No newline at end of file

src/module/layout.js

@@ -70,11 +70,9 @@ KityMinder.registerModule( "LayoutModule", function () {
 	} );
 	var switchLayout = function ( km, style ) {
 		var _root = km.getRoot();
-		km.getRenderContainer().clear();
 		_root.preTraverse( function ( n ) {
 			n.clearLayout();
 			n.setPoint();
-			n.getRenderContainer().clear();
 		} );
 		km.setCurrentStyle( style );
 		km.initStyle();