From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 4 Feb 2015 13:30:39 -0500
Subject: orbit camera

---
 .../javascripts/mx/extensions/mx.orbitCamera.js    | 80 ++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
new file mode 100644
index 0000000..b3dcc43
--- /dev/null
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -0,0 +1,80 @@
+MX.OrbitCamera = function(opt){
+	var exports = {}, bound = false
+	exports.opt = opt = defaults(opt, {
+		el: window,                   // object to bind events on
+		camera: scene.camera,         // camera object we'll be moving
+		radius: 100,
+		radiusRange: [ 10, 1000 ],
+		rotationX: PI/2,
+		rotationY: 0,
+		center: { x: 0, y: 0, z: 0 },
+		sensitivity: 10,              // moving 1 pixel is like moving N radians
+		ease: 10,
+	})
+	var rx, ry, px, py, epsilon = 1e-10, dragging = false
+	exports.init = function(){
+    ry = opt.rotationY
+    rx = opt.rotationX
+		exports.bind()
+	}
+	exports.toggle = function(state){
+		if (state) exports.bind()
+		else exports.unbind()
+	}
+	exports.bind = function(){
+		if (bound) return;
+		bound = true
+		opt.el.addEventListener("mousedown", down)
+		opt.el.addEventListener("mousemove", move)
+		opt.el.addEventListener("mouseup", up)
+	}
+	exports.unbind = function(){
+		if (! bound) return;
+		bound = false
+		opt.el.removeEventListener("mousedown", down)
+		opt.el.removeEventListener("mousemove", move)
+		opt.el.removeEventListener("mouseup", up)
+	}
+	function down (e) {
+	  px = e.pageX
+	  py = e.pageY
+	  dragging = true
+	}
+	function move (e) {
+	  if (! dragging) return
+	  exports.delta(px- e.pageX, py - e.pageY)
+	  px = e.pageX
+	  py = e.pageY
+	}
+	function up (e) {
+	  dragging = false
+	}
+	exports.delta = function(x,y){
+	  opt.rotationY += x/window.innerWidth * opt.sensitivity
+	  opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI)
+	}
+	exports.move = function(y, x){
+	  opt.rotationY = y
+	  if (typeof x == "number") { opt.rotationX = x }
+	}
+	exports.update = function(){
+	  if (abs(ry - opt.rotationY) > epsilon) {
+      ry = avg(ry, opt.rotationY, opt.ease)
+	  }
+	  else {
+	    ry = opt.rotationY
+	  }
+	  if (abs(rx - opt.rotationX) > epsilon) {
+      rx = avg(rx, opt.rotationX, opt.ease)
+	  }
+	  else {
+	    rx = opt.rotationX
+	  }
+		opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry)
+		opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry)
+		opt.camera.y = opt.center.z + opt.radius * cos(rx)
+ 		opt.camera.rotationX = PI/2 - rx
+ 		opt.camera.rotationY = ry + PI/2
+	}
+	return exports
+}
-- 
cgit v1.2.3-70-g09d2


From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 4 Feb 2015 14:04:48 -0500
Subject: separate orbit test & add mousewheel zoom

---
 .../javascripts/mx/extensions/mx.orbitCamera.js    | 31 ++++++++++++++++------
 .../javascripts/rectangles/engine/map/draw.js      | 21 ++++++++++++++-
 public/assets/javascripts/rectangles/util/wheel.js | 10 ++++---
 public/assets/test/orbit.html                      | 22 ++++++++++++---
 public/assets/test/ortho.html                      |  1 +
 5 files changed, 68 insertions(+), 17 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index b3dcc43..b09512e 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){
 		sensitivity: 10,              // moving 1 pixel is like moving N radians
 		ease: 10,
 	})
