dragging between walls

4 files changed, 149 insertions, 52 deletions

diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js
index c9be6ef..4ac03b8 100644
--- a/assets/javascripts/rectangles/engine/scenery.js
+++ b/assets/javascripts/rectangles/engine/scenery.js
@@ -7,6 +7,8 @@ wall_rotation[RIGHT] = -HALF_PI
 var scenery = new function(){
 	
 	var base = this;
+
+	base.mouse = new mouse ()
 	
 	base.init = function(){
 		var urls = [
@@ -15,7 +17,6 @@ var scenery = new function(){
 			"http://2.bp.blogspot.com/-apEunnES6wU/UGdc6skZqzI/AAAAAAAAB3k/D6yO6llpFcg/s1600/Sunny+Side+Duck.JPG",
 			"http://imagecache.artistrising.com/artwork/lrg//5/559/5UD2000A.jpg",
 			"http://media-cache-ec0.pinimg.com/736x/fc/a7/31/fca731130ffb964a434fb90edecd22c3.jpg",
-			
 		]
 		var loader = new Loader(function(){
 			base.load(loader.images)
@@ -38,41 +39,25 @@ var scenery = new function(){
 	
 	function new_image (wall, img) {
 		var x, z
-		if (wall.side & FRONT_BACK && wall.rect.x.length() < img.width) {
-			return
-		}
-		if (wall.side & LEFT_RIGHT && wall.rect.y.length() < img.width) {
-			return
-		}
-
-		switch (wall.side) {
-			case FRONT:
-				x = wall.rect.x.a + wall.rect.x.length()/2
-				z = wall.rect.y.a + 10
-				break
-			case BACK:
-				x = wall.rect.x.a + wall.rect.x.length()/2
-				z = wall.rect.y.b - 10
-				break
-			case LEFT:
-				x = wall.rect.x.a + 10
-				z = wall.rect.y.a + wall.rect.y.length()/2
-				break
-			case RIGHT:
-				x = wall.rect.x.b - 10
- 				z = wall.rect.y.a + wall.rect.y.length()/2
-				break
-		}
+		
+		if (! wall.fits(img)) return
 
 		var mx_img = new MX.Image({
 			src: img.src,
-			x: x,
+			x: 0,
 			y: clipper.rooms[wall.room].height/2 - img.height/2 - 20,
-			z: z,
+			z: 0,
 			scale: 300/img.naturalWidth,
-			rotationY: wall_rotation[ wall.side ],
+			rotationY: 0,
 			backface: false,
 		})
+
+		var center = wall.center_for(img)
+		mx_img.move({
+			x: center.a,
+			z: center.b,
+			rotationY: wall_rotation[ wall.side ]
+		})
 		scene.add(mx_img)
 
 		// https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png
@@ -81,15 +66,37 @@ var scenery = new function(){
 
 		// should be proportional to distance from wall
 		var cursor_amp = 1.5
+		var dragging = false
 		
-		my_mouse = new mouse ({ el: mx_img.el })
-		my_mouse.tube.on("down", function(e, cursor){
+		base.mouse.bind_el(mx_img.el)
+		base.mouse.tube.on("down", function(e, cursor){
+			if (e.target != mx_img.el) return;
+			dragging = true
 			x = mx_img.x
 			y = mx_img.y
 			z = mx_img.z
+			mx_img.el.style.pointerEvents = "none"
 			bounds = wall.bounds_for(img)
 		})
-		my_mouse.tube.on("drag", function(e, cursor){
+		base.mouse.tube.on("enter", function(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, cursor.x.magnitude())
+
+			mx_img.move({
+				x: center.a,
+				z: center.b,
+				rotationY: wall_rotation[ new_wall.side ]
+			})
+
+			cursor.x.invert()
+						
+			wall = new_wall
+		})
+		base.mouse.tube.on("drag", function(e, cursor){
+			if (! dragging) return
 			mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
 			switch (wall.side) {
 				case FRONT:
@@ -106,7 +113,9 @@ var scenery = new function(){
 					break
 			}
 		})
-		my_mouse.tube.on("up", function(e, cursor){
+		base.mouse.tube.on("up", function(e, cursor){
+			dragging = false
+			mx_img.el.style.pointerEvents = "auto"
 		})
 	}
 		
diff --git a/assets/javascripts/rectangles/models/vec2.js b/assets/javascripts/rectangles/models/vec2.js
index 7307fca..9b0447c 100644
--- a/assets/javascripts/rectangles/models/vec2.js
+++ b/assets/javascripts/rectangles/models/vec2.js
@@ -13,12 +13,16 @@ vec2.prototype.clone = function(){
 }
 vec2.prototype.abs = function(){
 	if (this.b < this.a) {
-		this.a = this.a ^ this.b
-		this.b = this.a ^ this.b
-		this.a = this.a ^ this.b
+		this.invert()
 	}
 	return this
 }
+vec2.prototype.invert = function(){
+	this.a = this.a ^ this.b
+	this.b = this.a ^ this.b
+	this.a = this.a ^ this.b
+	return this
+}
 vec2.prototype.midpoint = function(){
 	return lerp(0.5, this.a, this.b)
 }
@@ -45,7 +49,7 @@ vec2.prototype.div = function(n){
 	this.b /= n
 	return this
 }
-vec2.normalize = function(){
+vec2.prototype.normalize = function(){
 	var dim = max(this.a, this.b)
 	this.a = this.a/dim
 	this.b = this.b/dim
@@ -85,7 +89,7 @@ vec2.prototype.intersection = function(v){
 	}
 }
 vec2.prototype.toString = function(){
-	return "[" + this.a + " " + this.b + "]"
+	return "[" + ~~this.a + " " + ~~this.b + "]"
 }
 vec2.prototype.quantize = function(n){
 	n = n || 10
diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js
index baaac43..97083c7 100644
--- a/assets/javascripts/rectangles/models/wall.js
+++ b/assets/javascripts/rectangles/models/wall.js
@@ -2,6 +2,7 @@ window.Wall = (function(){
 
 	var Wall = function(opt){
 		this.id = opt.id
+		this.uid = Uid()
 		this.room = opt.room
 		this.rect = opt.rect || new Rect (0,0,0,0)
 		this.rect.sides = opt.side
@@ -32,6 +33,9 @@ window.Wall = (function(){
 		base.$walls.bind({
 			mouseover: function(){
 			},
+			mouseenter: function(e){
+				scenery.mouse.mouseenter(e, base)
+			},
 			mousemove: function(e){
 			},
 			mousedown: function(){
@@ -45,17 +49,82 @@ window.Wall = (function(){
 		return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ),
 		                 new vec2( img.height/2, clipper.rooms[this.room].height - img.height/2 ) )
 	}
+	Wall.prototype.fits = function(img){
+		if (this.side & FRONT_BACK && this.rect.x.length() < img.width) {
+			return false
+		}
+		if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) {
+			return false
+		}
+		return true
+	}
+	
+	Wall.prototype.center_for = function(img, gravity){
+		var left
+		gravity = gravity || 0
+		
+		var major_axis, minor_axis
+		if (this.side & FRONT_BACK) {
+			major_axis = this.rect.x
+			minor_axis = this.rect.y
+		}
+		else {
+			minor_axis = this.rect.x
+			major_axis = this.rect.y
+		}
+
+		// left side addition
+		if (gravity > 0) {
+			console.log("gravity left")
+			left = major_axis.b - img.width/2
+		}
+		// right side addition
+		else if (gravity < 0) {
+			console.log("gravity right")
+			left = major_axis.a + img.width/2
+		}
+		else {
+			left = major_axis.midpoint()
+		}
+
+		switch (this.side) {
+			case FRONT:
+				x = left
+				z = minor_axis.a + 10
+				break
+			case BACK:
+				x = left
+				z = minor_axis.b - 10
+				break
+			case LEFT:
+				x = minor_axis.a + 10
+				z = left
+				break
+			case RIGHT:
+				x = minor_axis.b - 10
+ 				z = left
+				break
+		}
+		
+		return new vec2 (x, z)
+	}
 	
 	Wall.prototype.color = function(color){
 		this.$walls && this.$walls.css("background-color", color)
 	}
 	
-	Wall.prototype.randomize_colors = function(){
+	Wall.prototype.siblings = function(){
 		var base = this
 		var match = base.side | base.half_side
-		var walls = clipper.rooms[this.room].walls.filter(function(w){ return (w.side | w.half_side) & match })
+		var walls = clipper.rooms[this.room].walls.filter(function(w){
+			return (w.side | w.half_side) & match
+		})
+		return walls;
+	}
+
+	Wall.prototype.randomize_colors = function(){
 		var color = choice(window.colors)
-		walls.forEach(function(w){ w.color(color) })
+		this.siblings().forEach(function(w){ w.color(color) })
 	}
 
 	return Wall
diff --git a/assets/javascripts/rectangles/util/mouse.js b/assets/javascripts/rectangles/util/mouse.js
index 87a68fc..3bd5876 100644
--- a/assets/javascripts/rectangles/util/mouse.js
+++ b/assets/javascripts/rectangles/util/mouse.js
@@ -24,10 +24,11 @@ function mouse (opt) {
 	var base = this
 
 	opt = defaults(opt, {
-		el: document,
+		el: null,
 		down: null,
 		move: null,
 		drag: null,
+		enter: null,
 		up: null,
 		rightclick: null,
 		propagate: false,
@@ -46,33 +47,42 @@ function mouse (opt) {
 	opt.down && base.tube.on("down", opt.down)
 	opt.move && base.tube.on("move", opt.move)
 	opt.drag && base.tube.on("drag", opt.drag)
+	opt.enter && base.tube.on("enter", opt.enter)
 	opt.up && base.tube.on("up", opt.up)
 	opt.rightclick && base.tube.on("rightclick", opt.rightclick)
 	
-	var offset = opt.el.getBoundingClientRect()
+	var offset = opt.el ? opt.el.getBoundingClientRect() : null
 	
 	base.init = function (){
 		base.bind()
 	}
 
 	base.bind = function(){
-		opt.el.addEventListener("mousedown", base.mousedown)
+		if (opt.el) {
+			opt.el.addEventListener("mousedown", base.mousedown)
+			opt.el.addEventListener("contextmenu", base.contextmenu)
+		}
 		window.addEventListener("mousemove", base.mousemove)
 		window.addEventListener("mouseup", base.mouseup)
-		opt.el.addEventListener("contextmenu", base.contextmenu)
+	}
+	base.bind_el = function(el){
+		el.addEventListener("mousedown", base.mousedown)
+		// todo.. need a way to remove this event potentially?
 	}
 
 	function positionFromMouse(e) {
-		var mx = offset.left - e.pageX
-		var my = e.pageY - offset.top
-
-		return new vec2(mx, my)
+		if (offset) {
+			return new vec2(offset.left - e.pageX, e.pageY - offset.top)
+		}
+		else {
+			return new vec2(-e.pageX, e.pageY)
+		}
 	}
 
 	base.mousedown = function(e){
 		e.stopPropagation()
-		
-		offset = opt.el.getBoundingClientRect()
+
+		offset = this.getBoundingClientRect()
 		
 		var pos = positionFromMouse(e)
 		
@@ -85,7 +95,7 @@ function mouse (opt) {
 	base.mousemove = function(e){
 		e.stopPropagation()
 		
-		if (! offset) return;
+		if (! offset) return
 		
 		var pos = positionFromMouse(e)
 
@@ -106,6 +116,11 @@ function mouse (opt) {
 			base.tube("move", e, base.cursor)
 		}
 	}
+	base.mouseenter = function(e, el){
+		if (! offset) return
+		if (! base.down) return
+		base.tube("enter", e, el, base.cursor)
+	}
 	base.mouseup = function(e){		
 		var pos, new_cursor