comments

src/module/select.js

@@ -2,11 +2,19 @@ KityMinder.registerModule( "Select", function () {
     var minder = this;
     var g = KityMinder.Geometry;
 
-    // 框选控制
+    // 在实例上渲染框选矩形、计算框选范围的对象
     var marqueeActivator = ( function () {
+
+        // 记录选区的开始位置（mousedown的位置）
         var startPosition = null;
+
+        // 选区的图形
         var marqueeShape = new kity.Path().fill( 'rgba(255,255,255,.3)' ).stroke( 'white' );
+
+        // 标记是否已经启动框选状态
+        //    并不是 mousedown 发生之后就启动框选状态，而是检测到移动了一定的距离（MARQUEE_MODE_THRESHOLD）之后
         var marqueeMode = false;
+        var MARQUEE_MODE_THRESHOLD = 10;
 
         return {
             selectStart: function ( e ) {
@@ -17,20 +25,26 @@ KityMinder.registerModule( "Select", function () {
                 if ( startPosition ) {
                     return this.selectEnd();
                 }
+
                 startPosition = g.snapToSharp( e.getPosition() );
-                minder.getPaper().addShape( marqueeShape );
-                marqueeShape.setOpacity( 0.8 ).getDrawer().clear();
             },
             selectMove: function ( e ) {
+                
                 if ( !startPosition ) return;
+                
                 var p1 = startPosition,
                     p2 = e.getPosition();
 
+                // 检测是否要进入选区模式
                 if ( !marqueeMode ) {
-                    if ( g.getDistance( p1, p2 ) < 10 ) {
+                    // 距离没达到阈值，退出
+                    if ( g.getDistance( p1, p2 ) < MARQUEE_MODE_THRESHOLD ) {
                         return;
                     }
+                    // 已经达到阈值，记录下来并且重置选区形状
                     marqueeMode = true;
+                    minder.getPaper().addShape( marqueeShape );
+                    marqueeShape.setOpacity( 0.8 ).getDrawer().clear();
                 }
 
                 var marquee = g.getBox( p1, p2 ),
@@ -49,7 +63,7 @@ KityMinder.registerModule( "Select", function () {
                     this.close();
                 } );
 
-                // 选中节点数据更新
+                // 计算选中范围
                 minder.getRoot().traverse( function ( node ) {
                     var renderBox = node.getRenderContainer().getRenderBox();
                     if ( g.isBoxIntersect( renderBox, marquee ) ) {
@@ -57,6 +71,7 @@ KityMinder.registerModule( "Select", function () {
                     }
                 } );
 
+                // 应用选中范围
                 minder.select( selectedNodes, true );
             },
             selectEnd: function ( e ) {
@@ -73,29 +88,49 @@ KityMinder.registerModule( "Select", function () {
         };
     } )();
 
-    var singleSelectOnUp = null;
+    var lastDownNode = null;
     return {
         "events": {
             mousedown: function ( e ) {
-                var clickNode = e.getTargetNode();
-                if ( !clickNode ) {
+                var downNode = e.getTargetNode();
+
+                // 没有点中节点：
+                //     清除选中状态，并且标记选区开始位置
+                if ( !downNode ) {
                     this.removeAllSelectedNodes();
                     marqueeActivator.selectStart( e );
-                } else if ( e.originEvent.shiftKey ) {
-                    this.toggleSelect( clickNode );
-                } else if ( !clickNode.isSelected() ) {
-                    this.select( clickNode, true );
-                } else if ( !this.isSingleSelect() ) {
-                    singleSelectOnUp = clickNode;
+                }
+
+                // 点中了节点，并且按了 shift 键：
+                //     被点中的节点切换选中状态
+                else if ( e.originEvent.shiftKey ) {
+                    this.toggleSelect( downNode );
+                }
+
+                // 点中的节点没有被选择：
+                //     单选点中的节点
+                else if ( !downNode.isSelected() ) {
+                    this.select( downNode, true );
+                }
+
+                // 点中的节点被选中了，并且不是单选：
+                //     完成整个点击之后需要使其变为单选。
+                //     不能马上变为单选，因为可能是需要拖动选中的多个节点
+                else if ( !this.isSingleSelect() ) {
+                    lastDownNode = downNode;
                 }
             },
             mousemove: marqueeActivator.selectMove,
             mouseup: function ( e ) {
-                var clickNode = e.getTargetNode();
-                if ( clickNode && singleSelectOnUp == clickNode ) {
-                    this.select( singleSelectOnUp, true );
-                    singleSelectOnUp = null;
+                var upNode = e.getTargetNode();
+
+                // 如果 mouseup 发生在 lastDownNode 外，是无需理会的
+                if ( upNode && upNode == lastDownNode ) {
+                    this.select( lastDownNode, true );
+                    lastDownNode = null;
                 }
+
+                // 清理一下选择状态
                 marqueeActivator.selectEnd( e );
             }
         }