-	var rx, ry, px, py, epsilon = 1e-10, dragging = false
+	var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false
 	exports.init = function(){
     ry = opt.rotationY
     rx = opt.rotationX
+    radius = opt.radius
+    exports.wheel = new wheel({
+			el: opt.el,
+			update: function(e, delta){
+				opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] )
+			},
+		})
 		exports.bind()
 	}
 	exports.toggle = function(state){
@@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){
 		if (bound) return;
 		bound = true
 		opt.el.addEventListener("mousedown", down)
-		opt.el.addEventListener("mousemove", move)
-		opt.el.addEventListener("mouseup", up)
+		window.addEventListener("mousemove", move)
+		window.addEventListener("mouseup", up)
+		exports.wheel.unlock()
 	}
 	exports.unbind = function(){
 		if (! bound) return;
 		bound = false
 		opt.el.removeEventListener("mousedown", down)
-		opt.el.removeEventListener("mousemove", move)
-		opt.el.removeEventListener("mouseup", up)
+		window.removeEventListener("mousemove", move)
+		window.removeEventListener("mouseup", up)
+		exports.wheel.lock()
 	}
 	function down (e) {
 	  px = e.pageX
@@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){
 	  else {
 	    rx = opt.rotationX
 	  }
-		opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry)
-		opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry)
-		opt.camera.y = opt.center.z + opt.radius * cos(rx)
+	  if (abs(radius - opt.radius) > epsilon) {
+	    radius = avg(radius, opt.radius, opt.ease)
+	  }
+	  else {
+	    radius = opt.radius
+	  }
+		opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry)
+		opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry)
+		opt.camera.y = opt.center.z + radius * cos(rx)
  		opt.camera.rotationX = PI/2 - rx
  		opt.camera.rotationY = ry + PI/2
 	}
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index b525696..564b351 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -228,7 +228,7 @@ Map.Draw = function(map, opt){
 		line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
 	}
 
-	function dot_at (x,z){
+	draw.dot_at = function dot_at (x,z){
 		ctx.save()
 		ctx.translate(x,z)
 
@@ -240,4 +240,23 @@ Map.Draw = function(map, opt){
 
 		ctx.restore()
 	}
+
+	draw.x_at = function x_at (x, z, length){
+		ctx.save()
+		ctx.translate(x,z)
+
+		var len = (length/2 || 4) / map.zoom
+
+    ctx.lineCap = "square"
+    ctx.lineWidth = 2/map.zoom
+    ctx.beginPath()
+		ctx.moveTo( -len, -len);
+		ctx.lineTo(  len,  len);
+		ctx.moveTo( -len,  len);
+		ctx.lineTo(  len, -len);
+		ctx.stroke();
+
+		ctx.restore()
+	}
+
 }
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js
index 712d470..4155a70 100644
--- a/public/assets/javascripts/rectangles/util/wheel.js
+++ b/public/assets/javascripts/rectangles/util/wheel.js
@@ -3,8 +3,8 @@
 	
 		base.wheel = new wheel({
 			el: document.querySelector("#map"),
-			update: function(e, val, delta){
-				// do something with val
+			update: function(e, delta){
+				// do something with delta
 			},
 		})
 
@@ -13,7 +13,7 @@
 function wheel (opt) {
 	opt = defaults(opt, {
 		el: document,
-		fn: function(e, val, delta){},
+		update: function(e, delta){},
 		propagate: false,
 		locked: false,
 		reversible: true,
@@ -22,7 +22,7 @@ function wheel (opt) {
 	})
 
 	opt.el.addEventListener('wheel', onMouseWheel, false);
-// 	opt.el.addEventListener('mousewheel', onMouseWheel, false);
+  // opt.el.addEventListener('mousewheel', onMouseWheel, false);
 	opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
 
 	function onMouseWheel (e) {
@@ -58,6 +58,8 @@ function wheel (opt) {
 		
 		// opt.val = clamp(opt.val + delta, opt.min, opt.max)
 		
+		// deltaX is also passed, but these values tend to be unusable
+		// try http://vvalls.com/assets/test/wheel.html with a trackpad
 		opt.update(e, deltaY, deltaX)
 	}
 
diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html
index 8b45de6..0416ff7 100644
--- a/public/assets/test/orbit.html
+++ b/public/assets/test/orbit.html
@@ -35,6 +35,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.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>
@@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) {
 	mx.updateChildren = false
 	mx.move({
 		x: p.a,
-		y: i/4,
+		y: i/2,
 		z: p.b,
 		rotationY: -theta,
 		width: 1,
-		height: i/2,
+		height: i,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
 	scene.add(mx)
 	mx.update()
 }
+function add_center () {
+  var mx = new MX.Object3D()
+  mx.width = 79
+  mx.height = 64
+  mx.y = 32 * 0.05
+  mx.scale = 0.05
+  mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)"
+  scene.add(mx)
+}
 function build_circle () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.move({
@@ -102,7 +112,7 @@ function build_circle () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-	var theta, rad = 10;
+	var theta, rad = 16;
 	for (var i = 0; i < 100; i++) {
 		theta = (i/100 * TWO_PI)
 		add_mx_point({
@@ -111,9 +121,11 @@ function build_circle () {
 		}, theta, i)
 	}
 
+  add_center()
+  
 	scene.update()
 
-	controls = new MX.OrbitCamera()
+	controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") })
 	controls.init()
 
 	console.log("ready..perhaps")
@@ -131,6 +143,8 @@ function animate(time){
 	map.draw.translate()
 
 	map.draw.coords()
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
 	map.draw.mouse(map.ui.mouse.cursor)
 	map.draw.camera(scene.camera)
 
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index 57e050c..b00b6fe 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -35,6 +35,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.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>
-- 
cgit v1.2.3-70-g09d2


From cbc0e733553648f24c8c0256caee36d1e4f24ce1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 4 Feb 2015 18:08:43 -0500
Subject: build MX divs from polyline

---
 .../javascripts/mx/extensions/mx.orbitCamera.js    |   3 +-
 public/assets/test/ortho.html                      | 107 +++++++++++++++++----
 2 files changed, 88 insertions(+), 22 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index b09512e..6dc5b6c 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){
 		rotationY: 0,
 		center: { x: 0, y: 0, z: 0 },
 		sensitivity: 10,              // moving 1 pixel is like moving N radians
+		wheelSensitivity: 10,
 		ease: 10,
 	})
 	var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false
@@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){
     exports.wheel = new wheel({
 			el: opt.el,
 			update: function(e, delta){
-				opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] )
+				opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] )
 			},
 		})
 		exports.bind()
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index b00b6fe..041ec3f 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){
 				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.length = 0
+				points.length = mx_points.length = 0
 				points.push( p )
+        mx_points.push( add_mx_point(p) )
 			}
-			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)
@@ -104,10 +106,11 @@ map = new Map ({
 	el: document.querySelector("#orthographic"),
 	width: window.innerWidth/2,
 	height: window.innerHeight,
+	zoom: 0,
 })
 
 var placing = false
-var points = []
+var points = [], mx_points = []
 var ctx = map.draw.ctx
 var last_point
 
@@ -119,6 +122,7 @@ function polyline (time) {
   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){
@@ -131,24 +135,80 @@ function polyline (time) {
     }
   }
 }
