separate orbit test & add mousewheel zoom

5 files changed, 68 insertions, 17 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)
 	}
 
diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html
index 8b45de6..0416ff7 100644
--- a/public/assets/test/orbit.html
+++ b/public/assets/test/orbit.html
@@ -35,6 +35,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
@@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) {
 	mx.updateChildren = false
 	mx.move({
 		x: p.a,
-		y: i/4,
+		y: i/2,
 		z: p.b,
 		rotationY: -theta,
 		width: 1,
-		height: i/2,
+		height: i,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
 	scene.add(mx)
 	mx.update()
 }
+function add_center () {
+  var mx = new MX.Object3D()
+  mx.width = 79
+  mx.height = 64
+  mx.y = 32 * 0.05
+  mx.scale = 0.05
+  mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)"
+  scene.add(mx)
+}
 function build_circle () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.move({
@@ -102,7 +112,7 @@ function build_circle () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-	var theta, rad = 10;
+	var theta, rad = 16;
 	for (var i = 0; i < 100; i++) {
 		theta = (i/100 * TWO_PI)
 		add_mx_point({
@@ -111,9 +121,11 @@ function build_circle () {
 		}, theta, i)
 	}
 
+  add_center()
+  
 	scene.update()
 
-	controls = new MX.OrbitCamera()
+	controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") })
 	controls.init()
 
 	console.log("ready..perhaps")
@@ -131,6 +143,8 @@ function animate(time){
 	map.draw.translate()
 
 	map.draw.coords()
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
 	map.draw.mouse(map.ui.mouse.cursor)
 	map.draw.camera(scene.camera)
 
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index 57e050c..b00b6fe 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -35,6 +35,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>