resizing using dotsgh-pages

3 files changed, 62 insertions, 19 deletions

diff --git a/assets/javascripts/rectangles/engine/scenery/image/_image.js b/assets/javascripts/rectangles/engine/scenery/image/_image.js
index 767077b..dadb2d2 100644
--- a/assets/javascripts/rectangles/engine/scenery/image/_image.js
+++ b/assets/javascripts/rectangles/engine/scenery/image/_image.js
@@ -4,7 +4,8 @@ Scenery.image = function (wall, img) {
 	
 	base.wall = wall
 	base.img = img
-	base.center = wall.center_for(img)
+	base.dimensions = new vec2(img.width, img.height)
+	base.center = wall.center()
 	base.bounds = wall.bounds_for(img)
 
 	// should be proportional to distance from wall
@@ -34,13 +35,13 @@ Scenery.image = function (wall, img) {
 // 		base.resize.bind()
 		$(base.mx_img.el).bind({
 			mouseenter: function(e){
-				console.log('entered an image')
+// 				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')
+// 				console.log('left an image')
 				Scenery.resize.defer_hide(base)
 				Scenery.image.hovering = false
 			}
diff --git a/assets/javascripts/rectangles/engine/scenery/image/move.js b/assets/javascripts/rectangles/engine/scenery/image/move.js
index 0f6b0d9..e79ede9 100644
--- a/assets/javascripts/rectangles/engine/scenery/image/move.js
+++ b/assets/javascripts/rectangles/engine/scenery/image/move.js
@@ -60,7 +60,7 @@ Scenery.image.move = function(base){
 		if (! new_wall.fits(base.img)) return
 
 		base.bounds = bounds = new_wall.bounds_for(base.img)
-		base.center = new_wall.center_for(base.img)
+		base.center = new_wall.center()
 
 		x = base.center.a
 		z = base.center.b
diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js
index 52d61bd..a0a98c5 100644
--- a/assets/javascripts/rectangles/engine/scenery/image/resize.js
+++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js
@@ -5,8 +5,9 @@ Scenery.resize = new function(){
 	var obj
 	var x, y, z, bounds
 	var dragging = false
-	
-	var dots = [], dot
+	var dimensions, position
+
+	var dots = [], dot, selected_dot
 
 	base.init = function(){
 		base.build()
@@ -28,8 +29,7 @@ Scenery.resize = new function(){
 	// generate a dot element
 	base.build_dot = function(side) {
 		var dot = new MX.Object3D('.dot')
-		dot.width = 10
-		dot.height = 10
+		dot.width = dot.height = dot_side
 		dot.side = side
 		$(dot.el).on({
 			mouseenter: function(){ base.hovering = true },
@@ -54,9 +54,9 @@ Scenery.resize = new function(){
 	
 	// move all the dots to the object's current position
 	base.move_dots = function(){		
-		x = obj.mx_img.x + sin(rotationY) * 3
+		x = obj.mx_img.x + sin(rotationY) * dot_distance_from_picture
 		y = obj.mx_img.y
-		z = obj.mx_img.z - cos(rotationY) * 3
+		z = obj.mx_img.z - cos(rotationY) * dot_distance_from_picture
 
 		dots.forEach(function(dot){
 			base.move_dot(dot)
@@ -70,18 +70,18 @@ Scenery.resize = new function(){
 		dot.z = z
 		
 		if (dot.side & TOP) {
-			dot.y += obj.img.height / 2
+			dot.y += obj.mx_img.height * obj.mx_img.scale / 2
 		}
 		if (dot.side & BOTTOM) {
-			dot.y -= obj.img.height / 2
+			dot.y -= obj.mx_img.height * obj.mx_img.scale / 2
 		}
 		if (dot.side & LEFT) {
-			dot.x -= cos(rotationY) * obj.img.width / 2
-			dot.z -= sin(rotationY) * obj.img.width / 2
+			dot.x -= cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2
+			dot.z -= sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2
 		}
 		if (dot.side & RIGHT) {
-			dot.x += cos(rotationY) * obj.img.width / 2
-			dot.z += sin(rotationY) * obj.img.width / 2
+			dot.x += cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2
+			dot.z += sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2
 		}
 	}
 
@@ -118,16 +118,15 @@ Scenery.resize = new function(){
 			Scenery.mouse.bind_el(dot.el)
 			$(dot.el).bind({
 				mouseenter: function(e){
-					console.log('entered a dot')
 					Scenery.resize.hovering = true 
 				},
 				mouseleave: function(e){
-					console.log('left a dot')
 					Scenery.resize.hovering = false
 					base.defer_hide()
 				}
 			})
 		})
+		Scenery.mouse.on("down", down)
 		Scenery.mouse.on("drag", drag)
 		Scenery.mouse.on("up", up)
 	}
@@ -136,23 +135,66 @@ Scenery.resize = new function(){
 		dots.forEach(function(dot){
 			Scenery.mouse.unbind_el(dot.el)
 		})
+		Scenery.mouse.off("down", down)
 		Scenery.mouse.off("drag", drag)
 		Scenery.mouse.off("up", up)
 	}
 	
 	function down (e, cursor){
+		var selection = dots.filter(function(dot){return e.target == dot.el})
+		if (! selection.length) return
+		
+		selected_dot = selection[0]
 		dragging = true
-		bounds = obj.wall.bounds_for(img)
+		
+		dimensions = new vec2(obj.mx_img.width, obj.mx_img.height)
+		position = new vec3(obj.mx_img.x, obj.mx_img.y, obj.mx_img.z)
+
+		console.log("down on", sidesToString(selected_dot.side))
+		
 		document.body.classList.add("dragging")
 	}
 
 	function drag (e, cursor){
 		if (! dragging) return
 		// cursor.x.magnitude()*cursor_amp
+
+		var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0
+		var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0
+		
+		var translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp )
+
+		if (selected_dot.side & LEFT_RIGHT) {
+			obj.mx_img.width = dimensions.a + translation.a
+			obj.mx_img.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx_img.scale
+			obj.mx_img.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx_img.scale
+		}
+		if (selected_dot.side & TOP_BOTTOM) {
+			obj.mx_img.height = dimensions.b + translation.b
+			obj.mx_img.y = position.b - y_sign * translation.b/2 * obj.mx_img.scale
+		}
+		
+// 		bounds = obj.wall.bounds_for(dimensions)
+
+// 		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
+// 		}
+
+		base.move_dots()
+		
 	}
 
 	function up (e, cursor){
 		dragging = false
+		selected_dot = null
 		document.body.classList.remove("dragging")
 	}