From 32f5f24b8b09998a03c88f786507ba4d58397fc7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 13 Oct 2014 18:16:35 -0400
Subject: toggling map

---
 public/assets/javascripts/rectangles/engine/map/_map.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 99ede82..3a47dab 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -66,8 +66,8 @@ var Map = function(opt){
 		canvas.height = base.dimensions.b = window.innerHeight
 	}
 		
-	base.toggle = function(){
-		$(base.el).toggle()
+	base.toggle = function(state){
+		$(base.el).toggle(state)
 	}
 
 }
-- 
cgit v1.2.3-70-g09d2


From a7fe78b6059e3568d38876ba68e650b841912125 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 00:48:22 -0400
Subject: unfocus ui on esc

---
 public/assets/javascripts/rectangles/engine/map/_map.js      |  2 +-
 public/assets/javascripts/rectangles/engine/map/ui_editor.js | 12 ++++++++++--
 public/assets/javascripts/ui/editor/EditorToolbar.js         |  3 ++-
 3 files changed, 13 insertions(+), 4 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 3a47dab..64372c5 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -67,7 +67,7 @@ var Map = function(opt){
 	}
 		
 	base.toggle = function(state){
-		$(base.el).toggle(state)
+		return $(base.el).toggle(state).is(':visible')
 	}
 
 }
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 44e416d..9d69990 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -26,6 +26,13 @@ Map.UI.Editor = function(map){
 		resize: true,
 		destroy: false,
 	})
+
+	base.blur = function(){
+		Rooms.forEach(function(r){
+			return r.focused = false
+		})
+		app.tube("builder-pick-nothing")
+	}
 	
 	//
 	
@@ -190,7 +197,7 @@ Map.UI.Editor = function(map){
       })
       Rooms.rebuild()
     }
