resizing using dotsgh-pages

7 files changed, 80 insertions, 25 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index e8ce9c1..972b1fe 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -3,11 +3,13 @@ var environment = new function(){}
 environment.init = function(){
 	if (window.scene) {
 		scene.camera.move({
-			"x": 1000,
+			"x": 0,
 			"y": 0,
-			"z": 250,
+			"z": 0,
 			"rotationX": 0, // PI/2,
 			"rotationY": PI/2, // PI
+// 			"rotationX": 0,
+// 			"rotationY": PI
 		})
 		
 		scene.camera.radius = 20
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")
 	}
 
diff --git a/assets/javascripts/rectangles/models/vec3.js b/assets/javascripts/rectangles/models/vec3.js
new file mode 100644
index 0000000..4e9f3cb
--- /dev/null
+++ b/assets/javascripts/rectangles/models/vec3.js
@@ -0,0 +1,5 @@
+function vec3(a,b,c){
+	this.a = a
+	this.b = b
+	this.c = c
+}
diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js
index 854b238..4270551 100644
--- a/assets/javascripts/rectangles/models/wall.js
+++ b/assets/javascripts/rectangles/models/wall.js
@@ -61,7 +61,7 @@ window.Wall = (function(){
 		return true
 	}
 	
-	Wall.prototype.center_for = function(img, offset){
+	Wall.prototype.center = function(offset){
 	
 		offset = offset || 0
 
diff --git a/assets/javascripts/rectangles/util/constants.js b/assets/javascripts/rectangles/util/constants.js
index 8ba6208..58cb1a5 100644
--- a/assets/javascripts/rectangles/util/constants.js
+++ b/assets/javascripts/rectangles/util/constants.js
@@ -5,7 +5,8 @@ var TOP = CEILING, BOTTOM = FLOOR,
 		TOP_LEFT = TOP | LEFT,
 		TOP_RIGHT = TOP | RIGHT,
 		BOTTOM_LEFT = BOTTOM | LEFT,
-		BOTTOM_RIGHT = BOTTOM | RIGHT
+		BOTTOM_RIGHT = BOTTOM | RIGHT,
+		TOP_BOTTOM = TOP | BOTTOM
 
 var height_min = 200,
 		height_max = 2000,
@@ -14,9 +15,11 @@ var height_min = 200,
 		resize_margin = 8,
 		cursor_amp = 1.5
 
-var painting_distance_from_wall = 8
+var painting_distance_from_wall = 8,
+		dot_distance_from_picture = 3
 
-var dot_hide_delay = 50 // ms
+var dot_hide_delay = 50, // ms
+		dot_side = 20
 
 var wall_rotation = {}
 wall_rotation[FRONT] = PI
@@ -32,6 +35,8 @@ function sidesToString(sides){
 	if (sides & BACK)  s += "back "
 	if (sides & LEFT)  s += "left "
 	if (sides & RIGHT) s += "right "
+	if (sides & TOP)  s += "top "
+	if (sides & BOTTOM) s += "bottom "
 	return s
 }