dev

demo/dev.html

@@ -42,13 +42,14 @@
     });
     var minderWidth = document.body.clientWidth;
     var minderHeight = document.body.clientHeight;
-    var _node =  new MinderNode();
+    var _node =  minder.getRoot();
+
     _node.data = {
         centerX:minderWidth/2,
         centerY:minderHeight/2,
         style:{
             radius:10,
-            fill:"yellow",
+            fill:"blue",
             stroke:"orange",
             color:"black",
             padding:[10,10,10,10],
@@ -60,8 +61,8 @@
     var _childnode = new MinderNode();
     _node.insertChild(_childnode);
     _childnode.data = {
-        centerX:minderWidth/2+200,
-        centerY:minderHeight/2+200,
+        centerX:minderWidth/2+50,
+        centerY:minderHeight/2+50,
         style:{
             radius:10,
             fill:"yellow",
@@ -75,9 +76,7 @@
 
 
     console.log(minderWidth,minderHeight);
-    minder.execCommand("createchildnode",minder,minder.getRoot(),_node);
     minder.execCommand("rendernode",minder,_node);
     minder.execCommand("rendernode",minder,_childnode);
-    minder.reset();
 </script>
 </html>
\ No newline at end of file

src/module/connect.js

 var ConnectModule = KityMinder.registerModule( "ConnectModule", function () {
+	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;
+		}
+		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 );
+			},
+			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 ];
+						}
+					}
+				}
+				return {
+					start: nearStart,
+					end: nearEnd
+				};
+			},
+			updateConnection: function () {
+				if ( !this.isReady() ) {
+					return false;
+				}
+				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 );
+			}
+		};
+	} )() );
 	return {
 		"events": {
 			"command": function ( e ) {
@@ -8,16 +141,16 @@ var ConnectModule = KityMinder.registerModule( "ConnectModule", function () {
 					( function () {
 						var minder = command.commandArgs[ 0 ];
 						var node = command.commandArgs[ 1 ];
-						if ( !node.parent ) {
+						if ( !node.getParent() ) {
 							return false;
 						} else {
-							var parent = node.parent;
-							// var _connect = new kity.Bezier(
-							// [ new kity.Point( parent.data.centerX, parent.data.centerY ),
-							// 		new kity.Point( node.data.centerX, node.data.centerY )
-							// 	] );
-							_connect.stroke( new Pen( node.data.stroke, node.data.strokeWidth ) );
-							minder.addShape( _connect );
+							var parent = node.getParent();
+							console.log( "parent", node.getParent() );
+							var _connect = new ConnectBezier( parent.getRenderContainer(), node.getRenderContainer() );
+							_connect.stroke( new kity.Pen( node.data.stroke, node.data.strokeWidth ) );
+							node.connect = _connect;
+							console.log( _connect );
+							minder.getRenderContainer().addShape( _connect );
 						}
 					} )();
 					break;

src/module/render.js

@@ -15,8 +15,8 @@ KityMinder.registerModule( "RenderModule", function () {
         var renderNode = function ( km, node ) {
             var nodeD = Utils.extend( node_default, node.data );
             var _style = nodeD.style;
-            var kR = km.getRenderContainer();
-            var _node = new kity.Group();
+            var kR = node.getRenderContainer();
+            var _node = node.shape = new kity.Group();
             var _txt = new kity.Text( nodeD.text || "Node" );
             _txt.setSize( nodeD.fontSize ).fill( nodeD.color );
             _node.addShape( _txt );