merge

1 files changed, 193 insertions, 26 deletions

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 1a3ef7c..cf3cea8 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -10,21 +10,55 @@
 		vec2 = require('./vec2')
 		Rect = require('./rect')
 		UidGenerator = require('../util/uid')
+		wall_rotation = {}
+    wall_rotation[FRONT] = PI
+    wall_rotation[BACK] = 0
+    wall_rotation[LEFT] = HALF_PI
+    wall_rotation[RIGHT] = -HALF_PI
 	}
 	
 	var Wall = function(opt){
-		this.id = [ opt.side, opt.edge, opt.vec.a ].join("_")
+		this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_")
 		this.vec = opt.vec
 		this.edge = opt.edge
 		this.side = opt.side
 		this.surface = opt.surface
+		this.rotationY = ('rotationY' in opt) ? opt.rotationY : wall_rotation[opt.side]
 		this.mx = opt.mx
-		this.background = ""
+		this.background = { src: "none" }
 	}
 	
 	Wall.prototype.toString = function(){
 		return this.vec.toString()
 	}
+	Wall.prototype.get_points = function(wall_vec){
+		wall_vec = wall_vec || new Rect ()
+		if (this.side & LEFT) {
+			wall_vec.x.a = this.edge
+			wall_vec.x.b = this.vec.b
+			wall_vec.y.a = this.edge
+			wall_vec.y.b = this.vec.a
+		}
+		else if (this.side & RIGHT) {
+			wall_vec.x.a = this.edge
+			wall_vec.x.b = this.vec.a
+			wall_vec.y.a = this.edge
+			wall_vec.y.b = this.vec.b
+		}
+    else if (this.side & FRONT) {
+      wall_vec.x.a = this.vec.a
+      wall_vec.x.b = this.edge
+      wall_vec.y.a = this.vec.b
+      wall_vec.y.b = this.edge
+    }
+    else if (this.side & BACK) {
+      wall_vec.x.a = this.vec.b
+      wall_vec.x.b = this.edge
+      wall_vec.y.a = this.vec.a
+      wall_vec.y.b = this.edge
+    }
+    return wall_vec
+	}
 
 	Wall.prototype.reset = function(){
 	}
@@ -50,13 +84,66 @@
 						index: index,
 					})
 				},
+/*
 				mousemove: function(e){
+          var offset = offsetFromPoint(e, mx.el)
+          if (offset) {
+            var pos = base.mxOffsetToPosition( offset, index )
+            
+            var mx_pos = base.positionToMx(pos, new vec2(5,5))
+            var mx_dot = new MX.Object3D
+            mx_dot.move(mx_pos)
+            mx_dot.width = 5
+            mx_dot.height = 5
+            mx_dot.rotationY = base.rotationY
+            mx_dot.el.style.backgroundColor = "red"
+            scene.add(mx_dot)
+          }
 				},
+*/
+        contextmenu: function(e){
+          if (! (e.ctrlKey || e.metaKey || e.shiftKey) ) {
+            e.preventDefault()
+          }
+          if (Scenery.nextMedia) {
+            e.preventDefault()
+            Scenery.nextMedia = null
+            app.tube('cancel-scenery')
+          }
+          else if (Scenery.nextWallpaper) {
+            e.preventDefault()
+            Scenery.nextWallpaper = null
+            app.tube('cancel-wallpaper')
+          }
+        },
+
 				mousedown: function(e){
+				  
+				  // right-click
+				  if (e.which == 3) {
+				    if (Scenery.nextMedia) {
+				      e.preventDefault()
+              Scenery.nextMedia = null
+              app.tube('cancel-scenery')
+				    }
+				    else if (Scenery.nextWallpaper) {
+				      e.preventDefault()
+              Scenery.nextWallpaper = null
+              app.tube('cancel-wallpaper')
+				    }
+				    return
+				  }
+          
+          var offset = offsetFromPoint(e, mx.el)
+          if (! offset) { return }
+
+          var pos = base.mxOffsetToPosition( offset, index )
+
 					if (Scenery.nextMedia) {
             var scenery = Scenery.addNextToWall({
             	wall: base,
-            	index: index
+            	index: index,
+            	position: pos,
             })
             
             // scenery was not placed
@@ -64,20 +151,26 @@
             	e.stopPropagation()
             	return
             }
-					  
+
+            app.controller.toolbar.resetPermissions()
+            Scenery.resize.show(scenery)
+            Scenery.hovering = true 
+            
+            app.controller.pick(scenery)
+
   					UndoStack.push({
   					  type: 'create-scenery',
   					  undo: { id: scenery.id },
               redo: scenery.serialize(),
   					})
-
+  					
             // TODO: watch individual scenery object here
             Minotaur.watch( app.router.editorView.settings )
           }
 					else if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
