separate orbit test & add mousewheel zoom

3 files changed, 49 insertions, 13 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index b3dcc43..b09512e 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){
 		sensitivity: 10,              // moving 1 pixel is like moving N radians
 		ease: 10,
 	})
-	var rx, ry, px, py, epsilon = 1e-10, dragging = false
+	var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false
 	exports.init = function(){
     ry = opt.rotationY
     rx = opt.rotationX
+    radius = opt.radius
+    exports.wheel = new wheel({
+			el: opt.el,
+			update: function(e, delta){
+				opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] )
+			},
+		})
 		exports.bind()
 	}
 	exports.toggle = function(state){
@@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){
 		if (bound) return;
 		bound = true
 		opt.el.addEventListener("mousedown", down)
-		opt.el.addEventListener("mousemove", move)
-		opt.el.addEventListener("mouseup", up)
+		window.addEventListener("mousemove", move)
+		window.addEventListener("mouseup", up)
+		exports.wheel.unlock()
 	}
 	exports.unbind = function(){
 		if (! bound) return;
 		bound = false
 		opt.el.removeEventListener("mousedown", down)
-		opt.el.removeEventListener("mousemove", move)
-		opt.el.removeEventListener("mouseup", up)
+		window.removeEventListener("mousemove", move)
+		window.removeEventListener("mouseup", up)
+		exports.wheel.lock()
 	}
 	function down (e) {
 	  px = e.pageX
@@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){
 	  else {
 	    rx = opt.rotationX
 	  }
-		opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry)
-		opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry)
-		opt.camera.y = opt.center.z + opt.radius * cos(rx)
+	  if (abs(radius - opt.radius) > epsilon) {
+	    radius = avg(radius, opt.radius, opt.ease)
+	  }
+	  else {
+	    radius = opt.radius
+	  }
+		opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry)
+		opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry)
+		opt.camera.y = opt.center.z + radius * cos(rx)
  		opt.camera.rotationX = PI/2 - rx
  		opt.camera.rotationY = ry + PI/2
 	}
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index b525696..564b351 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -228,7 +228,7 @@ Map.Draw = function(map, opt){
 		line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
 	}
 
-	function dot_at (x,z){
+	draw.dot_at = function dot_at (x,z){
 		ctx.save()
 		ctx.translate(x,z)
 
@@ -240,4 +240,23 @@ Map.Draw = function(map, opt){
 
 		ctx.restore()
 	}
+
+	draw.x_at = function x_at (x, z, length){
+		ctx.save()
+		ctx.translate(x,z)
+
+		var len = (length/2 || 4) / map.zoom
+
+    ctx.lineCap = "square"
+    ctx.lineWidth = 2/map.zoom
+    ctx.beginPath()
+		ctx.moveTo( -len, -len);
+		ctx.lineTo(  len,  len);
+		ctx.moveTo( -len,  len);
+		ctx.lineTo(  len, -len);
+		ctx.stroke();
+
+		ctx.restore()
+	}
+
 }
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js
index 712d470..4155a70 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -3,8 +3,8 @@
 	
 		base.wheel = new wheel({
 			el: document.querySelector("#map"),
-			update: function(e, val, delta){
-				// do something with val
+			update: function(e, delta){
+				// do something with delta
 			},
 		})
 
@@ -13,7 +13,7 @@
 function wheel (opt) {
 	opt = defaults(opt, {
 		el: document,
-		fn: function(e, val, delta){},
+		update: function(e, delta){},
 		propagate: false,
 		locked: false,
 		reversible: true,
@@ -22,7 +22,7 @@ function wheel (opt) {
 	})
 
 	opt.el.addEventListener('wheel', onMouseWheel, false);
-// 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
+  // opt.el.addEventListener('mousewheel', onMouseWheel, false);
 	opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
 
 	function onMouseWheel (e) {
@@ -58,6 +58,8 @@ function wheel (opt) {
 		
 		// opt.val = clamp(opt.val + delta, opt.min, opt.max)
 		
+		// deltaX is also passed, but these values tend to be unusable
+		// try http://vvalls.com/assets/test/wheel.html with a trackpad
 		opt.update(e, deltaY, deltaX)
 	}