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/ortho3.html | 239 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 239 insertions(+)
 create mode 100644 public/assets/test/ortho3.html

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

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 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/ortho3.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/ortho3.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/ortho3.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 4972f112cd9db77dfd977c666029f9d7172bee53 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Apr 2015 20:55:46 -0400
Subject: snapping to point

---
 public/assets/test/ortho3.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 467cbec..86f92d8 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -100,7 +100,7 @@ var ArrowTool = MapTool.extend(function(base){
     
     if (p) {
       document.body.style.cursor = "pointer"
-      last_point.assign(line.points[0])
+      last_point.assign(p)
       cursor.x.a = cursor.x.b = last_point.a
       cursor.y.a = cursor.y.b = last_point.b
     }
@@ -211,7 +211,6 @@ var Polyline = Fiber.extend(function(base){
 	  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
       }
-- 
cgit v1.2.3-70-g09d2


From 1c5d52929bcec9dfe0b15cf57e85c7b2808614b3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 29 Apr 2015 13:20:45 -0400
Subject: arrow tool for dragging points

---
 .../javascripts/rectangles/engine/map/ui_ortho.js  | 18 +++++-
 public/assets/test/ortho3.html                     | 71 +++++++++++++++++-----
 2 files changed, 72 insertions(+), 17 deletions(-)

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

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index 2177aaa..dab7354 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -2,40 +2,56 @@ Map.UI = Map.UI || {}
 Map.UI.Ortho = function(map){
 
 	var base = this
+	var last_event = null
 
 	base.creating = base.dragging = base.resizing = false
 
 	base.mouse = new mouse({
 		el: map.el,
 		down: function(e, cursor){
+		  last_event = e
 			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){
+		  last_event = e
 			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){
+		  last_event = e
 			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){
+		  last_event = e
 			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)
+      if (nextTool) {
+        base.set_tool(nextTool)
+        nextTool = null
+      }
 		}
 	})
 	
-	var currentTool = "polyline"
+	var currentTool = "polyline", nextTool
 	base.add_tool = function(name, tool){
 	  base.tools[name] = tool
 	}
 	base.set_tool = function(s){
+	  console.log("set tool to", s)
+	  base.tools[currentTool].cancel()
 	  currentTool = s
 	}
+	base.set_drag_tool = function(s){
+	  nextTool = currentTool
+	  currentTool = s
+    base.tools[s].down(last_event, base.mouse.cursor)
+	}
 	base.tools = {}
 
 	base.wheel = new wheel({
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 86f92d8..d6241ab 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -82,6 +82,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
 })
@@ -89,18 +90,29 @@ var MapTool = Fiber.extend(function(base){
 var ArrowTool = MapTool.extend(function(base){
 	var exports = {}
 	
-  exports.move = function(e, cursor){
+	var selected_point = null, original_point = null, selected_shape = null
+	
+	exports.down = 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;
+    var p = findClosestPoint(last_point)
+    if (p) {
+      selected_shape = p.shape
+      selected_point = p.point
+      original_point = selected_point.clone()
     }
-    
+    else {
+      map.ui.set_drag_tool("position")
+    }
+	}
+	
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var p = findClosestPoint(last_point)
     if (p) {
       document.body.style.cursor = "pointer"
-      last_point.assign(p)
+      last_point.assign(p.point)
       cursor.x.a = cursor.x.b = last_point.a
       cursor.y.a = cursor.y.b = last_point.b
     }
@@ -109,6 +121,16 @@ var ArrowTool = MapTool.extend(function(base){
     }
 	}
 	
+	exports.drag = function(e, cursor){
+    selected_point.a = original_point.a + cursor.x.magnitude()
+		selected_point.b = original_point.b + cursor.y.magnitude()
+		selected_shape.rebuild()
+	}
+	
+	exports.up = function(e, cursor){
+	  selected_point = selected_shape = original_point = null
+	}
+	
 	return exports
 })
 
@@ -139,7 +161,6 @@ var PolylineTool = MapTool.extend(function (base) {
         placing = false
         if (line.points.length > 2) {
           line.build()
-          line.closed = false
         }
         else {
           line.reset()
@@ -154,7 +175,7 @@ var PolylineTool = MapTool.extend(function (base) {
     var p = new vec2( cursor.x.a, cursor.y.a )
     if (placing) {
       if (line.canCloseWith(p)) {
-        line.points.push( line.points[0].clone() )
+        line.close()
         line.build()
         placing = false
       }
@@ -181,14 +202,29 @@ var PolylineTool = MapTool.extend(function (base) {
       document.body.style.cursor = "crosshair"
     }
   }
+  exports.cancel = function(){
+    if (placing) { line.reset() }
+    placing = false
+  }
   return exports
 })
 
 var OrthoPolylineTool = MapTool.extend(function (base) {
-  
+  // this will work like normal polyline except all walls will be orthogonal
 })
 
 
+// prefer to have this on the object that keeps track of the polylines
+function findClosestPoint (p){
+  var point
+  for (var i = 0; i < shapes.length; i++) {
+    point = shapes[i].hasPointNear(p)
+    if (point) return { point: point, shape: shapes[i] }
+  }
+  return null
+}
+
+
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
 	
@@ -285,10 +321,13 @@ var Polyline = Fiber.extend(function(base){
     ctx.lineTo(p.a, p.b)
     ctx.stroke()
   }
+  exports.close = function(){
+    this.points[this.points.length] = this.points[0]
+    this.closed = true
+  }
   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.rebuild = function(){
@@ -310,17 +349,17 @@ MX.Polyline = MX.Object3D.extend({
       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)
+      this.move_face(mx, head, tail)
+      this.faces.push(mx)
       scene.add(mx)
     }
   },
   
   rebuild: function(){
-    for (var i = 1; i < points.length; i++) {
+    for (var i = 1; i < this.points.length; i++) {
       var mx = this.faces[i-1]
-      var head = points[i-1]
-      var tail = points[i]
+      var head = this.points[i-1]
+      var tail = this.points[i]
       this.move_face(mx, head, tail)
     }
   },
-- 
cgit v1.2.3-70-g09d2


From e7da98b364c7792d9ff18d166613b4934c86030f Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 30 Apr 2015 15:05:02 -0400
Subject: orthogonal polyline tool

---
 public/assets/test/ortho3.html | 117 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 116 insertions(+), 1 deletion(-)

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

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index d6241ab..319f788 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -211,6 +211,108 @@ var PolylineTool = MapTool.extend(function (base) {
 
 var OrthoPolylineTool = MapTool.extend(function (base) {
   // this will work like normal polyline except all walls will be orthogonal
+  
+  var prev_point, horizontal = false, first_edge_is_horizontal = false
+  
+  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 (line.points.length > 2) {
+          line.build()
+        }
+        else {
+          line.reset()
+        }
+        return
+      }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
+
+    // compare to initial point
+    var p = last_point.clone()
+    if (placing) {
+      if (line.lastPoint().eq(p)) {
+        return
+      }
+      else if (line.canCloseWith(p)) {
+        line.close()
+        line.build()
+        placing = false
+      }
+      else {
+        line.add(p)
+        prev_point = p
+        horizontal = ! horizontal
+      }
+    }
+    else {
+      placing = true
+      line = new Polyline ()
+      line.add(p)
+      first_point = prev_point = p
+      horizontal = false
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    if (placing) {
+      if (line.points.length == 1) {
+        var x = abs(prev_point.a - last_point.a)
+        var y = abs(prev_point.b - last_point.b)
+        if (x > y) {
+          last_point.b = prev_point.b
+          first_edge_is_horizontal = horizontal = true
+        }
+        else {
+          last_point.a = prev_point.a
+          first_edge_is_horizontal = horizontal = false
+        }
+      }
+      else {
+        if (horizontal) {
+          last_point.b = prev_point.b
+        }
+        else {
+          last_point.a = prev_point.a
+        }
+        if (horizontal == first_edge_is_horizontal) {
+          // check if this point is within N pixels of the normal
+          // and lock it into place if so
+          if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
+            last_point.a = first_point.a
+          }
+          else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
+            last_point.b = first_point.b
+          }
+        }
+      }
+
+      if (line.canCloseWith(last_point)) {
+        document.body.style.cursor = "pointer"
+        last_point.assign(first_point)
+        cursor.x.a = cursor.x.b = last_point.a
+        cursor.y.a = cursor.y.b = last_point.b
+      }
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  exports.cancel = function(){
+    if (placing) { line.reset() }
+    first_point = null
+    placing = false
+  }
+  return exports
 })
 
 
@@ -239,6 +341,13 @@ var Polyline = Fiber.extend(function(base){
     this.mx_points.push( new MX.Point(p) )
 	}
 	
+	exports.firstPoint = function(){
+	  return this.points[0]
+	}
+	exports.lastPoint = function(){
+	  return this.points[this.points.length-1]
+	}
+	
 	exports.canCloseWith = function(p){
     return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom)
 	}
@@ -437,16 +546,21 @@ var Toolbar = Fiber.extend(function(base){
   exports.init = function(rapper){
     this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper
     this.tools = {}
+    this.els = {}
   }
   exports.add = function(role, fn){
     var self = this
     this.tools[role] = fn
-    $("[data-role=" + role + "]", self.rapper).click(function(){
+    this.els[role] = $("[data-role=" + role + "]", self.rapper)
+    this.els[role].click(function(){
       $(".active", self.rapper).removeClass('active')
       $(this).addClass('active')
       fn()
     })
   }
+  exports.pick = function(role){
+    this.els[role].trigger("click")
+  }
   return exports
 })
 
@@ -476,6 +590,7 @@ OrthographicToolbar.add("polyline-mode", function(){
 OrthographicToolbar.add("ortho-polyline-mode", function(){
   map.ui.set_tool("ortho-polyline")
 })
+OrthographicToolbar.pick("ortho-polyline-mode")
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
-- 
cgit v1.2.3-70-g09d2


From ed786fddd4e65f6c9dfb95371d57deb4696273f4 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 30 Apr 2015 17:11:13 -0400
Subject: work out positioning logic

---
 .../javascripts/rectangles/engine/map/ui_ortho.js  | 68 +++++++++++++++++-----
 public/assets/test/ortho3.html                     | 18 ++++--
 2 files changed, 66 insertions(+), 20 deletions(-)

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

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index dab7354..52f7339 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -10,35 +10,72 @@ Map.UI.Ortho = function(map){
 		el: map.el,
 		down: function(e, cursor){
 		  last_event = e
-			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)
+		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+        base.tools[currentTool].down(e, cursor)
+      }
+      else {
+        base.tools[currentTool].down(e, cursor)
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+      }
 		},
 		move: function(e, cursor){
 		  last_event = e
-			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)
+		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+        base.tools[currentTool].move(e, cursor)
+      }
+			else {
+        base.tools[currentTool].move(e, cursor)
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+      }
 		},
 		drag: function(e, cursor){
 		  last_event = e
-			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)
+      cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom
+      cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom
+			if (tool.recenterCursor) {
+        cursor.x.b += map.center.a
+        cursor.y.b -= map.center.b
+        base.tools[currentTool].drag(e, cursor)
+      }
+			else {
+        base.tools[currentTool].drag(e, cursor)
+        cursor.x.b += map.center.a
+        cursor.y.b -= map.center.b
+      }
 		},
 		up: function(e, cursor, new_cursor){
 		  last_event = e
-			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)
+		  new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        new_cursor.x.add(map.center.a)
+        new_cursor.y.sub(map.center.b)
+        base.tools[currentTool].up(e, cursor, new_cursor)
+      }
+      else {
+        base.tools[currentTool].up(e, cursor, new_cursor)
+        new_cursor.x.add(map.center.a)
+        new_cursor.y.sub(map.center.b)
+      }
       if (nextTool) {
+        console.log('found nextTool')
         base.set_tool(nextTool)
         nextTool = null
       }
 		}
 	})
 	
-	var currentTool = "polyline", nextTool
+	var currentTool = "polyline", nextTool, tool
 	base.add_tool = function(name, tool){
 	  base.tools[name] = tool
 	}
@@ -46,11 +83,14 @@ Map.UI.Ortho = function(map){
 	  console.log("set tool to", s)
 	  base.tools[currentTool].cancel()
 	  currentTool = s
+	  tool = base.tools[currentTool]
 	}
 	base.set_drag_tool = function(s){
+	  console.log('set drag tool to', s)
 	  nextTool = currentTool
 	  currentTool = s
-    base.tools[s].down(last_event, base.mouse.cursor)
+	  tool = base.tools[currentTool]
+    base.tools[currentTool].down(last_event, base.mouse.cursor)
 	}
 	base.tools = {}
 
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 319f788..6bf2619 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -78,6 +78,7 @@ app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
 var MapTool = Fiber.extend(function(base){
 	var exports = {
+	  recenterCursor: true,
 	  down: function(e, cursor){},
 	  move: function(e, cursor){},
 	  drag: function(e, cursor){},
@@ -136,14 +137,18 @@ var ArrowTool = MapTool.extend(function(base){
 
 var PositionTool = MapTool.extend(function(base){
 	var exports = {
-	  down: function(e, cursor){
+	  recenterCursor: false,
+	  drag: function(e, cursor){
+      map.center.a = -cursor.x.magnitude()
+      map.center.b = cursor.y.magnitude()
+	  },
+	  rightclick: 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
 })
@@ -167,7 +172,7 @@ var PolylineTool = MapTool.extend(function (base) {
         }
         return
       }
-      map.ui.tools.position.down(e, cursor)
+      map.ui.tools.position.rightclick(e, cursor)
       return
     }
 
@@ -216,7 +221,6 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
   
   var exports = {}
   exports.down = function(e, cursor){
-
     // rightclick?
     if (e.ctrlKey || e.which === 3) {
       e.preventDefault()
@@ -232,7 +236,9 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
         }
         return
       }
-      map.ui.tools.position.down(e, cursor)
+      else {
+        map.ui.tools.position.rightclick(e, cursor)
+      }
       return
     }
 
-- 
cgit v1.2.3-70-g09d2


From dd51784e8620c97e8df8825fd7f1355297920570 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 30 Apr 2015 18:38:28 -0400
Subject: snap to endpoints from other shapes

---
 public/assets/test/ortho3.html | 75 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 62 insertions(+), 13 deletions(-)

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

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 6bf2619..3ae0204 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -177,7 +177,7 @@ var PolylineTool = MapTool.extend(function (base) {
     }
 
     // compare to initial point
-    var p = new vec2( cursor.x.a, cursor.y.a )
+    var p = last_point.clone()
     if (placing) {
       if (line.canCloseWith(p)) {
         line.close()
@@ -202,6 +202,15 @@ var PolylineTool = MapTool.extend(function (base) {
       last_point.assign(line.points[0])
       cursor.x.a = cursor.x.b = last_point.a
       cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    var end_point = shapes.findClosestEndPoint(last_point)
+    if (end_point) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(end_point.point)
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
     }
     else {
       document.body.style.cursor = "crosshair"
@@ -308,6 +317,15 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
         cursor.x.a = cursor.x.b = last_point.a
         cursor.y.a = cursor.y.b = last_point.b
       }
+      return
+    }
+    var end_point = shapes.findClosestEndPoint(last_point)
+    if (end_point) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(end_point.point)
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
     }
     else {
       document.body.style.cursor = "crosshair"
@@ -322,16 +340,35 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
 })
 
 
-// prefer to have this on the object that keeps track of the polylines
-function findClosestPoint (p){
-  var point
-  for (var i = 0; i < shapes.length; i++) {
-    point = shapes[i].hasPointNear(p)
-    if (point) return { point: point, shape: shapes[i] }
+var ShapeList = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(){
+    this.shapes = []
   }
-  return null
-}
-
+  exports.add = function(shape){
+    this.shapes.push(shape)
+  }
+  exports.findClosestPoint = function (p){
+    var point
+    for (var i = 0; i < this.shapes.length; i++) {
+      point = this.shapes[i].hasPointNear(p)
+      if (point) return { point: point, shape: this.shapes[i] }
+    }
+    return null
+  }
+  exports.findClosestEndPoint = function (p){
+    var point
+    for (var i = 0; i < this.shapes.length; i++) {
+      point = this.shapes[i].hasEndPointNear(p)
+      if (point) return { point: point, shape: this.shapes[i] }
+    }
+    return null
+  }
+  exports.forEach = function(fn){
+    this.shapes.forEach(fn)
+  }
+  return exports
+})
 
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
@@ -368,7 +405,17 @@ var Polyline = Fiber.extend(function(base){
     }
     return null
 	}
-	
+	exports.hasEndPointNear = function(p){
+	  if (this.closed) return null
+    if (this.firstPoint().distanceTo( p ) < 10/map.zoom) {
+      return this.firstPoint()
+    }
+    if (this.lastPoint().distanceTo( p ) < 10/map.zoom) {
+      return this.lastPoint()
+    }
+    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
@@ -443,7 +490,7 @@ 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.push(this)
+    shapes.add(this)
   }
   exports.rebuild = function(){
     this.mx.rebuild()
@@ -524,6 +571,8 @@ map = new Map ({
 	width: window.innerWidth/2,
 	height: window.innerHeight,
 	zoom: -2,
+  zoom_min: -6.2,
+  zoom_max: 1,
 })
 map.ui.add_tool("arrow", new ArrowTool)
 map.ui.add_tool("polyline", new PolylineTool)
@@ -538,7 +587,7 @@ $(window).resize(function(){
 var wall_height = 180
 var placing = false
 var line
-var shapes = []
+var shapes = new ShapeList
 var ctx = map.draw.ctx
 var last_point = new vec2 (0,0)
 
-- 
cgit v1.2.3-70-g09d2


From 6de9ac66b5e7ee2378d4f4f29f4e5708ef1c2f7c Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Jul 2015 14:41:58 -0400
Subject: add business logic to new plan style

---
 public/assets/stylesheets/app.css |  49 +++++++----
 public/assets/test/ortho3.html    |  64 +++++++++++++--
 views/about/_old_plans.ejs        |  63 ++++++++++++++
 views/about/_plans.ejs            | 168 +++++++++++++++++++++++++-------------
 views/about/brochure.ejs          |  94 +--------------------
 5 files changed, 265 insertions(+), 173 deletions(-)
 create mode 100644 views/about/_old_plans.ejs

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

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 4bfa363..56c65fe 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -903,24 +903,33 @@ iframe.embed {
 }
 
 /* PLANS BROCHURE */
-/* nb these styles should be fixed for narrower screens/mobile layout */
-.about_plan {
-  width: 28vw;
-  margin: 2vw;
-  float: left;
-  min-height: 28vw;
-  position: relative;
-}
-.about_plan button {
-  position: absolute;
-  bottom: 5%;
-  left: 5%;
-  width: 90%;
-}
 .about_custom {
   clear: both;
-  width: 76vw;
-  margin: 2vw 10vw;
+  max-width: 600px;
+  margin: 0 auto;
+  font-size: 14px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.about_custom h3 {
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-size: 1.25em;
+  font-weight: 500;
+  background: #3A3A3A;
+  color: white;
+  text-align: center;
+}
+.about_custom li {
+  list-style-type: none;
+  line-height: 2em;
+  padding: 10px 20px;
+  background: white;
+  text-align: center;
+  border-left: 1px solid #e5e5e5;
+  border-right: 1px solid #e5e5e5;
+}
+.about_custom a {
+  border-bottom: 1px solid black;
 }
 
 ul#plans {
@@ -1013,6 +1022,14 @@ ul#plans .signup {
   padding: 25px 0;
 }
 
+.signup .current {
+  display: inline-block;
+  color: white;
+  font-weight: bold;
+  font-size: 1em;
+  padding: 4px 30px 3px;
+}
+
 .signup .button {
   font-weight: bold;
   padding: 16px 30px 14px;
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 3ae0204..fa7e3c5 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -44,6 +44,7 @@ body {
   <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>
+  <span class="ion-scissors" data-role="eraser-mode"></span>
 </div>
 
 <script src="/assets/javascripts/util.js"></script>
@@ -96,7 +97,7 @@ var ArrowTool = MapTool.extend(function(base){
 	exports.down = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    var p = findClosestPoint(last_point)
+    var p = shapes.findClosestPoint(last_point)
     if (p) {
       selected_shape = p.shape
       selected_point = p.point
@@ -110,7 +111,7 @@ var ArrowTool = MapTool.extend(function(base){
   exports.move = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    var p = findClosestPoint(last_point)
+    var p = shapes.findClosestPoint(last_point)
     if (p) {
       document.body.style.cursor = "pointer"
       last_point.assign(p.point)
@@ -339,6 +340,26 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
   return exports
 })
 
+var EraserTool = MapTool.extend(function(base){
+	var exports = {}
+	exports.down = function(e, cursor){
+  }
+  exports.move = function(e, cursor){
+    var segment = shapes.findClosestSegment(last_point)
+    if (segment) {
+      document.body.style.cursor = "pointer"
+      last_point.a = segment.x
+      last_point.b = segment.y
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
 var ShapeList = Fiber.extend(function(base){
   var exports = {}
@@ -348,6 +369,12 @@ var ShapeList = Fiber.extend(function(base){
   exports.add = function(shape){
     this.shapes.push(shape)
   }
+  exports.remove = function(shape){
+    var index = this.shapes.indexOf(shape)
+    if (index !== -1) {
+      this.shapes.splice(index, 1)
+    }
+  }
   exports.findClosestPoint = function (p){
     var point
     for (var i = 0; i < this.shapes.length; i++) {
@@ -364,6 +391,17 @@ var ShapeList = Fiber.extend(function(base){
     }
     return null
   }
+  exports.findClosestSegment = function (p){
+    var segment = null, closest_segment = null
+    for (var i = 0; i < this.shapes.length; i++) {
+      segment = this.shapes[i].hasSegmentNear(p, 10)
+      if (segment && (! closest_segment || segment.distance < closest_segment.distance)) {
+        closest_segment = segment
+        closest_segment.shape = this.shapes[i]
+      }
+    }
+    return closest_segment
+  }
   exports.forEach = function(fn){
     this.shapes.forEach(fn)
   }
@@ -421,7 +459,10 @@ var Polyline = Fiber.extend(function(base){
     var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity
     var closest_i = -1
     var points = this.points
+    var p1, p2 = points[0]
     for (var i = 1; i < points.length; i++) {
+      p1 = p2
+      p2 = points[i]
       d1 = p1.a - p2.a
       d2 = p1.b - p2.b
       sum = d1*d1 + d2*d2
@@ -448,10 +489,6 @@ var Polyline = Fiber.extend(function(base){
     }
 	}
 	
-	exports.getSegment = function(i){
-	  return [ points[i], points[i+1] ]
-	}
-
   exports.draw = function(ctx){
     var points = this.points
     if (! points.length) return
@@ -541,7 +578,16 @@ MX.Polyline = MX.Object3D.extend({
     })
     var hue = abs(round( angle / PI * 90 + 300))
     mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
-  }
+  },
+  
+  destroy: function(){
+    this.faces.forEach(function(mx){
+      scene.remove(mx)
+    })
+    this.faces = null
+    this.points = null
+  },
+
 })
 
 MX.Point = MX.Object3D.extend({
@@ -577,6 +623,7 @@ map = new Map ({
 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("eraser", new EraserTool)
 map.ui.add_tool("position", new PositionTool)
 
 $(window).resize(function(){
@@ -645,6 +692,9 @@ OrthographicToolbar.add("polyline-mode", function(){
 OrthographicToolbar.add("ortho-polyline-mode", function(){
   map.ui.set_tool("ortho-polyline")
 })
+OrthographicToolbar.add("eraser-mode", function(){
+  map.ui.set_tool("eraser")
+})
 OrthographicToolbar.pick("ortho-polyline-mode")
 
 document.addEventListener('DOMContentLoaded', build)
diff --git a/views/about/_old_plans.ejs b/views/about/_old_plans.ejs
new file mode 100644
index 0000000..e4b07be
--- /dev/null
+++ b/views/about/_old_plans.ejs
@@ -0,0 +1,63 @@
+     <div class="about_plan planbox free_plan_info">
+      <h3>[[- plans.free.name ]]</h3>
+      <ul>
+        <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
+      </ul>
+    </div>
+
+    <div class="about_plan planbox">
+      <h3>[[- plans.basic.name ]]</h3>
+      <ul>
+        <li> $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year
+        <li> Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions
+        <li> Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo
+             or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
+        <li> VValls logo appears when embedding an exhibition on a web page
+        <li>
+        [[ if (! logged_in) { ]]
+          <button data-role="show-signup-modal">Sign Up</button>
+        [[ } else if (! user.plan_level) { ]]
+          <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
+        [[ } else if (user.plan_level == plans.basic.level) { ]]
+					Current Level
+				[[ } ]]
+      </ul>
+    </div>
+
+    <div class="about_plan planbox">
+      <h3>[[- plans.pro.name ]]</h3>
+      <ul>
+        <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
+        <li> Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
+             or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Includes planning for 3D objects in the room
+        <li> No VValls logo on embed
+        <li>
+        [[ if (! logged_in) { ]]
+          <button data-role="show-signup-modal">Sign Up</button>
+        [[ } else if (! user.plan_level) { ]]
+          <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
+        [[ } else if (user.plan_level == plans.pro.level) { ]]
+					Current Level
+        [[ } else if (user.plan_level < plans.pro.level) { ]]
+          <a href="/profile/billing"><button>Upgrade Now</button></a>
+				[[ } ]]
+      </ul>
+    </div>
+  
+    <div class="about_custom planbox miscbox">
+      <ul>
+        <li> Buying any extra floor plan unlocks collaboration.<br>Invite an artist or curator to work on the exhibition with you.
+        <li> Basic Floor plan: Rectangle-based design of any dimension.
+        <li> Pro Floor plan: Trace an arbitrary floor plan from image.
+      </ul>
+    </div>
+
+    <div class="about_custom custombox planbox">
+      <h3>Want Something Custom?</h3>
+      <li> We offer customized white-label options for business and educational uses.
+      <li> <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+    </div>
diff --git a/views/about/_plans.ejs b/views/about/_plans.ejs
index 16fb9c6..af2a050 100644
--- a/views/about/_plans.ejs
+++ b/views/about/_plans.ejs
@@ -1,63 +1,117 @@
-    <div class="about_plan planbox free_plan_info">
-      <h3>[[- plans.free.name ]]</h3>
-      <ul>
-        <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
-      </ul>
-    </div>
 
-    <div class="about_plan planbox">
-      <h3>[[- plans.basic.name ]]</h3>
-      <ul>
-        <li> $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year
-        <li> Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions
-        <li> Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo
-             or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months
-        <li> Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
-        <li> VValls logo appears when embedding an exhibition on a web page
-        <li>
-        [[ if (! logged_in) { ]]
-          <button data-role="show-signup-modal">Sign Up</button>
-        [[ } else if (! user.plan_level) { ]]
-          <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
-        [[ } else if (user.plan_level == plans.basic.level) { ]]
-					Current Level
-				[[ } ]]
-      </ul>
+<ul id="plans">
+  <li class="most-popular">
+    <div class="top">
+      <h2>[[- plans.pro.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price large">[[- plans.pro.monthly_price ]]</span> <span class="month large">/ mo </span></h3>
+      <h4>Ideal for large galleries<br>and small businesses.</h4>
     </div>
-
-    <div class="about_plan planbox">
-      <h3>[[- plans.pro.name ]]</h3>
-      <ul>
-        <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
-        <li> Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions
-        <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
-             or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
-        <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
-        <li> Includes planning for 3D objects in the room
-        <li> No VValls logo on embed
-        <li>
-        [[ if (! logged_in) { ]]
-          <button data-role="show-signup-modal">Sign Up</button>
-        [[ } else if (! user.plan_level) { ]]
-          <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
-        [[ } else if (user.plan_level == plans.pro.level) { ]]
-					Current Level
-        [[ } else if (user.plan_level < plans.pro.level) { ]]
-          <a href="/profile/billing"><button>Upgrade Now</button></a>
-				[[ } ]]
-      </ul>
+    <ul>
+      <li>
+        [[- plans.pro.pro_layout_limit ]] Pro Floor Plan and [[- plans.pro.pro_project_limit ]] Exhibitions
+      </li>
+      <li>
+        Trace a Floor Plan from a Drawing
+      </li>
+      <li>
+        Image Hosting For Artworks
+      </li>
+      <li>
+        Planning for 3D Objects 
+      </li>
+      <li>
+        Everything the Medium Plan Contains 
+      </li>
+      <li>
+        No VValls Branding!
+      </li>
+    </ul>
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for [[- plans.pro.name ]]</a>
+      [[ } else if (! user.plan_level || user.plan_level < plans.pro.level) { ]]
+        <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]">Sign Up for [[- plans.pro.name ]]</a>
+      [[ } else if (user.plan_level == plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
+    </div>
+  </li>
+  <li>
+    <div class="top">
+      <h2>[[- plans.basic.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price medium">[[- plans.basic.monthly_price ]]</span> <span class="month medium">/ mo </span></h3>
+      <h4>Great for small galleries<br>and art projects.</h4>
     </div>
-  
-    <div class="about_custom planbox miscbox">
-      <ul>
-        <li> Buying any extra floor plan unlocks collaboration.<br>Invite an artist or curator to work on the exhibition with you.
-        <li> Basic Floor plan: Rectangle-based design of any dimension.
-        <li> Pro Floor plan: Trace an arbitrary floor plan from image.
-      </ul>
+    <ul>
+      <li>
+        [[- plans.basic.basic_layout_limit ]] Basic Floor Plan and [[- plans.basic.basic_project_limit ]] Exhibitions
+      </li>
+      <li>
+        Add More Basic Floor Plans for $[[- plans.basic.basic_layout_monthly_price ]]/mo
+      </li>
+      <li>
+        Invite Artists to Collaborate
+      </li>
+      <li>
+        Prepay a Year and Get Two Months Free
+      </li>
+      <li>
+        Everything the Small Plan Contains 
+      </li>
+      <li>
+        VValls Branding
+      </li>
+    </ul>
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for [[- plans.basic.name ]]</a>
+      [[ } else if (! user.plan_level || user.plan_level < plans.basic.level) { ]]
+        <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]">Sign Up for [[- plans.basic.name ]]</a>
+      [[ } else if (user.plan_level == plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
     </div>
+  </li>
+  <li>
+    <div class="top">
+      <h2>[[- plans.free.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price small">0</span> <span class="month small">/ mo </span></h3>
+      <h4>Free forever.</h4>
+    </div>
+    <ul>
+      <li>
+        [[- plans.free.stock_project_limit ]] Basic Exhibition
+      </li>
+      <li>
+        Use Any of our Built-In Floor Plans 
+      </li>
+      <li>
+        Embed Images and Videos in your Room
+      </li>
+      <li>
+        Custom Color and Wallpaper
+      </li>
+      <li>
+        Embed Room on Your Website
+      </li>
+      <li>
+        VValls Branding
+      </li>
+    </ul>
 
-    <div class="about_custom custombox planbox">
-      <h3>Want Something Custom?</h3>
-      <li> We offer customized white-label options for business and educational uses.
-      <li> <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for Small</a>
+      [[ } else if (user.plan_level >= plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
     </div>
+  </li>
+</ul>
+
+<div class="about_custom custombox planbox">
+  <h3>Want Something Custom?</h3>
+  <li> We offer customized white-label options for business and educational uses.
+    <br>
+    <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+</div>
diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs
index 80cb154..e34d3d3 100644
--- a/views/about/brochure.ejs
+++ b/views/about/brochure.ejs
@@ -11,99 +11,7 @@
 	<h1 class="leader">Subscriptions</h1>
 
 	<div class="projectList about aboutintro">
-  
-
-		<ul id="plans">
-		  <li class="most-popular">
-		    <div class="top">
-		      <h2>Large</h2>
-		      <h3><span class="dollar">$</span><span class="price large">50</span> <span class="month large">/ mo </span></h3>
-		      <h4>Ideal for businesses and ecommerce sites.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        15 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        3 Embeddable Feeds 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every 10 Minutes 
-		      </li>
-		      <li>
-		        Analytics and Analysis Tools 
-		      </li>
-		      <li>
-		        Everything the Medium Plan Contains 
-		      </li>
-		      <li>
-		        No Juicer Branding! 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/credit-card/new?plan=large">Sign Up for Large</a></div>
-		  </li>
-		  <li>
-		    <div class="top">
-		      <h2>Medium</h2>
-		      <h3><span class="dollar">$</span><span class="price medium">10</span> <span class="month medium">/ mo </span></h3>
-		      <h4>Great for personal sites and small blogs.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        5 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        1 Embeddable Feed 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every Hour 
-		      </li>
-		      <li>
-		        Moderation and Filtering Tools 
-		      </li>
-		      <li>
-		        Everything the Small Plan Contains 
-		      </li>
-		      <li>
-		        No Juicer Branding! 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/credit-card/new?plan=medium">Sign Up for Medium</a></div>
-		  </li>
-		  <li>
-		    <div class="top">
-		      <h2>Small</h2>
-		      <h3><span class="dollar">$</span><span class="price small">0</span> <span class="month small">/ mo </span></h3>
-		      <h4>Free forever.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        2 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        1 Embeddable Social Media Feed 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every 24 Hours 
-		      </li>
-		      <li>
-		        All Templates and Custom Styling 
-		      </li>
-		      <li>
-		        HTTPS Secure Connection Support 
-		      </li>
-		      <li>
-		        Juicer Branding 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/sign-up">Sign Up for Small</a></div>
-		  </li>
-		</ul>
-
-
-
-
-		[[ include _plans ]]
+    [[ include _plans ]]
   </div>
 
 	[[ include ../partials/confirm-modal ]]	
-- 
cgit v1.2.3-70-g09d2


From 44642b48203b3ee2fa9e281f31ed9fed3f60ee79 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 21 Jul 2015 13:23:22 -0400
Subject: find closest segment

---
 Gruntfile.js                                       |   8 +-
 .../assets/javascripts/mx/primitives/mx.point.js   |  17 +
 .../javascripts/mx/primitives/mx.polyline.js       |  48 +++
 .../rectangles/engine/map/tools/_base.js           |  11 +
 .../rectangles/engine/map/tools/arrow.js           |  46 +++
 .../rectangles/engine/map/tools/ortho.js           | 115 +++++++
 .../rectangles/engine/map/tools/polyline.js        |  69 ++++
 .../rectangles/engine/map/tools/position.js        |  17 +
 .../javascripts/rectangles/engine/map/ui/editor.js | 284 ++++++++++++++++
 .../rectangles/engine/map/ui/minimap.js            |  81 +++++
 .../javascripts/rectangles/engine/map/ui/ortho.js  | 105 ++++++
 .../javascripts/rectangles/engine/map/ui_editor.js | 284 ----------------
 .../rectangles/engine/map/ui_minimap.js            |  81 -----
 .../javascripts/rectangles/engine/map/ui_ortho.js  | 105 ------
 public/assets/test/ortho3.html                     | 362 ++-------------------
 views/partials/scripts.ejs                         |   4 +-
 16 files changed, 824 insertions(+), 813 deletions(-)
 create mode 100644 public/assets/javascripts/mx/primitives/mx.point.js
 create mode 100644 public/assets/javascripts/mx/primitives/mx.polyline.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/_base.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/arrow.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/ortho.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/polyline.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/position.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/editor.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/minimap.js
 create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/ortho.js
 delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_editor.js
 delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_minimap.js
 delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js

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

diff --git a/Gruntfile.js b/Gruntfile.js
index a0f4d83..233c7ff 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -85,8 +85,8 @@ module.exports = function(grunt) {
           "public/assets/javascripts/rectangles/engine/sculpture/types/image.js",
 
           "public/assets/javascripts/rectangles/engine/map/_map.js",
-          "public/assets/javascripts/rectangles/engine/map/ui_editor.js",
-          "public/assets/javascripts/rectangles/engine/map/ui_minimap.js",
+          "public/assets/javascripts/rectangles/engine/map/ui/editor.js",
+          "public/assets/javascripts/rectangles/engine/map/ui/minimap.js",
           "public/assets/javascripts/rectangles/engine/map/draw.js",
 
           "public/assets/javascripts/ui/lib/View.js",
@@ -228,8 +228,8 @@ module.exports = function(grunt) {
           "public/assets/javascripts/rectangles/engine/sculpture/types/image.js",
 
           "public/assets/javascripts/rectangles/engine/map/_map.js",
-          "public/assets/javascripts/rectangles/engine/map/ui_editor.js",
-          "public/assets/javascripts/rectangles/engine/map/ui_minimap.js",
+          "public/assets/javascripts/rectangles/engine/map/ui/editor.js",
+          "public/assets/javascripts/rectangles/engine/map/ui/minimap.js",
           "public/assets/javascripts/rectangles/engine/map/draw.js",
 
           "public/assets/javascripts/ui/lib/View.js",
diff --git a/public/assets/javascripts/mx/primitives/mx.point.js b/public/assets/javascripts/mx/primitives/mx.point.js
new file mode 100644
index 0000000..41a7732
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.point.js
@@ -0,0 +1,17 @@
+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)
+  }
+})
diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js
new file mode 100644
index 0000000..555b3c6
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.polyline.js
@@ -0,0 +1,48 @@
+MX.Polyline = MX.Object3D.extend({
+  init: function(polyline){
+    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]
+      this.move_face(mx, head, tail)
+      this.faces.push(mx)
+      scene.add(mx)
+    }
+  },
+  
+  rebuild: function(){
+    for (var i = 1; i < this.points.length; i++) {
+      var mx = this.faces[i-1]
+      var head = this.points[i-1]
+      var tail = this.points[i]
+      this.move_face(mx, head, tail)
+    }
+  },
+
+  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 )
+    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%"] + ')'
+  },
+  
+  destroy: function(){
+    this.faces.forEach(function(mx){
+      scene.remove(mx)
+    })
+    this.faces = null
+    this.points = null
+  },
+})
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/_base.js b/public/assets/javascripts/rectangles/engine/map/tools/_base.js
new file mode 100644
index 0000000..17b247d
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/_base.js
@@ -0,0 +1,11 @@
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  recenterCursor: true,
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+	  cancel: function(){},
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js
new file mode 100644
index 0000000..2a73954
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js
@@ -0,0 +1,46 @@
+var ArrowTool = MapTool.extend(function(base){
+	var exports = {}
+	
+	var selected_point = null, original_point = null, selected_shape = null
+	
+	exports.down = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var p = shapes.findClosestPoint(last_point)
+    if (p) {
+      selected_shape = p.shape
+      selected_point = p.point
+      original_point = selected_point.clone()
+    }
+    else {
+      map.ui.set_drag_tool("position")
+    }
+	}
+	
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var p = shapes.findClosestPoint(last_point)
+    if (p) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(p.point)
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+	}
+	
+	exports.drag = function(e, cursor){
+    selected_point.a = original_point.a + cursor.x.magnitude()
+		selected_point.b = original_point.b + cursor.y.magnitude()
+		selected_shape.rebuild()
+	}
+	
+	exports.up = function(e, cursor){
+	  selected_point = selected_shape = original_point = null
+	}
+	
+	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
new file mode 100644
index 0000000..be3d707
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
@@ -0,0 +1,115 @@
+var OrthoPolylineTool = MapTool.extend(function (base) {
+  // this will work like normal polyline except all walls will be orthogonal
+  
+  var prev_point, horizontal = false, first_edge_is_horizontal = false
+  
+  var exports = {}
+  exports.down = function(e, cursor){
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (map.ui.placing) {
+        // close polyline or cancel
+        map.ui.placing = false
+        if (line.points.length > 2) {
+          line.build()
+        }
+        else {
+          line.reset()
+        }
+        return
+      }
+      else {
+        map.ui.tools.position.rightclick(e, cursor)
+      }
+      return
+    }
+
+    // compare to initial point
+    var p = last_point.clone()
+    if (map.ui.placing) {
+      if (line.lastPoint().eq(p)) {
+        return
+      }
+      else if (line.canCloseWith(p)) {
+        line.close()
+        line.build()
+        map.ui.placing = false
+      }
+      else {
+        line.add(p)
+        prev_point = p
+        horizontal = ! horizontal
+      }
+    }
+    else {
+      map.ui.placing = true
+      line = new Polyline ()
+      line.add(p)
+      first_point = prev_point = p
+      horizontal = false
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    if (map.ui.placing) {
+      if (line.points.length == 1) {
+        var x = abs(prev_point.a - last_point.a)
+        var y = abs(prev_point.b - last_point.b)
+        if (x > y) {
+          last_point.b = prev_point.b
+          first_edge_is_horizontal = horizontal = true
+        }
+        else {
+          last_point.a = prev_point.a
+          first_edge_is_horizontal = horizontal = false
+        }
+      }
+      else {
+        if (horizontal) {
+          last_point.b = prev_point.b
+        }
+        else {
+          last_point.a = prev_point.a
+        }
+        if (horizontal == first_edge_is_horizontal) {
+          // check if this point is within N pixels of the normal
+          // and lock it into place if so
+          if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
+            last_point.a = first_point.a
+          }
+          else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
+            last_point.b = first_point.b
+          }
+        }
+      }
+
+      if (line.canCloseWith(last_point)) {
+        document.body.style.cursor = "pointer"
+        last_point.assign(first_point)
+        cursor.x.a = cursor.x.b = last_point.a
+        cursor.y.a = cursor.y.b = last_point.b
+      }
+      return
+    }
+    var end_point = shapes.findClosestEndPoint(last_point)
+    if (end_point) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(end_point.point)
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  exports.cancel = function(){
+    if (map.ui.placing) { line.reset() }
+    first_point = null
+    map.ui.placing = false
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
new file mode 100644
index 0000000..559aea8
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
@@ -0,0 +1,69 @@
+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 (map.ui.placing) {
+        // close polyline or cancel
+        map.ui.placing = false
+        if (line.points.length > 2) {
+          line.build()
+        }
+        else {
+          line.reset()
+        }
+        return
+      }
+      map.ui.tools.position.rightclick(e, cursor)
+      return
+    }
+
+    // compare to initial point
+    var p = last_point.clone()
+    if (map.ui.placing) {
+      if (line.canCloseWith(p)) {
+        line.close()
+        line.build()
+        map.ui.placing = false
+      }
+      else {
+        line.add(p)
+      }
+    }
+    else {
+      map.ui.placing = true
+      line = new Polyline ()
+      line.add(p)
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    if (map.ui.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
+      cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    var end_point = shapes.findClosestEndPoint(last_point)
+    if (end_point) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(end_point.point)
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  exports.cancel = function(){
+    if (map.ui.placing) { line.reset() }
+    map.ui.placing = false
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js
new file mode 100644
index 0000000..a994f5a
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js
@@ -0,0 +1,17 @@
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  recenterCursor: false,
+	  drag: function(e, cursor){
+      map.center.a = -cursor.x.magnitude()
+      map.center.b = cursor.y.magnitude()
+	  },
+	  rightclick: 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
+	  }
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js
new file mode 100644
index 0000000..7308344
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js
@@ -0,0 +1,284 @@
+
+Map.UI = Map.UI || {}
+Map.UI.Editor = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+		rightclick: rightclick,
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+	
+	base.permissions = new Permissions({
+		create: true,
+		move: true,
+		resize: true,
+		destroy: false,
+	})
+
+	base.blur = function(){
+		Rooms.forEach(function(r){
+			return r.focused = false
+		})
+		app.tube("builder-pick-nothing")
+	}
+	
+	//
+	
+	function down (e, cursor){
+	  var room
+		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 (Rooms.regions.length == 0) 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
+		}
+
+		var intersects = Rooms.filter(function(r){
+			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
+		})
+
+		if (intersects.length && (base.permissions.destroy || e.altKey)) {
+			base.mouse.down = false
+			
+			room = intersects[0]
+
+      UndoStack.push({
+        type: "destroy-room",
+        undo: room.copy(),
+        redo: { id: room.id },
+      })
+
+			Rooms.remove(room)
+			app.tube("builder-destroy-room", room)
+
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+			return
+		}
+		else if (intersects.length) {
+			base.dragging = intersects[0]
+			base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
+			base.dragging.rect.translation.sides = base.resizing
+			app.tube("builder-pick-room", intersects[0])
+		}
+		else if (base.permissions.create) {
+			base.creating = true
+		}
+
+		if (e.shiftKey && base.dragging) {
+			base.dragging.rect.quantize(10/map.zoom)
+		}
+	}
+
+	function move (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 intersects = Rooms.filter(function(r){
+			return r.rect.contains(cursor.x.a, cursor.y.a)
+		})
+		
+		if (base.permissions.destroy) {
+      map.el.className = "destroy"
+		}
+		else if (intersects.length) {
+		  var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
+		  switch (edges) {
+		    case FRONT_LEFT:
+		    case BACK_RIGHT:
+		      map.el.className = "nesw-resize"
+		      break
+
+		    case FRONT_RIGHT:
+		    case BACK_LEFT:
+		      map.el.className = "nwse-resize"
+		      break
+
+		    case FRONT:
+		    case BACK:
+		      map.el.className = "ns-resize"
+		      break
+
+		    case LEFT:
+		    case RIGHT:
+		      map.el.className = "ew-resize"
+		      break
+		    
+		    default:
+		      map.el.className = "move"
+		      break
+		  }
+		}
+		else {
+      map.el.className = ""
+		}
+	}
+
+	function drag (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
+
+		if (base.resizing) {
+			var x_length = base.dragging.rect.x.length(),
+					y_length = base.dragging.rect.y.length()
+
+			if (base.resizing & LEFT) {
+				base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min )
+			}
+			if (base.resizing & RIGHT) {
+				base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length )
+			}
+			if (base.resizing & FRONT) {
+				base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min )
+			}
+			if (base.resizing & BACK) {
+				base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length )
+			}
+		}
+		else if (base.dragging) {
+			base.dragging.rect.translation.a = cursor.x.magnitude()
+			base.dragging.rect.translation.b = cursor.y.magnitude()
+		}
+	}
+
+	function up (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)
+
+		if (base.creating) {
+			if (cursor.height() > side_min && cursor.width() > side_min) {
+				cursor.x.abs().quantize(1)
+				cursor.y.abs().quantize(1)
+				var room = Rooms.add_with_rect( cursor )
+
+				Rooms.rebuild()
+
+        UndoStack.push({
+          type: "create-room",
+          undo: { id: room.id },
+          redo: room.copy()
+        })
+        
+        Rooms.rebuild()
+				app.tube("builder-pick-room", room)
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.controller.settings )
+			}
+		}
+    if (base.resizing || base.dragging) {
+      var oldState = base.dragging.copy()
+      
+      if (base.resizing) {
+        base.dragging.rect.resize()
+      }
+      else if (base.dragging) {
+        base.dragging.rect.translate()
+      }
+      
+      UndoStack.push({
+        type: "update-room",
+        undo: oldState,
+        redo: base.dragging.copy()
+      })
+      Rooms.rebuild()
+
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+    }
+
+		var intersects = Rooms.filter(function(r){
+			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
+		})
+		if (! intersects.length) {
+      app.tube("builder-pick-nothing")
+		}
+    
+		base.creating = base.dragging = base.resizing = false
+	}
+
+  var wheelState, wheelTimeout
+
+	function mousewheel (e, deltaY, deltaX){
+		var cursor = base.mouse.cursor
+
+		var intersects = Rooms.filter(function(r){
+			return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a)
+		})
+		
+		if (intersects.length && window.heightIsGlobal) {
+		  var rooms = Rooms.values()
+		  wheelState = wheelState || rooms[0].height
+		  var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max )
+		  rooms.forEach(function(room){
+		    room.height = height
+		  })
+		  
+		  app.tube("builder-pick-room", intersects[0])
+
+      clearTimeout(wheelTimeout)
+			wheelTimeout = setTimeout(function(){
+        UndoStack.push({
+          type: "update-rooms-height",
+          undo: wheelState,
+          redo: height
+        })
+        Rooms.rebuild()
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
+
+        wheelState = null
+			}, 250)
+		}
+		else if (intersects.length) {
+			wheelState = wheelState || intersects[0].copy()
+			
+			intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max )
+		  app.tube("builder-pick-room", intersects[0])
+			
+			clearTimeout(wheelTimeout)
+			wheelTimeout = setTimeout(function(){
+        UndoStack.push({
+          type: "update-room",
+          undo: wheelState,
+          redo: intersects[0].copy()
+        })
+        Rooms.rebuild()
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
+
+        wheelState = null
+			}, 250)
+		}
+		else {
+			map.set_zoom(map.zoom_exponent + deltaY/20)
+		}
+	}
+	
+	function rightclick (e){
+	}
+
+}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui/minimap.js b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js
new file mode 100644
index 0000000..0fdd336
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js
@@ -0,0 +1,81 @@
+
+Map.UI = Map.UI || {}
+
+Map.UI.Minimap = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+		rightclick: rightclick,
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+	
+	var x, z
+	
+	//
+	
+	function down (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)
+		
+		x = scene.camera.x
+		z = scene.camera.z
+
+		if (e.ctrlKey || e.which === 3) {
+			cursor.quantize(1/map.zoom)
+			map.center.a = cursor.x.a
+			map.center.b = -cursor.y.a
+			console.log(map.center+"")
+			cursor.x.b = cursor.x.a
+			cursor.y.b = cursor.y.a
+			base.mouse.down = false
+			e.preventDefault()
+			e.stopPropagation()
+			return
+		}
+	}
+
+	function move (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)
+	}
+
+	function drag (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
+
+		scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16
+		scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16
+		Rooms.mover.room = null
+
+		if (base.dragging) {
+			base.dragging.rect.translation.a = cursor.x.magnitude()
+			base.dragging.rect.translation.b = cursor.y.magnitude()
+		}
+	}
+
+	function up (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.dragging = false
+	}
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+	
+	function rightclick (e){
+	}
+}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
new file mode 100644
index 0000000..52f7339
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
@@ -0,0 +1,105 @@
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+	var last_event = null
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+		  last_event = e
+		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+        base.tools[currentTool].down(e, cursor)
+      }
+      else {
+        base.tools[currentTool].down(e, cursor)
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+      }
+		},
+		move: function(e, cursor){
+		  last_event = e
+		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+        base.tools[currentTool].move(e, cursor)
+      }
+			else {
+        base.tools[currentTool].move(e, cursor)
+        cursor.x.add(map.center.a)
+        cursor.y.sub(map.center.b)
+      }
+		},
+		drag: function(e, cursor){
+		  last_event = e
+      cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom
+      cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom
+			if (tool.recenterCursor) {
+        cursor.x.b += map.center.a
+        cursor.y.b -= map.center.b
+        base.tools[currentTool].drag(e, cursor)
+      }
+			else {
+        base.tools[currentTool].drag(e, cursor)
+        cursor.x.b += map.center.a
+        cursor.y.b -= map.center.b
+      }
+		},
+		up: function(e, cursor, new_cursor){
+		  last_event = e
+		  new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
+		  new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
+			if (tool.recenterCursor) {
+        new_cursor.x.add(map.center.a)
+        new_cursor.y.sub(map.center.b)
+        base.tools[currentTool].up(e, cursor, new_cursor)
+      }
+      else {
+        base.tools[currentTool].up(e, cursor, new_cursor)
+        new_cursor.x.add(map.center.a)
+        new_cursor.y.sub(map.center.b)
+      }
+      if (nextTool) {
+        console.log('found nextTool')
+        base.set_tool(nextTool)
+        nextTool = null
+      }
+		}
+	})
+	
+	var currentTool = "polyline", nextTool, tool
+	base.add_tool = function(name, tool){
+	  base.tools[name] = tool
+	}
+	base.set_tool = function(s){
+	  console.log("set tool to", s)
+	  base.tools[currentTool].cancel()
+	  currentTool = s
+	  tool = base.tools[currentTool]
+	}
+	base.set_drag_tool = function(s){
+	  console.log('set drag tool to', s)
+	  nextTool = currentTool
+	  currentTool = s
+	  tool = base.tools[currentTool]
+    base.tools[currentTool].down(last_event, base.mouse.cursor)
+	}
+	base.tools = {}
+
+	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/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
deleted file mode 100644
index 7308344..0000000
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ /dev/null
@@ -1,284 +0,0 @@
-
-Map.UI = Map.UI || {}
-Map.UI.Editor = function(map){
-
-	var base = this
-
-	base.creating = base.dragging = base.resizing = false
-
-	base.mouse = new mouse({
-		el: map.el,
-		down: down,
-		move: move,
-		drag: drag,
-		up: up,
-		rightclick: rightclick,
-	})
-
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
-	
-	base.permissions = new Permissions({
-		create: true,
-		move: true,
-		resize: true,
-		destroy: false,
-	})
-
-	base.blur = function(){
-		Rooms.forEach(function(r){
-			return r.focused = false
-		})
-		app.tube("builder-pick-nothing")
-	}
-	
-	//
-	
-	function down (e, cursor){
-	  var room
-		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 (Rooms.regions.length == 0) 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
-		}
-
-		var intersects = Rooms.filter(function(r){
-			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
-		})
-
-		if (intersects.length && (base.permissions.destroy || e.altKey)) {
-			base.mouse.down = false
-			
-			room = intersects[0]
-
-      UndoStack.push({
-        type: "destroy-room",
-        undo: room.copy(),
-        redo: { id: room.id },
-      })
-
-			Rooms.remove(room)
-			app.tube("builder-destroy-room", room)
-
-      // TODO: watch individual scenery object here
-      Minotaur.watch( app.router.editorView.settings )
-			return
-		}
-		else if (intersects.length) {
-			base.dragging = intersects[0]
-			base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
-			base.dragging.rect.translation.sides = base.resizing
-			app.tube("builder-pick-room", intersects[0])
-		}
-		else if (base.permissions.create) {
-			base.creating = true
-		}
-
-		if (e.shiftKey && base.dragging) {
-			base.dragging.rect.quantize(10/map.zoom)
-		}
-	}
-
-	function move (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 intersects = Rooms.filter(function(r){
-			return r.rect.contains(cursor.x.a, cursor.y.a)
-		})
-		
-		if (base.permissions.destroy) {
-      map.el.className = "destroy"
-		}
-		else if (intersects.length) {
-		  var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
-		  switch (edges) {
-		    case FRONT_LEFT:
-		    case BACK_RIGHT:
-		      map.el.className = "nesw-resize"
-		      break
-
-		    case FRONT_RIGHT:
-		    case BACK_LEFT:
-		      map.el.className = "nwse-resize"
-		      break
-
-		    case FRONT:
-		    case BACK:
-		      map.el.className = "ns-resize"
-		      break
-
-		    case LEFT:
-		    case RIGHT:
-		      map.el.className = "ew-resize"
-		      break
-		    
-		    default:
-		      map.el.className = "move"
-		      break
-		  }
-		}
-		else {
-      map.el.className = ""
-		}
-	}
-
-	function drag (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
-
-		if (base.resizing) {
-			var x_length = base.dragging.rect.x.length(),
-					y_length = base.dragging.rect.y.length()
-
-			if (base.resizing & LEFT) {
-				base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min )
-			}
-			if (base.resizing & RIGHT) {
-				base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length )
-			}
-			if (base.resizing & FRONT) {
-				base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min )
-			}
-			if (base.resizing & BACK) {
-				base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length )
-			}
-		}
-		else if (base.dragging) {
-			base.dragging.rect.translation.a = cursor.x.magnitude()
-			base.dragging.rect.translation.b = cursor.y.magnitude()
-		}
-	}
-
-	function up (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)
-
-		if (base.creating) {
-			if (cursor.height() > side_min && cursor.width() > side_min) {
-				cursor.x.abs().quantize(1)
-				cursor.y.abs().quantize(1)
-				var room = Rooms.add_with_rect( cursor )
-
-				Rooms.rebuild()
-
-        UndoStack.push({
-          type: "create-room",
-          undo: { id: room.id },
-          redo: room.copy()
-        })
-        
-        Rooms.rebuild()
-				app.tube("builder-pick-room", room)
-
-        // TODO: watch individual scenery object here
-        Minotaur.watch( app.controller.settings )
-			}
-		}
-    if (base.resizing || base.dragging) {
-      var oldState = base.dragging.copy()
-      
-      if (base.resizing) {
-        base.dragging.rect.resize()
-      }
-      else if (base.dragging) {
-        base.dragging.rect.translate()
-      }
-      
-      UndoStack.push({
-        type: "update-room",
-        undo: oldState,
-        redo: base.dragging.copy()
-      })
-      Rooms.rebuild()
-
-      // TODO: watch individual scenery object here
-      Minotaur.watch( app.router.editorView.settings )
-    }
-
-		var intersects = Rooms.filter(function(r){
-			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
-		})
-		if (! intersects.length) {
-      app.tube("builder-pick-nothing")
-		}
-    
-		base.creating = base.dragging = base.resizing = false
-	}
-
-  var wheelState, wheelTimeout
-
-	function mousewheel (e, deltaY, deltaX){
-		var cursor = base.mouse.cursor
-
-		var intersects = Rooms.filter(function(r){
-			return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a)
-		})
-		
-		if (intersects.length && window.heightIsGlobal) {
-		  var rooms = Rooms.values()
-		  wheelState = wheelState || rooms[0].height
-		  var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max )
-		  rooms.forEach(function(room){
-		    room.height = height
-		  })
-		  
-		  app.tube("builder-pick-room", intersects[0])
-
-      clearTimeout(wheelTimeout)
-			wheelTimeout = setTimeout(function(){
-        UndoStack.push({
-          type: "update-rooms-height",
-          undo: wheelState,
-          redo: height
-        })
-        Rooms.rebuild()
-
-        // TODO: watch individual scenery object here
-        Minotaur.watch( app.router.editorView.settings )
-
-        wheelState = null
-			}, 250)
-		}
-		else if (intersects.length) {
-			wheelState = wheelState || intersects[0].copy()
-			
-			intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max )
-		  app.tube("builder-pick-room", intersects[0])
-			
-			clearTimeout(wheelTimeout)
-			wheelTimeout = setTimeout(function(){
-        UndoStack.push({
-          type: "update-room",
-          undo: wheelState,
-          redo: intersects[0].copy()
-        })
-        Rooms.rebuild()
-
-        // TODO: watch individual scenery object here
-        Minotaur.watch( app.router.editorView.settings )
-
-        wheelState = null
-			}, 250)
-		}
-		else {
-			map.set_zoom(map.zoom_exponent + deltaY/20)
-		}
-	}
-	
-	function rightclick (e){
-	}
-
-}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
deleted file mode 100644
index 0fdd336..0000000
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ /dev/null
@@ -1,81 +0,0 @@
-
-Map.UI = Map.UI || {}
-
-Map.UI.Minimap = function(map){
-
-	var base = this
-
-	base.creating = base.dragging = base.resizing = false
-
-	base.mouse = new mouse({
-		el: map.el,
-		down: down,
-		move: move,
-		drag: drag,
-		up: up,
-		rightclick: rightclick,
-	})
-
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
-	
-	var x, z
-	
-	//
-	
-	function down (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)
-		
-		x = scene.camera.x
-		z = scene.camera.z
-
-		if (e.ctrlKey || e.which === 3) {
-			cursor.quantize(1/map.zoom)
-			map.center.a = cursor.x.a
-			map.center.b = -cursor.y.a
-			console.log(map.center+"")
-			cursor.x.b = cursor.x.a
-			cursor.y.b = cursor.y.a
-			base.mouse.down = false
-			e.preventDefault()
-			e.stopPropagation()
-			return
-		}
-	}
-
-	function move (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)
-	}
-
-	function drag (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
-
-		scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16
-		scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16
-		Rooms.mover.room = null
-
-		if (base.dragging) {
-			base.dragging.rect.translation.a = cursor.x.magnitude()
-			base.dragging.rect.translation.b = cursor.y.magnitude()
-		}
-	}
-
-	function up (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.dragging = false
-	}
-
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
-	}
-	
-	function rightclick (e){
-	}
-}
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
deleted file mode 100644
index 52f7339..0000000
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ /dev/null
@@ -1,105 +0,0 @@
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
-
-	var base = this
-	var last_event = null
-
-	base.creating = base.dragging = base.resizing = false
-
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-		  last_event = e
-		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
-		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
-			if (tool.recenterCursor) {
-        cursor.x.add(map.center.a)
-        cursor.y.sub(map.center.b)
-        base.tools[currentTool].down(e, cursor)
-      }
-      else {
-        base.tools[currentTool].down(e, cursor)
-        cursor.x.add(map.center.a)
-        cursor.y.sub(map.center.b)
-      }
-		},
-		move: function(e, cursor){
-		  last_event = e
-		  cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
-		  cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
-			if (tool.recenterCursor) {
-        cursor.x.add(map.center.a)
-        cursor.y.sub(map.center.b)
-        base.tools[currentTool].move(e, cursor)
-      }
-			else {
-        base.tools[currentTool].move(e, cursor)
-        cursor.x.add(map.center.a)
-        cursor.y.sub(map.center.b)
-      }
-		},
-		drag: function(e, cursor){
-		  last_event = e
-      cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom
-      cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom
-			if (tool.recenterCursor) {
-        cursor.x.b += map.center.a
-        cursor.y.b -= map.center.b
-        base.tools[currentTool].drag(e, cursor)
-      }
-			else {
-        base.tools[currentTool].drag(e, cursor)
-        cursor.x.b += map.center.a
-        cursor.y.b -= map.center.b
-      }
-		},
-		up: function(e, cursor, new_cursor){
-		  last_event = e
-		  new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom)
-		  new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom)
-			if (tool.recenterCursor) {
-        new_cursor.x.add(map.center.a)
-        new_cursor.y.sub(map.center.b)
-        base.tools[currentTool].up(e, cursor, new_cursor)
-      }
-      else {
-        base.tools[currentTool].up(e, cursor, new_cursor)
-        new_cursor.x.add(map.center.a)
-        new_cursor.y.sub(map.center.b)
-      }
-      if (nextTool) {
-        console.log('found nextTool')
-        base.set_tool(nextTool)
-        nextTool = null
-      }
-		}
-	})
-	
-	var currentTool = "polyline", nextTool, tool
-	base.add_tool = function(name, tool){
-	  base.tools[name] = tool
-	}
-	base.set_tool = function(s){
-	  console.log("set tool to", s)
-	  base.tools[currentTool].cancel()
-	  currentTool = s
-	  tool = base.tools[currentTool]
-	}
-	base.set_drag_tool = function(s){
-	  console.log('set drag tool to', s)
-	  nextTool = currentTool
-	  currentTool = s
-	  tool = base.tools[currentTool]
-    base.tools[currentTool].down(last_event, base.mouse.cursor)
-	}
-	base.tools = {}
-
-	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/test/ortho3.html b/public/assets/test/ortho3.html
index fa7e3c5..7e7e8ec 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -61,6 +61,8 @@ body {
 <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/mx/primitives/mx.point.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.polyline.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>
@@ -68,8 +70,13 @@ body {
 <script src="/assets/javascripts/rectangles/models/vec2.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 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/tools/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
 
 <script>
 var app = window.app || {}
@@ -77,274 +84,13 @@ 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 MapTool = Fiber.extend(function(base){
-	var exports = {
-	  recenterCursor: true,
-	  down: function(e, cursor){},
-	  move: function(e, cursor){},
-	  drag: function(e, cursor){},
-	  up: function(e, cursor, new_cursor){},
-	  cancel: function(){},
-  }
-  return exports
-})
-
-var ArrowTool = MapTool.extend(function(base){
+var EraserTool = MapTool.extend(function(base){
 	var exports = {}
-	
-	var selected_point = null, original_point = null, selected_shape = null
-	
 	exports.down = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var p = shapes.findClosestPoint(last_point)
-    if (p) {
-      selected_shape = p.shape
-      selected_point = p.point
-      original_point = selected_point.clone()
-    }
-    else {
-      map.ui.set_drag_tool("position")
-    }
-	}
-	
-  exports.move = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var p = shapes.findClosestPoint(last_point)
-    if (p) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(p.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-	}
-	
-	exports.drag = function(e, cursor){
-    selected_point.a = original_point.a + cursor.x.magnitude()
-		selected_point.b = original_point.b + cursor.y.magnitude()
-		selected_shape.rebuild()
-	}
-	
-	exports.up = function(e, cursor){
-	  selected_point = selected_shape = original_point = null
-	}
-	
-	return exports
-})
-
-var PositionTool = MapTool.extend(function(base){
-	var exports = {
-	  recenterCursor: false,
-	  drag: function(e, cursor){
-      map.center.a = -cursor.x.magnitude()
-      map.center.b = cursor.y.magnitude()
-	  },
-	  rightclick: 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
-	  }
-  }
-  return exports
-})
-
-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 (line.points.length > 2) {
-          line.build()
-        }
-        else {
-          line.reset()
-        }
-        return
-      }
-      map.ui.tools.position.rightclick(e, cursor)
-      return
-    }
-
-    // compare to initial point
-    var p = last_point.clone()
-    if (placing) {
-      if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
-        placing = false
-      }
-      else {
-        line.add(p)
-      }
-    }
-    else {
-      placing = true
-      line = new Polyline ()
-      line.add(p)
-    }
   }
   exports.move = function(e, cursor){
     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
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    var end_point = shapes.findClosestEndPoint(last_point)
-    if (end_point) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(end_point.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-  }
-  exports.cancel = function(){
-    if (placing) { line.reset() }
-    placing = false
-  }
-  return exports
-})
-
-var OrthoPolylineTool = MapTool.extend(function (base) {
-  // this will work like normal polyline except all walls will be orthogonal
-  
-  var prev_point, horizontal = false, first_edge_is_horizontal = false
-  
-  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 (line.points.length > 2) {
-          line.build()
-        }
-        else {
-          line.reset()
-        }
-        return
-      }
-      else {
-        map.ui.tools.position.rightclick(e, cursor)
-      }
-      return
-    }
-
-    // compare to initial point
-    var p = last_point.clone()
-    if (placing) {
-      if (line.lastPoint().eq(p)) {
-        return
-      }
-      else if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
-        placing = false
-      }
-      else {
-        line.add(p)
-        prev_point = p
-        horizontal = ! horizontal
-      }
-    }
-    else {
-      placing = true
-      line = new Polyline ()
-      line.add(p)
-      first_point = prev_point = p
-      horizontal = false
-    }
-  }
-  exports.move = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    if (placing) {
-      if (line.points.length == 1) {
-        var x = abs(prev_point.a - last_point.a)
-        var y = abs(prev_point.b - last_point.b)
-        if (x > y) {
-          last_point.b = prev_point.b
-          first_edge_is_horizontal = horizontal = true
-        }
-        else {
-          last_point.a = prev_point.a
-          first_edge_is_horizontal = horizontal = false
-        }
-      }
-      else {
-        if (horizontal) {
-          last_point.b = prev_point.b
-        }
-        else {
-          last_point.a = prev_point.a
-        }
-        if (horizontal == first_edge_is_horizontal) {
-          // check if this point is within N pixels of the normal
-          // and lock it into place if so
-          if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
-            last_point.a = first_point.a
-          }
-          else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
-            last_point.b = first_point.b
-          }
-        }
-      }
-
-      if (line.canCloseWith(last_point)) {
-        document.body.style.cursor = "pointer"
-        last_point.assign(first_point)
-        cursor.x.a = cursor.x.b = last_point.a
-        cursor.y.a = cursor.y.b = last_point.b
-      }
-      return
-    }
-    var end_point = shapes.findClosestEndPoint(last_point)
-    if (end_point) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(end_point.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-  }
-  exports.cancel = function(){
-    if (placing) { line.reset() }
-    first_point = null
-    placing = false
-  }
-  return exports
-})
-
-var EraserTool = MapTool.extend(function(base){
-	var exports = {}
-	exports.down = function(e, cursor){
-  }
-  exports.move = function(e, cursor){
     var segment = shapes.findClosestSegment(last_point)
     if (segment) {
       document.body.style.cursor = "pointer"
@@ -463,8 +209,8 @@ var Polyline = Fiber.extend(function(base){
     for (var i = 1; i < points.length; i++) {
       p1 = p2
       p2 = points[i]
-      d1 = p1.a - p2.a
-      d2 = p1.b - p2.b
+      d1 = p2.a - p1.a
+      d2 = p2.b - p1.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
@@ -506,7 +252,7 @@ var Polyline = Fiber.extend(function(base){
         i && ctx.lineTo(point.a, point.b)
       })
       ctx.stroke()
-      if (! placing || this.closed) {
+      if (! map.ui.placing || this.closed) {
         ctx.fill()
       }
     }
@@ -540,74 +286,6 @@ var Polyline = Fiber.extend(function(base){
   return exports
 })
 
-MX.Polyline = MX.Object3D.extend({
-  init: function(polyline){
-    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]
-      this.move_face(mx, head, tail)
-      this.faces.push(mx)
-      scene.add(mx)
-    }
-  },
-  
-  rebuild: function(){
-    for (var i = 1; i < this.points.length; i++) {
-      var mx = this.faces[i-1]
-      var head = this.points[i-1]
-      var tail = this.points[i]
-      this.move_face(mx, head, tail)
-    }
-  },
-
-  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 )
-    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%"] + ')'
-  },
-  
-  destroy: function(){
-    this.faces.forEach(function(mx){
-      scene.remove(mx)
-    })
-    this.faces = null
-    this.points = null
-  },
-
-})
-
-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
 
@@ -626,13 +304,14 @@ map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
 map.ui.add_tool("eraser", new EraserTool)
 map.ui.add_tool("position", new PositionTool)
 
+map.ui.placing = false
+
 $(window).resize(function(){
   scene.width = window.innerWidth/2
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
 var wall_height = 180
-var placing = false
 var line
 var shapes = new ShapeList
 var ctx = map.draw.ctx
@@ -695,7 +374,8 @@ OrthographicToolbar.add("ortho-polyline-mode", function(){
 OrthographicToolbar.add("eraser-mode", function(){
   map.ui.set_tool("eraser")
 })
-OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("ortho-polyline-mode")
+OrthographicToolbar.pick("eraser-mode")
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
@@ -749,6 +429,14 @@ function build () {
 	})
 	controls.init()
 
+  line = new Polyline ()
+  line.add( new vec2(-100,100) )
+  line.add( new vec2(100,100) )
+  line.add( new vec2(100,-100) )
+  line.add( new vec2(-100,-100) )
+  line.close()
+  line.build()
+
 	animate(0)
 }
 var last_t = 0
@@ -773,7 +461,7 @@ function animate(t){
 
   if (line) {
     line.draw(map.draw.ctx)
-    if (placing && last_point) {
+    if (map.ui.placing && last_point) {
       line.draw_line( map.draw.ctx, last_point )
     }
   }
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 6dfe912..2de32fb 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -80,8 +80,8 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_editor.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_minimap.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui/editor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui/minimap.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/lib/View.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 0a6a314dc01df3d8d7f37c6b97293cedeb1aa6a0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Jul 2015 13:29:55 -0400
Subject: remove segment

---
 public/assets/test/ortho3.html | 58 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 10 deletions(-)

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

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 7e7e8ec..f56c73f 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -87,6 +87,12 @@ app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 var EraserTool = MapTool.extend(function(base){
 	var exports = {}
 	exports.down = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var segment = shapes.findClosestSegment(last_point)
+    if (segment) {
+      shapes.removeSegment(segment)
+    }
   }
   exports.move = function(e, cursor){
     last_point.a = cursor.x.a
@@ -98,7 +104,6 @@ var EraserTool = MapTool.extend(function(base){
       last_point.b = segment.y
       cursor.x.a = cursor.x.b = last_point.a
       cursor.y.a = cursor.y.b = last_point.b
-      return
     }
     else {
       document.body.style.cursor = "crosshair"
@@ -121,6 +126,21 @@ var ShapeList = Fiber.extend(function(base){
       this.shapes.splice(index, 1)
     }
   }
+  exports.removeSegment = function (segment){
+    var shape = segment.shape
+    var head = shape.getHeadAtIndex(segment.head)
+    var tail = shape.getTailAtIndex(segment.tail)
+    this.remove(shape)
+    shape.destroy()
+    if (head) {
+      this.add(head)
+      head.build()
+    }
+    if (tail) {
+      this.add(tail)
+      tail.build()
+    }
+  }
   exports.findClosestPoint = function (p){
     var point
     for (var i = 0; i < this.shapes.length; i++) {
@@ -156,29 +176,42 @@ var ShapeList = Fiber.extend(function(base){
 
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
-	
 	exports.init = function(){
     this.points = []
     this.mx_points = []
     this.closed = false
 	}
-
 	exports.add = function(p){
     this.points.push( p )
     this.mx_points.push( new MX.Point(p) )
 	}
-	
 	exports.firstPoint = function(){
 	  return this.points[0]
 	}
 	exports.lastPoint = function(){
 	  return this.points[this.points.length-1]
 	}
-	
 	exports.canCloseWith = function(p){
     return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom)
 	}
-	
+	exports.getHeadAtIndex = function(index){
+	  if (index == 0) { return null }
+	  if (index == this.points.length-1) { return this.clone() }
+	  var head = new Polyline()
+	  head.points = this.points.slice(0, index+1)
+	  return head
+	}
+	exports.getTailAtIndex = function(index){
+	  if (index == this.points.length-1) { return null }
+	  if (index == 0) { return this.clone() }
+	  var tail = new Polyline()
+	  tail.points = this.points.slice(index, this.points.length)
+	  return tail
+	}
+	exports.clone = function(){
+	  var clone = new Polyline()
+	  clone.points = this.points.concat()
+	}
 	exports.hasPointNear = function(p){
 	  var point
     for (var i = 0; i < this.points.length; i++){
@@ -199,7 +232,6 @@ var Polyline = Fiber.extend(function(base){
     }
     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
@@ -231,10 +263,10 @@ var Polyline = Fiber.extend(function(base){
       x: x,
       y: y,
       distance: closest_distance,
-      index: closest_i,
+      head: closest_i-1,
+      tail: closest_i,
     }
 	}
-	
   exports.draw = function(ctx){
     var points = this.points
     if (! points.length) return
@@ -280,13 +312,18 @@ var Polyline = Fiber.extend(function(base){
   }
   exports.reset = function(){
     this.mx_points.forEach(function(mx){ scene.remove(mx) })
-    this.points.length = 0
     this.mx_points.length = 0
+    this.points.length = 0
   }
+	exports.destroy = function(){
+	  this.reset()
+	  this.mx && this.mx.destroy()
+	}
   return exports
 })
 
 
+
 var scene, map, controls
 
 map = new Map ({
@@ -377,6 +414,7 @@ OrthographicToolbar.add("eraser-mode", function(){
 // OrthographicToolbar.pick("ortho-polyline-mode")
 OrthographicToolbar.pick("eraser-mode")
 
+
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
-- 
cgit v1.2.3-70-g09d2


From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Jul 2015 13:50:27 -0400
Subject: split out modules

---
 .../rectangles/engine/map/tools/eraser.js          |  27 +++
 .../rectangles/engine/shapes/polyline.js           | 147 +++++++++++++
 .../rectangles/engine/shapes/shapelist.js          |  61 ++++++
 public/assets/test/ortho3.html                     | 243 +--------------------
 4 files changed, 238 insertions(+), 240 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js
 create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js
 create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js

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

diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js
new file mode 100644
index 0000000..648cd11
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js
@@ -0,0 +1,27 @@
+var EraserTool = MapTool.extend(function(base){
+	var exports = {}
+	exports.down = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var segment = shapes.findClosestSegment(last_point)
+    if (segment) {
+      shapes.removeSegment(segment)
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point.a = cursor.x.a
+    last_point.b = cursor.y.a
+    var segment = shapes.findClosestSegment(last_point)
+    if (segment) {
+      document.body.style.cursor = "pointer"
+      last_point.a = segment.x
+      last_point.b = segment.y
+      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
+})
diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
new file mode 100644
index 0000000..7e3c04c
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
@@ -0,0 +1,147 @@
+var Polyline = Fiber.extend(function(base){
+	var exports = {}
+	exports.init = function(){
+    this.points = []
+    this.mx_points = []
+    this.closed = false
+	}
+	exports.add = function(p){
+    this.points.push( p )
+    this.mx_points.push( new MX.Point(p) )
+	}
+	exports.firstPoint = function(){
+	  return this.points[0]
+	}
+	exports.lastPoint = function(){
+	  return this.points[this.points.length-1]
+	}
+	exports.canCloseWith = function(p){
+    return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom)
+	}
+	exports.getHeadAtIndex = function(index){
+	  if (index == 0) { return null }
+	  if (index == this.points.length-1) { return this.clone() }
+	  var head = new Polyline()
+	  head.points = this.points.slice(0, index+1)
+	  return head
+	}
+	exports.getTailAtIndex = function(index){
+	  if (index == this.points.length-1) { return null }
+	  if (index == 0) { return this.clone() }
+	  var tail = new Polyline()
+	  tail.points = this.points.slice(index, this.points.length)
+	  return tail
+	}
+	exports.clone = function(){
+	  var clone = new Polyline()
+	  clone.points = this.points.concat()
+	}
+	exports.hasPointNear = function(p){
+	  var point
+    for (var i = 0; i < this.points.length; i++){
+      point = this.points[i]
+      if (point.distanceTo( p ) < 10/map.zoom) {
+        return point
+      }
+    }
+    return null
+	}
+	exports.hasEndPointNear = function(p){
+	  if (this.closed) return null
+    if (this.firstPoint().distanceTo( p ) < 10/map.zoom) {
+      return this.firstPoint()
+    }
+    if (this.lastPoint().distanceTo( p ) < 10/map.zoom) {
+      return this.lastPoint()
+    }
+    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
+    var p1, p2 = points[0]
+    for (var i = 1; i < points.length; i++) {
+      p1 = p2
+      p2 = points[i]
+      d1 = p2.a - p1.a
+      d2 = p2.b - p1.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,
+      head: closest_i-1,
+      tail: closest_i,
+    }
+	}
+  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 (! map.ui.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.close = function(){
+    this.points[this.points.length] = this.points[0]
+    this.closed = true
+  }
+  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()
+  }
+  exports.reset = function(){
+    this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.mx_points.length = 0
+    this.points.length = 0
+  }
+	exports.destroy = function(){
+	  this.reset()
+	  this.mx && this.mx.destroy()
+	}
+  return exports
+})
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
new file mode 100644
index 0000000..00e1a4e
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -0,0 +1,61 @@
+var ShapeList = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(){
+    this.shapes = []
+  }
+  exports.add = function(shape){
+    this.shapes.push(shape)
+  }
+  exports.remove = function(shape){
+    var index = this.shapes.indexOf(shape)
+    if (index !== -1) {
+      this.shapes.splice(index, 1)
+    }
+  }
+  exports.removeSegment = function (segment){
+    var shape = segment.shape
+    var head = shape.getHeadAtIndex(segment.head)
+    var tail = shape.getTailAtIndex(segment.tail)
+    this.remove(shape)
+    shape.destroy()
+    if (head) {
+      this.add(head)
+      head.build()
+    }
+    if (tail) {
+      this.add(tail)
+      tail.build()
+    }
+  }
+  exports.findClosestPoint = function (p){
+    var point
+    for (var i = 0; i < this.shapes.length; i++) {
+      point = this.shapes[i].hasPointNear(p)
+      if (point) return { point: point, shape: this.shapes[i] }
+    }
+    return null
+  }
+  exports.findClosestEndPoint = function (p){
+    var point
+    for (var i = 0; i < this.shapes.length; i++) {
+      point = this.shapes[i].hasEndPointNear(p)
+      if (point) return { point: point, shape: this.shapes[i] }
+    }
+    return null
+  }
+  exports.findClosestSegment = function (p){
+    var segment = null, closest_segment = null
+    for (var i = 0; i < this.shapes.length; i++) {
+      segment = this.shapes[i].hasSegmentNear(p, 10)
+      if (segment && (! closest_segment || segment.distance < closest_segment.distance)) {
+        closest_segment = segment
+        closest_segment.shape = this.shapes[i]
+      }
+    }
+    return closest_segment
+  }
+  exports.forEach = function(fn){
+    this.shapes.forEach(fn)
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index f56c73f..ef5732c 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -74,9 +74,12 @@ body {
 <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/tools/eraser.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
 
 <script>
 var app = window.app || {}
@@ -84,246 +87,6 @@ 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 EraserTool = MapTool.extend(function(base){
-	var exports = {}
-	exports.down = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var segment = shapes.findClosestSegment(last_point)
-    if (segment) {
-      shapes.removeSegment(segment)
-    }
-  }
-  exports.move = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var segment = shapes.findClosestSegment(last_point)
-    if (segment) {
-      document.body.style.cursor = "pointer"
-      last_point.a = segment.x
-      last_point.b = segment.y
-      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 ShapeList = Fiber.extend(function(base){
-  var exports = {}
-  exports.init = function(){
-    this.shapes = []
-  }
-  exports.add = function(shape){
-    this.shapes.push(shape)
-  }
-  exports.remove = function(shape){
-    var index = this.shapes.indexOf(shape)
-    if (index !== -1) {
-      this.shapes.splice(index, 1)
-    }
-  }
-  exports.removeSegment = function (segment){
-    var shape = segment.shape
-    var head = shape.getHeadAtIndex(segment.head)
-    var tail = shape.getTailAtIndex(segment.tail)
-    this.remove(shape)
-    shape.destroy()
-    if (head) {
-      this.add(head)
-      head.build()
-    }
-    if (tail) {
-      this.add(tail)
-      tail.build()
-    }
-  }
-  exports.findClosestPoint = function (p){
-    var point
-    for (var i = 0; i < this.shapes.length; i++) {
-      point = this.shapes[i].hasPointNear(p)
-      if (point) return { point: point, shape: this.shapes[i] }
-    }
-    return null
-  }
-  exports.findClosestEndPoint = function (p){
-    var point
-    for (var i = 0; i < this.shapes.length; i++) {
-      point = this.shapes[i].hasEndPointNear(p)
-      if (point) return { point: point, shape: this.shapes[i] }
-    }
-    return null
-  }
-  exports.findClosestSegment = function (p){
-    var segment = null, closest_segment = null
-    for (var i = 0; i < this.shapes.length; i++) {
-      segment = this.shapes[i].hasSegmentNear(p, 10)
-      if (segment && (! closest_segment || segment.distance < closest_segment.distance)) {
-        closest_segment = segment
-        closest_segment.shape = this.shapes[i]
-      }
-    }
-    return closest_segment
-  }
-  exports.forEach = function(fn){
-    this.shapes.forEach(fn)
-  }
-  return exports
-})
-
-var Polyline = Fiber.extend(function(base){
-	var exports = {}
-	exports.init = function(){
-    this.points = []
-    this.mx_points = []
-    this.closed = false
-	}
-	exports.add = function(p){
-    this.points.push( p )
-    this.mx_points.push( new MX.Point(p) )
-	}
-	exports.firstPoint = function(){
-	  return this.points[0]
-	}
-	exports.lastPoint = function(){
-	  return this.points[this.points.length-1]
-	}
-	exports.canCloseWith = function(p){
-    return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom)
-	}
-	exports.getHeadAtIndex = function(index){
-	  if (index == 0) { return null }
-	  if (index == this.points.length-1) { return this.clone() }
-	  var head = new Polyline()
-	  head.points = this.points.slice(0, index+1)
-	  return head
-	}
-	exports.getTailAtIndex = function(index){
-	  if (index == this.points.length-1) { return null }
-	  if (index == 0) { return this.clone() }
-	  var tail = new Polyline()
-	  tail.points = this.points.slice(index, this.points.length)
-	  return tail
-	}
-	exports.clone = function(){
-	  var clone = new Polyline()
-	  clone.points = this.points.concat()
-	}
-	exports.hasPointNear = function(p){
-	  var point
-    for (var i = 0; i < this.points.length; i++){
-      point = this.points[i]
-      if (point.distanceTo( p ) < 10/map.zoom) {
-        return point
-      }
-    }
-    return null
-	}
-	exports.hasEndPointNear = function(p){
-	  if (this.closed) return null
-    if (this.firstPoint().distanceTo( p ) < 10/map.zoom) {
-      return this.firstPoint()
-    }
-    if (this.lastPoint().distanceTo( p ) < 10/map.zoom) {
-      return this.lastPoint()
-    }
-    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
-    var p1, p2 = points[0]
-    for (var i = 1; i < points.length; i++) {
-      p1 = p2
-      p2 = points[i]
-      d1 = p2.a - p1.a
-      d2 = p2.b - p1.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,
-      head: closest_i-1,
-      tail: closest_i,
-    }
-	}
-  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 (! map.ui.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.close = function(){
-    this.points[this.points.length] = this.points[0]
-    this.closed = true
-  }
-  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()
-  }
-  exports.reset = function(){
-    this.mx_points.forEach(function(mx){ scene.remove(mx) })
-    this.mx_points.length = 0
-    this.points.length = 0
-  }
-	exports.destroy = function(){
-	  this.reset()
-	  this.mx && this.mx.destroy()
-	}
-  return exports
-})
-
-
-
 var scene, map, controls
 
 map = new Map ({
-- 
cgit v1.2.3-70-g09d2


From 71c3a4a02c7c46533aec836ef30a0d0ffa96399b Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 10 Aug 2015 18:20:22 -0400
Subject: layout stuff

---
 .../javascripts/mx/extensions/mx.movements.js      |   6 +-
 .../assets/javascripts/mx/primitives/mx.image.js   |   3 +-
 .../rectangles/engine/map/tools/ortho.js           |  26 +-
 .../rectangles/engine/map/tools/polyline.js        |  24 +-
 .../rectangles/engine/shapes/shapelist.js          |   1 +
 public/assets/javascripts/ui/lib/Toolbar.js        |  22 ++
 public/assets/javascripts/ui/site/StaffView.js     |  26 +-
 public/assets/test/ortho3.html                     |  38 +--
 public/assets/test/ortho4.html                     | 261 +++++++++++++++++++++
 server/lib/middleware.js                           |   2 +-
 server/lib/schemas/Media.js                        |   1 +
 server/lib/views/staff.js                          |   3 +-
 views/staff/_layouts.ejs                           |   2 +-
 views/staff/layouts/show.ejs                       |   4 +-
 14 files changed, 352 insertions(+), 67 deletions(-)
 create mode 100644 public/assets/javascripts/ui/lib/Toolbar.js
 create mode 100644 public/assets/test/ortho4.html

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

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index fa59908..9ed8790 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -162,13 +162,13 @@ MX.Movements = function (cam) {
 				
 				case 8: // backspace
 				  e.preventDefault()
-          if (app.controller.sculptureEditor.sculpture) {
+          if (app.controller.sculptureEditor && app.controller.sculptureEditor.sculpture) {
             app.controller.sculptureEditor.sculpture.remove()
           }
-          else if (app.controller.mediaEditor.scenery) {
+          else if (app.controller.mediaEditor && app.controller.mediaEditor.scenery) {
             app.controller.mediaEditor.scenery.remove()
           }
-          else if (app.controller.textEditor.scenery) {
+          else if (app.controller.textEditor && app.controller.textEditor.scenery) {
             app.controller.textEditor.scenery.remove()
           }
 			}
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 64de4b2..f9de141 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -17,7 +17,7 @@ MX.Image = MX.Object3D.extend({
 
 		this.el.style.backgroundRepeat = 'no-repeat'
 		
-		this.load(ops)
+		ops.src && this.load(ops)
   },
 
   load: function(ops){
@@ -64,7 +64,6 @@ MX.Image = MX.Object3D.extend({
     if (recenter) {
       ctx.restore()
     }
-
   },
 
 })
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
index be3d707..ef41096 100644
--- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
@@ -12,11 +12,11 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
       if (map.ui.placing) {
         // close polyline or cancel
         map.ui.placing = false
-        if (line.points.length > 2) {
-          line.build()
+        if (shapes.workline.points.length > 2) {
+          shapes.workline.build()
         }
         else {
-          line.reset()
+          shapes.workline.reset()
         }
         return
       }
@@ -29,24 +29,24 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
     // compare to initial point
     var p = last_point.clone()
     if (map.ui.placing) {
-      if (line.lastPoint().eq(p)) {
+      if (shapes.workline.lastPoint().eq(p)) {
         return
       }
-      else if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
+      else if (shapes.workline.canCloseWith(p)) {
+        shapes.workline.close()
+        shapes.workline.build()
         map.ui.placing = false
       }
       else {
-        line.add(p)
+        shapes.workline.add(p)
         prev_point = p
         horizontal = ! horizontal
       }
     }
     else {
       map.ui.placing = true
-      line = new Polyline ()
-      line.add(p)
+      shapes.workline = new Polyline ()
+      shapes.workline.add(p)
       first_point = prev_point = p
       horizontal = false
     }
@@ -55,7 +55,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
     if (map.ui.placing) {
-      if (line.points.length == 1) {
+      if (shapes.workline.points.length == 1) {
         var x = abs(prev_point.a - last_point.a)
         var y = abs(prev_point.b - last_point.b)
         if (x > y) {
@@ -86,7 +86,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
         }
       }
 
-      if (line.canCloseWith(last_point)) {
+      if (shapes.workline.canCloseWith(last_point)) {
         document.body.style.cursor = "pointer"
         last_point.assign(first_point)
         cursor.x.a = cursor.x.b = last_point.a
@@ -107,7 +107,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
     }
   }
   exports.cancel = function(){
-    if (map.ui.placing) { line.reset() }
+    if (map.ui.placing) { shapes.workline.reset() }
     first_point = null
     map.ui.placing = false
   }
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
index 559aea8..1ab86f6 100644
--- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
@@ -9,11 +9,11 @@ var PolylineTool = MapTool.extend(function (base) {
       if (map.ui.placing) {
         // close polyline or cancel
         map.ui.placing = false
-        if (line.points.length > 2) {
-          line.build()
+        if (shapes.workline.points.length > 2) {
+          shapes.workline.build()
         }
         else {
-          line.reset()
+          shapes.workline.reset()
         }
         return
       }
@@ -24,27 +24,27 @@ var PolylineTool = MapTool.extend(function (base) {
     // compare to initial point
     var p = last_point.clone()
     if (map.ui.placing) {
-      if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
+      if (shapes.workline.canCloseWith(p)) {
+        shapes.workline.close()
+        shapes.workline.build()
         map.ui.placing = false
       }
       else {
-        line.add(p)
+        shapes.workline.add(p)
       }
     }
     else {
       map.ui.placing = true
-      line = new Polyline ()
-      line.add(p)
+      shapes.workline = new Polyline ()
+      shapes.workline.add(p)
     }
   }
   exports.move = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    if (map.ui.placing && line.canCloseWith(last_point)) {
+    if (map.ui.placing && shapes.workline.canCloseWith(last_point)) {
       document.body.style.cursor = "pointer"
-      last_point.assign(line.points[0])
+      last_point.assign(shapes.workline.points[0])
       cursor.x.a = cursor.x.b = last_point.a
       cursor.y.a = cursor.y.b = last_point.b
       return
@@ -62,7 +62,7 @@ var PolylineTool = MapTool.extend(function (base) {
     }
   }
   exports.cancel = function(){
-    if (map.ui.placing) { line.reset() }
+    if (map.ui.placing) { shapes.workline.reset() }
     map.ui.placing = false
   }
   return exports
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
index 00e1a4e..932ce36 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -2,6 +2,7 @@ var ShapeList = Fiber.extend(function(base){
   var exports = {}
   exports.init = function(){
     this.shapes = []
+    this.workline = null
   }
   exports.add = function(shape){
     this.shapes.push(shape)
diff --git a/public/assets/javascripts/ui/lib/Toolbar.js b/public/assets/javascripts/ui/lib/Toolbar.js
new file mode 100644
index 0000000..a9ce51c
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/Toolbar.js
@@ -0,0 +1,22 @@
+var Toolbar = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(rapper){
+    this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper
+    this.tools = {}
+    this.els = {}
+  }
+  exports.add = function(role, fn){
+    var self = this
+    this.tools[role] = fn
+    this.els[role] = $("[data-role=" + role + "]", self.rapper)
+    this.els[role].click(function(){
+      $(".active", self.rapper).removeClass('active')
+      $(this).addClass('active')
+      fn()
+    })
+  }
+  exports.pick = function(role){
+    this.els[role].trigger("click")
+  }
+  return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js
index 0398f71..59649e3 100644
--- a/public/assets/javascripts/ui/site/StaffView.js
+++ b/public/assets/javascripts/ui/site/StaffView.js
@@ -4,11 +4,13 @@ var StaffView = View.extend({
   events: {
     "click #toggle-staff": "toggleStaff",
     "click #toggle-featured": "toggleFeatured",
+    "click #toggle-stock": "toggleStock",
   },
 
 	initialize: function() {
 		this.$toggleStaff = $("#toggle-staff")
 		this.$toggleFeatured = $("#toggle-featured")
+		this.$toggleStock = $("#toggle-stock")
 		this.$mediaEmbed = $("#media-embed")
     if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) {
       this.$toggleStaff.html("Is Staff")
@@ -16,6 +18,9 @@ var StaffView = View.extend({
     if (this.$toggleFeatured.length && this.$toggleFeatured.data().featured) {
       this.$toggleFeatured.html("Featured Project")
     }
+    if (this.$toggleStock.length && this.$toggleStock.data().stock) {
+      this.$toggleStock.html("Layout is Stock")
+    }
     if (this.$mediaEmbed.length) {
       var media = this.$mediaEmbed.data()
       this.$mediaEmbed.html( Parser.tag( media ) )
@@ -67,6 +72,25 @@ var StaffView = View.extend({
         $("#isFeaturedProject").html(data.state ? "yes" : "no")
       }.bind(this)
     })
-  },	
+  },
+
+  toggleStock: function(){
+  console.log("stock")
+    var state = ! this.$toggleStock.data().stock
+    $.ajax({
+      type: "put",
+      dataType: "json",
+      url: window.location.href + "/stock",
+      data: {
+        state: state,
+        _csrf: $("#_csrf").val(),
+      },
+      success: function(data){
+        this.$toggleStock.data("stock", data.state)
+        this.$toggleStock.html(data.state ? "Stock Layout" : "Make this layout Stock")
+        $("#isStockLayout").html(data.state ? "yes" : "no")
+      }.bind(this)
+    })
+  },
 
 })
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index ef5732c..f41a0ba 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -80,6 +80,7 @@ body {
 <script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
 <script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
 <script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.js"></script>
 
 <script>
 var app = window.app || {}
@@ -112,7 +113,6 @@ $(window).resize(function(){
 })
 
 var wall_height = 180
-var line
 var shapes = new ShapeList
 var ctx = map.draw.ctx
 var last_point = new vec2 (0,0)
@@ -121,30 +121,6 @@ $("#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 = {}
-    this.els = {}
-  }
-  exports.add = function(role, fn){
-    var self = this
-    this.tools[role] = fn
-    this.els[role] = $("[data-role=" + role + "]", self.rapper)
-    this.els[role].click(function(){
-      $(".active", self.rapper).removeClass('active')
-      $(this).addClass('active')
-      fn()
-    })
-  }
-  exports.pick = function(role){
-    this.els[role].trigger("click")
-  }
-  return exports
-})
-
 var PerspectiveToolbar = new Toolbar (".persp-hud")
 PerspectiveToolbar.add("orbit-mode", function(){
   controls.toggle(true)
@@ -174,8 +150,8 @@ OrthographicToolbar.add("ortho-polyline-mode", function(){
 OrthographicToolbar.add("eraser-mode", function(){
   map.ui.set_tool("eraser")
 })
-// OrthographicToolbar.pick("ortho-polyline-mode")
-OrthographicToolbar.pick("eraser-mode")
+OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("eraser-mode")
 
 
 document.addEventListener('DOMContentLoaded', build)
@@ -230,7 +206,7 @@ function build () {
 	})
 	controls.init()
 
-  line = new Polyline ()
+  var line = new Polyline ()
   line.add( new vec2(-100,100) )
   line.add( new vec2(100,100) )
   line.add( new vec2(100,-100) )
@@ -260,10 +236,10 @@ function animate(t){
 
 	map.draw.coords()
 
-  if (line) {
-    line.draw(map.draw.ctx)
+  if (shapes.workline) {
+    shapes.workline.draw(map.draw.ctx)
     if (map.ui.placing && last_point) {
-      line.draw_line( map.draw.ctx, last_point )
+      shapes.workline.draw_line( map.draw.ctx, last_point )
     }
   }
 
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
new file mode 100644
index 0000000..b434efb
--- /dev/null
+++ b/public/assets/test/ortho4.html
@@ -0,0 +1,261 @@
+<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 {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+.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 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" 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>
+  <span class="ion-scissors" data-role="eraser-mode"></span>
+</div>
+
+<div class="mediaDrawer fixed animate blueprintUpload">
+	<span class="close">X</span>
+	<div class="box">
+		
+    <h2>Upload A Room Image</h2>
+
+	</div>
+</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/mx/primitives/mx.point.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.polyline.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>
+<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/draw.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/tools/eraser.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/View.js"></script>
+<script src="/assets/javascripts/ui/lib/ModalView.js"></script>
+<script src="/assets/javascripts/ui/lib/Parser.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.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) }
+
+var scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: -2,
+  zoom_min: -6.2,
+  zoom_max: 1,
+})
+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("eraser", new EraserTool)
+map.ui.add_tool("position", new PositionTool)
+
+map.ui.placing = false
+
+$(window).resize(function(){
+  scene.width = window.innerWidth/2
+  map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
+var wall_height = 180
+var shapes = new ShapeList
+var ctx = map.draw.ctx
+var last_point = new vec2 (0,0)
+
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
+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("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")
+})
+OrthographicToolbar.add("eraser-mode", function(){
+  map.ui.set_tool("eraser")
+})
+OrthographicToolbar.pick("ortho-polyline-mode")
+
+
+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",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  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({
+	  el: scene.el,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+var last_t = 0
+function animate(t){
+  requestAnimationFrame(animate)
+
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  floorplan.draw(map.draw.ctx, true)
+
+	map.draw.coords()
+
+  if (shapes.workline) {
+    shapes.workline.draw(map.draw.ctx)
+    if (map.ui.placing && last_point) {
+      shapes.workline.draw_line( map.draw.ctx, last_point )
+    }
+  }
+
+  shapes.forEach(function(shape){
+    shape.draw(map.draw.ctx)
+  })
+
+  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
diff --git a/server/lib/middleware.js b/server/lib/middleware.js
index 94c4acd..04cb330 100644
--- a/server/lib/middleware.js
+++ b/server/lib/middleware.js
@@ -114,7 +114,7 @@ var middleware = {
 					console.error(err)
 					req.layout = null
 				}
-				else if (! project) {
+				else if (! layout) {
 					req.layout = null
 				}
 				else {
diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js
index 8247467..f37fb12 100644
--- a/server/lib/schemas/Media.js
+++ b/server/lib/schemas/Media.js
@@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({
 	mute: { type: Boolean, default: false },
 	keyframe: { type: Number, default: 0.0 },
 	tag: { type: String, default: "" },
+	scale: { type: Number, default: 1.0 },
 	
 	widthDimension: { type: Number },
 	heightDimension: { type: Number },
diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index a3d5bea..43330e2 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -6,6 +6,7 @@ var User = require('../schemas/User'),
 	Collaborator = require('../schemas/Collaborator'),
 	Plan = require('../schemas/Plan'),
 	Subscription = require('../schemas/Subscription'),
+	Layout = require('../schemas/Layout'),
 	config = require('../../../config'),
 	middleware = require('../middleware'),
 	util = require('../util'),
@@ -821,7 +822,7 @@ var staff = module.exports = {
     make_stock: function(req, res){
       res.locals.layout.is_stock = req.body.state == "true"
       res.locals.layout.save(function(err, layout){
-        res.json({ state: layout.featured })
+        res.json({ state: layout.is_stock })
       })
     },
   },
diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs
index 3f3e6b2..d97883b 100644
--- a/views/staff/_layouts.ejs
+++ b/views/staff/_layouts.ejs
@@ -1,5 +1,5 @@
 <table id="users">
-[[ layouts.forEach(function(project){ ]]
+[[ layouts.forEach(function(layout){ ]]
   <tr>
     <td>
       <a href="/staff/layouts/[[- layout.slug ]]">[[- layout.name ]]</a>
diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs
index 0a2014b..b66449f 100644
--- a/views/staff/layouts/show.ejs
+++ b/views/staff/layouts/show.ejs
@@ -45,14 +45,14 @@
         featured?
       </th>
       <td id="isStockLayout">
-        [[- layout.plan_type == 0 ? "yes" : "no" ]]
+        [[- layout.is_stock ? "yes" : "no" ]]
       </td>
     </tr>
   </table>
 
   <br><br>
   <div id="actions">
-    <button id="toggle-stock" data-stock="[[- !! (layout.plan_type == 0) ]]">Make this layout Stock</button>
+    <button id="toggle-stock" data-stock="[[- !! (layout.is_stock) ]]">Make this layout Stock</button>
   </div>
   
   <br>
-- 
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/ortho3.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