merge

7 files changed, 169 insertions, 84 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index c96885c..2fd6122 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -12,27 +12,37 @@ var Scenery = new function(){
 		base.resize.init()
 	}
 
-	base.add = function(wall, media, id){
+	base.add = function(opt){
 		var scene_media
-		switch (media.type) {
+		switch (opt.media.type) {
 			case 'image':
-				scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id })
+				scene_media = new Scenery.types.image (opt)
 				break
 			
 			case 'video':
 			case 'youtube':
 			case 'vimeo':
-				scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id })
+				scene_media = new Scenery.types.video (opt)
 				break
 		}
 		base.list[scene_media.id] = scene_media
 		return scene_media
 	}
 	
-	base.addNextToWall = function(wall){
-		var media = base.add(wall, base.nextMedia)
-		base.nextMedia = null
-		return media
+	base.addNextToWall = function(opt){
+		opt.media = base.nextMedia
+		opt.index = opt.index || 0
+		var scene_media = base.add(opt)
+		
+		// test if scenery was placed here
+		if (! scene_media.bounds) {
+			base.remove( scene_media.id )
+			return null
+		}
+		else {
+			base.nextMedia = null
+			return scene_media
+		}
 	}
 
 	base.find = function(id){
@@ -40,9 +50,15 @@ var Scenery = new function(){
 	}
 		
 	base.remove = function(id){
-		var media = base.list[id]
+		var scene_media = base.list[id]
 		delete base.list[id]
-		media && media.destroy()
+		scene_media && scene_media.destroy()
+	}
+	
+	base.removeAll = function(){
+		base.forEach(function(scene_media){
+			base.remove(scene_media.id)
+		})
 	}
 
 	base.uid = new UidGenerator(base.list)
@@ -68,9 +84,13 @@ var Scenery = new function(){
 
 	base.deserialize = function(scenery_data){
 		scenery_data.forEach(function(data){
-			var wall = Rooms.walls[data.wall_id]
-			var scene_media = base.add(wall, data.media, data.id)
-			scene_media.deserialize(data)
+			var wall = Rooms.walls[data.wall_id] || Rooms.walls[0]
+			var scene_media = base.add({
+			  data: data,
+				wall: wall,
+				media: data.media,
+				id: data.id
+			})
 		})
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index ef9bc32..93bccb0 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -1,7 +1,7 @@
 
 Scenery.move = function(base){
 
-	var x, y, z, bounds
+	var x, y, z, position, dimension, bounds
 	var dragging = false
 	var oldState
 
@@ -30,6 +30,9 @@ Scenery.move = function(base){
         redo: { id: base.id },
       })
 
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+
 			Scenery.remove(base.id)
 			return
 		}
@@ -45,7 +48,11 @@ Scenery.move = function(base){
 		x = base.mx.x
 		y = base.mx.y
 		z = base.mx.z
+		
 		bounds = base.bounds
+		dimension = base.dimensions
+		position = base.wall.mxToPosition( base.mx, dimension )
+		
 		oldState = base.serialize()
 		document.body.classList.add("dragging")
 	}
@@ -53,18 +60,28 @@ Scenery.move = function(base){
 	function drag (e, cursor){
 		if (! dragging) return
 
-		base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
+		var flipX = base.wall.side & (FRONT | RIGHT)
+
+		var delta = cursor.delta()
+		delta.mul( cursor_amp ) // TODO: this should be proportional to your distance from the wall
+		if (flipX) { delta.a *= -1 }
+		delta.b *= -1
+
+		var new_bounds = base.wall.surface.translate( bounds, dimension, position, delta )
+		if (new_bounds) bounds = new_bounds
+		if (flipX) { delta.a *= -1 }
+
+		base.mx.y = position.b + delta.b + dimension.b / 2
 		switch (base.wall.side) {
 			case FRONT:
 			case BACK:
-				base.mx.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
+				base.mx.x = position.a + delta.a * cos(wall_rotation[base.wall.side]) + dimension.a / 2
 				break
 			case LEFT:
 			case RIGHT:
-				base.mx.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
+				base.mx.z = position.a + delta.a * sin(wall_rotation[base.wall.side]) + dimension.a / 2
 				break
 		}
-		
 		if (editor.permissions.resize) {
 			Scenery.resize.move_dots()
 		}
@@ -76,60 +93,62 @@ Scenery.move = function(base){
 		dragging = false
 		document.body.classList.remove("dragging")
 
-    console.log("pushing", oldState, base.serialize())
-
     UndoStack.push({
       type: 'update-scenery',
       undo: oldState,
       redo: base.serialize(),
     })
-    
+
+    // TODO: watch individual scenery object here
+    Minotaur.watch( app.router.editorView.settings )
+
     oldState = null
 	}
 	
-	function switch_wall (e, new_wall, cursor){
+	function switch_wall (e, target, cursor){
 		if (! dragging) return
-		if (new_wall.uid == base.wall.uid) return
-		if (! new_wall.fits(base.media, base.scale)) return
-
+		if (target.wall.id == base.wall.id) return
+		
 		var old_wall_side = base.wall.side
-		var wall_group = old_wall_side | new_wall.side
+		var wall_group = old_wall_side | target.wall.side
+		var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension)
 
-		base.set_wall(new_wall)
+		if (! new_bounds) return
 
-		bounds = base.bounds
-		x = base.center.a
-		z = base.center.b
-		
-		if (old_wall_side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) {
+		base.wall = target.wall
+		base.bounds = bounds = new_bounds
+
+		position.a = bounds.x.midpoint() - dimension.a / 2
+
+		if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) {
 			switch (old_wall_side) {
 				case FRONT:
-					z = bounds.x.a
+					position.a = bounds.x.a + dimension.a / 2
 					break
 				case BACK:
-					z = bounds.x.b
+					position.a = bounds.x.b - dimension.a / 2
 					break
 				case LEFT:
-					x = bounds.x.a
+					position.a = bounds.x.a + dimension.a / 2
 					break
 				case RIGHT:
-					x = bounds.x.b
+					position.a = bounds.x.b - dimension.a / 2
 					break
 			}
 		}
 
-		cursor.x.a = cursor.x.b
-		
-		base.mx.move({
-			x: x,
-			z: z,
-			rotationY: wall_rotation[ new_wall.side ]
-		})
+		var mx_delta = base.wall.positionToMx( position, dimension )
+		base.mx.move(mx_delta)
 
 		if (editor.permissions.resize) {
 			Scenery.resize.rotate_dots()
-			Scenery.resize.move_dots()
+// 			Scenery.resize.move_dots()
 		}
+
+		cursor.x.a = cursor.x.b
+		//var delta = cursor.delta()
+		drag(e, cursor)
+
 	}
 	
 	return this
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index c5c754a..d9cce18 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -6,7 +6,7 @@ Scenery.resize = new function(){
 	var obj
 	var x, y, z, bounds
 	var dragging = false
-	var dimensions, position, scale
+	var naturalDimension, dimension, position, scale
 	var oldState
 
 	var dots = [], dot, selected_dot
@@ -148,8 +148,9 @@ Scenery.resize = new function(){
 		
 		selected_dot = selection[0]
 		dragging = true
-		
-		dimensions = obj.dimensions
+
+		naturalDimension = obj.naturalDimensions
+		dimension = obj.dimensions
 		position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z)
 		scale = obj.mx.scale
 		oldState = obj.serialize()
@@ -165,7 +166,7 @@ Scenery.resize = new function(){
 		var width = cursor.x.magnitude()
 		var height = cursor.y.magnitude()
 		var mag = cursor.magnitude()
-		var old_width = dimensions.a * scale
+		var old_width = dimension.a * scale
 
 		if (abs(width) > abs(height)) {
 			mag = x_sign * mag * sign(width)
@@ -173,8 +174,10 @@ Scenery.resize = new function(){
 		else {
 			mag = y_sign * mag * sign(height)
 		}
-		
- 		obj.mx.scale = scale * (old_width + mag) / old_width
+
+ 		obj.mx.scale = ( dimension.a + mag ) / naturalDimension.a // dimension.a // scale * (old_width + mag) / old_width
+
+// console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a)
 
 		if (selected_dot.side & LEFT_RIGHT) {
 			obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign)
@@ -192,7 +195,7 @@ Scenery.resize = new function(){
 		selected_dot = null
 		if (! editor.permissions.resize) { return }
 		obj.scale = obj.mx.ops.scale = obj.mx.scale
-		obj.set_wall()
+		obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale)
 		
     UndoStack.push({
       type: 'update-scenery',
@@ -200,6 +203,9 @@ Scenery.resize = new function(){
       redo: obj.serialize(),
     })
 
+    // TODO: watch individual scenery object here
+    Minotaur.watch( app.router.editorView.settings )
+
 		document.body.classList.remove("dragging")
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 66e0faf..2dbae48 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -8,12 +8,34 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.id = opt.id || Scenery.uid("scenery")
 			this.move = new Scenery.move (this)
 			this.media = opt.media
-			this.dimensions = new vec2(this.media.width, this.media.height)
-			this.scale = this.media.scale
+			this.naturalDimensions = new vec2(this.media.width, this.media.height)
+			
+			this.set_scale( opt.scale || this.media.scale || 1.0 )
+			this.position = new vec2(0,0)
+		},
 
-			if (opt.wall) {
-				this.set_wall(opt.wall)
+		set_wall: function(opt){
+			this.wall = opt.wall || this.wall
+			if (! this.wall) return
+			this.bounds = this.wall.surface.bounds_at_index_with_dimensions(opt.index || 0, this.dimensions)
+		},
+		
+		set_scale: function(scale){
+			this.scale = scale || 1.0
+			if (this.mx) {
+				this.mx.scale = this.mx.ops.scale = this.scale
 			}
+			this.dimensions = this.naturalDimensions.clone().mul(this.scale)
+		},
+		
+		recenter: function () {
+			if (! this.bounds) return
+			var center = this.bounds.center()
+			center.a -= this.dimensions.a / 2
+			center.b -= this.dimensions.b / 2
+			var mx_position = this.wall.positionToMx( center, this.dimensions )
+			this.mx.move(mx_position)
+			this.position.assign(center)
 		},
 		
 		bind: function(){
@@ -41,6 +63,7 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.move = null
 			this.media = null
 			this.dimensions = null
+			this.naturalDimensions = null
 			this.wall = null
 			this.bounds = null
 			this.center = null
@@ -60,34 +83,14 @@ Scenery.types.base = Fiber.extend(function(base){
 			}
 		},
 
-		set_wall: function(wall){
-			this.wall = wall || this.wall
-			this.bounds = this.wall.bounds_for(this.media, this.scale)
-			this.center = this.wall.center()
-		},
-		
-		set_scale: function(scale){
-			this.scale = this.mx.scale = this.mx.ops.scale = scale || 1.0
-		},
-		
-		recenter: function(){
-			this.mx.move({
-				x: this.center.a,
-				y: Rooms.list[this.wall.room].height/2 - 20,
-				z: this.center.b,
-				scale: this.scale,
-				rotationY: wall_rotation[ this.wall.side ],
-			})
-		},
-		
 		serialize: function(){
 			var data = {
 				id: this.id,
-				room_id: this.wall.room_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),
+				scale: this.scale,
 				media: this.media,
 			}
 			return data
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index 99c1810..d2fa3ab 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -4,13 +4,26 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 	var exports = {
 	
 		init: function(opt){
+
+			opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width)
+
 			base.init.call(this, opt)
-			this.scale = 300 / max(300, this.media.width)
 
 			this.build()
 			this.bind()
-			this.set_wall()
-			this.recenter()
+			
+			if (opt.data) {
+        if (opt.wall) {
+        	var position = opt.wall.mxToPosition(opt.data.position)
+        	opt.index = opt.wall.surface.index_for_x( position.a, 0 )
+        }
+      	this.set_wall(opt)
+        this.deserialize(opt.data)
+      }
+      else {
+      	this.set_wall(opt)
+        this.bounds && this.recenter()
+      }
 		},
 
 		build: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index a8df875..e8bc7f7 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -4,13 +4,19 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 	var exports = {
 	
 		init: function(opt){
+			opt.scale = opt.scale || 300 / max(300, opt.media.width)
+			
 			base.init.call(this, opt)
-			this.scale = this.media.scale = 300 / max(300, this.media.width)
 
 			this.build()
 			this.bind()
-			this.set_wall()
-			this.recenter()
+			
+			if (opt.data) {
+        this.deserialize(opt.data)
+      }
+      else {
+        this.recenter()
+      }
 		},
 
 		build: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index 7798550..54ab755 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -4,9 +4,15 @@
 			type: "create-scenery",
       undo: function(state){
         Scenery.remove(state.id)
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
       redo: function(state){
         Scenery.deserialize([ state ])
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
 		},
 		{
@@ -19,6 +25,9 @@
         if (editor.permissions.resize) {
           Scenery.resize.show(scenery)
         }
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
       redo: function(state){
         var scenery = Scenery.find(state.id)
@@ -30,15 +39,24 @@
           Scenery.resize.rotate_dots()
           Scenery.resize.move_dots()
         }
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
 		},
 		{
 			type: "destroy-scenery",
       undo: function(state){
         Scenery.deserialize([ state ])
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
       redo: function(state){
         Scenery.remove(state.id)
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
       },
 		},