重构select

dist/dev.php

@@ -16,6 +16,7 @@ $dependency = Array(
     ,'src/core/keymap.js'
     ,'src/core/minder.lang.js'
     ,'src/core/minder.defaultoptions.js'
+    ,'src/module/geometry.js'
     ,'src/module/history.js'
     ,'src/module/icon.js'
     ,'src/module/layout.js'
@@ -25,7 +26,7 @@ $dependency = Array(
     ,'src/module/draggable.js'
     ,'src/module/dropfile.js'
     ,'src/module/keyboard.js'
-    ,'src/module/mouse.js'
+    ,'src/module/select.js'
     ,'src/module/history.js'
     ,'src/module/editor.js'
     ,'src/module/editor.range.js'

kity @ 0fc28977

-Subproject commit 113f82dc2dc4ad1e740f9264839aea0f117957e2
+Subproject commit 0fc28977198d5b82c4f4d4bbadba672fa5ab44e5

src/module/geometry.js

+KityMinder.Geometry = ( function () {
+	var g = {};
+	var min = Math.min,
+		max = Math.max,
+		abs = Math.abs;
+	var own = Object.prototype.hasOwnProperty;
+
+	g.isNumberInRange = function ( number, range ) {
+		return number > range[ 0 ] && number < range[ 1 ];
+	};
+
+	g.getBox = function ( p1, p2 ) {
+		return {
+			left: min( p1.x, p2.x ),
+			right: max( p1.x, p2.x ),
+			top: min( p1.y, p2.y ),
+			bottom: max( p1.y, p2.y ),
+			width: abs( p1.x - p2.x ),
+			height: abs( p1.y - p2.y )
+		};
+	};
+
+	g.mergeBox = function ( b1, b2 ) {
+		return {
+			left: min( b1.left, b2.left ),
+			right: max( b1.right, b2.right ),
+			top: min( b1.top, b2.top ),
+			bottom: max( b1.bottom, b2.bottom )
+		};
+	};
+
+	g.getBoxRange = function ( box ) {
+		return {
+			x: [ box.left, box.right ],
+			y: [ box.top, box.bottom ]
+		};
+	};
+
+	g.getBoxVertex = function ( box ) {
+		return {
+			leftTop: {
+				x: box.left,
+				y: box.top
+			},
+			rightTop: {
+				x: box.right,
+				y: box.top
+			},
+			leftBottom: {
+				x: box.left,
+				y: box.bottom
+			},
+			rightBottom: {
+				x: box.right,
+				y: box.bottom
+			}
+		};
+	};
+
+	g.isPointInsideBox = function ( p, b ) {
+		var ranges = g.getBoxRange( b );
+		return g.isNumberInRange( p.x, ranges.x ) && g.isNumberInRange( p.y, ranges.y );
+	};
+
+	g.isBoxIntersect = function ( b1, b2 ) {
+		var v = g.getBoxVertex( b1 );
+		return g.isPointInsideBox( v.leftTop, b2 ) || g.isPointInsideBox( v.rightTop, b2 ) || g.isPointInsideBox( v.leftBottom, b2 ) || g.isPointInsideBox( v.rightBottom, b2 );
+	};
+
+	g.snapToSharp = function ( unknown ) {
+		if ( utils.isNumber( unknown ) ) {
+			return ( unknown | 0 ) + 0.5;
+		}
+		if ( utils.isArray( unknown ) ) {
+			return unknown.map( g.snapToSharp );
+		}
+		[ 'x', 'y', 'left', 'top', 'right', 'bottom' ].forEach( function ( n ) {
+			if ( own.call( unknown, n ) ) {
+				unknown[ n ] = g.snapToSharp( unknown[ n ] );
+			}
+		} );
+		return unknown;
+	};
+
+	return g;
+} )();
\ No newline at end of file

src/module/mouse.js

-KityMinder.registerModule( "MouseModule", function () {
-    var minder = this;
-
-    function getTouchDistance( e ) {
-        return kity.Vector.fromPoints( e.kityEvent.getPosition( 0 ), e.kityEvent.getPosition( 1 ) ).length();
-    }
-
-    var SelectArea = ( function () {
-        var startPos = null;
-        var selectRect = new kity.Path().fill( 'rgba(255,255,255,.5)' ).stroke( 'white' );
-        var min = function ( a, b ) {
-            return a < b ? a : b;
-        };
-        var max = function ( a, b ) {
-            return a > b ? a : b;
-        };
-        var inArea = function ( p1, p2, p ) {
-            var minx = min( p1.x, p2.x );
-            var maxx = max( p1.x, p2.x );
-            var miny = min( p1.y, p2.y );
-            var maxy = max( p1.y, p2.y );
-            if ( p.x >= minx && p.x <= maxx && p.y >= miny && p.y <= maxy ) {
-                return true;
-            } else {
-                return false;
-            }
-        };
-
-        return {
-            selectStart: function ( e ) {
-                if ( e.originEvent.button ) return;
-                if ( startPos ) return this.selectEnd();
-                minder._paper.addShape( selectRect );
-                startPos = e.getPosition();
-                selectRect.setOpacity( 0.8 ).getDrawer().clear();
-            },
-            selectMove: function ( e ) {
-                var p = e.getPosition();
-                if ( startPos ) {
-                    var d = selectRect.getDrawer();
-                    d.clear().moveTo( startPos.x, startPos.y )
-                        .lineTo( p.x, startPos.y )
-                        .lineTo( p.x, p.y )
-                        .lineTo( startPos.x, p.y ).close();
-                    var _buffer = [ minder.getRoot() ];
-                    while ( _buffer.length !== 0 ) {
-                        _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
-                        var _bufferPoint = _buffer[ 0 ].getRenderContainer().getRenderBox().closurePoints;
-                        var sel = false;
-                        for ( var i = 0; i < _bufferPoint.length; i++ ) {
-                            if ( inArea( startPos, p, _bufferPoint[ i ] ) ) {
-                                minder.select( _buffer[ 0 ] );
-                                sel = true;
-                                break;
-                            }
-                        }
-                        if ( !sel ) {
-                            minder.removeSelectedNodes( _buffer[ 0 ] );
-                        }
-                        _buffer.shift();
-                    }
-                }
-            },
-            selectEnd: function ( e ) {
-                if ( startPos ) {
-                    selectRect.fadeOut( 200, 'ease' );
-                }
-                startPos = null;
-            }
-        };
-    } )();
-    return {
-
-        "events": {
-            'mousedown touchstart': function ( e ) {
-                if ( e.originEvent.touches && e.originEvent.touches.length != 1 ) return;
-                var clickNode = e.getTargetNode();
-                if ( clickNode ) {
-                    this.select( clickNode, true );
-                } else {
-                    this.removeAllSelectedNodes();
-                    SelectArea.selectStart( e );
-                }
-            },
-            'touchstart': function ( e ) {
-                var me = this;
-                if ( e.originEvent.touches.length === 2 ) {
-                    this._lastTouchDistance = getTouchDistance( e );
-                    this._lastTouchViewport = this._paper.getViewPort();
-                    console.log( 'start: ', this._lastTouchDistance, this._lastTouchViewport );
-                } else if ( e.originEvent.touches.length === 1 ) {
-
-                    var node = e.getTargetNode();
-                    if ( !node ) return;
-                    this._touchTimeout = setTimeout( function () {
-
-                    }, 200 );
-                }
-            },
-            'touchend touchmove': function () {
-                clearTimeout( this._touchTimeout );
-            },
-            'touchmove': function ( e ) {
-                if ( e.originEvent.touches.length === 2 ) {
-                    var ld = this._lastTouchDistance,
-                        cd = getTouchDistance( e );
-                    var lv = this._lastTouchViewport,
-                        cv = this._paper.getViewPort();
-                    cv.zoom = lv.zoom * cd / ld;
-                    this._paper.setViewPort( cv );
-                    console.log( 'move: ', cv );
-                }
-            },
-            'mousemove touchmove': function ( e ) {
-                SelectArea.selectMove( e );
-            },
-            'touchend mouseup': function ( e ) {
-                SelectArea.selectEnd( e );
-            }
-        }
-    };
-} );
\ No newline at end of file

src/module/select.js

+KityMinder.registerModule( "Select", function () {
+    var minder = this;
+    var g = KityMinder.Geometry;
+
+    var marqueeActivator = ( function () {
+        var startPosition = null;
+        var marqueeShape = new kity.Path().fill( 'rgba(255,255,255,.3)' ).stroke( 'white' );
+
+        minder.getPaper().addShape( marqueeShape );
+
+        return {
+            selectStart: function ( e ) {
+                // 只接受左键
+                if ( e.originEvent.button ) return;
+
+                // 清理不正确状态
+                if ( startPosition ) {
+                    return this.selectEnd();
+                }
+                startPosition = g.snapToSharp( e.getPosition() );
+                marqueeShape.setOpacity( 0.8 ).bringTop().getDrawer().clear();
+            },
+            selectMove: function ( e ) {
+                if ( !startPosition ) return;
+                var p1 = startPosition,
+                    p2 = e.getPosition();
+                var marquee = g.getBox( p1, p2 ),
+                    selectedNodes = [];
+
+                // 使其犀利
+                g.snapToSharp( marquee );
+
+                // 选区形状更新
+                marqueeShape.getDrawer().pipe( function () {
+                    this.clear();
+                    this.moveTo( marquee.left, marquee.top );
+                    this.lineTo( marquee.right, marquee.top );
+                    this.lineTo( marquee.right, marquee.bottom );
+                    this.lineTo( marquee.left, marquee.bottom );
+                    this.close();
+                } );
+
+                // 选中节点数据更新
+                minder.getRoot().traverse( function ( node ) {
+                    var renderBox = node.getRenderContainer().getRenderBox();
+                    if ( g.isBoxIntersect( renderBox, marquee ) ) {
+                        selectedNodes.push( node );
+                    }
+                } );
+
+                minder.select( selectedNodes, true );
+            },
+            selectEnd: function ( e ) {
+                if ( startPosition ) {
+                    marqueeShape.fadeOut( 200, 'ease' );
+                    startPosition = null;
+                }
+            }
+        };
+    } )();
+
+    return {
+        "events": {
+            mousedown: function ( e ) {
+                var clickNode = e.getTargetNode();
+                if ( clickNode ) {
+                    this.select( clickNode, true );
+                } else {
+                    this.removeAllSelectedNodes();
+                    marqueeActivator.selectStart( e );
+                }
+            },
+            mousemove: marqueeActivator.selectMove,
+            mouseup: marqueeActivator.selectEnd
+        }
+    };
+} );
\ No newline at end of file