splitting up move/resize

4 files changed, 235 insertions, 115 deletions

diff --git a/assets/javascripts/rectangles/engine/scenery/image.js b/assets/javascripts/rectangles/engine/scenery/image.js
deleted file mode 100644
index 6434603..0000000
--- a/assets/javascripts/rectangles/engine/scenery/image.js
+++ /dev/null
@@ -1,115 +0,0 @@
-Scenery.image = function (wall, img) {
-
-	var base = this
-	var center
-	var x = 0, y = 0, z = 0, bounds
-	var dragging = false
-
-	// should be proportional to distance from wall
-	var cursor_amp = 1.5
-	
-	base.init = function(){
-		base.build()
-		base.bind()
-	}
-	
-	base.build = function(){
-		center = wall.center_for(img)
-		base.mx_img = new MX.Image({
-			src: img.src,
-			x: center.a,
-			y: Rooms.list[wall.room].height/2 - img.height/2 - 20,
-			z: center.b,
-			scale: 300/img.naturalWidth,
-			rotationY: wall_rotation[ wall.side ],
-			backface: false,
-		})
-		scene.add( base.mx_img )
-	}
-	
-	base.bind = function(){
-		Scenery.mouse.bind_el(base.mx_img.el)
-		Scenery.mouse.on("down", down)
-		Scenery.mouse.on("enter", switch_wall)
-		Scenery.mouse.on("drag", drag)
-		Scenery.mouse.on("up", up)
-	}
-
-	function down (e, cursor){
-		if (e.target != base.mx_img.el) return;
-		dragging = true
-		x = base.mx_img.x
-		y = base.mx_img.y
-		z = base.mx_img.z
-		bounds = wall.bounds_for(img)
-		document.body.classList.add("dragging")
-	}
-	
-	function switch_wall (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)
-
-		x = center.a
-		z = center.b
-		
-		var wall_group = wall.side | new_wall.side
-		
-		if (wall.side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) {
-			switch (wall.side) {
-				case FRONT:
-					z = bounds.x.a
-					break
-				case BACK:
-					z = bounds.x.b
-					break
-				case LEFT:
-					x = bounds.x.a
-					break
-				case RIGHT:
-					x = bounds.x.b
-					break
-			}
-		}
-
-		cursor.x.a = cursor.x.b
-		
-		base.mx_img.move({
-			x: x,
-			z: z,
-			rotationY: wall_rotation[ new_wall.side ]
-		})
-		
-		wall = new_wall
-	}
-	
-	function drag (e, cursor){
-		if (! dragging) return
-		
-		base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
-		switch (wall.side) {
-			case FRONT:
-				base.mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
-				break
-			case BACK:
-				base.mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
-				break
-			case LEFT:
-				base.mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
-				break
-			case RIGHT:
-				base.mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
-				break
-		}
-	}
-
-	function up (e, cursor){
-		dragging = false
-		document.body.classList.remove("dragging")
-	}
-	
-	return base
-}
diff --git a/assets/javascripts/rectangles/engine/scenery/image/_image.js b/assets/javascripts/rectangles/engine/scenery/image/_image.js
new file mode 100644
index 0000000..ae6bea4
--- /dev/null
+++ b/assets/javascripts/rectangles/engine/scenery/image/_image.js
@@ -0,0 +1,46 @@
+Scenery.image = function (wall, img) {
+
+	var base = this
+	
+	base.wall = wall
+	base.img = img
+	base.center = wall.center_for(img)
+	base.bounds = wall.bounds_for(img)
+
+	// should be proportional to distance from wall
+	var cursor_amp = 1.5
+	
+	base.init = function(){
+		base.build()
+		base.bind()
+	}
+	
+	base.build = function(){
+		base.mx_img = new MX.Image({
+			src: img.src,
+			x: base.center.a,
+			y: Rooms.list[wall.room].height/2 - img.height/2 - 20,
+			z: base.center.b,
+			scale: 300/img.naturalWidth,
+			rotationY: wall_rotation[ wall.side ],
+			backface: false,
+		})
+		scene.add( base.mx_img )
+		base.move = new Scenery.image.move (base)
+		base.resize = new Scenery.image.resize (base)
+	}
+	
+	base.bind = function(){
+		base.move.bind()
+		base.resize.bind()
+		$(base.mx_img.el).bind({
+			mouseenter: function(e){
+				Scenery.mouse.mouseenter(e, base)
+			},
+			mouseleave: function(e){
+			}
+		})
+	}
+	
+	return base
+}
diff --git a/assets/javascripts/rectangles/engine/scenery/image/move.js b/assets/javascripts/rectangles/engine/scenery/image/move.js
new file mode 100644
index 0000000..deee0c9
--- /dev/null
+++ b/assets/javascripts/rectangles/engine/scenery/image/move.js
@@ -0,0 +1,96 @@
+Scenery.image.move =  function(base){
+
+	var x, y, z, bounds
+	var dragging = false
+
+	this.bind = function(){
+		Scenery.mouse.bind_el(base.mx_img.el)
+		Scenery.mouse.on("down", down)
+		Scenery.mouse.on("enter", switch_wall)
+		Scenery.mouse.on("drag", drag)
+		Scenery.mouse.on("up", up)
+	}
+
+	this.unbind = function(){
+		Scenery.mouse.bind_el(base.mx_img.el)
+		Scenery.mouse.off("down", down)
+		Scenery.mouse.off("enter", switch_wall)
+		Scenery.mouse.off("drag", drag)
+		Scenery.mouse.off("up", up)
+	}
+	
+	function down (e, cursor){
+		if (e.target != base.mx_img.el) return;
+		dragging = true
+		x = base.mx_img.x
+		y = base.mx_img.y
+		z = base.mx_img.z
+		bounds = base.bounds
+		document.body.classList.add("dragging")
+	}
+	
+	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:
+			case BACK:
+				base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
+				break
+			case LEFT:
+			case RIGHT:
+				base.mx_img.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
+				break
+		}
+	}
+
+	function up (e, cursor){
+		dragging = false
+		document.body.classList.remove("dragging")
+	}
+	
+	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
+
+		base.bounds = bounds = new_wall.bounds_for(base.img)
+		base.center = new_wall.center_for(base.img)
+
+		x = base.center.a
+		z = base.center.b
+		
+		var wall_group = base.wall.side | new_wall.side
+		
+		if (base.wall.side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) {
+			switch (base.wall.side) {
+				case FRONT:
+					z = bounds.x.a
+					break
+				case BACK:
+					z = bounds.x.b
+					break
+				case LEFT:
+					x = bounds.x.a
+					break
+				case RIGHT:
+					x = bounds.x.b
+					break
+			}
+		}
+
+		cursor.x.a = cursor.x.b
+		
+		base.mx_img.move({
+			x: x,
+			z: z,
+			rotationY: wall_rotation[ new_wall.side ]
+		})
+		
+		base.wall = new_wall
+	}
+	
+	return this
+
+}
\ No newline at end of file
diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js
new file mode 100644
index 0000000..9dbd349
--- /dev/null
+++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js
@@ -0,0 +1,93 @@
+Scenery.image.resize = function(base){
+
+	var x, y, z, bounds
+	var dragging = false
+	
+	var dots = [], dot
+
+	this.init = function(){
+		base.build()
+		base.bind()
+	}
+	
+	// create 9 dots at the corners of the div
+	this.build = function(){
+		[ TOP,
+			TOP_RIGHT,
+			RIGHT,
+			BOTTOM_RIGHT,
+			BOTTOM,
+			BOTTOM_LEFT,
+			LEFT,
+			TOP_LEFT ].forEach(base.build_dot)
+	}
+	
+	this.build_dot = function(direction) {
+		var dot = new MX.Dot ()
+		dot.direction = direction
+		switch (wall.side) {
+			case FRONT:
+			case BACK:
+				base.mx_img.x = bounds.x.clamp( x + sin(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp )
+				break
+			case LEFT:
+			case RIGHT:
+				base.mx_img.z = bounds.x.clamp( z + cos(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp )
+				break
+		}
+		base.dots.push(dot)
+	}
+
+	this.bind = function(){
+		dots.forEach(function(dot){
+			Scenery.mouse.bind_el(dot.el)
+		})
+		Scenery.mouse.on("drag", drag)
+		Scenery.mouse.on("up", up)
+	}
+
+	this.unbind = function(){
+		dots.forEach(function(dot){
+			Scenery.mouse.unbind_el(dot.el)
+		})
+		Scenery.mouse.off("drag", drag)
+		Scenery.mouse.off("up", up)
+	}
+	
+	
+	
+	function down (e, cursor){
+		dragging = true
+		x = base.mx_img.x
+		y = base.mx_img.y
+		z = base.mx_img.z
+		bounds = base.wall.bounds_for(img)
+		document.body.classList.add("dragging")
+	}
+
+	function drag (e, cursor){
+		if (! dragging) return
+		
+		base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
+		switch (wall.side) {
+			case FRONT:
+				base.mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
+				break
+			case BACK:
+				base.mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
+				break
+			case LEFT:
+				base.mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
+				break
+			case RIGHT:
+				base.mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
+				break
+		}
+	}
+
+	function up (e, cursor){
+		dragging = false
+		document.body.classList.remove("dragging")
+	}
+
+}