-		
+
 		var intersects = Rooms.filter(function(r){
 			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
@@ -207,7 +214,7 @@ Map.UI.Editor = function(map){
 		var cursor = base.mouse.cursor
 
 		var intersects = Rooms.filter(function(r){
-			return r.focused = r.rect.contains(cursor.x.a, cursor.y.a)
+			return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
 		
 		if (intersects.length) {
@@ -234,4 +241,5 @@ Map.UI.Editor = function(map){
 	
 	function rightclick (e){
 	}
+
 }
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 9c2f3d3..a460bbf 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -35,7 +35,8 @@ var EditorToolbar = View.extend({
 //       this.resetControls()
 // 		}
 //     $("[data-role='toggle-map-view']").toggleClass("inuse", state)
-		map.toggle(state)
+		var state = map.toggle(state)
+		if (state) { map.ui.blur() }
 		$("#minimap").toggleClass("hide", state)
 		this.parent.info.toggle(state)
 	},
-- 
cgit v1.2.3-70-g09d2


From fc00dfa28faddff26778f2580d263526ca3b335e Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 10 Nov 2014 18:00:40 -0500
Subject: show/hide minimap as appropriate

---
 public/assets/javascripts/mx/extensions/mx.movements.js             | 6 +++++-
 public/assets/javascripts/rectangles/engine/map/_map.js             | 1 +
 .../assets/javascripts/rectangles/engine/scenery/types/_object.js   | 1 -
 public/assets/javascripts/ui/editor/MediaEditor.js                  | 2 +-
 public/assets/javascripts/ui/reader/MediaPlayer.js                  | 3 ++-
 public/assets/javascripts/ui/reader/ReaderView.js                   | 6 ++++--
 6 files changed, 13 insertions(+), 6 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 82db40d..9af2c8d 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -33,7 +33,11 @@ MX.Movements = function (cam) {
 	
 	var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 }
 
-  $(document).one("keydown", function(){ $("#keyhint").fadeOut(250); $('.reader #minimap').addClass('active'); })
+  $(document).one("keydown", function(){
+    $("#keyhint").fadeOut(250);
+    $('.reader #minimap').addClass('active');
+  })
+
 	function clampRotation( vr ) {
 		if (Rooms.mover.noclip) {
 			return clamp(vr, PI/-2, PI/2 )
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 64372c5..202803a 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -15,6 +15,7 @@ var Map = function(opt){
 	
 	var base = this
 	base.el = opt.el
+	base.$el = $(base.el)
 	
 	if (! base.el) return
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index c3fd6f3..51d1b88 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -29,7 +29,6 @@ Scenery.types.base = Fiber.extend(function(base){
 		},
 		
 		place: function(opt){
-		  console.log(opt)
 			if (opt.data) {
         if (opt.wall) {
         	var position = opt.wall.mxToPosition(opt.data.position)
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index db5878f..de93f6e 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -65,7 +65,7 @@ var MediaEditor = FormView.extend({
 		
 		var media = scenery.media
 		
-		console.log(media)
+		// console.log(media)
 		
 		this.$name.val(media.title || filenameFromUrl(media.url) )
 		this.$description.val(media.description)
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
index e40c6ff..42e7596 100644
--- a/public/assets/javascripts/ui/reader/MediaPlayer.js
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -46,7 +46,7 @@ var MediaPlayer = FormView.extend({
 		if (media.type == "image") {
 			if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) {
 				this.hide()
-				return
+				return false
 			}
 		}
 
@@ -78,6 +78,7 @@ var MediaPlayer = FormView.extend({
 
 				break
 		}
+		return true
 	},
 	
 	hide: function(scenery){
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index aea681a..617a145 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -58,7 +58,7 @@ var ReaderView = View.extend({
 		  return
 		}
 		
-		// don't build anything until we're in landscape mode, otherwise ios might crash
+		// don't build anything until we're in landscape mode, otherwise ios might crash!!
 		var orientationFn = orientationchange.bind(this)
     window.addEventListener('orientationchange', orientationFn)
     function orientationchange (e) {
@@ -119,7 +119,8 @@ var ReaderView = View.extend({
 	},
 
 	pick: function(scenery){
-		this.mediaPlayer.pick(scenery)
+		var has_info = this.mediaPlayer.pick(scenery)
+    $("#minimap").toggleClass('active', ! has_info)
     app.tube("pick-scenery", { scenery: scenery })
 	},
 
@@ -128,6 +129,7 @@ var ReaderView = View.extend({
 	},
 
 	hideExtras: function(){
+		$("#minimap").addClass('active')
 		this.mediaPlayer.hide()
     app.tube("close-scenery")
 	}
-- 
cgit v1.2.3-70-g09d2


From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 3 Feb 2015 17:41:36 -0500
Subject: orthographic polyline

---
 .../javascripts/rectangles/engine/map/_map.js      |   8 +
 .../javascripts/rectangles/engine/map/draw.js      |  19 +-
 .../assets/javascripts/rectangles/models/vec2.js   |   5 +
 public/assets/test/ortho.html                      | 224 +++++++++++++++++++++
 4 files changed, 251 insertions(+), 5 deletions(-)
 create mode 100644 public/assets/test/ortho.html

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 202803a..d582982 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -48,6 +48,13 @@ var Map = function(opt){
 	base.el.appendChild(canvas)
 	
 	switch (opt.type) {
+		case "ortho":
+			base.draw = new Map.Draw (base, { ortho: true })
+			base.ui = new Map.UI.Ortho (base)
+			base.sides = base.sides_for_camera
+			$(window).resize(base.resize)
+			break
+		
 		case "editor":
 			base.draw = new Map.Draw (base)
 			base.ui = new Map.UI.Editor (base)
@@ -65,6 +72,7 @@ var Map = function(opt){
 	base.resize = function(){
 		canvas.width = base.dimensions.a = window.innerWidth
 		canvas.height = base.dimensions.b = window.innerHeight
+		// resize here - esp if 2d-hires
 	}
 		
 	base.toggle = function(state){
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 5a9b592..b525696 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -5,14 +5,16 @@ Map.Draw = function(map, opt){
 
 	var draw = this
 	
-	var ctx = map.canvas.getContext("2d")
+	var ctx = draw.ctx = map.canvas.getContext("2d")
 
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
 		draw.fill("rgba(255,255,255,0.98)")
 
-		if (opt.minimap) {
+		if (opt.ortho) {
+		}
+		else if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 			ctx.scale( map.zoom, map.zoom )
 			ctx.translate( opt.center.x, - opt.center.z )
@@ -22,7 +24,6 @@ Map.Draw = function(map, opt){
 			draw.regions(Rooms.regions, [ "#fff" ], "#000")
 			draw.camera(scene.camera)
 		}
-		
 		else {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 			ctx.scale( map.zoom, map.zoom )
@@ -31,12 +32,19 @@ Map.Draw = function(map, opt){
 
 			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
 			draw.mouse(map.ui.mouse.cursor)
+			draw.mouse_dimensions(map.ui.mouse.cursor)
 			draw.coords()
 			scene && draw.camera(scene.camera)
 		}
 
 		ctx.restore()
 	}
+	draw.translate = function(){
+		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+		ctx.scale( map.zoom, map.zoom )
+		ctx.translate( map.center.a, map.center.b )
+		ctx.scale( -1, 1 )
+	}
 
   // changes the ctx temporarily
 	draw.render = function(){
@@ -87,7 +95,7 @@ Map.Draw = function(map, opt){
 		ctx.putImageData(pixelData, 0, 0)
 
 		// reset the ctx
-		ctx = map.canvas.getContext("2d")
+		ctx = draw.ctx
 
 		return canvas
 	}
@@ -123,7 +131,8 @@ Map.Draw = function(map, opt){
 		ctx.beginPath();
 		ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false);
 		ctx.fill();
-
+	}
+	draw.mouse_dimensions = function(mouse){
 		if (mouse.width() != 0 && mouse.height() != 0) {
 			if (map.ui.dragging) {
 				stroke_rect(mouse)
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index 14d0e6b..290e45e 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -80,6 +80,11 @@
 	  this.a = Math.round(this.a)
 	  this.b = Math.round(this.b)
 	}
+	vec2.prototype.distanceTo = function(v){
+		var va = (this.a - v.a)
+		var vb = (this.b - v.b)
+		return Math.sqrt( va*va + vb*vb )
+	}
 	vec2.prototype.setPosition = function(n){
 		var len = this.length()
 		this.a = n
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
new file mode 100644
index 0000000..8626453
--- /dev/null
+++ b/public/assets/test/ortho.html
@@ -0,0 +1,224 @@
+<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
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.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/draw.js"></script>
+
+<script>
+
+// var w = canvas.width = window.innerWidth/2
+// var h = canvas.height = window.innerHeight
+
+// var ctx = canvas.getContext('2d')
+var scene = new MX.Scene()
+
+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)
+			// compare to initial point
+			var p = new vec2( cursor.x.a, cursor.y.a )
+			console.log(p+"")
+			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.length = 0
+				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)
+// 			var p = new vec2( cursor.x.a, cursor.y.a )
+// 			if (placing && points.length > 2 && points[0].distanceTo(p) < 3 ) {
+// 				document.body.style.cursor = "pointer"
+// 			}
+// 			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)
+		}
+	})
+
+}
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+})
+
+scene.camera.move({
+	"x": 0,
+	"y": 0,
+	"z": 0,
+	"rotationX": 0, // PI/2,
+	"rotationY": PI/2, // PI
+})
+scene.camera.radius = 20
+
+var placing = false
+var points = []
+var ctx = map.draw.ctx
+
+function draw (time) {
+  if (points.length == 1) {
+    ctx.fillStyle = "#000"
+    ctx.fillRect(points[0].a, points[0].b, 10, 10)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#000"
+    ctx.strokeStyle = "#000"
+    ctx.beginPath()
+    ctx.moveTo(points[0].a, points[0].b)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.a, point.b)
+    })
+    if (placing) {
+      ctx.stroke()
+    }
+    else {
+      ctx.fill()
+    }
+  }
+}
+
+
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+	map.draw.coords()
+	map.draw.mouse(map.ui.mouse.cursor)
+  draw(time)
+
+	map.draw.ctx.restore()
+}
+animate()
+
+
+/*
+var mymouse = new mouse({
+  el: canvas,
+  down: function(e, cursor){
+    // compare to initial point
+    var p = new vec2( -cursor.x.a, cursor.y.a )
+    console.log(p+"")
+    if (placing) {
+      if (points.length > 2 && points[0].distanceTo( p ) < 3) {
+        points.push( points[0].clone() )
+        placing = false
+      }
+      else {
+        points.push( p )
+      }
+    }
+    else {
+      placing = true
+      points.length = 0
+      points.push( p )
+    }
+  },
+  move: function(e, cursor){
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && points.length > 2 && points[0].distanceTo(p) < 3 ) {
+      document.body.style.cursor = "pointer"
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  },
+  drag: function(e, cursor){
+  },
+  up: function(e, cursor, new_cursor){
+  },
+})
+
+function draw (time) {
+  ctx.fillStyle = "#fff"
+  ctx.fillRect(0,0,w,h)
+
+  if (points.length == 1) {
+    ctx.fillStyle = "#000"
+    ctx.fillRect(points[0].a, points[0].b, 1, 1)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#000"
+    ctx.strokeStyle = "#000"
+    ctx.beginPath()
+    ctx.moveTo(points[0].x, points[0].y)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.x, point.y)
+    })
+    if (placing) {
+      ctx.stroke()
+    }
+    else {
+      ctx.fill()
+    }
+  }
+}
+*/
+
+
+</script>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From dea857bcfb9695a1e205b7cf224388660c2735af Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 30 Apr 2015 12:24:39 -0400
Subject: minimap can pivot with camera orientation

---
 public/assets/javascripts/rectangles/engine/map/_map.js | 2 +-
 public/assets/javascripts/rectangles/engine/map/draw.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index d582982..bf646bb 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -16,6 +16,7 @@ var Map = function(opt){
 	var base = this
 	base.el = opt.el
 	base.$el = $(base.el)
+	base.opt = opt
 	
 	if (! base.el) return
 	
@@ -33,7 +34,6 @@ var Map = function(opt){
 										 scene.camera.x + sides.a, scene.camera.z + sides.b )
 	}
 
-
 	base.set_zoom = function (n) {
 		n = clamp(n, opt.zoom_min, opt.zoom_max)
 		base.zoom_exponent = n
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 24f7cf3..11ba3f8 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -17,6 +17,7 @@ Map.Draw = function(map, opt){
 		else if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 			ctx.scale( map.zoom, map.zoom )
+      if (map.opt.pivot) { ctx.rotate(scene.camera.rotationY + PI) }
 			ctx.translate( opt.center.x, - opt.center.z )
 			ctx.scale( -1, 1 )
 
-- 
cgit v1.2.3-70-g09d2


From e61e94f5d2f570f0cba3a3f7d91a18d8db524d79 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 10 Aug 2015 20:42:19 -0400
Subject: blueprint upload stuff

---
 .../javascripts/rectangles/engine/map/_map.js      |   2 +-
 .../javascripts/ui/builder/BlueprintUpload.js      | 120 +++++++++++++++++++++
 public/assets/stylesheets/app.css                  |   3 +-
 public/assets/test/ortho4.html                     |  43 +++++++-
 4 files changed, 162 insertions(+), 6 deletions(-)
 create mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index bf646bb..e3d7621 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -44,7 +44,7 @@ var Map = function(opt){
 	var canvas = base.canvas = document.createElement("canvas")
 	canvas.width = base.dimensions.a
 	canvas.height = base.dimensions.b
-	
+
 	base.el.appendChild(canvas)
 	
 	switch (opt.type) {
diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js
new file mode 100644
index 0000000..dbc6f12
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BlueprintUpload.js
@@ -0,0 +1,120 @@
+
+var BlueprintUpload = UploadView.extend({
+	el: ".blueprintUpload",
+	
+	mediaTag: "blueprint",
+	createAction: "/api/media/new",
+	uploadAction: "/api/media/upload",
+	listAction: "/api/media/user",
+	destroyAction: "/api/media/destroy",
+
+	events: {
+		"mousedown": 'stopPropagation',
+    "change .url": "enterUrl",
+    "keydown .url": "enterSetUrl",
+    
+    "click .blueprint": "choose",
+    "change [name=blueprint-dimensions]": "changeDimensions",
+    "change [name=blueprint-units]": "changeUnits",
+    "click #saveBlueprint": "save",
+  },
+	
+	initialize: function(opt){
+	  this.parent = opt.parent
+	  this.__super__.initialize.call(this)
+
+    this.$url = this.$(".url")
+
+    this.$blueprintMap = this.$("#blueprintMap")
+    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
+    this.$dimensions = this.$("[name=blueprint-dimensions]")
+    this.$units = this.$("[name=blueprint-units]")
+    this.$save = this.$("#saveBlueprint")
+    
+    this.map = new Map ({ type: ortho })
+    
+    this.load()
+	},
+	
+  loaded: false,
+	load: function(){
+		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
+	},
+
+	populate: function(data){
+		this.loaded = true
+		if (data && data.length) {
+		  data.forEach(this.append.bind(this))
+		  this.$(".txt").hide()
+		}
+		else {
+		  this.$(".txt").show()
+		}
+	},
+	
+	append: function(media){
+	  var $el = $("<div>")
+	  $el.data("id", media._id)
+	  $el.addClass("blueprint")
+	  this.$blueprints.append($el)
+	},
+	
+	pick: function(e){
+	  var $el = $(e.currentTarget)
+	  // load map with it
+	},
+  
+	destroy: function(_id, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
+	
+	show: function(){
+    this.toggle(true)
+	},
+	hide: function(){
+		this.toggle(false)
+	},
+	toggle: function (state) {
+    this.$el.toggleClass("active", state)
+	},
+
+	addUrl: function (url){
+		Parser.loadImage(url, function(media){
+			if (! media) return
+			media._csrf = $("[name=_csrf]").val()
+			media.tag = this.mediaTag
+			
+			var request = $.ajax({
+				type: "post",
+				url: this.createAction,
+				data: media,
+			})
+			request.done(this.add.bind(this))
+			
+		}.bind(this))
+	},
+  enterUrl: function(){
+  	var url = this.$url.sanitize()
+  	this.addUrl(url)
+  	this.$url.val("")
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.enterUrl.bind(this), 100)
+		}
+	},
+	
+	add: function(media){
+	  this.append(media)
+	},
+	changeDimensions: function(){
+	},
+	changeUnits: function(){
+	},
+
+})
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 56c65fe..bb32500 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1597,7 +1597,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; }
 .mediaDrawer.signin, .mediaDrawer.signup,
 .mediaDrawer.alert, .mediaDrawer.confirm,
 .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken,
-.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject {
+.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject,
+.mediaDrawer.blueprintUpload {
     display:table;
 }
 .confirm button {
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
index b434efb..12b6ab2 100644
--- a/public/assets/test/ortho4.html
+++ b/public/assets/test/ortho4.html
@@ -1,15 +1,19 @@
+<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
 <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 {
+#perspective,
+#perspective .mx-scene {
 	position: absolute;
 	left:0%;
-	top:0px
+	top:0px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
 }
+
 #orthographic {
 	position: absolute;
 	left:50%;
@@ -29,6 +33,10 @@ body {
 #url { width: 300px }
 .hud span { color: #888; cursor: pointer; }
 .hud span.active { color: #000; }
+
+#blueprintForm {
+  width: 240px;
+}
 </style>
 
 <div id="perspective"></div>
@@ -47,11 +55,38 @@ body {
   <span class="ion-scissors" data-role="eraser-mode"></span>
 </div>
 
-<div class="mediaDrawer fixed animate blueprintUpload">
+<div class="mediaDrawer fixed animate blueprintUpload active">
 	<span class="close">X</span>
 	<div class="box">
 		
     <h2>Upload A Room Image</h2>
+    
+    <div id="blueprintForm">
+      <div class="wallpaperUpload toolButton">
+        <form>
+          <span class="ion-ios-upload-outline upload-icon"></span>
+          <label>Upload</label>
+          <input type="file" accept="image/*" multiple>
+        </form>
+      </div>
+      <input type="text" class="url" placeholder="Enter an image URL or...">
+    </div>
+    
+    Please tell us the scale of your map.
+    Click both corners of a wall, and then enter how long the wall is.
+    
+    <div id="blueprintMap">
+    </div>
+    
+    <div id="blueprintDimensions">
+      <input type="text" name="blueprint-dimensions">
+      <select id="blueprint-units" name="blueprint-units">
+        <option value="ft">foot</option>
+        <option value="m">meter</option>
+      </select>
+    
+      <button id="saveBlueprint">Save</button>
+    </div>
 
 	</div>
 </div>
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

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


From 48fc9b27a77126da649959c8f74ad8faffcd6e2c Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 25 Aug 2015 11:15:50 -0400
Subject: comment the regionlist algorithm

---
 .../javascripts/rectangles/engine/map/_map.js      |  6 +-
 .../javascripts/rectangles/engine/rooms/builder.js |  1 +
 .../rectangles/engine/shapes/polyline.js           |  4 ++
 .../rectangles/engine/shapes/regionlist.js         | 83 ++++++++++++++++------
 .../rectangles/engine/shapes/shapelist.js          |  2 +
 .../assets/javascripts/rectangles/models/vec2.js   |  4 +-
 .../assets/javascripts/rectangles/models/wall.js   |  5 ++
 .../javascripts/ui/blueprint/BlueprintEditor.js    |  5 +-
 8 files changed, 79 insertions(+), 31 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 2aee962..e27346d 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -69,9 +69,9 @@ var Map = function(opt){
 			break
 	}
 	
-	base.resize = function(){
-		canvas.width = base.dimensions.a = window.innerWidth
-		canvas.height = base.dimensions.b = window.innerHeight
+	base.resize = function(w, h){
+		canvas.width = base.dimensions.a = w || window.innerWidth
+		canvas.height = base.dimensions.b = h || window.innerHeight
 		// resize here - esp if 2d-hires
 	}
 		
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 5e09fab..f78fb91 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -14,6 +14,7 @@
 		PI = Math.PI
 		HALF_PI = PI/2
 		TOP = CEILING, BOTTOM = FLOOR
+		$ = { browser: { mozilla: false } }
 		function sidesToString(sides){
 			var s = ""
 			if (sides & FRONT) s += "front "
diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
index 6c64128..609a2c8 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
@@ -1,3 +1,7 @@
+// A Polyline is a set of points inputted by the user using the V2 editor to trace a blueprint.
+// Additionally, it manages a set of MX objects which correspond to the walls in 3D.
+// In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views.
+
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
 	exports.init = function(){
diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
index 71f19d8..663f3fd 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
@@ -1,36 +1,58 @@
+// This algorithm takes the polylines from ShapeList as input and produces
+// a set of Rooms which can be used by the existing V1 mover and editor.
+
+// The algorithm assumes that
+// 1) all angles are orthogonal
+// 2) all polylines are closed
+
 var RegionList = (function(){
 
   var RegionList = {}
   var regions = RegionList.regions
 
   RegionList.build = function(){
+  
+    // first, get the segments sorted right to left & top to bottom
     var segments = RegionList.getSortedSegments()
 
     var rooms = []
     var seen_rooms = {}
     var open_segments = []
-    var closed_segments = []
     
     var segment, open_segment, x_segment, y_segments, overlapped, seen_segments
 
+    // first pass: generate rooms from the vertical segments only
     for (var i = 0; i < segments.length; i++) {
       segment = segments[i]
       if (! segment.isVertical()) {
         continue
       }
+
+      // check all the "open segments" we know about, i.e. rooms where we've only found
+      // the right wall.
       overlapped = false
       for (var j = 0; j < open_segments.length; j++) {
         open_segment = open_segments[j]
+        
+        // if these two segments overlap each other, then there is a room between them.
         if (segment.y.overlaps(open_segment.y)) {
           overlapped = true
-          closed_segments.push(open_segments[j])
           open_segments.splice(j--, 1)
 
+          // the X part of the room will be the span between these two vertical segments'
+          // X components.  the Y part of the room is the "split" or subdivision between
+          // the two horizontal vectors.
+          
+          // the split function is non-commutative,
+          // so we need to call A split B and B split A,
+          // then dedupe the segments we got back..
           x_segment = new vec2( open_segment.x.a, segment.x.b )
           y_segments = open_segment.y.split(segment.y, 0, 0)
           
           seen_segments = {}
 
+          // check each of the splits.. if the two segments overlap, then we definitely
+          // have a room here.
           y_segments.forEach(function(seg){
             seen_segments[ seg[0]+"" ] = true
             var room = new Rect( x_segment, seg[0] )
@@ -46,7 +68,8 @@ var RegionList = (function(){
             j++
           })
 
-          y_segments = segment.y.split(open_segment.y, TOP, BOTTOM)
+          // splitting the other way..
+          y_segments = segment.y.split(open_segment.y, 0, 0)
           y_segments.forEach(function(seg){
             if (seen_segments[ seg[0]+"" ]) return;
             var new_seg = new Rect( segment.x, seg[0] )
@@ -55,6 +78,9 @@ var RegionList = (function(){
           })
         }
       }
+      
+      // if we have overlap, then re-sort the open segments Y-wise
+      // and (again) dedupe..
       if (overlapped) {
         open_segments = open_segments.sort(function(a,b){
           if (a.y.a < b.y.a) { return -1 }
@@ -74,6 +100,7 @@ var RegionList = (function(){
           }
         }
       }
+      // if we don't have any overlap, then this is a new open segment.
       else {
         open_segments.push(segment)
       }
@@ -81,11 +108,15 @@ var RegionList = (function(){
     
     var splits, splitter
     
+    // second pass: now that we have a bunch of rooms, assign sides to all of them.
+    // sides are used in the "mover" script to do bounds checking.
     for (var i = 0; i < segments.length; i++) {
       segment = segments[i]
       var horizontal = segment.isHorizontal(), vertical = segment.isVertical()
       for (var r = 0; r < rooms.length; r++){
         room = rooms[r]
+
+        // vertical segments determine the left and right edges of the room, fairly simply.
         if (vertical) {
           if (segment.y.containsVec(room.y)) {
             if (segment.x.a == room.x.a) {
@@ -96,6 +127,8 @@ var RegionList = (function(){
             }
           }
         }
+        
+        // horizontal segments determine the front and back edges of the room.
         if (horizontal) {
           if (segment.x.containsVec(room.x)) {
             if (segment.y.a == room.y.a) {
@@ -105,28 +138,30 @@ var RegionList = (function(){
               room.sides |= BACK
             }
           }
-
-          else if (segment.y.a == room.y.a || segment.y.a == room.y.b)  {
-            if (room.x.overlaps(segment.x)) {
-              splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT)
-              rooms.splice(r--, 1)
-              console.log(splits)
-              for (var k = 0; k < splits.length; k++) {
-                splitter = splits[k]
-                var new_room = new Rect( splitter[0], room.y )
-                new_room.sides = 0
-                new_room.sides |= splitter[1] | ( room.sides & FRONT_BACK )
-                if (segment.x.overlaps( splitter[0] )) {
-                  if (segment.y.a == new_room.y.a) {
-                    new_room.sides |= FRONT
-                  }
-                  if (segment.y.a == new_room.y.b) {
-                    new_room.sides |= BACK
-                  }
+          
+          // however, since we did not split on horizontal segments, our rooms may
+          // only have partial overlap with these segments, in which case we need to
+          // split the rooms apart.
+          else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.overlaps(segment.x)) {
+            
+            // split the room across the segment. preserve whether or not we know the
+            // room borders a segment on the left or right.
+            splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT)
+            rooms.splice(r--, 1)
+            for (var k = 0; k < splits.length; k++) {
+              splitter = splits[k]
+              var new_room = new Rect( splitter[0], room.y )
+              new_room.sides = splitter[1] | ( room.sides & FRONT_BACK )
+              if (segment.x.overlaps( splitter[0] )) {
+                if (segment.y.a == new_room.y.a) {
+                  new_room.sides |= FRONT
+                }
+                if (segment.y.a == new_room.y.b) {
+                  new_room.sides |= BACK
                 }
-                rooms.unshift(new_room)
-                r++
               }
+              rooms.unshift(new_room)
+              r++
             }
           }
 
@@ -137,6 +172,8 @@ var RegionList = (function(){
     return { rooms: rooms }
   }
   
+  
+  // Gets a list of polylines from the ShapeList and sorts the segments.
   RegionList.getSortedSegments = function(){
     // get a list of all segments from these polylines
     var segments = shapes.getAllSegments()
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
index 4373caf..90714c2 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -1,3 +1,5 @@
+// The ShapeList manages the list of polylines which form a V2 layout.
+
 var ShapeList = Fiber.extend(function(base){
   var exports = {}
   exports.init = function(){
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index 226e56f..8942d92 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -214,13 +214,13 @@
 	}
 
 	vec2.prototype.toString = function(){
-		return "[" + round(this.a) + " " + round(this.b) + "]"
+		return "[" + Math.round(this.a) + " " + Math.round(this.b) + "]"
 	}
 	vec2.prototype.exactString = function(){
 		return "[" + this.a + " " + this.b + "]"
 	}
 	vec2.prototype.serialize = function(){
-		return [ round(this.a), round(this.b) ]
+		return [ Math.round(this.a), Math.round(this.b) ]
 	}
 	vec2.prototype.deserialize = function(data){
 		this.a = data[0]
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 13f5cd7..9d4650b 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -10,6 +10,11 @@
 		vec2 = require('./vec2')
 		Rect = require('./rect')
 		UidGenerator = require('../util/uid')
+		wall_rotation = {}
+    wall_rotation[FRONT] = PI
+    wall_rotation[BACK] = 0
+    wall_rotation[LEFT] = HALF_PI
+    wall_rotation[RIGHT] = -HALF_PI
 	}
 	
 	var Wall = function(opt){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index 39cf62e..a341a24 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -62,8 +62,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
     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.resize( window.innerWidth/2, window.innerHeight )
       this.parent.map.canvas.style.display = "block"
     }
     else {
@@ -119,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
 //    var colors = ["rgba(0,0,0,0.1)"]
 //     var colors = ["rgba(255,255,255,1)"]
 // 
-//     map.draw.regions(this.rooms.rooms, colors, "#000")
+    map.draw.regions(this.rooms.rooms, colors, "#000")
 
 //     this.rooms.rooms.forEach(function(room,i){
 //       map.draw.ctx.fillStyle = colors[i % colors.length]
-- 
cgit v1.2.3-70-g09d2


From ee110d4725943bbc2b783323ec5087324531ca33 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 27 Aug 2015 18:17:14 -0400
Subject: get rooms api working with shapes

---
 .../javascripts/rectangles/engine/map/_map.js      |   3 +
 .../javascripts/rectangles/engine/map/draw.js      |  19 +--
 .../javascripts/rectangles/engine/shapes/ortho.js  |   9 ++
 .../rectangles/engine/shapes/polyline.js           |   9 ++
 .../rectangles/engine/shapes/regionlist.js         |  11 ++
 .../rectangles/engine/shapes/shapelist.js          |  13 +-
 .../assets/javascripts/ui/editor/EditorSettings.js |   2 +-
 public/assets/javascripts/ui/reader/ReaderView.js  |   7 +-
 server/lib/api/rooms.js                            | 139 +++++++++++++++------
 9 files changed, 161 insertions(+), 51 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index e27346d..6492db6 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -50,6 +50,7 @@ var Map = function(opt){
 	switch (opt.type) {
 		case "ortho":
 			base.draw = new Map.Draw (base, { ortho: true })
+			base.draw.grid_size = MAP_GRID_SIZE
 			base.ui = new Map.UI.Ortho (base)
 			base.sides = base.sides_for_center
 			$(window).resize(base.resize)
@@ -57,6 +58,7 @@ var Map = function(opt){
 		
 		case "editor":
 			base.draw = new Map.Draw (base)
+			base.draw.grid_size = MAP_GRID_SIZE
 			base.ui = new Map.UI.Editor (base)
 			base.sides = base.sides_for_center
 			$(window).resize(base.resize)
@@ -64,6 +66,7 @@ var Map = function(opt){
 		
 		case "minimap":
 			base.draw = new Map.Draw (base, { center: scene.camera, minimap: true })
+			base.draw.grid_size = MAP_GRID_SIZE * 10
 			base.ui = new Map.UI.Minimap (base)
 			base.sides = base.sides_for_camera
 			break
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index fd05f86..4f4759f 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -179,8 +179,8 @@ Map.Draw = function(map, opt){
 		ctx.lineWidth = 1/map.zoom
 		
 		var sides = map.sides()
-		var quant = sides.clone().quantize(MAP_GRID_SIZE)
-		for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) {
+		var quant = sides.clone().quantize(draw.grid_size)
+		for (var x = quant.x.a - draw.grid_size; x <= quant.x.b; x += draw.grid_size) {
 		  if (Math.round(x) % 360 == 0) {
         ctx.strokeStyle = "rgba(0,0,0,0.3)"
         ctx.lineWidth = 1/map.zoom
@@ -191,17 +191,18 @@ Map.Draw = function(map, opt){
 		  }
       line(x, sides.y.a, x, sides.y.b)
 		}
-		for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) {
-		  if (Math.round(y) % 360 == 0) {
+
+    for (var y = quant.y.a - draw.grid_size; y <= quant.y.b; y += draw.grid_size) {
+      if (Math.round(y) % 360 == 0) {
         ctx.strokeStyle = "rgba(0,0,0,0.3)"
         ctx.lineWidth = 1/map.zoom
-		  }
-		  else {
+      }
+      else {
         ctx.strokeStyle = "rgba(0,0,0,0.05)"
         ctx.lineWidth = 1/map.zoom
-		  }
-			line(sides.x.a, y, sides.x.b, y)
-		}
+      }
+      line(sides.x.a, y, sides.x.b, y)
+    }
 	}
 
 	//
diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js
index c1acae5..163f646 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js
@@ -1,5 +1,9 @@
 // An OrthoPolyline is a Polyline where all angles are 90 degrees.
 
+if (! ('window' in this) ) {
+  var Polyline = require("./polyline.js")
+}
+
 var OrthoPolyline = Polyline.extend(function(base){
 	var exports = {}
 	exports.type = function(){
@@ -55,3 +59,8 @@ var OrthoPolyline = Polyline.extend(function(base){
   }
   return exports
 })
+
+
+if (! ('window' in this) ) {
+  module.exports = OrthoPolyline
+}
diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
index 579d0ea..b2cd92f 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js
@@ -2,6 +2,11 @@
 // Additionally, it manages a set of MX objects which correspond to the walls in 3D.
 // In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views.
 
+if (! ('window' in this) ) {
+  var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js")
+  var vec2 = require("../../models/vec2")
+}
+
 var Polyline = Fiber.extend(function(base){
 	var exports = {}
 	exports.init = function(){
@@ -201,3 +206,7 @@ var Polyline = Fiber.extend(function(base){
 	}
   return exports
 })
+
+if (! ('window' in this) ) {
+  module.exports = Polyline
+}
diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
index 0dd4a1e..8c9e732 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js
@@ -5,6 +5,13 @@
 // 1) all angles are orthogonal
 // 2) all polylines are closed
 
+if (! ('window' in this) ) {
+  var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js")
+  var vec2 = require("../../models/vec2")
+  var Rect = require("../../models/rect")
+  var sort = require("../../util/sort")
+}
+
 var RegionList = (function(){
 
   var RegionList = {}
@@ -223,6 +230,10 @@ var RegionList = (function(){
     }
     return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b )
   }
+  
+  if (! ('window' in this) ) {
+		module.exports = RegionList
+	}
 
   return RegionList
   
diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
index 2d33af2..21beb76 100644
--- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
+++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js
@@ -1,5 +1,11 @@
 // The ShapeList manages the list of polylines which form a V2 layout.
 
+if (! ('window' in this) ) {
+  var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js")
+  var Polyline = require("./polyline.js")
+  var OrthoPolyline = require("./ortho.js")
+}
+
 var ShapeList = Fiber.extend(function(base){
   var exports = {}
   exports.init = function(){
@@ -110,4 +116,9 @@ var ShapeList = Fiber.extend(function(base){
     })
   }
   return exports
-})
\ No newline at end of file
+})
+
+if (! ('window' in this) ) {
+  shapes = new ShapeList
+  module.exports = shapes
+}
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 83bc8b7..d8cfca6 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({
 		this.action = data.isNew ? this.createAction : this.updateAction
     this.parent.data = data
     
-		if (data.shapes) {
+		if (data.shapes.length) {
 		  Rooms.deserializeFromShapes(data, data.walls)
 		}
 		else if (data.rooms) {
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 1ba97cf..43e81d8 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -76,7 +76,12 @@ var ReaderView = View.extend({
   },
   
   build: function(data){
-		data.rooms && Rooms.deserialize(data.rooms)
+		if (data.shapes.length) {
+		  Rooms.deserializeFromShapes(data)
+		}
+		else {
+		  Rooms.deserialize(data.rooms)
+		}
 		data.walls && Walls.deserialize(data.walls)
 		data.media && Scenery.deserialize(data.media)
     data.sculpture && Sculpture.deserialize(data.sculpture)
diff --git a/server/lib/api/rooms.js b/server/lib/api/rooms.js
index c044309..2a1d2fe 100644
--- a/server/lib/api/rooms.js
+++ b/server/lib/api/rooms.js
@@ -6,6 +6,8 @@ var Clipper = require("../../../public/assets/javascripts/rectangles/engine/room
 var Builder = require("../../../public/assets/javascripts/rectangles/engine/rooms/builder.js")
 var Grouper = require("../../../public/assets/javascripts/rectangles/engine/rooms/grouper.js")
 var Walls = require("../../../public/assets/javascripts/rectangles/engine/rooms/_walls.js")
+var shapes = require("../../../public/assets/javascripts/rectangles/engine/shapes/shapelist.js")
+var RegionList = require("../../../public/assets/javascripts/rectangles/engine/shapes/regionlist.js")
 
 /* jshint node: true */
 
@@ -21,47 +23,106 @@ var rooms = module.exports = {
 			if (! doc) { res.json({ status: 404 }); return }
 			doc = doc.toObject()
 
-      doc.rooms.forEach(function(data){
-				var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1])
-				var room = new Room({
-					id: data.id,
-					rect: rect,
-					height: data.height
-				})
-				Rooms.add(room)
-			})
-			Rooms.clipper.solve_rects()
-      Rooms.builder.build()
-
-			var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = []
-			var collections = Rooms.grouper.collect()
-			Rooms.grouper.cull(collections)
-			Rooms.grouper.group(walls, collections, FRONT)
-			Rooms.grouper.group(walls, collections, BACK)
-			Rooms.grouper.group(walls, collections, LEFT)
-			Rooms.grouper.group(walls, collections, RIGHT)
-			walls.forEach(function(wall){
-			  wall.mx.forEach(function(mx){
-			    var data = mx.report()
-			    data.id = wall.id
-          mx_walls.push(data)
-			  })
-			})
-
-      doc.mx_walls = mx_walls
-      doc.mx_floor = mx_floor
-      doc.mx_ceiling = mx_ceiling
-      
-      Rooms.forEach(function(room){
-        room.mx_floor.forEach(function(mx){
-          mx_floor.push( mx.report() )
-        })
-        room.mx_ceiling.forEach(function(mx){
-          mx_ceiling.push( mx.report() )
-        })
-      })
+      if (doc.shapes.length) {
+        parseMxShapes(doc)
+      }
+      else {
+        parseMxRooms(doc)
+      }
 
       res.json(doc)
 		})
 	}
 }
+
+function parseMxShapes (doc) {
+  var viewHeight = doc.viewHeight
+  var wallHeight = doc.wallHeight
+
+  shapes.deserialize( doc.shapes )
+
+  var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = []
+  var regions = RegionList.build()
+  
+  regions.forEach(function(region){
+    var room = new Room({
+      rect: region,
+      regions: [region],
+      height: wallHeight,
+    })
+
+    room.sides = region.sides
+    region.id = Rooms.uid("room_")
+    Rooms.list[ region.id ] = room
+    Rooms.builder.build_walls(region)
+    mx_floor.push( Rooms.builder.make_floor(room, region) )
+    mx_ceiling.push( Rooms.builder.make_ceiling(room, region) )
+  })
+
+  var collections = Rooms.grouper.collect()
+  Rooms.grouper.cull(collections)
+  Rooms.grouper.group(walls, collections, FRONT)
+  Rooms.grouper.group(walls, collections, BACK)
+  Rooms.grouper.group(walls, collections, LEFT)
+  Rooms.grouper.group(walls, collections, RIGHT)
+  walls.forEach(function(wall){
+    wall.mx.forEach(function(mx){
+      var data = mx.report()
+      data.id = wall.id
+      mx_walls.push(data)
+    })
+  })
+
+  doc.mx_walls = mx_walls
+  doc.mx_floor = mx_floor
+  doc.mx_ceiling = mx_ceiling
+
+  Rooms.forEach(function(room){
+    mx_floor.push( room.mx_floor )
+    room.mx_ceiling.forEach(function(mx){
+      mx_ceiling.push( mx.report() )
+    })
+  })
+}
+
+function parseMxRooms (doc) {
+  doc.rooms.forEach(function(data){
+    var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1])
+    var room = new Room({
+      id: data.id,
+      rect: rect,
+      height: data.height
+    })
+    Rooms.add(room)
+  })
+  Rooms.clipper.solve_rects()
+  Rooms.builder.build()
+
+  var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = []
+  var collections = Rooms.grouper.collect()
+  Rooms.grouper.cull(collections)
+  Rooms.grouper.group(walls, collections, FRONT)
+  Rooms.grouper.group(walls, collections, BACK)
+  Rooms.grouper.group(walls, collections, LEFT)
+  Rooms.grouper.group(walls, collections, RIGHT)
+  walls.forEach(function(wall){
+    wall.mx.forEach(function(mx){
+      var data = mx.report()
+      data.id = wall.id
+      mx_walls.push(data)
+    })
+  })
+
+  doc.mx_walls = mx_walls
+  doc.mx_floor = mx_floor
+  doc.mx_ceiling = mx_ceiling
+  
+  Rooms.forEach(function(room){
+    room.mx_floor.forEach(function(mx){
+      mx_floor.push( mx.report() )
+    })
+    room.mx_ceiling.forEach(function(mx){
+      mx_ceiling.push( mx.report() )
+    })
+  })
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 7f443264d1c30b48cc3923ee6e700facdf0f7214 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 10 Jun 2016 16:32:37 -0400
Subject: fix resize issues

---
 .../javascripts/rectangles/engine/map/_map.js      | 29 +++++++++++++---------
 public/assets/javascripts/rectangles/util/mouse.js | 15 ++++++++++-
 .../assets/javascripts/ui/editor/EditorSettings.js |  2 +-
 public/assets/stylesheets/app.css                  |  2 ++
 views/home.ejs                                     |  1 +
 5 files changed, 35 insertions(+), 14 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/map/_map.js')

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 6492db6..ba3ec92 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -41,12 +41,28 @@ var Map = function(opt){
 	}
 	base.set_zoom(opt.zoom)
 
+	base.resize = function(w, h){
+	  if (w && h) {
+      canvas.width = base.dimensions.a = w
+      canvas.height = base.dimensions.b = h
+	  }
+	  else {
+      // resize here - esp if 2d-hires
+      canvas.width = base.dimensions.a = base.el.parentNode.offsetWidth
+      canvas.height = base.dimensions.b = base.el.parentNode.offsetHeight
+	  }
+	}
+		
+	base.toggle = function(state){
+		return $(base.el).toggle(state).is(':visible')
+	}
+
 	var canvas = base.canvas = document.createElement("canvas")
 	canvas.width = base.dimensions.a
 	canvas.height = base.dimensions.b
 
 	base.el.appendChild(canvas)
-	
+
 	switch (opt.type) {
 		case "ortho":
 			base.draw = new Map.Draw (base, { ortho: true })
@@ -71,17 +87,6 @@ var Map = function(opt){
 			base.sides = base.sides_for_camera
 			break
 	}
-	
-	base.resize = function(w, h){
-		canvas.width = base.dimensions.a = w || window.innerWidth
-		canvas.height = base.dimensions.b = h || window.innerHeight
-		// resize here - esp if 2d-hires
-	}
-		
-	base.toggle = function(state){
-		return $(base.el).toggle(state).is(':visible')
-	}
-
 }
 
 Map.prototype.update = function(){
diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js
index 2b98cee..6d9862c 100644
--- a/public/assets/javascripts/rectangles/util/mouse.js
+++ b/public/assets/javascripts/rectangles/util/mouse.js
@@ -54,10 +54,20 @@ function mouse (opt) {
   opt.up && base.tube.on("up", opt.up)
   opt.rightclick && base.tube.on("rightclick", opt.rightclick)
   
-  var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null
+  var offset;
   
   base.init = function (){
     base.bind()
+    base.set_offset()
+  }
+  
+  base.set_offset = function(){
+    if (opt.use_offset && opt.el) {
+      offset = opt.el.getBoundingClientRect()
+    }
+    else {
+      offset = null
+    }
   }
 
   base.on = function(){
@@ -73,6 +83,9 @@ function mouse (opt) {
       opt.el.addEventListener("mousedown", base.mousedown)
       opt.el.addEventListener("contextmenu", base.contextmenu)
     }
+    if (opt.use_offset) {
+      window.addEventListener("resize", base.set_offset)
+    }
     window.addEventListener("mousemove", base.mousemove)
     window.addEventListener("mouseup", base.mouseup)
   }
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index d8cfca6..5aa88e9 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({
 		this.action = data.isNew ? this.createAction : this.updateAction
     this.parent.data = data
     
-		if (data.shapes.length) {
+		if (data.shapes && data.shapes.length) {
 		  Rooms.deserializeFromShapes(data, data.walls)
 		}
 		else if (data.rooms) {
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1154fde..fdf7c12 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1331,6 +1331,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; }
 #hud {
 	position: fixed;
 	top:0;left:0;
+	width: 100%;
+	height: 100%;
 	z-index: 2;
 }
 #palette {
diff --git a/views/home.ejs b/views/home.ejs
index af43f0b..36dad83 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -60,6 +60,7 @@
   <h1>Sign Up</h1>
 
 	<div class="projectList about aboutintro">
+		<a href="/about/howto" class="greenbtn learn">Read Tutorial</a>
   </div>
 
 	<h1>Room Showcase</h1>
-- 
cgit v1.2.3-70-g09d2