wheel tests; scroll up-down to move forward/back

5 files changed, 220 insertions, 163 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 0ce03db..2b7e671 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -25,193 +25,216 @@ MX.Movements = function (cam) {
 			vx = vy = vz = 0,
 			creepFactor = 0.3
 
+	var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
+
+	var trackpad
+
 	var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
   $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) })
 
-	return {
+	var exports = {
 
 		init: function () {
+		
+		  trackpad = new wheel ({
+		  	el: scene.el,
+		  	update: exports.mousewheel,
+		  })
+		  
+			document.addEventListener('keydown', exports.keydown)
+			document.addEventListener('keyup', exports.keyup)
+			document.addEventListener('mousedown', exports.mousedown)
+			document.addEventListener('mousemove', exports.mousemove)
+			document.addEventListener('mouseup', exports.mouseup)
+			window.addEventListener('blur', exports.reset)
+			window.addEventListener('focus', exports.reset)
+		},
+		
+		keydown: function (e) {
+			// console.log(e.keyCode)
+			if (locked || e.altKey || e.metaKey || e.ctrlKey) {
+				return
+			}
+			switch ( e.keyCode ) {
+			
+				case 16: // shift
+					creeping = true
+					break
 
-			document.addEventListener('keydown', function (e) {
-        // console.log(e.keyCode)
-				if (locked || e.altKey || e.metaKey || e.ctrlKey) {
-				  return
-				}
-				switch ( e.keyCode ) {
-				
-					case 16: // shift
-						creeping = true
-						break
-
-					case 38: // up
-					case 87: // w
-						moveForward = true
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = true
+					break
 
-					case 65: // a
-						moveLeft = true
-						break
+				case 65: // a
+					moveLeft = true
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = true
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = true
+					break
 
-					case 68: // d
-						moveRight = true
-						break
+				case 68: // d
+					moveRight = true
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = true
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = true
-						break
-				
-					case 82: // r
-						turnUp = true
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = true
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = true
+					break
+			
+				case 82: // r
+					turnUp = true
+					break
 
-					case 70: // f
-						turnDown = true
-						break
+				case 70: // f
+					turnDown = true
+					break
 
-					case 32: // space
-						if (gravity) {
-							jumping = true
-							vy = abs(vy) + jumpV * scale
-							if (e.shiftKey) {
-								vy *= -1
-							}
+				case 32: // space
+					if (gravity) {
+						jumping = true
+						vy = abs(vy) + jumpV * scale
+						if (e.shiftKey) {
+							vy *= -1
 						}
-						else {
-							if (e.shiftKey) {
-								moveDown = true
-							}
-							else {
-								moveUp = true
-							}
-						}
-						break
-
-					case 27:  // esc
-					  if (Scenery.nextMedia) {
-					    Scenery.nextMedia = null
-              app.tube('cancel-scenery')
-					  }
-					  else if (Scenery.nextWallpaper) {
-					    Scenery.nextWallpaper = null
-              app.tube('cancel-wallpaper')
-					  }
-						else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
-						  app.controller.mediaViewer.hide()
+					}
+					else {
+						if (e.shiftKey) {
+							moveDown = true
 						}
 						else {
-              app.controller.toolbar.toggleMap()
+							moveUp = true
 						}
-						break
-				}
-			})
+					}
+					break
 
-			document.addEventListener('keyup', function (e) {
-				if (locked) return;
-				switch ( e.keyCode ) {
-			
-					case 16: // shift
-						creeping = false
-						break
+				case 27:  // esc
+					if (Scenery.nextMedia) {
+						Scenery.nextMedia = null
+						app.tube('cancel-scenery')
+					}
+					else if (Scenery.nextWallpaper) {
+						Scenery.nextWallpaper = null
+						app.tube('cancel-wallpaper')
+					}
+					else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+						app.controller.mediaViewer.hide()
+					}
+					else {
+						app.controller.toolbar.toggleMap()
+					}
+					break
+			}
+		},
 
-					case 38: // up
-					case 87: // w
-						moveForward = false
-						break
+		keyup: function (e) {
+			if (locked) return;
+			switch ( e.keyCode ) {
+		
+				case 16: // shift
+					creeping = false
+					break
 
-					case 65: // a
-						moveLeft = false
-						break
+				case 38: // up
+				case 87: // w
+					moveForward = false
+					break
 
-					case 40: // down
-					case 83: // s
-						moveBackward = false
-						break
+				case 65: // a
+					moveLeft = false
+					break
 
-					case 68: // d
-						moveRight = false
-						break
+				case 40: // down
+				case 83: // s
+					moveBackward = false
+					break
 
-					case 37: // left
-					case 81: // q
-						turnLeft = false
-						break
-							
-					case 39: // right
-					case 69: // e
-						turnRight = false
-						break
+				case 68: // d
+					moveRight = false
+					break
 
-					case 82: // r
-						turnUp = false
-						break
+				case 37: // left
+				case 81: // q
+					turnLeft = false
+					break
+						
+				case 39: // right
+				case 69: // e
+					turnRight = false
+					break
 
-					case 70: // f
-						turnDown = false
-						break
+				case 82: // r
+					turnUp = false
+					break
 
-					case 32: // space
-						moveUp = moveDown = false
-						break
+				case 70: // f
+					turnDown = false
+					break
+
+				case 32: // space
+					moveUp = moveDown = false
+					break
 
 /*					
-					case 48: // 0
-						cam.rotationX = 0
-						cam.rotationY = 0
-						cam.x = 0
-						cam.y = viewHeight
-						cam.z = 0
-						break
+				case 48: // 0
+					cam.rotationX = 0
+					cam.rotationY = 0
+					cam.x = 0
+					cam.y = viewHeight
+					cam.z = 0
+					break
 */
-				}
-			})
-			
-			var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false
-			document.addEventListener('mousedown', function (e) {
-				if (locked) return;
-				mouseX = e.pageX
-				mouseY = e.pageY
-				rotX = cam.rotationX
-				rotY = cam.rotationY
-				dragging = true
-			})
-			
-			document.addEventListener('mousemove', function (e) {
-				if (locked || ! dragging) return
-				var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
-				var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
-				cam.rotationY = rotY + dx
-				cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
-			})
-			
-			document.addEventListener('mouseup', function (e) {
-				dragging = false
-			})
-			
-			window.addEventListener('blur', reset)
-			window.addEventListener('focus', reset)
-			function reset(){
-				moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
 			}
+		},
+
+		mousedown: function (e) {
+			if (locked) return;
+			mouseX = e.pageX
+			mouseY = e.pageY
+			rotX = cam.rotationX
+			rotY = cam.rotationY
+			dragging = true
+		},
+			
+		mousemove: function (e) {
+			if (locked || ! dragging) return
+			var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3
+			var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3
+			cam.rotationY = rotY + dx
+			cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max )
+		},
+		
+		mouseup: function (e) {
+			dragging = false
+		},
+		
+		reset: function(){
+			moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false
+		},
+		
+		mousewheel: function (e, deltaY, deltaX) {
+			console.log(deltaX != 0 && deltaY != 0)
+			cam.rotationY += -deltaX / 20
+
+			pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10
+			pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10
 
+			app.tube("move", pos)
 		},
 
 		update: function () {
 
-			if (locked) return;
+			if (locked) { return }
 			
 			var ry = cam.rotationY
 			var s = creeping ? scale * creepFactor : scale
@@ -301,4 +324,6 @@ MX.Movements = function (cam) {
 		velocity: function(n){ v = clamp(n, 1, 50) },
 		jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) },
 	}
+	
+	return exports
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 60c745e..072ff7e 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -203,7 +203,7 @@ Map.UI.Editor = function(map){
 
   var wheelState, wheelTimeout
 
-	function mousewheel (e, val, delta){
+	function mousewheel (e, deltaY, deltaX){
 		var cursor = base.mouse.cursor
 
 		var intersects = Rooms.filter(function(r){
@@ -213,7 +213,7 @@ Map.UI.Editor = function(map){
 		if (intersects.length) {
 			wheelState = wheelState || intersects[0].copy()
 			
-			intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max )
+			intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max )
 			
 			clearTimeout(wheelTimeout)
 			wheelTimeout = setTimeout(function(){
@@ -227,7 +227,7 @@ Map.UI.Editor = function(map){
 			}, 500)
 		}
 		else {
-			map.set_zoom(map.zoom_exponent - delta/20)
+			map.set_zoom(map.zoom_exponent - deltaY/20)
 		}
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
index fabbdb9..0fdd336 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -72,8 +72,8 @@ Map.UI.Minimap = function(map){
 		base.dragging = false
 	}
 
-	function mousewheel (e, val, delta){
-		map.set_zoom(map.zoom_exponent - delta/20)
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
 	}
 	
 	function rightclick (e){
diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js
index 6836772..64aaa64 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -21,37 +21,40 @@ function wheel (opt) {
 		val: 0,
 	})
 
-	opt.el.addEventListener('mousewheel', onMouseWheel, false);
+	opt.el.addEventListener('wheel', onMouseWheel, false);
+// 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
 	opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
 
 	function onMouseWheel (e) {
 		if (opt.locked) {
 			return
 		}
+
 		if (! opt.propagate) {
 			e.stopPropagation()
 			e.preventDefault()
 		}
 		
-		var delta = 0;
+		var deltaX = 0, deltaY = 0;
 		
 		// WebKit
 		if ( event.wheelDeltaY ) {
-			delta -= event.wheelDeltaY * opt.ratio
+			deltaY -= event.wheelDeltaY * opt.ratio
+			deltaX -= event.wheelDeltaX * opt.ratio
 		}
 		// Opera / Explorer 9
 		else if ( event.wheelDelta ) {
-			delta -= event.wheelDelta * opt.ratio
+			deltaY -= event.wheelDelta * opt.ratio
 		}
 		// Firefox
 		else if ( event.detail ) {
-			delta += event.detail * 2
+			deltaY += event.detail * 2
 		}
-		if (! opt.reversible && delta < 0) return;
+		if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return;
 		
-		opt.val = clamp(opt.val + delta, opt.min, opt.max)
+		// opt.val = clamp(opt.val + delta, opt.min, opt.max)
 		
-		opt.update(e, opt.val, delta)
+		opt.update(e, deltaY, deltaX)
 	}
 
 	opt.lock = function(){ opt.locked = true }
diff --git a/public/assets/test/wheel.html b/public/assets/test/wheel.html
new file mode 100644
index 0000000..054945e
--- /dev/null
+++ b/public/assets/test/wheel.html
@@ -0,0 +1,29 @@
+<style>
+#cursor {
+	position:absolute;margin-top:-5px;margin-left:-5px;
+	width:10px;height:10px;border-radius:50%;
+	background:red;
+}
+</style>
+<div id="cursor"></div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+
+<script>
+x = window.innerWidth/2
+y = window.innerHeight/2
+function draw(){
+	cursor.style.top = y + 'px'
+	cursor.style.left = x + 'px'
+}
+new wheel({
+	el: document,
+	propagate: false,
+	update: function(e,dy,dx){
+		y = mod(y + dy, window.innerHeight)
+		x = mod(x + dx, window.innerWidth)
+		draw()
+	},
+})
+draw()
+</script>
\ No newline at end of file