minder graph

demo/dev.html

@@ -15,18 +15,27 @@
     var minderHeight = document.body.clientHeight;
     var _root =  minder.getRoot();
 
+    //根节点初始化的数据（考虑整合）
     _root.setData("style",{
         radius:10,
         fill:"orange",
         stroke:"orange",
         color:"black",
         padding:[10,10,10,10],
-        fontSize:20,
+        fontSize:20
     });
     _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("appendside","left");
+    _root.setData("sidecount",0);
 
     minder.select(_root);
     minder.execCommand("rendernode",_root);

src/module/layout.js

 KityMinder.registerModule( "LayoutModule", function () {
-	var createChildNode = function ( km, parent ) {
-		var children = parent.getChildren();
 
-		var judgeDir = function ( num ) {
-			var devide = parseInt( num / 5 );
-			if ( devide % 2 ) {
-				return "left";
+	var createChildNode = function ( km, parent ) {
+		var defaultHeight = 25;
+		var root = km.getRoot();
+		var appendSide = parent.getData( "appendside" );
+		if ( parent === root ) {
+			var sidecount = root.getData( "sidecount" );
+			if ( sidecount + 1 === 5 ) {
+				root.setData( "sidecount", 0 );
+				root.setData( "appendside", ( "leftright" ).replace( appendSide, "" ) );
 			} else {
-				return "right";
+				root.setData( "sidecount", sidecount + 1 );
 			}
-		};
-		var branchside = parent.getData( "branchside" ) || judgeDir( children.length );
+		}
 		var _node = new MinderNode();
-		_node.setData( "y", parent.getData( "y" ) + Math.random() * 100 - 100 );
-		_node.setData( "text", "New Node" );
-		switch ( branchside ) {
+		parent.appendChild( _node );
+		_node.setData( "appendside", appendSide );
+		var parentX = parent.getData( "x" );
+		switch ( appendSide ) {
 		case "left":
-			_node.setData( "branchside", "left" );
-			_node.setData( "x", parent.getData( "x" ) - 200 );
+			_node.setData( "x", parentX + 200 );
+			_node.setData( "align", "right" );
 			break;
 		case "right":
-			_node.setData( "x", parent.getData( "x" ) + 200 );
-			_node.setData( "branchside", "right" );
+			_node.setData( "x", parentX - 200 );
+			_node.setData( "align", "left" );
 			break;
 		default:
 			break;
 		}
-		parent.insertChild( _node );
-		km.execCommand( 'rendernode', _node );
+
+		var layer = parent.getData( "layer" ) + 1;
+		var layerArray = root.getData( "layer" + appendSide );
+		layerArray[ layer ] = layerArray[ layer ] || [];
+
+		layerArray[ layer ].push( _node );
+		var layerData = layerArray[ layer ];
+
+		_node.setData( "layer", layer );
+
+		//设置各节点Y坐标
+		var rootY = root.getData( "y" );
+		var layerHeight = ( function () {
+			var sum = 0;
+			for ( var i = 0; i < layerData.length; i++ ) {
+				sum += ( layerData[ i ].getRenderContainer().getHeight() );
+			}
+			return sum;
+		} )() + defaultHeight / 2 - ( layerData[ 0 ].getRenderContainer().getHeight() || defaultHeight ) / 2 + ( layerData.length - 1 ) * 15;
+
+		var sY = rootY - layerHeight / 2;
+		for ( var j = 0; j < layerData.length; j++ ) {
+			layerData[ j ].setData( "y", sY );
+			var part1 = ( layerData[ j ].getRenderContainer().getHeight() || defaultHeight ) / 2 + 15;
+			var part2 = layerData[ j + 1 ] ? ( layerData[ j + 1 ].getRenderContainer().getHeight() || defaultHeight ) / 2 : 0;
+			if ( layerData[ j + 1 ] ) {
+				console.log( layerData[ j + 1 ].getRenderContainer().getHeight() );
+			}
+			sY += ( part1 + part2 );
+		}
+
+		km.execCommand( "rendernode", layerData );
 		return _node;
 	};
 

src/module/render.js

@@ -17,7 +17,6 @@ KityMinder.registerModule( "RenderModule", function () {
                 }
             };
         } )() );
-
         var renderNode = function ( km, node ) {
             var styledefault = {
                 radius: 5,
@@ -25,7 +24,7 @@ KityMinder.registerModule( "RenderModule", function () {
                 stroke: "orange",
                 color: "black",
                 padding: [ 5, 5, 5, 5 ],
-                fontSize: 14
+                fontSize: 14,
             };
             var kR = node.getRenderContainer();
             var nodeShape = kR.nodeShape = kR.nodeShape || new MinderNodeShape( kR );
@@ -40,11 +39,11 @@ KityMinder.registerModule( "RenderModule", function () {
             var txtWidth = nodeShape.text.getWidth();
             var txtHeight = nodeShape.text.getHeight();
             var _padding = _style.padding;
-            nodeShape.text
-                .setX( _padding[ 3 ] ).setY( _padding[ 0 ] + txtHeight );
 
             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 );
@@ -64,19 +63,19 @@ KityMinder.registerModule( "RenderModule", function () {
                 nodeShape.highlight();
             }
         };
-
-        return {
-            base: Command,
-            execute: function ( km, node ) {
-                if ( node instanceof Array ) {
-                    for ( var i = 0; i < node.length; i++ ) {
-                        renderNode( km, node[ i ] );
-                    }
-                } else {
-                    renderNode( km, node );
+        var renderNodes = function ( km, node ) {
+            if ( node instanceof Array ) {
+                for ( var i = 0; i < node.length; i++ ) {
+                    renderNode( km, node[ i ] );
                 }
+            } else {
+                renderNode( km, node );
             }
         };
+        return {
+            base: Command,
+            execute: renderNodes
+        };
     } )() );
 
     return {