Merge pull request #209 from UDST/feature/controls-update

Fixed panning using keyboard and added ctrl + mouse for pan

src/controls/Controls.Orbit.js

@@ -309,9 +309,6 @@ class Orbit extends EventEmitter {
     // See: http://stackoverflow.com/a/26188674/997339
     this._controls = new OrbitControls(world._engine._camera, world._container);
 
-    // Disable keys for now as no events are fired for them anyway
-    this._controls.keys = false;
-
     // 89 degrees
     this._controls.maxPolarAngle = 1.5533;
 

src/vendor/OrbitControls.js

@@ -76,7 +76,7 @@ var OrbitControls = function ( object, domElement ) {
 	this.enableKeys = true;
 
 	// The four arrow keys
-	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+	this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40, CTRL: 17 };
 
 	// Mouse buttons
 	this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
@@ -238,6 +238,7 @@ var OrbitControls = function ( object, domElement ) {
 		document.removeEventListener( 'mouseout', onMouseUp, false );
 
 		window.removeEventListener( 'keydown', onKeyDown, false );
+		window.removeEventListener( 'keyup', onKeyUp, false );
 
 		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
 
@@ -255,6 +256,8 @@ var OrbitControls = function ( object, domElement ) {
 
 	var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 };
 
+	var KEY_STATE = { CTRL : false };
+
 	var state = STATE.NONE;
 
 	var EPS = 0.000001;
@@ -586,23 +589,41 @@ var OrbitControls = function ( object, domElement ) {
 			case scope.keys.UP:
 				pan( 0, scope.keyPanSpeed );
 				scope.update();
+				scope.dispatchEvent( endEvent );
 				break;
 
 			case scope.keys.BOTTOM:
 				pan( 0, - scope.keyPanSpeed );
 				scope.update();
+				scope.dispatchEvent( endEvent );
 				break;
 
 			case scope.keys.LEFT:
 				pan( scope.keyPanSpeed, 0 );
 				scope.update();
+				scope.dispatchEvent( endEvent );
 				break;
 
 			case scope.keys.RIGHT:
 				pan( - scope.keyPanSpeed, 0 );
 				scope.update();
+				scope.dispatchEvent( endEvent );
 				break;
 
+			case scope.keys.CTRL:
+				KEY_STATE.CTRL = true;
+				break;
+
+		}
+
+	}
+
+	function handleKeyUp( event ) {
+
+		switch ( event.keyCode ) {
+			case scope.keys.CTRL:
+				KEY_STATE.CTRL = false;
+				break;
 		}
 
 	}
@@ -720,11 +741,19 @@ var OrbitControls = function ( object, domElement ) {
 
 		if ( event.button === scope.mouseButtons.ORBIT ) {
 
-			if ( scope.enableRotate === false ) return;
+			if (KEY_STATE.CTRL) {
+				if ( scope.enablePan === false ) return;
 
-			handleMouseDownRotate( event );
+				handleMouseDownPan( event );
 
-			state = STATE.ROTATE;
+				state = STATE.PAN;
+			} else {
+				if ( scope.enableRotate === false ) return;
+
+				handleMouseDownRotate( event );
+
+				state = STATE.ROTATE;
+			}
 
 		} else if ( event.button === scope.mouseButtons.ZOOM ) {
 
@@ -822,6 +851,14 @@ var OrbitControls = function ( object, domElement ) {
 
 	}
 
+	function onKeyUp( event ) {
+
+		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
+
+		handleKeyUp( event );
+
+	}
+
 	function onTouchStart( event ) {
 
 		if ( scope.enabled === false ) return;
@@ -1103,6 +1140,7 @@ var OrbitControls = function ( object, domElement ) {
 	});
 
 	window.addEventListener( 'keydown', onKeyDown, false );
+	window.addEventListener( 'keyup', onKeyUp, false );
 
 	// Expose controls methods for programmatic control
 	this.panLeft = panLeft;