dragging new media between walls

5 files changed, 15 insertions, 21 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index d1e292d..15bf050 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -10,6 +10,7 @@ MX.Image = MX.Object3D.extend({
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
 		layer.backface = ops.backface || false
+		layer.media = ops.media
 		
 		if (layer.backface) {
 			layer.el.classList.add("backface-visible")
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 908a2d0..9096de0 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -59,7 +59,6 @@ var Scenery = new function(){
 	}
 	base.addNextToWall = function(wall){
 		base.add(wall, base.nextMedia)
-		console.log("add next to wall")
 		base.nextMedia = null
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
index b6f7de1..bcb7c23 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js
@@ -1,9 +1,10 @@
 Scenery.image = function (wall, media) {
 
 	var base = this
-	
+
 	base.wall = wall
 	base.media = media
+	base.scale = media.scale = 300 / max(300, media.width)
 	base.dimensions = new vec2(media.width, media.height)
 	base.center = wall.center()
 	base.bounds = wall.bounds_for(media)
@@ -20,9 +21,9 @@ Scenery.image = function (wall, media) {
 		base.mx_img = new MX.Image({
 			src: media.url,
 			x: base.center.a,
-			y: Rooms.list[wall.room].height/2 - media.height/2 - 20,
+			y: Rooms.list[wall.room].height/2 - (base.scale * media.height)/2 - 20,
 			z: base.center.b,
-			scale: 300/media.width,
+			scale: base.scale,
 			rotationY: wall_rotation[ wall.side ],
 			backface: false,
 		})
@@ -32,16 +33,12 @@ Scenery.image = function (wall, media) {
 	
 	base.bind = function(){
 		base.move.bind()
-// 		base.resize.bind()
 		$(base.mx_img.el).bind({
 			mouseenter: function(e){
-// 				console.log('entered an image')
-				// show the resize points for this image
 				Scenery.resize.show(base)
 				Scenery.image.hovering = true
 			},
 			mouseleave: function(e){
-// 				console.log('left an image')
 				Scenery.resize.defer_hide(base)
 				Scenery.image.hovering = false
 			}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
index 188a3f4..2921c0a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js
@@ -8,7 +8,6 @@ Scenery.image.move = function(base){
 	this.bind = function(){
 		Scenery.mouse.bind_el(base.mx_img.el)
 		Scenery.mouse.on("down", down)
-		Scenery.mouse.on("move", move)
 		Scenery.mouse.on("enter", switch_wall)
 		Scenery.mouse.on("drag", drag)
 		Scenery.mouse.on("up", up)
@@ -17,7 +16,6 @@ Scenery.image.move = function(base){
 	this.unbind = function(){
 		Scenery.mouse.bind_el(base.mx_img.el)
 		Scenery.mouse.off("down", down)
-		Scenery.mouse.off("move", move)
 		Scenery.mouse.off("enter", switch_wall)
 		Scenery.mouse.off("drag", drag)
 		Scenery.mouse.off("up", up)
@@ -33,13 +31,9 @@ Scenery.image.move = function(base){
 		document.body.classList.add("dragging")
 	}
 	
-	function move (e, cursor){
-		console.log("hey")
-	}
-	
 	function drag (e, cursor){
 		if (! dragging) return
-		
+
 		base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
 		switch (base.wall.side) {
 			case FRONT:
@@ -63,9 +57,9 @@ Scenery.image.move = function(base){
 	function switch_wall (e, new_wall, cursor){
 		if (! dragging) return
 		if (new_wall.uid == base.wall.uid) return
-		if (! new_wall.fits(base.img)) return
+		if (! new_wall.fits(base.media)) return
 
-		base.bounds = bounds = new_wall.bounds_for(base.img)
+		base.bounds = bounds = new_wall.bounds_for(base.media)
 		base.center = new_wall.center()
 
 		x = base.center.a
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 6c20444..e327070 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -51,14 +51,17 @@ window.Wall = (function(){
 	
 	Wall.prototype.bounds_for = function(img) {
 		var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y
-		return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ),
-		                 new vec2( img.height/2, Rooms.list[this.room].height - img.height/2 ) )
+		var halfWidth = img.width/2 * img.scale
+		var halfHeight = img.height/2 * img.scale
+
+		return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ),
+		                 new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) )
 	}
 	Wall.prototype.fits = function(img){
-		if (this.side & FRONT_BACK && this.rect.x.length() < img.width) {
+		if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) {
 			return false
 		}
-		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) {
+		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) {
 			return false
 		}
 		return true