-document.addEventListener('DOMContentLoaded', build_circle)
+
+function add_mx_polyline (points) {
+  mx_points.forEach(function(mx){ scene.remove(mx) })
+  for (var i = 1; i < points.length; i++) {
+    var head = points[i-1]
+    var tail = points[i % (points.length-1)]
+    add_mx_polyline_face(head, tail)
+  }
+}
+function add_mx_polyline_face(head, tail){
+  var mx = new MX.Object3D()
+  var mid_x = (head.a + tail.a)
+  var mid_z = (head.b + tail.b)
+  var len = head.distanceTo( tail )
+  var angle = atan2( head.b - tail.b, head.a - tail.a )
+  mx.move({
+    x: mid_x / 2,
+    y: 25 + 1,
+    z: mid_z / 2,
+    width: ceil(len),
+    height: 50,
+    rotationY: angle
+  })
+  var hue = abs(round( angle / PI * 90 + 300))
+  console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')')
+  mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+  scene.add(mx)
+}
+
+
 function add_mx_point (p, i) {
 	var mx = new MX.Object3D()
 	mx.updateChildren = false
 	mx.move({
 		x: p.a,
-		y: i/4,
+		y: 11,
 		z: p.b,
-		width: 1,
-		height: i/2,
+		width: 20,
+		height: 20,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
 	scene.add(mx)
-	mx.update()
+	return mx
+}
+function mx_grid () {
+  var space = 20, cells = 20, side = space*cells
+  var ctx, canvas = document.createElement("canvas")
+  canvas.width = canvas.height = side + 4
+  ctx = canvas.getContext('2d')
+
+  draw_grid(ctx, 20, 20)
+
+  var mx = new MX.Object3D(canvas)
+  mx.rotationX = PI/2
+  scene.add(mx)
+}
+function draw_grid (ctx, cells, space) {  
+  var side = space * cells
+  ctx.strokeStyle = "#444"
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.translate(1,1)
+  for (var i = 0; i <= cells; i++) {
+    ctx.moveTo(i*space, 0)
+    ctx.lineTo(i*space, side)
+    ctx.moveTo(0, i*space)
+    ctx.lineTo(side, i*space)
+  }
+  ctx.stroke()
 }
 
-function build_circle () {
+document.addEventListener('DOMContentLoaded', build)
+function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.move({
 		"x": 0,
@@ -163,21 +223,17 @@ function build_circle () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-	var theta, rad = 10;
-	for (var i = 0; i < 100; i++) {
-		theta = (i/100 * TWO_PI)
-		add_mx_point({
-			a: sin(theta) * rad,
-			b: cos(theta) * rad,
-		}, i)
-	}
-
+  mx_grid()
+  
 	scene.update()
 
-	controls = new MX.OrbitCamera()
+	controls = new MX.OrbitCamera({
+	  radius: 1000,
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
 	controls.init()
 
-	console.log("ready..perhaps")
 	animate(0)
 }
 function animate(time){
@@ -190,10 +246,19 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
+  map.draw.ctx.save()
+  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
+  draw_grid(map.draw.ctx, 20, 20)
+  map.draw.ctx.restore()
+
 	map.draw.coords()
+
+  polyline()
+
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
 	map.draw.mouse(map.ui.mouse.cursor)
 	map.draw.camera(scene.camera)
-  polyline()
 
 	map.draw.ctx.restore()
 }
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'public/assets/javascripts/mx/extensions')

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


From 24543d0839ad51b2afa7195b16d29bc52b3f1a1b Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 13:15:19 -0400
Subject: remove sculpture

---
 .../javascripts/mx/extensions/mx.movements.js      |  5 +++-
 .../rectangles/engine/sculpture/types/_object.js   | 12 +++++++++
 .../javascripts/ui/editor/SculptureEditor.js       | 31 +++++++++++++++++++++-
 public/assets/stylesheets/app.css                  |  3 +++
 views/controls/editor/sculpture.ejs                | 10 +++----
 5 files changed, 54 insertions(+), 7 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index bc71fc4..931caac 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -162,7 +162,10 @@ MX.Movements = function (cam) {
 				
 				case 8: // backspace
 				  e.preventDefault()
-          if (app.controller.mediaEditor.scenery) {
+          if (app.controller.sculptureEditor.sculpture) {
+            app.controller.sculptureEditor.sculpture.remove()
+          }
+          else if (app.controller.mediaEditor.scenery) {
             app.controller.mediaEditor.scenery.remove()
           }
           else if (app.controller.textEditor.scenery) {
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 6c93b41..48fd96a 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -43,6 +43,18 @@ Sculpture.types.base = Fiber.extend(function(base){
 			this.move.unbind()
 		},
 		
+		setOutline: function(val){
+		  this.outline = val
+		  // show/hide outline
+		},
+		setOutlineColor: function(val){
+		  this.outlineColor = val
+		  // set outline color
+		},
+		setBillboard: function(val){
+		  this.billboard = val
+		},
+		
 		remove: function(){
 		  if (this.removed) return
 		  this.removed = true
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
index cce000e..ab0ccd2 100644
--- a/public/assets/javascripts/ui/editor/SculptureEditor.js
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -10,12 +10,15 @@ var SculptureEditor = FormView.extend({
 		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
+		"change [name=billboard]": "setBillboard",
+		"change [name=outline]": "setOutline",
+		"change [name=outlineColor]": "setOutlineColor",
 		"change [name=loop]": "setLoop",
 		"change [name=mute]": "setMute",
 		"change [name=width]": 'changeWidth',
 		"change [name=height]": 'changeHeight',
 		"change [name=units]": 'changeUnits',
-		"click [data-role=destroy-media]": "destroy",
+		"click [data-role=destroy-sculpture]": "destroy",
 	},
 	
 	initialize: function(opt){
@@ -25,6 +28,10 @@ var SculptureEditor = FormView.extend({
 		this.$name = this.$("[name=name]")
 		this.$description = this.$("[name=description]")
 
+		this.$billboard = this.$("[name=billboard]")
+		this.$outline = this.$("[name=outline]")
+		this.$outlineColor = this.$("[name=outlineColor]")
+
 		// image fields
 		this.$width = this.$("[name=width]")
 		this.$height = this.$("[name=height]")
@@ -71,6 +78,11 @@ var SculptureEditor = FormView.extend({
 		this.$description.val(media.description)
 		this.setDimensions()
 		this.$units.val( "ft" )
+
+		this.$outline.prop( 'checked', !! media.outline )
+		this.$outlineColor.val( media.outlineColor )
+		this.$billboard.prop( 'checked', !! media.billboard )
+
 		
 		switch (media.type) {
 			case "image":
@@ -138,6 +150,23 @@ var SculptureEditor = FormView.extend({
 		this.tainted = true
 	},
 
+
+	setBillboard: function(){
+		var checked = this.$billboard.prop('checked')
+		this.sculpture.setBillboard(checked)
+		this.tainted = true
+	},
+	setOutline: function(){
+		var checked = this.$outline.prop('checked')
+		this.sculpture.setOutline(checked)
+		this.tainted = true
+	},
+	setOutlineColor: function(){
+		var color = this.$outlineColor.val()
+		this.sculpture.setOutlineColor(color)
+		this.tainted = true
+	},
+
 	setDimensions: function(){
 	  if (! this.sculpture) return
 		this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" )
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b23b50b..6e97500 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -2455,6 +2455,9 @@ input[type="range"]::-webkit-slider-thumb {
 #mediaEditor .setting.number [type=text] {
 	width: 140px;
 }
+#sculptureEditor .setting.number input[type=text] {
+  width: 130px;
+}
 
 .playButton,.muteButton {
 	border-radius: 50%;
diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs
index 21e5039..4b8535a 100644
--- a/views/controls/editor/sculpture.ejs
+++ b/views/controls/editor/sculpture.ejs
@@ -13,14 +13,14 @@
 	</div>
 	
 	<div class="setting">
-	  <input type="checkbox" name="outline" value="1" id="sculpture_outline">
-	  <label for="sculpture_outline">Show outline?</label>
-	  <input type="color" name="color" value="#000000">
+	  <input type="checkbox" name="outline" value="1" id="sculpture-outline">
+	  <label for="sculpture-outline">Show outline?</label>
+	  <input type="color" name="outlineColor" value="#000000">
 	</div>
 
   <div class="setting">
-	  <input type="checkbox" name="billboard" value="1" id="sculpture_billboard">
-	  <label for="sculpture_billboard">Billboard?</label>
+	  <input type="checkbox" name="billboard" value="1" id="sculpture-billboard">
+	  <label for="sculpture-billboard">Billboard?</label>
   </div>
 
 	<div class="setting number">
-- 
cgit v1.2.3-70-g09d2


From ede940e7449efc100191060b0b2e0351921681b5 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 23 Apr 2015 17:14:30 -0400
Subject: disable arrows

---
 public/assets/javascripts/mx/extensions/mx.movements.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 931caac..cf00adb 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
-- 
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/javascripts/mx/extensions')

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 94ba321f96638906e41eda7abf371066011c8508 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 29 Apr 2015 18:46:21 -0400
Subject: misc edits

---
 public/assets/javascripts/mx/extensions/mx.movements.js |  2 +-
 public/assets/javascripts/mx/primitives/mx.video.js     |  3 +++
 public/assets/javascripts/mx/primitives/mx.vimeo.js     | 16 ++++++++++++----
 public/assets/javascripts/mx/primitives/mx.youtube.js   |  3 +++
 .../javascripts/rectangles/engine/scenery/_scenery.js   | 17 +++++++++++++++--
 .../javascripts/rectangles/engine/scenery/sound.js      |  2 +-
 .../rectangles/engine/scenery/types/video.js            |  7 ++++++-
 public/assets/javascripts/ui/reader/ReaderView.js       |  2 ++
 8 files changed, 43 insertions(+), 9 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 931caac..fa59908 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -20,7 +20,7 @@ MX.Movements = function (cam) {
 			rotationX_max = PI/6
 
 	var v = 12,
-			vr = Math.PI * 0.012,
+			vr = Math.PI * 0.018,
 			jumpV = 23,
 			vx = vy = vz = 0,
 			creepFactor = 0.3
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index 43c392a..53ccf2e 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -21,6 +21,7 @@ MX.Video = MX.Object3D.extend({
 		this.el.classList.add("video")
 		this.el.classList.add("mx-scenery")
   	this.paused = !! this.media.autoplay
+  	this.playing = false
 		this.muted = app.muted || !! this.media.mute
   },
 
@@ -60,11 +61,13 @@ MX.Video = MX.Object3D.extend({
   
   play: function(){
   	this.paused = false
+  	this.playing = true
   	this.player.play()
   },
   
   pause: function(){
   	this.paused = true
+  	this.playing = false
   	this.player.pause()
   },
   
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index e1a3b84..af138ae 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -20,6 +20,7 @@ MX.Vimeo = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
 		this.el.classList.add("mx-scenery")
+    this.playing = false
   	this.paused = !! this.media.autoplay
 		this.muted = app.muted || !! this.media.mute
 		this.started = false
@@ -145,19 +146,26 @@ MX.Vimeo = MX.Object3D.extend({
   	if (this.paused) {
   		this.pause()
   	}
+  	else {
+      this.playing = true
+    }
   },
   
   onPause: function(){
   	if (! this.paused) {
   		this.play()
   	}
+  	else {
+      this.playing = false
+  	}
   },
   
   finished: function(){
-//   	if (this.media.loop) {
-//   		this.seek(0)
-//   		this.play()
-//   	}
+    console.log("vimeo finished")
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
 //   	else if (this.bound) {
   	if (! this.media.loop && this.bound) {
   		$(".playButton").removeClass('playing')
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index e4e73d6..8cd9f59 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -21,6 +21,7 @@ MX.Youtube = MX.Object3D.extend({
 		this.el.classList.add("video")
 		this.el.classList.add("mx-scenery")
   	this.paused = !! this.media.autoplay
+  	this.playing = false
 		this.muted = app.muted || !! this.media.mute
   },
 
@@ -143,11 +144,13 @@ MX.Youtube = MX.Object3D.extend({
   
   play: function(){
 		this.paused = false
+  	this.playing = true
   	this.player.playVideo()
   },
   
   pause: function(){
 		this.paused = true
+  	this.playing = false
 		this.player.pauseVideo()
   },
   
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index e9be663..6203c20 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -121,7 +121,10 @@ var Scenery = new function(){
 	}
 	base.playAll = function(){
 	  base.forEach(function(scenery){
-	    if (scenery.type == "video") scenery.play()
+	    if (scenery.type == "video") {
+	      scenery.unmute()
+	      scenery.play()
+	    }
 	  })
 	}
 	base.pauseAll = function(){
@@ -129,7 +132,17 @@ var Scenery = new function(){
 	    if (scenery.type == "video") scenery.pause()
 	  })
 	}
-
+	base.muteAll = function(){
+	  base.forEach(function(scenery){
+	    if (scenery.type == "video") scenery.mx.mute()
+	  })
+	}
+	base.unmuteAll = function(){
+	  base.forEach(function(scenery){
+	    if (scenery.type == "video") scenery.mx.unmute()
+	  })
+	}
+	
 	return base
 }
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js
index 37bdee0..d63d8c4 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/sound.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js
@@ -5,7 +5,7 @@ Scenery.sound.init = function(){
   app.tube.on("move", Scenery.sound.move)
 }
 Scenery.sound.move = function(){
-  var vals = Scenery.map(function(scenery){
+  Scenery.forEach(function(scenery){
     if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) {
       var distance = dist(cam.x, cam.z, 
                           scenery.mx.x, scenery.mx.z)
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index fb1a868..163e19e 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -38,7 +38,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 				backface: false,
 			})
 			scene.add(this.mx)
-			this.mx.load()
+			
+      this.mx.load()
 		},
 		
 		play: function(){
@@ -90,6 +91,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 			}
 		},
 
+		unmute: function(){
+      this.mx.unmute()
+		},
+		
 		setVolume: function(n){
 			this.mx.setVolume(n)
 		},
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 55d2520..1ba97cf 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -94,6 +94,8 @@ var ReaderView = View.extend({
 		
 		// disable until we start using spinning again
 		// this.listen()
+
+    app.tube("site-ready")
 	},
 	
 	listen: function(){
-- 
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/javascripts/mx/extensions')

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 46980b02b80ea94a9df57dc304d204e6feec0476 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 18 Aug 2015 16:35:04 -0400
Subject: resizing stuff and orbitcamera fix

---
 .../javascripts/mx/extensions/mx.orbitCamera.js    |  4 ++--
 .../javascripts/ui/blueprint/BlueprintEditor.js    | 26 ++++++++++++++--------
 .../javascripts/ui/blueprint/BlueprintToolbar.js   |  8 +++----
 .../javascripts/ui/blueprint/BlueprintView.js      |  3 ++-
 4 files changed, 25 insertions(+), 16 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index f4759fb..a936cef 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -88,8 +88,8 @@ MX.OrbitCamera = function(opt){
 	    radius = opt.radius
 	  }
 		opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry)
-		opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry)
-		opt.camera.y = opt.center.z + radius * cos(rx)
+		opt.camera.y = opt.center.y + radius * cos(rx)
+		opt.camera.z = opt.center.z + radius * sin(rx) * sin(ry)
  		opt.camera.rotationX = PI/2 - rx
  		opt.camera.rotationY = ry + PI/2
 	}
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index cc469b6..72c129a 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -8,14 +8,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
   initialize: function(opt){
     this.parent = opt.parent
 
-/*
-    $(window).resize(function(){
-      scene.width = window.innerWidth/2
-      scene.height = window.innerHeight
-      map.canvas.width = map.dimensions.a = window.innerWidth/2
-      map.canvas.height = map.dimensions.b = window.innerHeight/2
-    })
-*/
+    $(window).resize(this.resize.bind(this))
 
     scene = new MX.Scene().addTo("#perspective")
     scene.camera.radius = 20
@@ -48,7 +41,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
       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
+      controls.opt.center.z = z
     }, true)
 
     scene.update()
@@ -63,6 +56,21 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
     controls.init()
   },
   
+  resize: function(){
+    if (this.parent.orbiting) {
+      scene.width = window.innerWidth/2
+      scene.height = window.innerHeight
+      this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2
+      this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight
+      this.parent.map.canvas.style.display = "block"
+    }
+    else {
+      scene.width = window.innerWidth
+      scene.height = window.innerHeight
+      this.parent.map.canvas.style.display = "none"
+    }
+  },
+  
   loadFloorplan: function(media){
     // console.log(media)
     this.floorplan.load({
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
index a21a0ef..5f313fd 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
@@ -29,11 +29,11 @@ var BlueprintToolbar = View.extend({
     this.parent.uploader.show()
   },
   
-  orbiting: true,
   toggleOrbitMode: function(){
-    this.orbiting = ! this.orbiting
-    this.$toggleOrbitMode.toggleClass("inuse", ! this.orbiting)
-    if (this.orbiting) {
+    this.parent.orbiting = ! this.parent.orbiting
+    this.$toggleOrbitMode.toggleClass("inuse", ! this.parent.orbiting)
+    this.parent.editor.resize()
+    if (this.parent.orbiting) {
       controls.toggle(true)
       movements.lock()
     }
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 4cb9138..e84fc30 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -30,7 +30,8 @@ var BlueprintView = View.extend({
 		
 		$.get(this.action + name, this.ready.bind(this))
 	},
-	
+
+  orbiting: true,
 	buildMap: function(){
 	  // i forget if this has to be global
     map = new Map ({
-- 
cgit v1.2.3-70-g09d2


From e350f13c3772d0f1f4053ce3c1a1dbc43713e4d0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 26 Aug 2015 14:32:59 -0400
Subject: map stuff for shapes mode

---
 public/assets/javascripts/mx/extensions/mx.movements.js        |  2 +-
 public/assets/javascripts/rectangles/engine/map/draw.js        |  8 +++++++-
 public/assets/javascripts/rectangles/engine/shapes/polyline.js | 10 +++++-----
 .../assets/javascripts/rectangles/engine/shapes/shapelist.js   |  5 +++++
 public/assets/javascripts/ui/blueprint/BlueprintEditor.js      |  4 +---
 5 files changed, 19 insertions(+), 10 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 9ed8790..cecba7a 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -155,7 +155,7 @@ MX.Movements = function (cam) {
 						app.controller.presets.hide()
 						$(".inuse").removeClass("inuse")
 					}
-					else {
+					else if (! Rooms.shapesMode) {
 						app.controller.toolbar.toggleMap()
 					}
 					break
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index c97603b..8498a46 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -22,7 +22,13 @@ Map.Draw = function(map, opt){
 			ctx.scale( -1, 1 )
 
 			draw.coords()
-			draw.regions(Rooms.regions, [ "#fff" ], "#000")
+			if (Rooms.shapesMode) {
+        shapes.draw(draw.ctx, "#fff", null)
+        shapes.draw(draw.ctx, null, "#000")
+			}
+			else {
+        draw.regions(Rooms.regions, [ "#fff" ], "#000")
+			}
 			draw.camera(scene.camera)
 		}
 		else {
diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
index 54e11c6..fc6cad7 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
@@ -95,7 +95,7 @@ var Polyline = Fiber.extend(function(base){
       tail: closest_i,
     }
 	}
-  exports.draw = function(ctx){
+  exports.draw = function(ctx, fillStyle, strokeStyle){
     var points = this.points
     if (! points.length) return
     if (points.length == 1) {
@@ -103,17 +103,17 @@ var Polyline = Fiber.extend(function(base){
       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.fillStyle = fillStyle
+      ctx.strokeStyle = strokeStyle
       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()
+      strokeStyle && ctx.stroke()
       if (! map.ui.placing || this.closed) {
-        ctx.fill()
+        fillStyle && ctx.fill()
       }
     }
   }
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
index 9cbf165..75ecae6 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -76,6 +76,11 @@ var ShapeList = Fiber.extend(function(base){
     })
     return segments
   }
+  exports.draw = function(ctx, fillStyle, strokeStyle) {
+    this.shapes.forEach(function(shape){
+      shape.draw(ctx, fillStyle, strokeStyle)
+    })
+  }
   exports.serialize = function(){
     return this.shapes.map(function(shape){
       return shape.serialize()
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index 4b80b2c..0f35ac5 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -106,9 +106,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
       }
     }
 
-    shapes.forEach(function(shape){
-      shape.draw(map.draw.ctx)
-    })
+    shapes.draw(map.draw.ctx, "rgba(255,255,0,0.1)", "#f80")
 
     map.draw.ctx.strokeStyle = "#f00";
     map.draw.x_at(0,0)
-- 
cgit v1.2.3-70-g09d2


From f2b0b712d4a73bfaeb1ed21674b0843f0d6fa28a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 27 Aug 2015 12:52:02 -0400
Subject: toggle map with esc

---
 public/assets/javascripts/mx/extensions/mx.movements.js     |  5 ++++-
 public/assets/javascripts/rectangles/engine/rooms/_rooms.js |  4 +++-
 public/assets/javascripts/ui/blueprint/BlueprintToolbar.js  | 13 +++++++++----
 public/assets/javascripts/ui/blueprint/BlueprintView.js     |  1 +
 4 files changed, 17 insertions(+), 6 deletions(-)

(limited to 'public/assets/javascripts/mx/extensions')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index cecba7a..3e34c1b 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -155,7 +155,10 @@ MX.Movements = function (cam) {
 						app.controller.presets.hide()
 						$(".inuse").removeClass("inuse")
 					}
-					else if (! Rooms.shapesMode) {
+					else if (Rooms.shapesMode) {
+					  // don't show map in editor for now..
+					}
+					else {
 						app.controller.toolbar.toggleMap()
 					}
 					break
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 5c9945c..9aff33f 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -134,10 +134,12 @@
       window.wallHeight = data.wallHeight || app.defaults.wallHeight
       $(".units").val( data.units )
 
+      Rooms.builder.clear()
+
       shapes.deserialize( data.shapes )
       // shapes.build()
       var regions = RegionList.build()
-
+      
       regions.forEach(function(region){
         var room = new Room({
           rect: region,
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
index 8b0a08f..458357d 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
@@ -24,6 +24,10 @@ var BlueprintToolbar = View.extend({
     this.$eraserMode = this.$('[data-role=eraser-mode]')
     this.$startPositionMode = this.$('[data-role=start-position-mode]')
     
+    keys.on('escape', function(){
+      app.controller.toolbar.toggleOrbitMode()
+    })
+    
     this.arrowMode()
   },
   
@@ -44,11 +48,12 @@ var BlueprintToolbar = View.extend({
       controls.toggle(false)
       movements.unlock()
       movements.gravity(true)
-      cam.rotationX = 0
-      cam.rotationY = -cam.rotationY
-      cam.x = this.parent.startPosition.x
+      var pos = this.parent.quantizeStartPosition()
+      cam.rotationX = pos.rotationX
+      cam.rotationY = pos.rotationY
+      cam.x = pos.x
       cam.y = viewHeight
-      cam.z = this.parent.startPosition.z
+      cam.z = pos.z
     }
   },
   
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 19b9e84..e249c91 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -18,6 +18,7 @@ var BlueprintView = View.extend({
 		this.info = new BlueprintInfo ({ parent: this })
 		this.settings = new BlueprintSettings ({ parent: this })
 		this.notice = new BlueprintNotice ({ parent: this })
+		Rooms.shapesMode = true
 	},
 
 	load: function(name){
-- 
cgit v1.2.3-70-g09d2