17 files changed, 365 insertions, 217 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index 11e01ba..afbf161 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -2,20 +2,24 @@
 var environment = new function(){}
 environment.init = function(){
 	window.scene && scene.camera.move({
-		"x": 240,
-		"y": -1000,
-		"z": 240,
-		"rotationX": -PI/2,
-		"rotationY": 0 // PI
+		"x": 0,
+		"y": 1000,
+		"z": 0,
+		"rotationX": PI/2,
+		"rotationY": PI
 	})
 
 	clipper.rooms.push( new room ({
+		rect: new rect(-100,-100, 100,100),
+		height: 400,
+	}))
+	clipper.rooms.push( new room ({
 		rect: new rect(100,100, 200,300),
 		height: 400,
 	}))
 	clipper.rooms.push( new room ({
 		rect: new rect(200,300, 300,500),
-		height: 300,
+		height: 400,
 	}))
 	clipper.rooms.push( new room ({
 		rect: new rect(300,100, 600,300),
@@ -23,7 +27,7 @@ environment.init = function(){
 	}))
 	clipper.rooms.push( new room ({
 		rect: new rect(400,200, 700,400),
-		height: 500,
+		height: 400,
 	}))
 
 	builder.init()
@@ -31,5 +35,6 @@ environment.init = function(){
 	window.scene && scene.update()
 }
 environment.update = function(t){
-	clipper.animate()
+	map.animate()
+	z = false
 }
diff --git a/assets/javascripts/rectangles/clipper.js b/assets/javascripts/rectangles/clipper.js
deleted file mode 100644
index e712b71..0000000
--- a/assets/javascripts/rectangles/clipper.js
+++ /dev/null
@@ -1,182 +0,0 @@
-window.ctx = window.w = window.h = null;
-
-var clipper = new function(){
-	var base = this
-	var canvas = document.createElement("canvas")
-	var ctx = window.ctx = canvas.getContext("2d")
-	var w = window.w = canvas.width = 500
-	var h = window.h = canvas.height = 500
-	var regions = []
-	document.querySelector("#map").appendChild(canvas)
-
-	var rooms = base.rooms = []
-
-	base.creating = false
-	base.dragging = false
-
-	var modified = true
-	base.mouse = new rect(0,0,0,0)
-
-	base.init = function (){
-		base.bind()
-	}
-	base.animate = function(){
-		clear_canvas()
-
-		if (modified) {
-			solve_rects()
-			builder.tube("clipper:update")
-		}
-		draw_ruler()
-		draw_regions(base.regions)
-		draw_mouse(base.mouse)
-		modified = z = false
-	}
-	
-	base.add_room = function(r){
-		rooms.push( new room({
-			id: base.rooms.length,
-			rect: r,
-		}) )
-	}
-	
-	base.bind = function(){
-		canvas.addEventListener("mousedown", function(e){
-			e.stopPropagation()
-			var x = e.pageX, y = e.pageY
-			base.mouse = new rect (x,y)
-			if (e.shiftKey) {
-				base.mouse.quantize(10)
-			}
-
-			var intersects = rooms.filter(function(r){
-				return r.focused = r.rect.contains(x,y)
-			})
-	
-			if (intersects.length){
-				clipper.dragging = intersects[0]
-			}
-			else {
-				clipper.creating = true
-			}
-			if (e.shiftKey && clipper.dragging) {
-				clipper.dragging.rect.quantize(10)
-			}
-		})
-		canvas.addEventListener("mousemove", function(e){
-			e.stopPropagation()
-			var x, y
-			if (e.shiftKey) {
-				x = quantize( e.pageX, 10 )
-				y = quantize( e.pageY, 10 )
-			}
-			else {
-				x = e.pageX
-				y = e.pageY
-			}
-
-			base.mouse.x.b = x
-			base.mouse.y.b = y
-	
-			if (clipper.dragging) {
-				clipper.dragging.rect.translation.a = base.mouse.x.magnitude()
-				clipper.dragging.rect.translation.b = base.mouse.y.magnitude()
-			}
-			else if (clipper.creating) {
-				base.mouse.x.b = x
-				base.mouse.y.b = y
-			}
-			else {
-				base.mouse.x.a = base.mouse.x.b
-				base.mouse.y.a = base.mouse.y.b
-			}
-		})
-		document.addEventListener("mouseup", function(e){
-			e.stopPropagation()
-			if (clipper.creating) {
-				if (base.mouse.height() != 0 && base.mouse.width() != 0) {
-					base.add_room( base.mouse.translate() )
-				}
-			}
-			if (clipper.dragging) {
-				clipper.dragging.rect.translate()
-			}
-			base.mouse = new rect(e.pageX, e.pageY)
-			clipper.creating = clipper.dragging = false
-			modified = true
-		})
-	}
-
-	function solve_rects(){
-
-		for (var i = 0; i < base.rooms.length; i++) {
-			base.rooms[i].id = i
-			base.rooms[i].reset()
-		}
-
-		var rooms = sort_rooms_by_position( base.rooms )
-
-		var regions = []
-
-		var left, right
-		for (var i = 0; i < rooms.length; i++) {
-			left = rooms[i]
-			for (var j = i+1; j < rooms.length; j++) {
-				right = rooms[j]
-				if (left.rect.intersects(right.rect)) {
-					left.clipTo(right.rect)
-					right.clipTo(left.rect)
-				}
-				if (left.rect.x.b < right.rect.x.a) {
-					break
-				}
-			}
-		}
-		for (var i = 0; i < rooms.length; i++) {
-			rooms[i].regions = rooms[i].regions.filter(function(r){ return !!r })
-			regions = regions.concat(rooms[i].regions)
-		}
-
-		regions = sort_rects_by_area( regions )
-
-		var ty = new tree (regions[0].y.a, [regions[0]])
-		var tx = new tree (regions[0].x.a, ty)
-		var ttx, tty
-	
-		for (var i = 1; i < regions.length; i++) {
-			ttx = tx.add (regions[i].x.a, null)
-			if (ttx.data) {
-				tty = ttx.data.add (regions[i].y.a, null)
-				// duplicate polygon?
-				if (tty.data) {
-					tty.data.forEach(function(yy, ii){
-						if (yy.intersects(regions[i])) {
-							if (yy.area() > regions[i].area()) {
-								regions[i].dupe = true
-							}
-							else {
-								yy.dupe = true
-								tty.data[ii] = regions[i]
-							}
-						}
-					})
-				}
-				else {
-					tty.data = [regions[i]]
-				}
-			}
-			else {
-				ttx.data = new tree (regions[i].y.a, [regions[i]])
-			}
-		}
-
-		base.regions = sort_rects_by_position(regions)
-	}
-
-	// generate floor and ceiling for some regions
-	// generate walls from surviving regions
-	// generate ceiling-walls where ceiling has discontinuity
-
-	return base
-}
-
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/engine/builder.js
index edca2ed..edca2ed 100644
--- a/assets/javascripts/rectangles/builder.js
+++ b/assets/javascripts/rectangles/engine/builder.js
diff --git a/assets/javascripts/rectangles/engine/clipper.js b/assets/javascripts/rectangles/engine/clipper.js
new file mode 100644
index 0000000..13fc378
--- /dev/null
+++ b/assets/javascripts/rectangles/engine/clipper.js
@@ -0,0 +1,104 @@
+
+var clipper = new function(){
+	var base = this
+
+	var rooms = base.rooms = []
+	var regions = base.regions = []
+
+	var modified = true
+
+	base.init = function(){
+		base.bind()
+		base.update()
+	}
+	
+	base.bind = function(){
+		map.ui.mouse.tube.on("up", function(){ base.update() })
+	}
+
+	base.update = function(){
+		clipper.solve_rects()
+		builder.tube("clipper:update")
+	}
+	
+	base.add_room = function(r){
+		rooms.push( new room({
+			id: base.rooms.length,
+			rect: r,
+		}) )
+	}
+	
+	base.solve_rects = function(){
+		if (base.rooms.length == 0) return;
+
+		for (var i = 0; i < base.rooms.length; i++) {
+			base.rooms[i].id = i
+			base.rooms[i].reset()
+		}
+
+		var rooms = sort_rooms_by_position( base.rooms )
+
+		var regions = []
+
+		var left, right
+		for (var i = 0; i < rooms.length; i++) {
+			left = rooms[i]
+			for (var j = i+1; j < rooms.length; j++) {
+				right = rooms[j]
+				if (left.rect.intersects(right.rect)) {
+					left.clipTo(right.rect)
+					right.clipTo(left.rect)
+				}
+				if (left.rect.x.b < right.rect.x.a) {
+					break
+				}
+			}
+		}
+		for (var i = 0; i < rooms.length; i++) {
+			rooms[i].regions = rooms[i].regions.filter(function(r){ return !!r })
+			regions = regions.concat(rooms[i].regions)
+		}
+
+		regions = sort_rects_by_area( regions )
+
+		var ty = new tree (regions[0].y.a, [regions[0]])
+		var tx = new tree (regions[0].x.a, ty)
+		var ttx, tty
+	
+		for (var i = 1; i < regions.length; i++) {
+			ttx = tx.add (regions[i].x.a, null)
+			if (ttx.data) {
+				tty = ttx.data.add (regions[i].y.a, null)
+				// duplicate polygon?
+				if (tty.data) {
+					tty.data.forEach(function(yy, ii){
+						if (yy.intersects(regions[i])) {
+							if (yy.area() > regions[i].area()) {
+								regions[i].dupe = true
+							}
+							else {
+								yy.dupe = true
+								tty.data[ii] = regions[i]
+							}
+						}
+					})
+				}
+				else {
+					tty.data = [regions[i]]
+				}
+			}
+			else {
+				ttx.data = new tree (regions[i].y.a, [regions[i]])
+			}
+		}
+
+		base.regions = sort_rects_by_position(regions)
+	}
+
+	// generate floor and ceiling for some regions
+	// generate walls from surviving regions
+	// generate ceiling-walls where ceiling has discontinuity
+
+	return base
+}
+
diff --git a/assets/javascripts/rectangles/draw.js b/assets/javascripts/rectangles/map/draw.js
index eb3dece..eb3dece 100644
--- a/assets/javascripts/rectangles/draw.js
+++ b/assets/javascripts/rectangles/map/draw.js
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
new file mode 100644
index 0000000..05fad90
--- /dev/null
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -0,0 +1,103 @@
+/*
+*/
+
+window.ctx = window.w = window.h = null;
+
+var map = new function(){
+	var base = this
+	base.bounds = new vec2(500,500)
+	base.center = new vec2(0,0)
+
+	var canvas = document.createElement("canvas")
+	var ctx = window.ctx = canvas.getContext("2d")
+	var w = window.w = canvas.width = 500
+	var h = window.h = canvas.height = 500
+	document.querySelector("#map").appendChild(canvas)
+
+	base.animate = function(){
+		ctx.save()
+		clear_canvas()
+		draw_ruler()
+
+		ctx.translate( map.center.a + map.bounds.a/2,  map.center.b + map.bounds.b/2 )
+		ctx.scale( -1, 1 )
+
+		draw_regions(clipper.regions)
+		draw_mouse(map.ui.mouse.cursor)
+
+		ctx.restore()
+	}
+}
+
+map.ui = new function(){
+	var base = this
+	base.el = document.querySelector("#map")
+	
+	base.mouse = new mouse({
+		el: base.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+	})
+
+	base.wheel = new wheel({
+		el: base.el,
+		update: function(e, val, delta){
+			// do something with val
+		},
+	})
+	
+	function down (e, cursor){
+		cursor.x.add( map.center.a + map.bounds.a/2 )
+		cursor.y.add( map.center.b - map.bounds.b/2 )
+
+		var intersects = clipper.rooms.filter(function(r){
+			return r.focused = r.rect.contains(cursor)
+		})
+
+		if (intersects.length){
+			base.dragging = intersects[0]
+		}
+		else {
+			base.creating = true
+		}
+
+		if (e.shiftKey && base.dragging) {
+			base.dragging.rect.quantize(10)
+		}
+	}
+
+	function move (e, cursor) {
+		cursor.x.add( map.center.a + map.bounds.a/2 )
+		cursor.y.add( map.center.b - map.bounds.b/2 )
+		z=true
+	}
+
+	function drag (e, cursor) {
+		cursor.x.b += map.center.a + map.bounds.a/2
+		cursor.y.b += map.center.b - map.bounds.b/2
+
+		if (base.dragging) {
+			base.dragging.rect.translation.a = cursor.x.magnitude()
+			base.dragging.rect.translation.b = cursor.y.magnitude()
+		}
+	}
+
+	function up (e, cursor) {
+
+		if (base.creating) {
+			if (cursor.height() != 0 && cursor.width() != 0) {
+				cursor.x.abs()
+				cursor.y.abs()
+				clipper.add_room( cursor )
+			}
+		}
+		
+		if (base.dragging) {
+			base.dragging.rect.translate()
+		}
+
+		base.creating = base.dragging = false
+	}
+}
\ No newline at end of file
diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/models/rect.js
index 50debbc..548e16a 100644
--- a/assets/javascripts/rectangles/rect.js
+++ b/assets/javascripts/rectangles/models/rect.js
@@ -26,9 +26,10 @@ window.rect = (function(){
 	rect.prototype.area = function(){
 		return this.x.length() * this.y.length()
 	}
-	rect.prototype.translate = function(){
-		this.x.abs().add(this.translation.a)
-		this.y.abs().add(this.translation.b)
+	rect.prototype.translate = function(translation){
+		var translation = translation || this.translation
+		this.x.abs().add(translation.a)
+		this.y.abs().add(translation.b)
 		this.translation.a = this.translation.b = 0
 		return this
 	}
diff --git a/assets/javascripts/rectangles/room.js b/assets/javascripts/rectangles/models/room.js
index 8c9d67d..8c9d67d 100644
--- a/assets/javascripts/rectangles/room.js
+++ b/assets/javascripts/rectangles/models/room.js
diff --git a/assets/javascripts/rectangles/tree.js b/assets/javascripts/rectangles/models/tree.js
index 577c41a..577c41a 100644
--- a/assets/javascripts/rectangles/tree.js
+++ b/assets/javascripts/rectangles/models/tree.js
diff --git a/assets/javascripts/rectangles/vec2.js b/assets/javascripts/rectangles/models/vec2.js
index 4e2ad36..4e2ad36 100644
--- a/assets/javascripts/rectangles/vec2.js
+++ b/assets/javascripts/rectangles/models/vec2.js
diff --git a/assets/javascripts/rectangles/colors.js b/assets/javascripts/rectangles/util/colors.js
index 3bdebbc..3bdebbc 100644
--- a/assets/javascripts/rectangles/colors.js
+++ b/assets/javascripts/rectangles/util/colors.js
diff --git a/assets/javascripts/rectangles/debug.js b/assets/javascripts/rectangles/util/debug.js
index 437abb8..437abb8 100644
--- a/assets/javascripts/rectangles/debug.js
+++ b/assets/javascripts/rectangles/util/debug.js
diff --git a/assets/javascripts/rectangles/util/mouse.js b/assets/javascripts/rectangles/util/mouse.js
new file mode 100644
index 0000000..b8d6045
--- /dev/null
+++ b/assets/javascripts/rectangles/util/mouse.js
@@ -0,0 +1,114 @@
+/*
+	usage:
+	
+		base.mouse = new mouse({
+			el: document.querySelector("#map"),
+			down: function(e, cursor){
+				// do something with val
+				// cursor.x.a
+				// cursor.y.a
+			},
+			move: function(e, cursor, delta){
+				// delta.a (x)
+				// delta.b (y)
+			},
+			up: function(e, cursor){
+				// cursor.x.a
+				// cursor.y.a
+			},
+		})
+
+*/
+
+function mouse (opt) {
+	var base = this
+
+	opt = defaults(opt, {
+		el: document,
+		down: null,
+		move: null,
+		drag: null,
+		up: null,
+		propagate: false,
+		locked: false,
+		val: 0,
+	})
+	
+	base.down = false
+
+	base.creating = false
+	base.dragging = false
+
+	base.cursor = new rect(0,0,0,0)
+
+	base.tube = new Tube ()
+	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.up && base.tube.on("up", opt.up)
+	
+	base.init = function (){
+		base.bind()
+	}
+
+	base.bind = function(){
+		opt.el.addEventListener("mousedown", base.mousedown)
+		window.addEventListener("mousemove", base.mousemove)
+		window.addEventListener("mouseup", base.mouseup)
+	}
+
+	function positionFromMouse(e) {
+		var offset = opt.el.getBoundingClientRect()
+		var mx = offset.left - e.pageX
+		var my = e.pageY - offset.top
+
+		return new vec2(mx, my)
+	}
+
+	base.mousedown = function(e){
+		e.stopPropagation()
+		
+		var pos = positionFromMouse(e)
+		
+		var x = pos.a, y = pos.b
+		base.cursor = new rect (x,y, x,y)
+		base.down = true
+
+		base.tube("down", e, base.cursor)
+	}
+	base.mousemove = function(e){
+		e.stopPropagation()
+		
+		var pos = positionFromMouse(e)
+
+		if (e.shiftKey) {
+			pos.quantize(10)
+		}
+
+		var x = pos.a, y = pos.b
+		
+		if (base.down) {
+			base.cursor.x.b = x
+			base.cursor.y.b = y
+			base.tube("drag", e, base.cursor)
+		}
+		else {
+			base.cursor.x.a = base.cursor.x.b = x
+			base.cursor.y.a = base.cursor.y.b = y		
+			base.tube("move", e, base.cursor)
+		}
+	}
+	base.mouseup = function(e){
+		e.stopPropagation()
+		
+		if (base.down) {
+			base.down = false
+			base.tube("up", e, base.cursor)
+			var pos = positionFromMouse(e)
+			base.cursor = new rect(pos.a, pos.b)
+		}
+	}	
+
+	base.init()
+}
+
diff --git a/assets/javascripts/rectangles/sort.js b/assets/javascripts/rectangles/util/sort.js
index 8ece95f..8ece95f 100644
--- a/assets/javascripts/rectangles/sort.js
+++ b/assets/javascripts/rectangles/util/sort.js
diff --git a/assets/javascripts/rectangles/wheel.js b/assets/javascripts/rectangles/util/wheel.js
index cc8dc32..6836772 100644
--- a/assets/javascripts/rectangles/wheel.js
+++ b/assets/javascripts/rectangles/util/wheel.js
@@ -19,8 +19,6 @@ function wheel (opt) {
 		reversible: true,
 		ratio: 0.02,
 		val: 0,
-		min: -Infinity,
-		max: Infinity,
 	})
 
 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
diff --git a/rectangles-canvas-only.html b/rectangles-canvas-only.html
index b0c2436..3157a7f 100644
--- a/rectangles-canvas-only.html
+++ b/rectangles-canvas-only.html
@@ -53,17 +53,20 @@ body > div {
 <script type="text/javascript" src="assets/javascripts/util.js"></script>
 
 <script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/colors.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/debug.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/tree.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/room.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/rect.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/vec2.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/draw.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/sort.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/wheel.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/builder.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/colors.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/debug.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
+
+<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
 
 <script>
 	environment.init()
diff --git a/rectangles.html b/rectangles.html
index 1a81a61..4c1334a 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -55,17 +55,19 @@ body > div {
 <script type="text/javascript" src="assets/javascripts/util.js"></script>
 
 <script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/colors.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/debug.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/tree.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/room.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/rect.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/vec2.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/draw.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/sort.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/wheel.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/builder.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/colors.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/debug.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
 
 <script src="assets/javascripts/mx/mx.js"></script>
 <script src="assets/javascripts/mx/mx.quaternion.js"></script>