From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 30 Mar 2015 20:25:45 -0400
Subject: split out mx.grid

---
 public/assets/test/ortho2.html | 200 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 public/assets/test/ortho2.html

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
new file mode 100644
index 0000000..d554a60
--- /dev/null
+++ b/public/assets/test/ortho2.html
@@ -0,0 +1,200 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+#hud {
+	white-space: pre;
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+
+<script>
+
+var scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: 0,
+})
+
+var placing = false
+var points, mx_points = []
+var shapes = []
+var ctx = map.draw.ctx
+var last_point
+
+function polyline (points, finished) {
+  if (! points) return
+  if (points.length == 1) {
+    ctx.fillStyle = "#f80"
+    map.draw.dot_at(points[0].a, points[0].b, 5)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#ff0"
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[0].a, points[0].b)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.a, point.b)
+    })
+		ctx.stroke()
+    if (! placing || finished) {
+      ctx.fill()
+    }
+  }
+}
+
+function add_mx_polyline (points) {
+  mx_points.forEach(function(mx){ scene.remove(mx) })
+  var faces = []
+  for (var i = 1; i < points.length; i++) {
+    var head = points[i-1]
+    var tail = points[i]
+    face = add_mx_polyline_face(head, tail)
+    faces.push(face)
+  }
+  shapes.push({
+    mx: faces,
+    points: points,
+  })
+  points = []
+}
+function add_mx_polyline_face(head, tail){
+  var mx = new MX.Object3D()
+  var mid_x = (head.a + tail.a)
+  var mid_z = (head.b + tail.b)
+  var len = head.distanceTo( tail )
+  var angle = atan2( head.b - tail.b, head.a - tail.a )
+  mx.move({
+    x: mid_x / 2,
+    y: 25 + 1,
+    z: mid_z / 2,
+    width: ceil(len),
+    height: 50,
+    rotationY: angle
+  })
+  var hue = abs(round( angle / PI * 90 + 300))
+  mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+  scene.add(mx)
+  return mx
+}
+function add_mx_point (p, i) {
+	var mx = new MX.Object3D()
+	mx.updateChildren = false
+	mx.move({
+		x: p.a,
+		y: 11,
+		z: p.b,
+		width: 20,
+		height: 20,
+	})
+	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
+	mx.el.style.backfaceVisibility = "visible"
+	scene.add(mx)
+	return mx
+}
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.radius = 20
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
+
+  grid = new MX.Grid()
+  scene.add(grid)
+  
+	scene.update()
+
+	controls = new MX.OrbitCamera({
+	  el: scene.el,
+	  radius: 1000,
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  map.draw.ctx.save()
+  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
+  grid.draw(map.draw.ctx, 20, 20)
+  map.draw.ctx.restore()
+
+	map.draw.coords()
+
+  polyline(points)
+  if (placing && last_point) {
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
+    ctx.lineTo(last_point.a, last_point.b)
+    ctx.stroke()
+  }
+
+  shapes.forEach(function(shape){
+    polyline(shape.points, true)
+  })
+
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
+	map.draw.mouse(map.ui.mouse.cursor)
+	map.draw.camera(scene.camera)
+
+	map.draw.ctx.restore()
+}
+
+</script>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 744b4f00e9c8a7ef8a75cc8508bf10c0da8de9cc Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 30 Mar 2015 21:27:07 -0400
Subject: plotting points on an image of an art gallery

---
 public/assets/javascripts/mx/primitives/mx.grid.js | 12 ++++++++++-
 .../assets/javascripts/mx/primitives/mx.image.js   | 24 ++++++++++++++++++++-
 public/assets/test/ortho2.html                     | 25 +++++++++++++++-------
 3 files changed, 51 insertions(+), 10 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js
index 7a40144..a765c89 100644
--- a/public/assets/javascripts/mx/primitives/mx.grid.js
+++ b/public/assets/javascripts/mx/primitives/mx.grid.js
@@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({
 		this.draw(ctx)
   },
   
-  draw: function(ctx){
+  draw: function(ctx, recenter){
     ctx = ctx || this.ctx
+
+    if (recenter) {
+      ctx.save()
+      ctx.translate( -grid.width/2, -grid.height/2 )
+    }
     
     var cells = this.ops.cells,
         space = this.ops.space,
@@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({
     }
     ctx.closePath()
     ctx.stroke()
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index b8557bf..ca79065 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -1,6 +1,5 @@
 MX.Image = MX.Object3D.extend({
   init: function (ops) {
-  
   	this.type = "Image"
 		this.media = ops.media
     this.width = 0
@@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({
       layer.el.classList.add('image')
       layer.dirty = true
       layer.update()
+      layer.ops.onload
     }
     image.src = ops.src;
+
+    if (ops.keepImage) {
+      this.image = image
+    }
+  },
+
+  draw: function(ctx, recenter){
+    if (recenter) {
+      ctx.save()
+      ctx.scale(-1, 1)
+      ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale )
+    }
+
+    ctx.drawImage(this.image,
+      0, 0, this.image.naturalWidth, this.image.naturalHeight,
+      0, 0, this.image.width * this.scale, this.image.height * this.scale
+    )
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index d554a60..733c90c 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -34,6 +34,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
@@ -53,7 +54,7 @@ map = new Map ({
 	el: document.querySelector("#orthographic"),
 	width: window.innerWidth/2,
 	height: window.innerHeight,
-	zoom: 0,
+	zoom: -2,
 })
 
 var placing = false
@@ -127,9 +128,11 @@ function add_mx_point (p, i) {
 		z: p.b,
 		width: 20,
 		height: 20,
+		rotationX: PI/2,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
+	mx.el.style.borderRadius = "50%"
 	scene.add(mx)
 	return mx
 }
@@ -143,14 +146,22 @@ function build () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-  grid = new MX.Grid()
-  scene.add(grid)
+//   grid = new MX.Grid()
+//   scene.add(grid)
+  floorplan = new MX.Image({
+    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  scene.add(floorplan)
   
 	scene.update()
 
 	controls = new MX.OrbitCamera({
 	  el: scene.el,
-	  radius: 1000,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
 	  rotationX: PI/4,
 	  rotationY: PI/2,
 	})
@@ -168,10 +179,8 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
-  map.draw.ctx.save()
-  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
-  grid.draw(map.draw.ctx, 20, 20)
-  map.draw.ctx.restore()
+//   grid.draw(map.draw.ctx, true)
+  floorplan.draw(map.draw.ctx, true)
 
 	map.draw.coords()
 
-- 
cgit v1.2.3-70-g09d2


From 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 12:44:28 -0400
Subject: etc

---
 public/assets/javascripts/app.js                   |  2 -
 .../javascripts/rectangles/engine/map/ui_ortho.js  | 82 ---------------------
 public/assets/test/ortho.html                      |  9 +++
 public/assets/test/ortho2.html                     | 83 ++++++++++++++++++++++
 4 files changed, 92 insertions(+), 84 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 6ff062e..6ebcda5 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -21,8 +21,6 @@ app.init = function () {
 app.launch = function () {
   if ($.browser.msie || ! has3d()) { return app.fallback() }
   
-	var movements
-
 	scene = new MX.Scene().addTo('#scene')
 	scene.width = window.innerWidth
 	scene.height = window.innerHeight
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index adcc078..e69de29 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -1,82 +0,0 @@
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
-
-	var base = this
-
-	base.creating = base.dragging = base.resizing = false
-
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          return
-        }
-        cursor.quantize(1/map.zoom)
-        map.center.a = cursor.x.a
-        map.center.b = -cursor.y.a
-        cursor.x.b = cursor.x.a
-        cursor.y.b = cursor.y.a
-        base.mouse.down = false
-        e.preventDefault()
-        e.stopPropagation()
-        return
-      }
-
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-					add_mx_polyline(points)
-				}
-				else {
-					points.push( p )
-          mx_points.push( add_mx_point(p) )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
-        mx_points.push( add_mx_point(p) )
-			}
-		},
-		move: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-			last_point = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
-				document.body.style.cursor = "pointer"
-				last_point.assign(points[0])
-				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b =last_point.b
-			}
-			else {
-				document.body.style.cursor = "crosshair"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
-
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
-
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
-	}
-}
\ No newline at end of file
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index 1ca7e06..2257006 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){
 			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
 		}
 	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
 }
 
 var scene, map, controls
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 733c90c..17acead 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -46,6 +46,89 @@ body {
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
+      if (e.ctrlKey || e.which === 3) {
+        if (placing) {
+          // close polyline or cancel
+          return
+        }
+        cursor.quantize(1/map.zoom)
+        map.center.a = cursor.x.a
+        map.center.b = -cursor.y.a
+        cursor.x.b = cursor.x.a
+        cursor.y.b = cursor.y.a
+        base.mouse.down = false
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
+
+			// compare to initial point
+			var p = new vec2( cursor.x.a, cursor.y.a )
+			if (placing) {
+				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
+					points.push( points[0].clone() )
+					placing = false
+					add_mx_polyline(points)
+				}
+				else {
+					points.push( p )
+          mx_points.push( add_mx_point(p) )
+				}
+			}
+			else {
+				placing = true
+				points = []
+				points.push( p )
+        mx_points.push( add_mx_point(p) )
+			}
+		},
+		move: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+			last_point = new vec2( cursor.x.a, cursor.y.a )
+			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+				document.body.style.cursor = "pointer"
+				last_point.assign(points[0])
+				cursor.x.a = cursor.x.b = last_point.a
+				cursor.y.a = cursor.y.b =last_point.b
+			}
+			else {
+				document.body.style.cursor = "crosshair"
+			}
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		}
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
+
 
 var scene, map, controls
 
-- 
cgit v1.2.3-70-g09d2


From 88b627d45cb1db4991ee8ff17eb37293771aecf9 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 12:47:55 -0400
Subject: resize

---
 public/assets/test/ortho2.html | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 733c90c..ddc1dde 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -56,6 +56,11 @@ map = new Map ({
 	height: window.innerHeight,
 	zoom: -2,
 })
+$(window).resize(function(){
+  scene.width = window.innerWidth/2
+  map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
 
 var placing = false
 var points, mx_points = []
-- 
cgit v1.2.3-70-g09d2


From 44c9a2ed2cd77c61f5a6e2bab4daebb5527e7988 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 15:22:17 -0400
Subject: url

---
 public/assets/test/ortho2.html |  21 ++--
 public/assets/test/ortho3.html | 239 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 254 insertions(+), 6 deletions(-)
 create mode 100644 public/assets/test/ortho3.html

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 74351b4..5609ec3 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -15,14 +15,21 @@ body {
 	top:0px
 }
 #hud {
-	white-space: pre;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
 }
+#url { width: 300px }
 </style>
 
 <div id="perspective"></div>
 <div id="orthographic"></div>
 
-<div id="hud"></div>
+<div id="hud">
+  <input type="text" id="url" placeholder="paste an image URL here!">
+</div>
 
 <script src="/assets/javascripts/util.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
@@ -98,12 +105,13 @@ Map.UI.Ortho = function(map){
 		move: function(e, cursor){
 			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
 			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
 			last_point = new vec2( cursor.x.a, cursor.y.a )
 			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
 				document.body.style.cursor = "pointer"
 				last_point.assign(points[0])
 				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b =last_point.b
+				cursor.y.a = cursor.y.b = last_point.b
 			}
 			else {
 				document.body.style.cursor = "crosshair"
@@ -225,6 +233,10 @@ function add_mx_point (p, i) {
 	return mx
 }
 
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
@@ -234,8 +246,6 @@ function build () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-//   grid = new MX.Grid()
-//   scene.add(grid)
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
     keepImage: true,
@@ -267,7 +277,6 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
-//   grid.draw(map.draw.ctx, true)
   floorplan.draw(map.draw.ctx, true)
 
 	map.draw.coords()
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
new file mode 100644
index 0000000..19bb13a
--- /dev/null
+++ b/public/assets/test/ortho3.html
@@ -0,0 +1,239 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+#hud {
+	white-space: pre;
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+
+<script>
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
+      if (e.ctrlKey || e.which === 3) {
+        if (placing) {
+          // close polyline or cancel
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        cursor.quantize(1/map.zoom)
+        map.center.a = cursor.x.a
+        map.center.b = -cursor.y.a
+        cursor.x.b = cursor.x.a
+        cursor.y.b = cursor.y.a
+        base.mouse.down = false
+        return
+      }
+
+			// compare to initial point
+			var p = new vec2( cursor.x.a, cursor.y.a )
+			if (placing) {
+				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
+					points.push( points[0].clone() )
+					placing = false
+				}
+				else {
+					points.push( p )
+				}
+			}
+			else {
+				placing = true
+				points = []
+				points.push( p )
+			}
+		},
+		move: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+			last_point = new vec2( cursor.x.a, cursor.y.a )
+			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+				document.body.style.cursor = "pointer"
+				last_point.assign(points[0])
+				cursor.x.a = cursor.x.b = last_point.a
+				cursor.y.a = cursor.y.b = last_point.b
+			}
+			else {
+				document.body.style.cursor = "crosshair"
+			}
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		}
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
+
+
+var scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: -2,
+})
+$(window).resize(function(){
+  scene.width = window.innerWidth/2
+  map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
+
+var placing = false
+var points = []
+var shapes = []
+var ctx = map.draw.ctx
+var last_point
+
+function polyline (points, finished) {
+  if (! points) return
+  if (points.length == 1) {
+    ctx.fillStyle = "#f80"
+    map.draw.dot_at(points[0].a, points[0].b, 5)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#ff0"
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[0].a, points[0].b)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.a, point.b)
+    })
+		ctx.stroke()
+    if (! placing || finished) {
+      ctx.fill()
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.radius = 20
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
+
+  floorplan = new MX.Image({
+    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  scene.add(floorplan)
+  
+	scene.update()
+
+	controls = new MX.OrbitCamera({
+	  el: scene.el,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  floorplan.draw(map.draw.ctx, true)
+
+	map.draw.coords()
+
+  polyline(points)
+  if (placing && last_point) {
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
+    ctx.lineTo(last_point.a, last_point.b)
+    ctx.stroke()
+  }
+
+  shapes.forEach(function(shape){
+    polyline(shape.points, true)
+  })
+
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
+	map.draw.mouse(map.ui.mouse.cursor)
+	map.draw.camera(scene.camera)
+
+	map.draw.ctx.restore()
+}
+
+</script>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 00614373ad41e679dc7e06aca950d7167bd1c68f Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 16:31:54 -0400
Subject: test with image url

---
 public/assets/javascripts/rectangles/util/mouse.js | 2 +-
 public/assets/test/ortho2.html                     | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js
index 86edf6c..2b98cee 100644
--- a/public/assets/javascripts/rectangles/util/mouse.js
+++ b/public/assets/javascripts/rectangles/util/mouse.js
@@ -134,7 +134,7 @@ function mouse (opt) {
     }
 
     var x = pos.a, y = pos.b
-    
+
     if (base.down) {
       base.cursor.x.b = x
       base.cursor.y.b = y
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 5609ec3..89a5688 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -69,6 +69,8 @@ Map.UI.Ortho = function(map){
       if (e.ctrlKey || e.which === 3) {
         if (placing) {
           // close polyline or cancel
+          placing = false
+					add_mx_polyline(points)
           return
         }
         cursor.quantize(1/map.zoom)
@@ -153,6 +155,7 @@ $(window).resize(function(){
 })
 
 
+var wall_height = 100
 var placing = false
 var points, mx_points = []
 var shapes = []
@@ -166,7 +169,7 @@ function polyline (points, finished) {
     map.draw.dot_at(points[0].a, points[0].b, 5)
   }
   if (points.length > 1) {
-    ctx.fillStyle = "#ff0"
+    ctx.fillStyle = "rgba(255,255,0,0.1)"
     ctx.strokeStyle = "#f80"
     ctx.lineWidth = 2 / map.zoom
     ctx.beginPath()
@@ -204,10 +207,10 @@ function add_mx_polyline_face(head, tail){
   var angle = atan2( head.b - tail.b, head.a - tail.a )
   mx.move({
     x: mid_x / 2,
-    y: 25 + 1,
+    y: wall_height/2 + 1,
     z: mid_z / 2,
     width: ceil(len),
-    height: 50,
+    height: wall_height,
     rotationY: angle
   })
   var hue = abs(round( angle / PI * 90 + 300))
-- 
cgit v1.2.3-70-g09d2


From 30ee4d90d5fc89880ef0801aa078f26eeb26f155 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 17:02:43 -0400
Subject: toggle keyboard/orbit cam

---
 public/assets/javascripts/defaults.js              |  3 +-
 .../javascripts/mx/extensions/mx.movements.js      | 18 ++++---
 .../javascripts/mx/extensions/mx.orbitCamera.js    |  1 +
 public/assets/test/ortho2.html                     | 56 ++++++++++++++++++++--
 4 files changed, 66 insertions(+), 12 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index 12aed62..413bb13 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -1,3 +1,4 @@
+app = window.app || {}
 app.defaults = {
 	viewHeight: window.viewHeight = 186,
 	units: app.units = "ft",
@@ -13,7 +14,7 @@ app.defaults = {
 	},
 }
 
-marked.setOptions({
+window.marked && marked.setOptions({
   sanitize: true,
   smartypants: true,
 })
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 9af2c8d..bc71fc4 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -39,7 +39,7 @@ MX.Movements = function (cam) {
   })
 
 	function clampRotation( vr ) {
-		if (Rooms.mover.noclip) {
+		if (window.Rooms && Rooms.mover.noclip) {
 			return clamp(vr, PI/-2, PI/2 )
 		}
 		else {
@@ -221,15 +221,19 @@ MX.Movements = function (cam) {
 
 /*					
 				case 48: // 0
-					cam.rotationX = 0
-					cam.rotationY = 0
-					cam.x = 0
-					cam.y = viewHeight
-					cam.z = 0
+					movements.center()
 					break
 */
 			}
 		},
+		
+		center: function(){
+      cam.rotationX = 0
+      cam.rotationY = 0
+      cam.x = 0
+      cam.y = viewHeight
+      cam.z = 0
+		},
 
 		mousedown: function (e) {
 			if (locked) return;
@@ -341,7 +345,7 @@ MX.Movements = function (cam) {
 					jumping = false
 				}
 
-				var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000)
+				var ceiling = ((window.Rooms && Rooms.mover.room) ? Rooms.mover.room.height : 5000)
 				
 				if (pos.y >= ceiling-5) {
 					vy = 0
diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index 6dc5b6c..f4759fb 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -68,6 +68,7 @@ MX.OrbitCamera = function(opt){
 	  if (typeof x == "number") { opt.rotationX = x }
 	}
 	exports.update = function(){
+	  if (! bound) return
 	  if (abs(ry - opt.rotationY) > epsilon) {
       ry = avg(ry, opt.rotationY, opt.ease)
 	  }
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 89a5688..d6f0c5c 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -1,3 +1,4 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 <style type="text/css">
 html,body{width:100%;height:100%;margin:0;padding:0;}
 body {
@@ -22,6 +23,8 @@ body {
   background: white;
 }
 #url { width: 300px }
+#hud span { color: #888; cursor: pointer; }
+#hud span.active { color: #000; }
 </style>
 
 <div id="perspective"></div>
@@ -29,9 +32,12 @@ body {
 
 <div id="hud">
   <input type="text" id="url" placeholder="paste an image URL here!">
+  <span class="ion-ionic active" data-role="orbit-mode"></span>
+  <span class="ion-archive" data-role="keyboard-mode"></span>
 </div>
 
 <script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
@@ -40,6 +46,7 @@ body {
 <script src="/assets/javascripts/mx/mx.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
@@ -53,6 +60,11 @@ body {
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){	app.tube.off.apply(app.tube, arguments) }
+
 Map.UI = Map.UI || {}
 Map.UI.Ortho = function(map){
 
@@ -154,8 +166,7 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-
-var wall_height = 100
+var wall_height = 180
 var placing = false
 var points, mx_points = []
 var shapes = []
@@ -239,15 +250,46 @@ function add_mx_point (p, i) {
 $("#url").on("input", function(){
   floorplan.load({ src: this.value })
 })
+$("[data-role=orbit-mode]").click(function(){
+  $("#hud .active").removeClass('active')
+  $(this).addClass('active')
+  controls.toggle(true)
+  movements.lock()
+})
+$("[data-role=keyboard-mode]").click(function(){
+  $("#hud .active").removeClass('active')
+  $(this).addClass('active')
+  controls.toggle(false)
+  movements.unlock()
+  movements.gravity(true)
+  cam.rotationX = 0
+  cam.rotationY = -cam.rotationY
+  cam.x = 0
+  cam.y = viewHeight + 100
+  cam.z = 0
+})
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.radius = 20
 
+  viewHeight = 100
+
 	scene.width = window.innerWidth/2
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
 
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
@@ -270,10 +312,16 @@ function build () {
 
 	animate(0)
 }
-function animate(time){
+var last_t = 0
+function animate(t){
   requestAnimationFrame(animate)
-  map.update(time)
 
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
 	controls.update()
   scene.update()
 
-- 
cgit v1.2.3-70-g09d2


From 3916282fc61cb1143dfc33d79dfc3169293b0969 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 31 Mar 2015 17:30:53 -0400
Subject: rightclick to recenter

---
 public/assets/javascripts/rectangles/util/coords.js |  2 +-
 public/assets/test/ortho2.html                      | 12 +++++++++++-
 public/assets/test/ortho3.html                      |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/rectangles/util/coords.js b/public/assets/javascripts/rectangles/util/coords.js
index 74b7fda..ff56199 100644
--- a/public/assets/javascripts/rectangles/util/coords.js
+++ b/public/assets/javascripts/rectangles/util/coords.js
@@ -30,4 +30,4 @@ function offsetFromPoint(event, element) {
       return 'left: ' + l + '%, top: ' + t + '%';
     }
   } : null;
-}
+}
\ No newline at end of file
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index d6f0c5c..2c600f5 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -50,6 +50,7 @@ body {
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
@@ -298,7 +299,16 @@ function build () {
     rotationY: PI,
   })
   scene.add(floorplan)
-  
+  floorplan.el.addEventListener("contextmenu", function(e){
+    e.preventDefault()
+    var offset = offsetFromPoint(e, this)
+    var x = (offset.left - 0.5) * floorplan.width
+    var z = (offset.top - 0.5) * floorplan.height
+    controls.opt.center.x = -x
+    controls.opt.center.y = 0
+    controls.opt.center.z = -z
+  }, true)
+
 	scene.update()
 
 	controls = new MX.OrbitCamera({
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 19bb13a..37bf620 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -38,6 +38,7 @@ body {
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
-- 
cgit v1.2.3-70-g09d2


From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Apr 2015 17:54:30 -0400
Subject: abstract out map tools

---
 .../javascripts/mx/extensions/mx.movements.js      |   8 +-
 .../javascripts/rectangles/engine/map/ui_ortho.js  |  49 +++
 .../rectangles/engine/sculpture/types/_object.js   |   2 +-
 public/assets/test/ortho2.html                     | 158 ++++-----
 public/assets/test/ortho3.html                     | 394 +++++++++++++++------
 5 files changed, 421 insertions(+), 190 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index cf00adb..931caac 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -94,12 +94,12 @@ MX.Movements = function (cam) {
 					moveRight = true
 					break
 
-				// case 37: // left
+				case 37: // left
 				case 81: // q
 					turnLeft = true
 					break
 						
-				// case 39: // right
+				case 39: // right
 				case 69: // e
 					turnRight = true
 					break
@@ -200,12 +200,12 @@ MX.Movements = function (cam) {
 					moveRight = false
 					break
 
-				// case 37: // left
+				case 37: // left
 				case 81: // q
 					turnLeft = false
 					break
 						
-				// case 39: // right
+				case 39: // right
 				case 69: // e
 					turnRight = false
 					break
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index e69de29..0c501ad 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -0,0 +1,49 @@
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].down(e, cursor)
+		},
+		move: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].move(e, cursor)
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+      base.tools[currentTool].drag(e, cursor)
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].up(e, cursor, new_cursor)
+		}
+	})
+	
+	var currentTool = "polyline"
+	base.setTool = function(s){
+	  currentTool = s
+	}
+	base.tools = {
+	  polyline: new PolylineTool,
+	  position: new PositionTool,
+	}
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 2f24ae5..2f593e8 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 	    else {
 	      this.mx.el.classList.add("backface-visible")
 	      this.mx.el.classList.remove("backface-hidden")
-	      this.mx.rotationY = PI/2
+	      this.mx.rotationY = quantize(cam.rotationY, PI/2)
 	    }
 	    Sculpture.resize.move_dots()
     },
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 2c600f5..49e0308 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -41,6 +41,7 @@ body {
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script src="/assets/javascripts/vendor/polyfill.js"></script>
 <script src="/assets/javascripts/vendor/tube.js"></script>
 <script src="/assets/javascripts/mx/mx.js"></script>
@@ -66,92 +67,87 @@ app.tube = new Tube ()
 app.on = function(){ app.tube.on.apply(app.tube, arguments) }
 app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
-
-	var base = this
-
-	base.creating = base.dragging = base.resizing = false
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+  }
+  return exports
+})
 
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){
+      cursor.quantize(1/map.zoom)
+      map.center.a = cursor.x.a
+      map.center.b = -cursor.y.a
+      cursor.x.b = cursor.x.a
+      cursor.y.b = cursor.y.a
+      map.ui.mouse.down = false
+	  },
+  }
+  return exports
+})
 
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          placing = false
-					add_mx_polyline(points)
-          return
+var PolylineTool = MapTool.extend(function (base) {
+  var exports = {}
+  exports.down = function(e, cursor){
+
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (placing) {
+        // close polyline or cancel
+        placing = false
+        if (points.length > 2) {
+          add_mx_polyline(points)
+        }
+        else {
+          points.length = 0
         }
-        cursor.quantize(1/map.zoom)
-        map.center.a = cursor.x.a
-        map.center.b = -cursor.y.a
-        cursor.x.b = cursor.x.a
-        cursor.y.b = cursor.y.a
-        base.mouse.down = false
-        e.preventDefault()
-        e.stopPropagation()
         return
       }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
 
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-					add_mx_polyline(points)
-				}
-				else {
-					points.push( p )
-          mx_points.push( add_mx_point(p) )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
+    // compare to initial point
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing) {
+      if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
+        points.push( points[0].clone() )
+        placing = false
+        add_mx_polyline(points)
+      }
+      else {
+        points.push( p )
         mx_points.push( add_mx_point(p) )
-			}
-		},
-		move: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-
-			last_point = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
-				document.body.style.cursor = "pointer"
-				last_point.assign(points[0])
-				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b = last_point.b
-			}
-			else {
-				document.body.style.cursor = "crosshair"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
-
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
-
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
-	}
-}
-
+      }
+    }
+    else {
+      placing = true
+      points = []
+      points.push( p )
+      mx_points.push( add_mx_point(p) )
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(points[0])
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
 var scene, map, controls
 
@@ -302,8 +298,8 @@ function build () {
   floorplan.el.addEventListener("contextmenu", function(e){
     e.preventDefault()
     var offset = offsetFromPoint(e, this)
-    var x = (offset.left - 0.5) * floorplan.width
-    var z = (offset.top - 0.5) * floorplan.height
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
     controls.opt.center.x = -x
     controls.opt.center.y = 0
     controls.opt.center.z = -z
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 37bf620..a41eb8b 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -1,3 +1,4 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 <style type="text/css">
 html,body{width:100%;height:100%;margin:0;padding:0;}
 body {
@@ -14,118 +15,256 @@ body {
 	left:50%;
 	top:0px
 }
-#hud {
-	white-space: pre;
+.hud {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
 }
+.ortho-hud {
+  left: 50%;
+  border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
 </style>
 
 <div id="perspective"></div>
 <div id="orthographic"></div>
 
-<div id="hud"></div>
+<div class="hud persp-hud">
+  <input type="text" id="url" placeholder="paste an image URL here!">
+  <span class="ion-ionic active" data-role="orbit-mode"></span>
+  <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<div class="hud ortho-hud">
+  <span class="ion-navigate active" data-role="arrow-mode"></span>
+  <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+  <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+</div>
 
 <script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script src="/assets/javascripts/vendor/polyfill.js"></script>
 <script src="/assets/javascripts/vendor/tube.js"></script>
 <script src="/assets/javascripts/mx/mx.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
-<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
-<script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
-	var base = this
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+  }
+  return exports
+})
 
-	base.creating = base.dragging = base.resizing = false
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){
+      cursor.quantize(1/map.zoom)
+      map.center.a = cursor.x.a
+      map.center.b = -cursor.y.a
+      cursor.x.b = cursor.x.a
+      cursor.y.b = cursor.y.a
+      map.ui.mouse.down = false
+	  },
+  }
+  return exports
+})
 
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+var PolylineTool = MapTool.extend(function (base) {
+  var exports = {}
+  exports.down = function(e, cursor){
 
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          return
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (placing) {
+        // close polyline or cancel
+        placing = false
+        if (line.points.length > 2) {
+          line.build()
+          line.closed = false
+        }
+        else {
+          line.reset()
         }
-        e.preventDefault()
-        e.stopPropagation()
-        cursor.quantize(1/map.zoom)
-        map.center.a = cursor.x.a
-        map.center.b = -cursor.y.a
-        cursor.x.b = cursor.x.a
-        cursor.y.b = cursor.y.a
-        base.mouse.down = false
         return
       }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
 
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-				}
-				else {
-					points.push( p )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
-			}
-		},
-		move: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-			last_point = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
-				document.body.style.cursor = "pointer"
-				last_point.assign(points[0])
-				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b = last_point.b
-			}
-			else {
-				document.body.style.cursor = "crosshair"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
+    // compare to initial point
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing) {
+      if (line.points.length > 2 && line.points[0].distanceTo( p ) < 10/map.zoom) {
+        line.points.push( line.points[0].clone() )
+        line.build()
+        placing = false
+      }
+      else {
+        line.add(p)
+      }
+    }
+    else {
+      placing = true
+      line = new Polyline ()
+      line.add(p)
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && line.points.length > 1 && line.points[0].distanceTo( last_point ) < 10/map.zoom) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(line.points[0])
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
+var Polyline = Fiber.extend(function(base){
+	var exports = {}
+	
+	exports.init = function(){
+    this.points = []
+    this.mx_points = []
+    this.closed = false
+	}
 
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
+	exports.add = function(p){
+    this.points.push( p )
+    this.mx_points.push( new MX.Point(p) )
 	}
-}
+
+  exports.draw = function(ctx){
+    var points = this.points
+    if (! points.length) return
+    if (points.length == 1) {
+      ctx.fillStyle = "#f80"
+      map.draw.dot_at(this.points[0].a, points[0].b, 5)
+    }
+    if (points.length > 1) {
+      ctx.fillStyle = "rgba(255,255,0,0.1)"
+      ctx.strokeStyle = "#f80"
+      ctx.lineWidth = 2 / map.zoom
+      ctx.beginPath()
+      ctx.moveTo(points[0].a, points[0].b)
+      points.forEach(function(point, i){
+        i && ctx.lineTo(point.a, point.b)
+      })
+      ctx.stroke()
+      if (! placing || this.closed) {
+        ctx.fill()
+      }
+    }
+  }
+  exports.draw_line = function (ctx, p){
+    var last = this.points[this.points.length-1]
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(last.a, last.b)
+    ctx.lineTo(p.a, p.b)
+    ctx.stroke()
+  }
+  exports.build = function(){
+    this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.mx = new MX.Polyline(this)
+    this.closed = true
+    shapes.push(this)
+  }
+  exports.reset = function(){
+    this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.points.length = 0
+    this.mx_points.length = 0
+  }
+  return exports
+})
+
+MX.Polyline = MX.Object3D.extend({
+  init: function(polyline){
+    var faces = [], points = polyline.points
+    for (var i = 1; i < points.length; i++) {
+      var head = points[i-1]
+      var tail = points[i]
+      face = this.add_face(head, tail)
+      faces.push(face)
+    }
+  },
+
+  add_face: function (head, tail){
+    var mx = new MX.Object3D()
+    var mid_x = (head.a + tail.a)
+    var mid_z = (head.b + tail.b)
+    var len = head.distanceTo( tail )
+    var angle = atan2( head.b - tail.b, head.a - tail.a )
+    mx.move({
+      x: mid_x / 2,
+      y: wall_height/2 + 1,
+      z: mid_z / 2,
+      width: ceil(len),
+      height: wall_height,
+      rotationY: angle
+    })
+    var hue = abs(round( angle / PI * 90 + 300))
+    mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+    scene.add(mx)
+    return mx
+  }
+})
+
+MX.Point = MX.Object3D.extend({
+  init: function(p){
+    this.updateChildren = false
+    this.move({
+      x: p.a,
+      y: 11,
+      z: p.b,
+      width: 20,
+      height: 20,
+      rotationX: PI/2,
+    })
+    this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
+    this.el.style.backfaceVisibility = "visible"
+    this.el.style.borderRadius = "50%"
+    scene.add(this)
+  }
+})
 
 
 var scene, map, controls
@@ -142,43 +281,76 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-
+var wall_height = 180
 var placing = false
-var points = []
+var line
 var shapes = []
 var ctx = map.draw.ctx
 var last_point
 
-function polyline (points, finished) {
-  if (! points) return
-  if (points.length == 1) {
-    ctx.fillStyle = "#f80"
-    map.draw.dot_at(points[0].a, points[0].b, 5)
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
+
+var Toolbar = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(rapper){
+    this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper
+    this.tools = {}
   }
-  if (points.length > 1) {
-    ctx.fillStyle = "#ff0"
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[0].a, points[0].b)
-    points.forEach(function(point, i){
-      i && ctx.lineTo(point.a, point.b)
+  exports.add = function(role, fn){
+    this.tools[role] = fn
+    $("[data-role=" + role + "]", self.rapper).click(function(){
+      $(".active", self.rapper).removeClass('active')
+      $(this).addClass('active')
+      fn()
     })
-		ctx.stroke()
-    if (! placing || finished) {
-      ctx.fill()
-    }
   }
-}
+  return exports
+})
+
+var PerspectiveToolbar = new Toolbar (".persp-hud")
+PerspectiveToolbar.add("orbit-mode", function(){
+  controls.toggle(true)
+  movements.lock()
+})
+PerspectiveToolbar.add("keyboard-mode", function(){
+  controls.toggle(false)
+  movements.unlock()
+  movements.gravity(true)
+  cam.rotationX = 0
+  cam.rotationY = -cam.rotationY
+  cam.x = 0
+  cam.y = viewHeight + 100
+  cam.z = 0
+})
+
+var OrthographicToolbar = new Toolbar (".ortho-hud")
+OrthographicToolbar.add("", function(){
+})
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.radius = 20
 
+  viewHeight = 100
+
 	scene.width = window.innerWidth/2
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
 
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
@@ -188,6 +360,17 @@ function build () {
   })
   scene.add(floorplan)
   
+  // recenter perspective view by rightclicking map
+  floorplan.el.addEventListener("contextmenu", function(e){
+    e.preventDefault()
+    var offset = offsetFromPoint(e, this)
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+    controls.opt.center.x = -x
+    controls.opt.center.y = 0
+    controls.opt.center.z = -z
+  }, true)
+
 	scene.update()
 
 	controls = new MX.OrbitCamera({
@@ -201,10 +384,16 @@ function build () {
 
 	animate(0)
 }
-function animate(time){
+var last_t = 0
+function animate(t){
   requestAnimationFrame(animate)
-  map.update(time)
 
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
 	controls.update()
   scene.update()
 
@@ -215,18 +404,15 @@ function animate(time){
 
 	map.draw.coords()
 
-  polyline(points)
-  if (placing && last_point) {
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
-    ctx.lineTo(last_point.a, last_point.b)
-    ctx.stroke()
+  if (line) {
+    line.draw(map.draw.ctx)
+    if (placing && last_point) {
+      line.draw_line( map.draw.ctx, last_point )
+    }
   }
 
   shapes.forEach(function(shape){
-    polyline(shape.points, true)
+    shape.draw(map.draw.ctx)
   })
 
   ctx.strokeStyle = "#f00";
-- 
cgit v1.2.3-70-g09d2


From 6438a70116adf0516407a55606d859a5c85083d6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Apr 2015 20:22:39 -0400
Subject: finding closest point and segment

---
 .../javascripts/rectangles/engine/map/ui_ortho.js  |  10 +-
 public/assets/test/ortho2.html                     |   4 +
 public/assets/test/ortho3.html                     | 135 +++++++++++++++++++--
 3 files changed, 131 insertions(+), 18 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index 0c501ad..2177aaa 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -30,13 +30,13 @@ Map.UI.Ortho = function(map){
 	})
 	
 	var currentTool = "polyline"
-	base.setTool = function(s){
-	  currentTool = s
+	base.add_tool = function(name, tool){
+	  base.tools[name] = tool
 	}
-	base.tools = {
-	  polyline: new PolylineTool,
-	  position: new PositionTool,
+	base.set_tool = function(s){
+	  currentTool = s
 	}
+	base.tools = {}
 
 	base.wheel = new wheel({
 		el: map.el,
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 49e0308..013c75b 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -158,6 +158,10 @@ map = new Map ({
 	height: window.innerHeight,
 	zoom: -2,
 })
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+map.ui.add_tool("position", new PositionTool)
+
 $(window).resize(function(){
   scene.width = window.innerWidth/2
   map.canvas.width = map.dimensions.a = window.innerWidth/2
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index a41eb8b..467cbec 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -41,7 +41,7 @@ body {
 </div>
 
 <div class="hud ortho-hud">
-  <span class="ion-navigate active" data-role="arrow-mode"></span>
+  <span class="ion-navigate" data-role="arrow-mode"></span>
   <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
   <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
 </div>
@@ -86,6 +86,32 @@ var MapTool = Fiber.extend(function(base){
   return exports
 })
 
+var ArrowTool = MapTool.extend(function(base){
+	var exports = {}
+	
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var p
+    for (var i = 0; i < shapes.length; i++) {
+      p = shapes[i].hasPointNear(last_point)
+      if (p) break;
+    }
+    
+    if (p) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(line.points[0])
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+	}
+	
+	return exports
+})
+
 var PositionTool = MapTool.extend(function(base){
 	var exports = {
 	  down: function(e, cursor){
@@ -127,7 +153,7 @@ var PolylineTool = MapTool.extend(function (base) {
     // compare to initial point
     var p = new vec2( cursor.x.a, cursor.y.a )
     if (placing) {
-      if (line.points.length > 2 && line.points[0].distanceTo( p ) < 10/map.zoom) {
+      if (line.canCloseWith(p)) {
         line.points.push( line.points[0].clone() )
         line.build()
         placing = false
@@ -143,8 +169,9 @@ var PolylineTool = MapTool.extend(function (base) {
     }
   }
   exports.move = function(e, cursor){
-    last_point = new vec2( cursor.x.a, cursor.y.a )
-    if (placing && line.points.length > 1 && line.points[0].distanceTo( last_point ) < 10/map.zoom) {
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    if (placing && line.canCloseWith(last_point)) {
       document.body.style.cursor = "pointer"
       last_point.assign(line.points[0])
       cursor.x.a = cursor.x.b = last_point.a
@@ -157,6 +184,11 @@ var PolylineTool = MapTool.extend(function (base) {
   return exports
 })
 
+var OrthoPolylineTool = MapTool.extend(function (base) {
+  
+})
+
+
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
 	
@@ -170,6 +202,58 @@ var Polyline = Fiber.extend(function(base){
     this.points.push( p )
     this.mx_points.push( new MX.Point(p) )
 	}
+	
+	exports.canCloseWith = function(p){
+    return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom)
+	}
+	
+	exports.hasPointNear = function(p){
+	  var point
+    for (var i = 0; i < this.points.length; i++){
+      point = this.points[i]
+      console.log(point.distanceTo( p ))
+      if (point.distanceTo( p ) < 10/map.zoom) {
+        return point
+      }
+    }
+    return null
+	}
+	
+	exports.hasSegmentNear = function(p, min_dist){
+    var p1, p2, d1, d2, sum, rat
+    var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity
+    var closest_i = -1
+    var points = this.points
+    for (var i = 1; i < points.length; i++) {
+      d1 = p1.a - p2.a
+      d2 = p1.b - p2.b
+      sum = d1*d1 + d2*d2
+      rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum
+      rat = rat < 0 ? 0 : rat < 1 ? rat : 1
+      new_x = p1.a + rat * d1
+      new_y = p1.b + rat * d2
+      dx = new_x - p.a
+      dy = new_y - p.b
+      sum2 = sqrt(dx*dx+dy*dy)
+      if (sum2 < closest_distance) {
+        x = new_x
+        y = new_y
+        closest_distance = sum2
+        closest_i = i
+      }
+    }
+    if (closest_i == -1) return null
+    return {
+      x: x,
+      y: y,
+      distance: closest_distance,
+      index: closest_i,
+    }
+	}
+	
+	exports.getSegment = function(i){
+	  return [ points[i], points[i+1] ]
+	}
 
   exports.draw = function(ctx){
     var points = this.points
@@ -208,6 +292,9 @@ var Polyline = Fiber.extend(function(base){
     this.closed = true
     shapes.push(this)
   }
+  exports.rebuild = function(){
+    this.mx.rebuild()
+  }
   exports.reset = function(){
     this.mx_points.forEach(function(mx){ scene.remove(mx) })
     this.points.length = 0
@@ -218,17 +305,28 @@ var Polyline = Fiber.extend(function(base){
 
 MX.Polyline = MX.Object3D.extend({
   init: function(polyline){
-    var faces = [], points = polyline.points
+    this.faces = []
+    this.points = polyline.points
+    for (var i = 1; i < this.points.length; i++) {
+      var mx = new MX.Object3D()
+      var head = this.points[i-1]
+      var tail = this.points[i]
+      face = this.move_face(mx, head, tail)
+      this.faces.push(face)
+      scene.add(mx)
+    }
+  },
+  
+  rebuild: function(){
     for (var i = 1; i < points.length; i++) {
+      var mx = this.faces[i-1]
       var head = points[i-1]
       var tail = points[i]
-      face = this.add_face(head, tail)
-      faces.push(face)
+      this.move_face(mx, head, tail)
     }
   },
 
-  add_face: function (head, tail){
-    var mx = new MX.Object3D()
+  move_face: function (mx, head, tail){
     var mid_x = (head.a + tail.a)
     var mid_z = (head.b + tail.b)
     var len = head.distanceTo( tail )
@@ -243,8 +341,6 @@ MX.Polyline = MX.Object3D.extend({
     })
     var hue = abs(round( angle / PI * 90 + 300))
     mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
-    scene.add(mx)
-    return mx
   }
 })
 
@@ -276,6 +372,11 @@ map = new Map ({
 	height: window.innerHeight,
 	zoom: -2,
 })
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+map.ui.add_tool("position", new PositionTool)
+
 $(window).resize(function(){
   scene.width = window.innerWidth/2
   map.canvas.width = map.dimensions.a = window.innerWidth/2
@@ -286,7 +387,7 @@ var placing = false
 var line
 var shapes = []
 var ctx = map.draw.ctx
-var last_point
+var last_point = new vec2 (0,0)
 
 $("#url").on("input", function(){
   floorplan.load({ src: this.value })
@@ -300,6 +401,7 @@ var Toolbar = Fiber.extend(function(base){
     this.tools = {}
   }
   exports.add = function(role, fn){
+    var self = this
     this.tools[role] = fn
     $("[data-role=" + role + "]", self.rapper).click(function(){
       $(".active", self.rapper).removeClass('active')
@@ -327,7 +429,14 @@ PerspectiveToolbar.add("keyboard-mode", function(){
 })
 
 var OrthographicToolbar = new Toolbar (".ortho-hud")
-OrthographicToolbar.add("", function(){
+OrthographicToolbar.add("arrow-mode", function(){
+  map.ui.set_tool("arrow")
+})
+OrthographicToolbar.add("polyline-mode", function(){
+  map.ui.set_tool("polyline")
+})
+OrthographicToolbar.add("ortho-polyline-mode", function(){
+  map.ui.set_tool("ortho-polyline")
 })
 
 document.addEventListener('DOMContentLoaded', build)
-- 
cgit v1.2.3-70-g09d2


From 72afc148b11ac57c991d699c205675b4b0f1cf70 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 18 Aug 2015 19:35:02 -0400
Subject: set wall height

---
 public/assets/javascripts/defaults.js              |  1 +
 .../javascripts/mx/primitives/mx.polyline.js       | 11 +++++++++--
 .../javascripts/rectangles/engine/map/_map.js      |  2 +-
 .../javascripts/ui/blueprint/BlueprintEditor.js    |  2 +-
 .../javascripts/ui/blueprint/BlueprintInfo.js      | 23 ++++++++--------------
 .../javascripts/ui/blueprint/BlueprintScaler.js    |  4 ++--
 .../javascripts/ui/blueprint/BlueprintView.js      |  7 ++-----
 public/assets/test/ortho2.html                     |  6 +++---
 public/assets/test/ortho3.html                     |  2 +-
 public/assets/test/ortho4.html                     |  2 +-
 views/controls/blueprint/info.ejs                  |  2 --
 11 files changed, 29 insertions(+), 33 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index 413bb13..1e1ac5b 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -1,6 +1,7 @@
 app = window.app || {}
 app.defaults = {
 	viewHeight: window.viewHeight = 186,
+	wallHeight: 397,
 	units: app.units = "ft",
 	footResolution: 36,
 	meterResolution: 100,
diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js
index 555b3c6..63c0ef8 100644
--- a/public/assets/javascripts/mx/primitives/mx.polyline.js
+++ b/public/assets/javascripts/mx/primitives/mx.polyline.js
@@ -28,16 +28,23 @@ MX.Polyline = MX.Object3D.extend({
     var angle = atan2( head.b - tail.b, head.a - tail.a )
     mx.move({
       x: mid_x / 2,
-      y: wall_height/2 + 1,
+      y: wallHeight/2 + 1,
       z: mid_z / 2,
       width: ceil(len),
-      height: wall_height,
+      height: wallHeight,
       rotationY: angle
     })
     var hue = abs(round( angle / PI * 90 + 300))
     mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
   },
   
+  set_height: function(height){
+    for (var i = 0; i < this.faces.length; i++) {
+      this.faces[i].height = height
+      this.faces[i].y = height / 2 + 1
+    }
+  },
+  
   destroy: function(){
     this.faces.forEach(function(mx){
       scene.remove(mx)
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index e3d7621..2aee962 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -51,7 +51,7 @@ var Map = function(opt){
 		case "ortho":
 			base.draw = new Map.Draw (base, { ortho: true })
 			base.ui = new Map.UI.Ortho (base)
-			base.sides = base.sides_for_camera
+			base.sides = base.sides_for_center
 			$(window).resize(base.resize)
 			break
 		
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index 72c129a..73f21c0 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -1,5 +1,5 @@
 
-var wall_height = 180
+var wallHeight = 180
 var shapes = new ShapeList
 var last_point = new vec2 (0,0)
 
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js
index ad462ae..6dd6a7d 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js
@@ -5,15 +5,16 @@ var BlueprintInfo = View.extend({
 	events: {
 	  "mousedown": "stopPropagation",
 		"keydown": 'stopPropagation',
+		"change [name=height]": 'changeHeight',
 		"keydown [name=height]": 'enterHeight',
 		"change [name=units]": 'changeUnits',
 		"keydown [name=viewHeight]": 'enterViewHeight',
 		"change [name=viewHeight]": 'changeViewHeight',
-		"click [data-role=destroy-room]": 'destroy',
 	},
 	
 	initialize: function(opt){
 		this.parent = opt.parent
+		this.$height = this.$("[name=height]")
 		this.$units = this.$("[name=units]")
 		this.$viewHeight = this.$("[name=viewHeight]")
 		this.$unitName = this.$(".unitName")
@@ -21,8 +22,10 @@ var BlueprintInfo = View.extend({
 	
 	load: function(data){
 		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
+		this.$height.unitVal( window.wallHeight = data.wallHeight || app.defaults.wallHeight )
 		this.$units.val( data.units )
 		this.$unitName.html( data.units )
+		this.show()
 	},
 
 	toggle: function(state){
@@ -35,17 +38,10 @@ var BlueprintInfo = View.extend({
 	},
 	
 	hide: function(){
-	  this.room = null
 		this.toggle(false)
 	},
-
-	room: null,
-	
-	pick: function(room){
-	},
 	
 	deselect: function(){
-	  this.room = null
 	  this.toggle(true)
 	},
 
@@ -54,13 +50,10 @@ var BlueprintInfo = View.extend({
 	},
 	changeHeight: function(e){
 		e.stopPropagation()
-		var height = this.room.height = this.$height.unitVal()
-		if (window.heightIsGlobal) {
-		  Rooms.forEach(function(room){
-		    room.height = height
-		  })
-		}
-    Rooms.rebuild()
+		window.wallHeight = this.$height.unitVal()
+		shapes.forEach(function(line){
+      line.mx.set_height( window.wallHeight )
+    })
 	},
 	changeUnits: function(){
 		app.units = this.$units.val()
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index 0f2fdcd..5bd2229 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -48,7 +48,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
     this.floorplan.load({ media: media, scale: 1, keepImage: true })
 
     if (!! media.units && ! shouldEdit) {
-      this.parent.useFloorplan(media)
+      this.parent.ready(media)
       this.hide()
       this.stopAnimating()
       return
@@ -149,7 +149,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
 	success: function(){
 	  this.media.scale = this.$dimensions.unitVal() / this.lineLength()
     this.stopAnimating()
-    this.parent.useFloorplan(this.media)
+    this.parent.ready(this.media)
     this.hide()
 	},
 
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index a59f44f..f919cc7 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -54,16 +54,13 @@ var BlueprintView = View.extend({
 	
 	ready: function(data){
 // 		this.settings.load(data)
-// 		this.info.load(data)
+		this.info.load(data)
+	  this.editor.loadFloorplan(data)
 	},
 	
 	hideExtras: function(){
 	},
 	
-	useFloorplan: function(media){
-	  this.editor.loadFloorplan(media)
-	},
-
 	pickWall: function(wall, pos){
 	},
 
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 013c75b..448f029 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -167,7 +167,7 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-var wall_height = 180
+var wallHeight = 180
 var placing = false
 var points, mx_points = []
 var shapes = []
@@ -219,10 +219,10 @@ function add_mx_polyline_face(head, tail){
   var angle = atan2( head.b - tail.b, head.a - tail.a )
   mx.move({
     x: mid_x / 2,
-    y: wall_height/2 + 1,
+    y: wallHeight/2 + 1,
     z: mid_z / 2,
     width: ceil(len),
-    height: wall_height,
+    height: wallHeight,
     rotationY: angle
   })
   var hue = abs(round( angle / PI * 90 + 300))
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index f41a0ba..71e43f1 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -112,7 +112,7 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-var wall_height = 180
+var wallHeight = 180
 var shapes = new ShapeList
 var ctx = map.draw.ctx
 var last_point = new vec2 (0,0)
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
index d704e0e..8db7ead 100644
--- a/public/assets/test/ortho4.html
+++ b/public/assets/test/ortho4.html
@@ -165,7 +165,7 @@ $(window).resize(function(){
   map.canvas.height = map.dimensions.b = window.innerHeight/2
 })
 
-var wall_height = 180
+var wallHeight = 180
 var shapes = new ShapeList
 var ctx = map.draw.ctx
 var last_point = new vec2 (0,0)
diff --git a/views/controls/blueprint/info.ejs b/views/controls/blueprint/info.ejs
index f994629..9f7d708 100644
--- a/views/controls/blueprint/info.ejs
+++ b/views/controls/blueprint/info.ejs
@@ -4,8 +4,6 @@
 	<div class="setting number twoline">
 		<label for="room-height">ceiling height</label>
 		<input type="text" class="units" name="height" id="room-height">
-		<label for="room-height-global" id="room-height-global-label">global?</label>
-		<input type="checkbox" name="heightGlobal" id="room-height-global">
 	</div>
 
 	<div class="setting number twoline">
-- 
cgit v1.2.3-70-g09d2


From a9bf197a6e8f91cc91d772238168d9be1beb3c4d Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 25 Aug 2015 12:15:14 -0400
Subject: makin sure tests work

---
 .../javascripts/rectangles/engine/map/tools/line.js      | 16 +++++++++++++++-
 .../javascripts/rectangles/engine/map/tools/ortho.js     |  2 ++
 .../javascripts/rectangles/engine/map/tools/polyline.js  |  2 ++
 .../javascripts/rectangles/engine/shapes/polyline.js     |  1 -
 .../javascripts/rectangles/engine/shapes/regionlist.js   |  2 +-
 .../javascripts/rectangles/engine/shapes/shapelist.js    |  7 ++++++-
 .../assets/javascripts/ui/blueprint/BlueprintEditor.js   |  8 ++++----
 .../assets/javascripts/ui/blueprint/BlueprintSettings.js |  1 +
 public/assets/test/ortho2.html                           |  9 ++++++++-
 9 files changed, 39 insertions(+), 9 deletions(-)

(limited to 'public/assets/test/ortho2.html')

diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js
index 8f409a8..8fe4fff 100644
--- a/public/assets/javascripts/rectangles/engine/map/tools/line.js
+++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js
@@ -1,3 +1,6 @@
+// This tool lets you define a very simple line between two points.
+// It is used by the BlueprintScaler to specify a sample distance to scale.
+
 var LineTool = MapTool.extend(function(base){
 	var exports = {}
 	
@@ -8,6 +11,17 @@ var LineTool = MapTool.extend(function(base){
 	var can_drag, dragging
 	
 	exports.down = function(e, cursor){
+
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      cursor.quantize(1/map.zoom)
+      app.router.blueprintView.map.center.a = cursor.x.a
+      app.router.blueprintView.map.center.b = -cursor.y.a
+      cursor.x.b = cursor.x.a
+      cursor.y.b = cursor.y.a
+      return
+    }
+    
 	  this.cursor = cursor
 	  switch (line.length) {
 	    case 0:
@@ -44,6 +58,6 @@ var LineTool = MapTool.extend(function(base){
 	exports.up = function(e, cursor){
 	  can_drag = dragging = false
 	}
-	
+
 	return exports
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
index ef41096..918ac0d 100644
--- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
@@ -14,6 +14,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
         map.ui.placing = false
         if (shapes.workline.points.length > 2) {
           shapes.workline.build()
+          shapes.add(shapes.workline)
         }
         else {
           shapes.workline.reset()
@@ -35,6 +36,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
       else if (shapes.workline.canCloseWith(p)) {
         shapes.workline.close()
         shapes.workline.build()
+        shapes.add(shapes.workline)
         map.ui.placing = false
       }
       else {
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
index 1ab86f6..6716180 100644
--- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
@@ -11,6 +11,7 @@ var PolylineTool = MapTool.extend(function (base) {
         map.ui.placing = false
         if (shapes.workline.points.length > 2) {
           shapes.workline.build()
+          shapes.add(shapes.workline)
         }
         else {
           shapes.workline.reset()
@@ -27,6 +28,7 @@ var PolylineTool = MapTool.extend(function (base) {
       if (shapes.workline.canCloseWith(p)) {
         shapes.workline.close()
         shapes.workline.build()
+        shapes.add(shapes.workline)
         map.ui.placing = false
       }
       else {
diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
index 609a2c8..54e11c6 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
@@ -133,7 +133,6 @@ var Polyline = Fiber.extend(function(base){
   exports.build = function(){
     this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) })
     this.mx = new MX.Polyline(this)
-    shapes.add(this)
   }
   exports.rebuild = function(){
     this.mx.rebuild()
diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
index 663f3fd..86269a6 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
@@ -169,7 +169,7 @@ var RegionList = (function(){
       }
     }
 
-    return { rooms: rooms }
+    return rooms
   }
   
   
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
index 90714c2..9cbf165 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -85,8 +85,13 @@ var ShapeList = Fiber.extend(function(base){
     data && data.forEach(function(points){
       var line = new Polyline()
       line.deserialize(points)
-      line.build()
+      shapes.add(line)
     }.bind(this))
   }
+  exports.build = function(){
+    this.shapes.forEach(function(shape){
+      shape.build()
+    })
+  }
   return exports
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index a341a24..547cdca 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -5,7 +5,7 @@ var last_point = new vec2 (0,0)
 
 var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
 
-  rooms: [],
+  regions: [],
 
   initialize: function(opt){
     this.parent = opt.parent
@@ -82,7 +82,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
       scale: media.scale,
     })
     this.startAnimating()
-    this.rooms = RegionList.build()
+    this.regions = RegionList.build()
   },
   
   animate: function(t, dt){
@@ -118,9 +118,9 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
 //    var colors = ["rgba(0,0,0,0.1)"]
 //     var colors = ["rgba(255,255,255,1)"]
 // 
-    map.draw.regions(this.rooms.rooms, colors, "#000")
+    map.draw.regions(this.regions, colors, "#000")
 
-//     this.rooms.rooms.forEach(function(room,i){
+//     this.regions.forEach(function(room,i){
 //       map.draw.ctx.fillStyle = colors[i % colors.length]
 //       map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() )
 //     })
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js
index 252e3f1..9c8808a 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js
@@ -35,6 +35,7 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({
 		if (data.shapes) {
       shapes.destroy()
       shapes.deserialize( data.shapes )
+      shapes.build()
 		}
 		this.data = data
 	},
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 448f029..ef77256 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -58,7 +58,9 @@ body {
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
@@ -73,6 +75,7 @@ var MapTool = Fiber.extend(function(base){
 	  move: function(e, cursor){},
 	  drag: function(e, cursor){},
 	  up: function(e, cursor, new_cursor){},
+	  cancel: function(){},
   }
   return exports
 })
@@ -150,6 +153,7 @@ var PolylineTool = MapTool.extend(function (base) {
 })
 
 var scene, map, controls
+var last_point = new vec2(0,0)
 
 map = new Map ({
 	type: "ortho",
@@ -161,6 +165,7 @@ map = new Map ({
 map.ui.add_tool("arrow", new ArrowTool)
 map.ui.add_tool("polyline", new PolylineTool)
 map.ui.add_tool("position", new PositionTool)
+map.ui.set_tool("arrow")
 
 $(window).resize(function(){
   scene.width = window.innerWidth/2
@@ -174,6 +179,8 @@ var shapes = []
 var ctx = map.draw.ctx
 var last_point
 
+shapes.findClosestPoint = function(){}
+
 function polyline (points, finished) {
   if (! points) return
   if (points.length == 1) {
-- 
cgit v1.2.3-70-g09d2