converting between position and mx coordinates

3 files changed, 92 insertions, 50 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index b4a38f8..5d36b4f 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -29,11 +29,11 @@ var Scenery = new function(){
 		return scene_media
 	}
 	
-	base.addNextToWall = function(wall, mx){
+	base.addNextToWall = function(wall, index){
 		base.add({
 			wall: wall,
 			media: base.nextMedia,
-			mx: mx
+			index: index || 0,
 		})
 		base.nextMedia = null
 		return media
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 6bd5863..70d1d26 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -10,9 +10,17 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.media = opt.media
 			this.dimensions = new vec2(this.media.width, this.media.height)
 			this.scale = this.media.scale
+			
+			this.scaleDimensions = this.dimensions.clone().mul(this.media.scale)
+			this.position = new vec2(0,0)
+			if (opt.data && opt.data.position) {
+			  // position is the coordinate of one of the corners with respect to a
+			  // wall surface
+			  // subtract x/z offset of wall
+			}
 
 			if (opt.wall) {
-				this.set_wall(opt.wall, opt.mx)
+				this.set_wall(opt.wall, index)
 			}
 		},
 		
@@ -60,7 +68,7 @@ Scenery.types.base = Fiber.extend(function(base){
 			}
 		},
 
-		set_wall: function(wall, mx){
+		set_wall: function(wall, index){
 			this.wall = wall || this.wall
 			// this.bounds = this.wall.bounds_for(this.media, this.scale)
 			// this.center = this.wall.center()
@@ -83,8 +91,8 @@ Scenery.types.base = Fiber.extend(function(base){
 		serialize: function(){
 			var data = {
 				id: this.id,
-				wall_id: this.wall.id,
-				side: this.wall.side,
+				wall_id: this.wall && this.wall.id,
+				side: this.wall && this.wall.side,
 				dimensions: this.dimensions.serialize(),
 				position: app.position(this.mx),
 				media: this.media,
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 460963b..3afe49a 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -39,7 +39,7 @@
 		var base = this
 		base.$walls = $( this.mx.map(function(mx){ return mx.el }) )
 		
-		this.mx.forEach(function(mx){
+		this.mx.forEach(function(mx, index){
 			$(mx.el).bind({
 				mouseover: function(){
 				},
@@ -52,7 +52,7 @@
 					// base.randomize_colors()
 					// console.log(sidesToString(base.side))
 					if (Scenery.nextMedia) {
-					var scenery = Scenery.addNextToWall(base)
+            var scenery = Scenery.addNextToWall(base, index)
 					
   					UndoStack.push({
   					  type: 'create-scenery',
@@ -74,6 +74,64 @@
 		})
 		this.outline()
 	}
+
+
+  // wall
+  // side: corresponds to the orientation of this wall
+  // vec: equivalent to the bounds of the Surface
+  // edge: the coordinate of the normal of this surface
+  // 			 var useX = side & FRONT_BACK
+  //			 var useA = side & (FRONT | LEFT)
+  //       mx.rect[useX ? 'y': 'x'][ useA ? 'a': 'b']
+  // surface: an ordered set of contiguous wall regions
+
+	Wall.prototype.positionToMx = function(position, dimension) {
+		switch (this.side) {
+			case FRONT:
+				x = this.vec.a + position.a + dimension.a / 2
+				z = this.edge + painting_distance_from_wall
+				break
+			case BACK:
+				x = this.vec.a + position.a + dimension.a / 2
+				z = this.edge - painting_distance_from_wall
+				break
+			case LEFT:
+				x = this.edge + painting_distance_from_wall
+				z = this.vec.a + position.a + dimension.a / 2
+				break
+			case RIGHT:
+				x = this.edge - painting_distance_from_wall
+ 				z = this.vec.a + position.a + dimension.a / 2
+				break
+		}
+		return {
+		  x: x,
+		  y: position.b + dimension.b / 2
+		  z: z,
+		}
+	}
+	Wall.prototype.mxToPosition = function(mx) {
+	  var position = new vec2(0,0)
+	  switch (this.side) {
+	    case FRONT:
+	      position.a = mx.x - mx.width / 2 - this.vec.a
+	      position.b = mx.y - mx.height / 2
+	      break
+	    case BACK:
+	      position.a = mx.x - mx.width / 2 - this.vec.a
+	      position.b = mx.y - mx.height / 2
+	      break
+	    case LEFT:
+	      position.a = mx.z - mx.width / 2 - this.vec.a
+	      position.b = mx.y - mx.height / 2
+	      break
+	    case RIGHT:
+	      position.a = mx.z - mx.width / 2 - this.vec.a
+	      position.b = mx.y - mx.height / 2
+	      break
+	  }
+	  return position
+	}
 	
 	Wall.prototype.bounds_for = function(img, scale) {
 		scale = scale || 1
@@ -85,12 +143,6 @@
 		                 new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) )
 	}
 	
-	Wall.prototype.bounds_for_mx = function(img, scale, mx) {
-		// 
-	}
-	Wall.prototype.fits_mx = function(img, scale, mx) {
-	}
-	
 	Wall.prototype.fits = function(img, scale){
 		if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) {
 			return false
@@ -103,37 +155,25 @@
 	
 	Wall.prototype.center = function(offset){
 	
-		offset = offset || 0
-
-		var major_axis, minor_axis
-		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
-		}
-		
 		switch (this.side) {
 			case FRONT:
-				x = major_axis.midpoint()
-				z = minor_axis.a + painting_distance_from_wall + offset
+				x = this.vec.midpoint()
+				z = this.edge + painting_distance_from_wall
 				break
 			case BACK:
-				x = major_axis.midpoint()
-				z = minor_axis.b - painting_distance_from_wall + offset
+				x = this.vec.midpoint()
+				z = this.edge - painting_distance_from_wall
 				break
 			case LEFT:
-				x = minor_axis.a + painting_distance_from_wall + offset
-				z = major_axis.midpoint()
+				x = this.edge + painting_distance_from_wall
+				z = this.vec.midpoint()
 				break
 			case RIGHT:
-				x = minor_axis.b - painting_distance_from_wall + offset
- 				z = major_axis.midpoint()
+				x = this.edge - painting_distance_from_wall
+ 				z = this.vec.midpoint()
 				break
 		}
-		
+
 		return new vec2 (x, z)
 	}
 	
@@ -156,8 +196,6 @@
 	}
 	
 	Wall.prototype.outline = function(){
-		var canvas = document.createElement("canvas")
-		var ctx = canvas.getContext('2d')
 		var useX = this.side & FRONT_BACK
 		var shouldFlip = this.side & (LEFT | BACK)
 		var mx = this.mx
@@ -169,37 +207,33 @@
 
 		var len = this.mx.length
 		
+    var backgroundColor = "rgba(255,255,255,0.95)"
+    var borderColor = "rgba(0,0,0,1.0)"
+
 		zz = window.zz || 0
 
 		mx.forEach(function(mx, i){
 			if (mx.outlined) return
 			mx.outlined = true
-			canvas.width = mx.width
-			canvas.height = mx.height
-			ctx.fillStyle = "rgba(255,255,255,0.95)"
-			ctx.fillRect(0, 0, canvas.width, canvas.height)
-			ctx.fillStyle = "rgba(0,0,0,1.0)"
+      mx.el.style.backgroundColor = backgroundColor
 
 			// all walls get bottom lines
-			ctx.fillRect(0, 0, canvas.width, 1)
+			mx.el.style.borderBottom = "1px solid " + borderColor
 			
 			// all walls get top lines
-			ctx.fillRect(0, canvas.height-1, canvas.width, 1)
+			mx.el.style.borderTop = "1px solid " + borderColor
 			
 			// walls on initial sides get left lines
 			// if their left edge lines up with the rect edge
 			if (i == 0) {
- 				ctx.fillRect(0, 0, 1, canvas.height)
+        mx.el.style.borderLeft = "1px solid " + borderColor
 			}
 			
 			// walls on terminal sides get right lines....
 			// if their right edge lines up with the rect edge
 			if (i == len-1) {
-				ctx.fillRect(canvas.width-1, 0, 1, canvas.height)
+        mx.el.style.borderRight = "1px solid " + borderColor
 			}
-			var dataUrl = canvas.toDataURL()
-
-			mx.el.style.backgroundImage = "url(" + dataUrl + ")"
 		})
 	}
 	
@@ -215,7 +249,7 @@
 
 	Wall.prototype.randomize_colors = function(){
 		var color = window.grayColors[ this.side | this.half_side ]
-		this.color(color)
+		// this.color(color)
 	}
 
 	Wall.prototype.stroke_colors = function(){