added updateLayout

src/module/layout.default.js

@@ -449,10 +449,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
 			}
 		},
 		updateLayout: function ( node ) {
-			var prt = node;
-			prt.preTraverse( function ( n ) {
-
-			} );
+			drawNode( node );
 		},
 		appendSiblingNode: function ( sibling, node ) {
 			var siblingLayout = sibling.getData( "layout" );

src/module/layout.green.js

@@ -138,13 +138,13 @@ KityMinder.registerModule( "LayoutGreen", function () {
 	} )() );
 	var nodeDefautStyle = {
 		radius: 10,
-		fill: "green",
+		fill: "beige",
 		stroke: "orange",
 		strokeWidth: 1,
 		color: "black",
 		padding: [ 5, 10, 5, 10 ],
 		fontSize: 20,
-		margin: [ 0, 10, 10, 50 ]
+		margin: [ 50, 5, 0, 5 ]
 	};
 	var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
 		return {
@@ -154,11 +154,10 @@ KityMinder.registerModule( "LayoutGreen", function () {
 				this._node = node;
 				var container = node.getRenderContainer();
 				container.addShapes( [ rect, txt ] );
-				var Layout = node.getData( "layout" );
-				Layout.shape = this;
+				node.setData( "shape", this );
 				var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
-				Layout.style = Utils.extend( ND, Layout.style );
-				var _style = Layout.style;
+				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 ] );
@@ -168,7 +167,7 @@ KityMinder.registerModule( "LayoutGreen", function () {
 				var node = this._node;
 				var txt = this._txt;
 				var rect = this._rect;
-				var _style = node.getData( "layout" ).style;
+				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();
@@ -185,19 +184,18 @@ KityMinder.registerModule( "LayoutGreen", function () {
 	var root = this.getRoot();
 	//更新连线
 	var updateConnect = function ( minder, node, action ) {
-		var Layout = node.getData( "layout" );
-		var _style = Layout.style;
+		var _style = node.getData( "style" );
 		if ( !node.getParent() ) return false;
 		var start = node.getParent().getRenderContainer();
 		var end = node.getRenderContainer();
-		var _connect = Layout.connect;
+		var _connect = node.getData( "connect" );
 		if ( action === "remove" ) {
 			_connect.remove();
 		} else {
 			if ( _connect ) _connect.updateConnection();
 			else {
 				_connect = new ConnectBezier( start, end );
-				Layout.connect = _connect;
+				node.setData( "connect", _connect );
 				minder.getRenderContainer().addShape( _connect );
 				_connect.stroke( _style.stroke );
 			}
@@ -217,152 +215,81 @@ KityMinder.registerModule( "LayoutGreen", function () {
 	//绘制node
 	var drawNode = function ( node ) {
 		var container = node.getRenderContainer();
-		var shape = node.getData( "layout" ).shape;
+		var shape = node.getData( "shape" );
 		if ( !shape ) new MinderNodeShape( node );
 		else shape.update();
 		updateConnect( minder, node );
 	};
 
 	//以某个节点为seed对整体高度进行更改计算
-	var updateLayoutVertical = function ( node, parent, action ) {
-		var effectSet = [ node ]; //用于返回受影响的节点集
-		if ( !parent ) {
-			return effectSet;
-		}
-		var Layout = node.getData( "layout" );
-		var _style = Layout.style;
-		var marginTop = _style.margin[ 0 ],
-			marginBottom = _style.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;
+	var updateLayoutVertical = function ( node ) {
+		var parent = node.getParent();
+		var effectSet = [];
+		var parentHeight = parent.getRenderContainer().getHeight();
+		var _style = node.getData( "style" );
+		var parentY = parent.getData( "y" );
+		var marginTop = _style.margin[ 0 ];
+		var marginBottom = _style.margin[ 2 ];
+		node.setData( "y", parentY + parentHeight / 2 + marginTop + marginBottom );
+		effectSet.push( node );
+		return effectSet;
+	};
 
-		var parentLayout = parent.getData( "layout" );
-		var siblings = parentLayout[ appendside + "List" ] || parent.getChildren();
-		var getChildHeight = function ( node, appendside ) {
+	//以某个节点为seed对水平方向进行调整
+	var updateLayoutHorizon = function ( node, parent ) {
+		var effectSet = [];
+		var _style = node.getData( "style" );
+		var marginLeft = _style.margin[ 3 ];
+		var marginRight = _style.margin[ 1 ];
+		var nodeWidth = node.getRenderContainer().getWidth();
+		node.setData( "branchwidth", nodeWidth + marginLeft + marginRight );
+		var prt = parent;
+		while ( prt ) {
+			var children = prt.getChildren();
+			var parentWidth = prt.getRenderContainer().getWidth();
 			var sum = 0;
-			var nodeLayout = node.getData( "layout" );
-			var children = nodeLayout[ appendside + "List" ] || node.getChildren();
 			for ( var i = 0; i < children.length; i++ ) {
-				var childLayout = children[ i ].getData( "layout" );
-				if ( childLayout.shape ) sum += childLayout.branchheight;
-			}
-			return sum;
-		};
-		//方案：
-		//增加节点时：1.节点和大于1
-		//删除节点时：1.剩余节点和大于等于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 prtLayout = prt.getData( "layout" );
-
-			if ( prt.getParent() ) {
-				prtLayout.branchheight = branchH;
-			} else {
-				prtLayout[ appendside + "Height" ] = branchH;
+				sum += children[ i ].getData( "branchwidth" );
 			}
+			prt.setData( "branchwidth", ( sum > parentWidth ? sum : parentWidth ) );
+			prt.setData( "childrenwidth", sum );
 			prt = prt.getParent();
-		} while ( prt );
-		//遍历
+		}
 		var _buffer = [ root ];
 		while ( _buffer.length !== 0 ) {
-			_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) );
+			var childrenC = _buffer[ 0 ].getChildren();
+			var parentX = _buffer[ 0 ].getData( "x" );
+			var parentChildrenWidth = _buffer[ 0 ].getData( "childrenwidth" );
+			var sX = parentX - parentChildrenWidth / 2;
+			for ( var j = 0; j < childrenC.length; j++ ) {
+				childrenC[ j ].setData( "x", sX + childrenC[ j ].getData( "branchwidth" ) / 2 );
+				sX += ( childrenC[ j ].getData( "branchwidth" ) + marginLeft + marginRight );
+			}
+			_buffer = _buffer.concat( childrenC );
 			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();
-
-		var countX = function ( n ) {
-			var nLayout = n.getData( "layout" );
-			var prt = n.getParent();
-			var prtLayout = prt.getData( "layout" );
-			var parentX = prtLayout.x;
-			var parentWidth = prt.getRenderContainer().getWidth();
-			var parentAlign = prtLayout.align;
-			var selfAppendSide = nLayout.appendside;
-			if ( parentAlign === "center" ) parentWidth = parentWidth / 2;
-			var _style = nLayout.style;
-			var marginLeft = _style.margin[ 3 ];
-			var marginRight = _style.margin[ 1 ];
-			switch ( selfAppendSide ) {
-			case "left":
-				nLayout.x = parentX - parentWidth - marginLeft - marginRight;
-				break;
-			case "right":
-				nLayout.x = parentX + parentWidth + marginLeft + marginRight;
-				break;
-			default:
-				break;
-			}
-		};
-
-		//判断根据父节点位置定位还是自身已经带有位置属性
-		if ( parent ) {
-			countX( node );
-		}
-		//判断是否存在已绘制的孩子并对孩子位置进行调整(用于外部调用renderNode，如文本编时)
-		// var _buffer = node.getChildren();
-		// while ( _buffer.length !== 0 ) {
-		// 	countX( _buffer[ 0 ] );
-		// 	effectSet.push( _buffer[ 0 ] );
-		// 	_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
-		// 	_buffer.shift();
-		// }
-		return effectSet;
-	};
-
 	//调整node的位置
 	var translateNode = function ( node ) {
-		var Layout = node.getData( "layout" );
+		var _style = node.getData( "style" );
 		var nodeShape = node.getRenderContainer();
-		var align = Layout.align;
+		var align = node.getData( "align" );
 		var _rectHeight = nodeShape.getHeight();
 		var _rectWidth = nodeShape.getWidth();
 		switch ( align ) {
 		case "right":
-			nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth, Layout.y - _rectHeight / 2 ) );
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
 			break;
 		case "center":
-			nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth / 2, Layout.y - _rectHeight / 2 ) );
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
 			break;
 		default:
-			nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
+			nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
 			break;
 		}
+		updateConnect( minder, node );
 	};
 	var _style = {
 		renderNode: function ( node ) {
@@ -371,30 +298,27 @@ KityMinder.registerModule( "LayoutGreen", function () {
 		initStyle: function () {
 			var _root = this.getRoot();
 			var minder = this;
-			var Layout = _root.getData( "layout" );
-			Layout.style = {
-				radius: 10,
-				fill: "orange",
+			_root.setData( "style", {
+				radius: 20,
+				fill: "darkgreen",
 				stroke: "orange",
 				color: "black",
 				padding: [ 10, 10, 10, 10 ],
 				fontSize: 30,
-				margin: [ 0, 0, 0, 0 ]
-			};
-			Layout.x = minderWidth / 2;
-			Layout.y = minderHeight / 2;
-			Layout.align = "center";
-			if ( !_root.getData( "text" ) ) _root.setData( "text", "I am the root" );
-			Layout.appendside = "right";
-			Layout.leftList = [];
-			Layout.rightList = [];
-			var _rootRenderContainer = _root.getRenderContainer();
-			var rootHeight = _rootRenderContainer.getHeight();
-			Layout.leftHeight = Layout.rightHeight = rootHeight;
+				margin: [ 0, 5, 0, 5 ]
+			} );
+			_root.setData( "x", minderWidth / 2 );
+			_root.setData( "y", 50 );
+			_root.setData( "align", "center" );
+			_root.setData( "text", "I am the root" );
 
+			var _rootRenderContainer = _root.getRenderContainer();
+			_root.setData( "leftHeight", _rootRenderContainer.getHeight() );
+			_root.setData( "rightHeight", _rootRenderContainer.getHeight() );
 			drawNode( _root );
 			translateNode( _root );
 
+
 			//如果是从其他style切过来的，需要重新布局
 			var _buffer = _root.getChildren();
 			while ( _buffer.length !== 0 ) {
@@ -406,65 +330,27 @@ KityMinder.registerModule( "LayoutGreen", function () {
 			}
 		},
 		appendChildNode: function ( parent, node, index ) {
-			if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
-			var Layout = node.getData( "layout" );
-			var parentLayout = parent.getData( "layout" );
 			var minder = this;
 			if ( parent.getChildren().indexOf( node ) === -1 ) {
 				if ( !index ) parent.appendChild( node );
 				else parent.insertChild( node, index );
+				minder.handelNodeInsert( node );
 			}
-			minder.handelNodeInsert( node );
-			if ( parent === root ) {
-				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;
-				}
-				parentLayout.appendside = aside;
-				parentLayout[ aside + "List" ].push( node );
-			}
-
-			var appendside = parentLayout.appendside;
-			Layout.appendside = appendside;
-			if ( appendside === "left" ) {
-				Layout.align = "right";
-			} else {
-				Layout.align = "left";
-			}
-
 			drawNode( node );
-			var set1 = updateLayoutVertical( node, parent, "append" );
-			var set2 = updateLayoutHorizon( node );
+			node.setData( "align", "center" );
+			//调整影响到的节点位置
+			var set1 = updateLayoutVertical( node );
+			var set2 = updateLayoutHorizon( node, parent );
 			var set = uSet( set1, set2 );
 			for ( var i = 0; i < set.length; i++ ) {
 				translateNode( set[ i ] );
 			}
 		},
-		updateLayout: function ( node ) {
-			var prt = node;
-			prt.preTraverse( function ( n ) {
-
-			} );
-		},
 		appendSiblingNode: function ( sibling, node ) {
-			var siblingLayout = sibling.getData( "layout" );
-			console.log( sibling );
-			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;
+			var appendside = sibling.getData( "appendside" );
+			node.setData( "appendside", appendside );
 			this.appendChildNode( parent, node, index );
 		},
 		removeNode: function ( nodes ) {
@@ -473,29 +359,14 @@ KityMinder.registerModule( "LayoutGreen", function () {
 			for ( var i = 0; i < nodes.length; i++ ) {
 				var parent = nodes[ i ].getParent();
 				if ( parent ) {
-					var _buffer = [ nodes[ i ] ];
-					var parentLayout = parent.getData( "layout" );
-					while ( _buffer.length !== 0 ) {
-						_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
-						_buffer[ 0 ].getRenderContainer().remove();
-						updateConnect( minder, _buffer[ 0 ], "remove" );
-						_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 );
-					}
+					nodes[ i ].getRenderContainer().remove();
+					updateConnect( minder, nodes[ i ], "remove" );
 					parent.removeChild( nodes[ i ] );
-					var set = updateLayoutVertical( nodes[ i ], parent, "remove" );
-					for ( var j = 0; j < set.length; j++ ) {
-						translateNode( set[ j ] );
-					}
 				}
-				minder.select( parent );
 			}
+		},
+		updateLayout: function ( node ) {
+
 		}
 	};
 	this.addLayoutStyle( "green", _style );