-						Scenery.nextWallpaper = null
+						// Scenery.nextWallpaper = null
 
   					UndoStack.push({
   					  type: 'update-wallpaper',
@@ -87,11 +180,13 @@
 
             // TODO: watch individual scenery object here
             Minotaur.watch( app.router.editorView.settings )
+
+						app.controller.pickWall(base, pos)
           }
 					else {
-						app.controller.hideExtras()
+						app.controller.pickWall(base, pos)
 					}
-				}
+				},
 			})
 		})
 
@@ -100,12 +195,10 @@
 		if (! shouldFlip) {
 			this.mx.reverse()
 		}
-
-		// this.outline(wallColor, outlineColor)
 	}
 	
 	Wall.prototype.serialize = function(){
-	  return {
+	  return { 
 	    id: this.id,
 	    background: this.background,
 	  }
@@ -149,7 +242,7 @@
 		  x: x,
 		  y: position.b + dimension.b / 2,
 		  z: z,
-		  rotationY: wall_rotation[ this.side ],
+		  rotationY: this.rotationY,
 		}
 	}
 	Wall.prototype.mxToPosition = function(mx, dimension) {
@@ -172,30 +265,104 @@
 	  }
 	  return position
 	}
-	
+  Wall.prototype.mxOffsetToPosition = function( offset, index ) {
+    var face = this.surface.faces[index]
+    var shouldFlip = this.side & (RIGHT | FRONT)
+    var position = new vec2(0,0)
+    position.a = face.x.lerp(shouldFlip ? 1-offset.left : offset.left)
+    position.b = face.y.lerp(1-offset.top)
+    position.round()
+    return position
+  }
+
 	Wall.prototype.color = function(color){
 		this.$walls.css("background-color", color)
 	}
 	
-	Wall.prototype.wallpaper = function(background){
-		var useX = this.side & FRONT_BACK
-		var shouldFlip = this.side & (LEFT | BACK)
-		
-		this.background = background || "none"
+	Wall.prototype.wallpaper = function(background, img){
+	  if (! background) {
+	    background = { src: "none" }
+	  }
+	  else if (typeof background == "string") {
+	    background = { src: background }
+	  }
+	  else if (! background.src) {
+	    background = { src: "none" }
+	  }
+    background.x = background.x || 0
+    background.y = background.y || 0
+    background.scale = background.scale || 1
+
+		this.background = background
+    this.background.src = this.background.src.replace(/url\(\"?\'?/,"").replace(/\"?\'?\)/,"")
+
+		if (this.background.src == "none") {
+		  this.wallpaperLoad(this.background.src)
+		  return
+		}
 		
+		img = img || new Image ()
+		img.onload = function(){
+		  this.backgroundImage = img
+		  this.wallpaperLoad(this.background.src)
+		  this.wallpaperPosition(background)
+		}.bind(this)
+		img.src = this.background.src
+		img.complete && img.onload()
+	}
+	
+	Wall.prototype.wallpaperLoad = function(url){
+	  if (url !== "none") {
+	    url = "url(" + url + ")"
+	  }
 		this.mx.forEach(function(mx){
-      var partitionOffset = useX ? mx.x : mx.z
-      if (shouldFlip) partitionOffset *= -1
-      partitionOffset += mx.width/2
-      var floorOffset = mx.y + mx.height/2
-
-      mx.el.style.backgroundImage = background
-      mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px"
+      if (mx.el) mx.el.style.backgroundImage = url
     })
 	}
+
+	Wall.prototype.wallpaperPosition = function(background){
+	  if (this.background.src == "none") { return }
+
+	  this.background.x = background.x || this.background.x || 0
+	  this.background.y = background.y || this.background.y || 0
+	  this.background.scale = background.scale || this.background.scale || 1
+
+		var mx, dx, dy
+		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
+		var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale )
+
+		this.surface.faces.forEach(function(face, i){
+      // this.mx[i].el.innerHTML = sidesToString(this.side)
+
+      switch (this.side) {
+      	case LEFT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case RIGHT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case FRONT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case BACK:
+					mx = this.mx[i]
+					dx = Math.round( this.background.x - face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+      }
+      
+      mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
+      mx.el.style.backgroundSize = w + 'px ' + h + 'px'
+    }.bind(this))
+	}
 	
 	Wall.prototype.outline = function(wallColor, outlineColor){
-		var useX = this.side & FRONT_BACK
 		var mx = this.mx
 
 		var len = this.mx.length