serialize/deserialize scenery

1 files changed, 201 insertions, 0 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
new file mode 100644
index 0000000..2a400f5
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -0,0 +1,201 @@
+
+Scenery.resize = new function(){
+
+	var base = this
+	
+	var obj
+	var x, y, z, bounds
+	var dragging = false
+	var dimensions, position
+
+	var dots = [], dot, selected_dot
+
+	base.init = function(){
+		base.build()
+		base.bind()
+	}
+	
+	// create 9 dots at the corners of the div
+	base.build = function(){
+		[ TOP,
+			TOP_RIGHT,
+			RIGHT,
+			BOTTOM_RIGHT,
+			BOTTOM,
+			BOTTOM_LEFT,
+			LEFT,
+			TOP_LEFT ].forEach(base.build_dot)
+	}
+	
+	// generate a dot element
+	base.build_dot = function(side) {
+		var dot = new MX.Object3D('.dot')
+		dot.width = dot.height = dot_side
+		dot.side = side
+		$(dot.el).on({
+			mouseenter: function(){ base.hovering = true },
+			mouseleave: function(){ base.hovering = false },
+		})
+		dots.push(dot)
+	}
+
+	base.add_dots = function(){
+		dots.forEach(function(dot){
+			scene.add(dot)
+		})
+	}
+	
+	// rotate the dots as appropriate
+	base.rotate_dots = function(){
+		rotationY = wall_rotation[obj.wall.side]
+		dots.forEach(function(dot){
+			dot.rotationY = rotationY
+		})
+	}
+	
+	// move all the dots to the object's current position
+	base.move_dots = function(){		
+		x = obj.mx.x + sin(rotationY) * dot_distance_from_picture
+		y = obj.mx.y
+		z = obj.mx.z - cos(rotationY) * dot_distance_from_picture
+
+		dots.forEach(function(dot){
+			base.move_dot(dot)
+		})
+	}
+		
+	// move a dot .. to the initial position of the image
+	base.move_dot = function(dot){
+		dot.x = x
+		dot.y = y
+		dot.z = z
+		
+		if (dot.side & TOP) {
+			dot.y += obj.mx.height * obj.mx.scale / 2
+		}
+		if (dot.side & BOTTOM) {
+			dot.y -= obj.mx.height * obj.mx.scale / 2
+		}
+		if (dot.side & LEFT) {
+			dot.x -= cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+			dot.z -= sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+		}
+		if (dot.side & RIGHT) {
+			dot.x += cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+			dot.z += sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2
+		}
+	}
+
+	// pick a new object to focus on and show the dots
+	base.show = function(new_object) {
+		if (obj === new_object) return
+		obj = new_object
+		
+		base.add_dots()
+		base.rotate_dots()
+		base.move_dots()
+	}
+
+	// dismiss the dots on blur
+	var dotsHideTimeout;
+	base.defer_hide = function(){
+		clearTimeout(dotsHideTimeout)
+
+		dotsHideTimeout = setTimeout(function(){
+			if (Scenery.hovering || Scenery.resize.hovering || Scenery.mouse.down) return
+			Scenery.resize.hide()
+		}, dot_hide_delay)
+	}
+	base.hide = function () {
+		obj = null
+		dots.forEach(function(dot){
+			scene.remove(dot)
+		})
+	}
+	
+	base.bind = function(){
+		dots.forEach(function(dot){
+			Scenery.mouse.bind_el(dot.el)
+			$(dot.el).bind({
+				mouseenter: function(e){
+					Scenery.resize.hovering = true 
+				},
+				mouseleave: function(e){
+					Scenery.resize.hovering = false
+					base.defer_hide()
+				}
+			})
+		})
+		Scenery.mouse.on("down", down)
+		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("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
+		
+		dimensions = new vec2(obj.mx.width, obj.mx.height)
+		position = new vec3(obj.mx.x, obj.mx.y, obj.mx.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.width = dimensions.a + translation.a
+			obj.mx.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx.scale
+			obj.mx.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx.scale
+		}
+		if (selected_dot.side & TOP_BOTTOM) {
+			obj.mx.height = dimensions.b + translation.b
+			obj.mx.y = position.b - y_sign * translation.b/2 * obj.mx.scale
+		}
+		
+// 		bounds = obj.wall.bounds_for(dimensions)
+
+// 		base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
+// 		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 )
+// 				break
+// 			case LEFT:
+// 			case RIGHT:
+// 				base.mx.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")
+	}
+
+}