need to rethink this gravity stuff later

5 files changed, 54 insertions, 49 deletions

diff --git a/assets/javascripts/mx/primitives/mx.image.js b/assets/javascripts/mx/primitives/mx.image.js
index 4f9102a..d1e292d 100644
--- a/assets/javascripts/mx/primitives/mx.image.js
+++ b/assets/javascripts/mx/primitives/mx.image.js
@@ -18,8 +18,10 @@ MX.Image = MX.Object3D.extend({
     if (ops.src) {
     	this.loadTexture(ops)
     }
-
-    layer.el.classList.add(ops.className)
+		
+		if (ops.className) {
+			layer.el.classList.add(ops.className)
+		}
 		layer.el.style.backgroundRepeat = 'no-repeat'
 
     this.dirty = true
diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js
index 4ac03b8..e25805b 100644
--- a/assets/javascripts/rectangles/engine/scenery.js
+++ b/assets/javascripts/rectangles/engine/scenery.js
@@ -8,15 +8,15 @@ var scenery = new function(){
 	
 	var base = this;
 
-	base.mouse = new mouse ()
+	base.mouse = new mouse ({ use_offset: false })
 	
 	base.init = function(){
 		var urls = [
-			"http://www.donedwardsart.com/upload/2008-4-18_resting%20wood%20duck.jpg",
-			"http://cdn.dailypainters.com/paintings/_four_quackers__baby_duck_oil_painting_by_texas_ar_3d3162fd43295d059068ae1c204367e3.jpg",
-			"http://2.bp.blogspot.com/-apEunnES6wU/UGdc6skZqzI/AAAAAAAAB3k/D6yO6llpFcg/s1600/Sunny+Side+Duck.JPG",
-			"http://imagecache.artistrising.com/artwork/lrg//5/559/5UD2000A.jpg",
-			"http://media-cache-ec0.pinimg.com/736x/fc/a7/31/fca731130ffb964a434fb90edecd22c3.jpg",
+			"http://okfocus.s3.amazonaws.com/office/ducks/duck1.jpg",
+			"http://okfocus.s3.amazonaws.com/office/ducks/duck2.jpg",
+			"http://okfocus.s3.amazonaws.com/office/ducks/duck3.jpg",
+			"http://okfocus.s3.amazonaws.com/office/ducks/duck4.jpg",
+			"http://okfocus.s3.amazonaws.com/office/ducks/duck5.jpg",
 		]
 		var loader = new Loader(function(){
 			base.load(loader.images)
@@ -52,7 +52,7 @@ var scenery = new function(){
 			backface: false,
 		})
 
-		var center = wall.center_for(img)
+		var center = wall.center_for(img, null)
 		mx_img.move({
 			x: center.a,
 			z: center.b,
@@ -75,47 +75,59 @@ var scenery = new function(){
 			x = mx_img.x
 			y = mx_img.y
 			z = mx_img.z
-			mx_img.el.style.pointerEvents = "none"
 			bounds = wall.bounds_for(img)
+			document.body.classList.add("dragging")
 		})
 		base.mouse.tube.on("enter", function(e, new_wall, cursor){
 			if (! dragging) return
 			if (new_wall.uid == wall.uid) return
 			if (! new_wall.fits(img)) return
 			bounds = new_wall.bounds_for(img)
-			center = new_wall.center_for(img, cursor.x.magnitude())
+			center = new_wall.center_for(img)
 
+// 			if (this.side & FRONT_BACK) {
+// 				major_axis = this.rect.x
+// 				minor_axis = this.rect.y
+// 			}
+// 			else {
+// 				major_axis = this.rect.y
+// 				minor_axis = this.rect.x
+// 			}
+			x = center.a
+			z = center.b
+			
+			cursor.a = cursor.b
+			
 			mx_img.move({
 				x: center.a,
 				z: center.b,
 				rotationY: wall_rotation[ new_wall.side ]
 			})
-
-			cursor.x.invert()
-						
+			
 			wall = new_wall
 		})
 		base.mouse.tube.on("drag", function(e, cursor){
 			if (! dragging) return
+			
 			mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
 			switch (wall.side) {
 				case FRONT:
-					mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
+					mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
 					break
 				case BACK:
-					mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
+					mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
 					break
 				case LEFT:
-					mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
+					mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
 					break
 				case RIGHT:
-					mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
+					mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
 					break
 			}
 		})
 		base.mouse.tube.on("up", function(e, cursor){
 			dragging = false
-			mx_img.el.style.pointerEvents = "auto"
+			document.body.classList.remove("dragging")
 		})
 	}
 		
diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js
index 97083c7..8a3784b 100644
--- a/assets/javascripts/rectangles/models/wall.js
+++ b/assets/javascripts/rectangles/models/wall.js
@@ -59,50 +59,34 @@ window.Wall = (function(){
 		return true
 	}
 	
-	Wall.prototype.center_for = function(img, gravity){
-		var left
-		gravity = gravity || 0
-		
+	Wall.prototype.center_for = function(img){
+
 		var major_axis, minor_axis
 		if (this.side & FRONT_BACK) {
 			major_axis = this.rect.x
 			minor_axis = this.rect.y
 		}
 		else {
-			minor_axis = this.rect.x
 			major_axis = this.rect.y
+			minor_axis = this.rect.x
 		}
-
-		// left side addition
-		if (gravity > 0) {
-			console.log("gravity left")
-			left = major_axis.b - img.width/2
-		}
-		// right side addition
-		else if (gravity < 0) {
-			console.log("gravity right")
-			left = major_axis.a + img.width/2
-		}
-		else {
-			left = major_axis.midpoint()
-		}
-
+		
 		switch (this.side) {
 			case FRONT:
-				x = left
+				x = major_axis.midpoint()
 				z = minor_axis.a + 10
 				break
 			case BACK:
-				x = left
+				x = major_axis.midpoint()
 				z = minor_axis.b - 10
 				break
 			case LEFT:
 				x = minor_axis.a + 10
-				z = left
+				z = major_axis.midpoint()
 				break
 			case RIGHT:
 				x = minor_axis.b - 10
- 				z = left
+ 				z = major_axis.midpoint()
 				break
 		}
 		
diff --git a/assets/javascripts/rectangles/util/mouse.js b/assets/javascripts/rectangles/util/mouse.js
index 3bd5876..ef6fa0f 100644
--- a/assets/javascripts/rectangles/util/mouse.js
+++ b/assets/javascripts/rectangles/util/mouse.js
@@ -33,6 +33,7 @@ function mouse (opt) {
 		rightclick: null,
 		propagate: false,
 		locked: false,
+		use_offset: true,
 		val: 0,
 	})
 	
@@ -51,7 +52,7 @@ function mouse (opt) {
 	opt.up && base.tube.on("up", opt.up)
 	opt.rightclick && base.tube.on("rightclick", opt.rightclick)
 	
-	var offset = opt.el ? opt.el.getBoundingClientRect() : null
+	var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null
 	
 	base.init = function (){
 		base.bind()
@@ -75,14 +76,16 @@ function mouse (opt) {
 			return new vec2(offset.left - e.pageX, e.pageY - offset.top)
 		}
 		else {
-			return new vec2(-e.pageX, e.pageY)
+			return new vec2(e.pageX, e.pageY)
 		}
 	}
-
+	
 	base.mousedown = function(e){
 		e.stopPropagation()
 
-		offset = this.getBoundingClientRect()
+		if (opt.use_offset) {
+			offset = this.getBoundingClientRect()
+		}
 		
 		var pos = positionFromMouse(e)
 		
@@ -95,7 +98,7 @@ function mouse (opt) {
 	base.mousemove = function(e){
 		e.stopPropagation()
 		
-		if (! offset) return
+		if (opt.use_offset && ! offset) return
 		
 		var pos = positionFromMouse(e)
 
@@ -117,8 +120,8 @@ function mouse (opt) {
 		}
 	}
 	base.mouseenter = function(e, el){
-		if (! offset) return
 		if (! base.down) return
+		if (opt.use_offset && ! offset) return
 		base.tube("enter", e, el, base.cursor)
 	}
 	base.mouseup = function(e){		
diff --git a/rectangles.html b/rectangles.html
index 335613c..1a4901e 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -29,6 +29,10 @@ body > div {
 .active.floor { background-color: #ffe; }
 .active.ceiling { background-color: rgba(230,230,255,0.3); }
 
+.dragging .mx-object3d.image {
+	pointer-events: none;
+}
+
 /* 
 .face {
 	background-image: url(http://i.asdf.us/im/6f/bgdither_1398274442_jules.gif);