From 098a330fab261885a86c7ae9a5b2ed294987dc6b Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 27 Aug 2014 12:47:05 -0400
Subject: fix tests

---
 .../assets/javascripts/rectangles/engine/rooms/builder.js   |  4 +---
 .../assets/javascripts/rectangles/engine/rooms/grouper.js   | 13 +++++++++----
 public/assets/javascripts/rectangles/models/surface.js      |  3 ---
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'public/assets/javascripts/rectangles')

diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index f321f71..5396ced 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -165,7 +165,6 @@
 						room.mx_ceiling.push(el)
 					}
 				}.bind(this))
-
 			}
 			else {
 				// render floor and ceiling for the entire rectangle
@@ -282,7 +281,6 @@
 			el.side = CEILING
 			return el
 		}
-
 		this.make_wall = function (klass) {
 			var el = new MX.Object3D(".face" + (klass || ""))
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
@@ -293,7 +291,7 @@
 			el.side = 0
 			el.rect = null
 			el.destroy = function(){
-				this.el = this.rect = this.face = null
+        this.el = this.rect = this.face = null
 			}
 
 			// possible if walls are opaque
diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
index cde9fbb..2ec1ee7 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
@@ -83,7 +83,10 @@
 				
 				collection.sort( useX ? sort.compare_zx : sort.compare_xz )
 				collection.forEach(function(mx){
-					if (last_mx && last_mx.rect.eq(mx.rect)) {
+				  if (mx.culled) {
+				    return
+				  }
+					if (last_mx && mx && last_mx.rect.eq(mx.rect)) {
 					  // culls half-walls
 						if (last_mx.rect.id == mx.rect.id) {
 							last_mx.height += mx.height/2
@@ -91,9 +94,11 @@
 							last_mx.face.y.b += mx.height/2
 						}
 						last_mx.side = side
-						mx.culled = true
-						mx.destroy()
-						scene.remove(mx)
+						if (! mx.culled) {
+              scene.remove(mx)
+              mx.destroy()
+              mx.culled = true
+            }
 						return
 					}
 					widthVec = mx.rect[useX ? 'x' : 'y'].clone()
diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js
index 636f7c0..53977c8 100644
--- a/public/assets/javascripts/rectangles/models/surface.js
+++ b/public/assets/javascripts/rectangles/models/surface.js
@@ -147,9 +147,6 @@
 	
 	Surface.prototype.index_for_x = function(x, min_i){
     min_i = min_i || 0
-    if (min_i >= this.faces.length-1) {
-    	return -1
-    }
 		for (var i = min_i; i < this.faces.length; i++) {
 			if (this.faces[i].x.contains(x)) {
 				return i
-- 
cgit v1.2.3-70-g09d2


From 63b0e94e3e36838240c2d86e780a641c2255ed89 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 27 Aug 2014 13:03:46 -0400
Subject: floor/ceiling colors

---
 .../assets/javascripts/rectangles/models/room.js   | 12 +++++
 .../assets/javascripts/ui/editor/LightControl.js   | 63 ++++++++++++++++++++--
 public/assets/stylesheets/app.css                  |  9 +++-
 views/controls/editor/light-control.ejs            |  7 ++-
 4 files changed, 83 insertions(+), 8 deletions(-)

(limited to 'public/assets/javascripts/rectangles')

diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js
index 33a94d0..1cc929f 100644
--- a/public/assets/javascripts/rectangles/models/room.js
+++ b/public/assets/javascripts/rectangles/models/room.js
@@ -182,6 +182,18 @@
 		return collision
 	}
 
+  Room.prototype.setFloorColor = function(rgbColor) {
+    this.mx_floor.map(function(mx){
+      mx.el.style.backgroundColor = rgbColor
+    })
+  }
+  
+  Room.prototype.setCeilingColor = function(rgbColor) {
+    this.mx_ceiling.map(function(mx){
+      mx.el.style.backgroundColor = rgbColor
+    })
+  }
+
 	if ('window' in this) {
 		window.Room = Room
 	}
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index f35b19e..a3a19c7 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -6,6 +6,8 @@ var LightControl = View.extend({
 		"mousedown": "stopPropagation",
 		"click #wall-color": "editWallColor",
 		"click #outline-color": "editOutlineColor",
+		"click #floor-color": "editFloorColor",
+		"click #ceiling-color": "editCeilingColor",
 		"click label": "clickLabel",
 		"input #shadow-control": "updateShadow",
 		"input #brightness-control": "updateBrightness",
@@ -17,14 +19,20 @@ var LightControl = View.extend({
 		this.colorPicker = new LabColorPicker(this, 180, 180)
 		this.$el.prepend( this.colorPicker.canvas )
 		
+		this.$swatches = this.$(".swatch")
+		this.$labels = this.$(".swatch + label")
 		this.$wallSwatch = this.$("#wall-color")
 		this.$outlineSwatch = this.$("#outline-color")
+		this.$floorSwatch = this.$("#floor-color")
+		this.$ceilingSwatch = this.$("#ceiling-color")
 		this.$brightnessControl = this.$("#brightness-control")
 		
 		this.setMode("wall")
 		
-		this.setWallColor([255,255,255], false)
-		this.setOutlineColor([0,0,0])
+		this.setWallColor(this.wallColor, false)
+		this.setOutlineColor(this.outlineColor)
+		this.setFloorColor(this.floorColor)
+		this.setCeilingColor(this.ceilingColor)
 	},
 	
 	toggle: function(state){
@@ -48,27 +56,44 @@ var LightControl = View.extend({
 	    case "outline":
 	      this.setOutlineColor(rgb)
 	      break
+	    case "floor":
+	      this.setFloorColor(rgb)
+	      break
+	    case "ceiling":
+	      this.setCeilingColor(rgb)
+	      break
 	  }
 	},
 	
 	wallColor: [255,255,255],
 	outlineColor: [0,0,0],
+	floorColor: [246,246,246],
+	ceilingColor: [255,255,255],
 	
 	setMode: function (mode) {
 	  var color, brightness
 	  this.mode = mode
+    this.$swatches.removeClass("selected")
+    this.$labels.removeClass("selected")
 	  switch (mode) {
 	    case "wall":
 	      this.$wallSwatch.addClass("selected")
-	      this.$outlineSwatch.removeClass("selected")
 	      color = this.wallColor
 	      break
 	    case "outline":
 	      this.$outlineSwatch.addClass("selected")
-	      this.$wallSwatch.removeClass("selected")
 	      color = this.outlineColor
 	      break
+	    case "floor":
+	      this.$floorSwatch.addClass("selected")
+	      color = this.floorColor
+	      break
+	    case "ceiling":
+	      this.$ceilingSwatch.addClass("selected")
+	      color = this.ceilingColor
+	      break
 	  }
+    this.$(".swatch.selected").next("label").addClass("selected")
 	  this.labColor = this.colorPicker.load(color)
 	  this.$brightnessControl.val( this.labColor[0] )
 	},
@@ -83,7 +108,15 @@ var LightControl = View.extend({
 	  this.setMode("outline")
 	},
 	
-	setWallColor: function(rgb, repaint){
+	editFloorColor: function(){
+	  this.setMode("floor")
+	},
+	
+	editCeilingColor: function(){
+	  this.setMode("ceiling")
+	},
+	
+  setWallColor: function(rgb, repaint){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
 	  var rgbaColor = rgba_string(rgb, 0.95)
@@ -94,6 +127,26 @@ var LightControl = View.extend({
 	  })
 	},
 
+	setFloorColor: function(rgb, repaint){
+	  repaint = typeof repaint != "undefined" ? repaint : true
+	  var rgbColor = rgb_string(rgb)
+	  this.floorColor = rgb
+	  this.$floorSwatch.css("background-color", rgbColor)
+	  Rooms.forEach(function(room){
+	    room.setFloorColor(rgbColor)
+	  })
+	},
+
+	setCeilingColor: function(rgb, repaint){
+	  repaint = typeof repaint != "undefined" ? repaint : true
+	  var rgbColor = rgb_string(rgb)
+	  this.ceilingColor = rgb
+	  this.$ceilingSwatch.css("background-color", rgbColor)
+	  Rooms.forEach(function(room){
+	    room.setCeilingColor(rgbColor)
+	  })
+	},
+
 	setOutlineColor: function(rgb){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index ff35ca4..6f6a192 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1201,6 +1201,7 @@ input[type="range"]::-webkit-slider-thumb {
   height: 20px;
   border: 1px solid black;
   display: inline-block;
+  cursor: pointer;
 }
 .swatch.selected {
   border-width: 2px;
@@ -1213,7 +1214,13 @@ input[type="range"]::-webkit-slider-thumb {
   font-weight: 300;
   position: relative;
   top: -6px;
-  margin-right: 15px;
+  padding-left: 5px;
+  display: inline-block;
+  width: 60px;
+  cursor: pointer;
+}
+.color-swatches label.selected {
+  font-weight: 500;
 }
 
 
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 4324087..02a78b6 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -6,8 +6,11 @@
 	</div>
 
   <div class="color-swatches">
-    <div class="swatch" id="wall-color"></div> <label>wall color</label>
-    <div class="swatch" id="outline-color"></div> <label>outline color</label>
+    <div class="swatch" id="wall-color"></div><label>wall</label>
+    <div class="swatch" id="outline-color"></div><label>outlines</label>
+    <br>
+    <div class="swatch" id="floor-color"></div><label>floor</label>
+    <div class="swatch" id="ceiling-color"></div><label>ceiling</label>
   </div>
 
 <!--
-- 
cgit v1.2.3-70-g09d2


From e200f73bdc55e4b6e3dcdf17f5fb5bfd6c020c2a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 28 Aug 2014 17:22:28 -0400
Subject: split out walls stuff, remove dead code

---
 public/assets/javascripts/app.js                   |  7 --
 public/assets/javascripts/defaults.js              | 11 +++
 .../javascripts/rectangles/engine/rooms/_rooms.js  |  9 ---
 .../javascripts/rectangles/engine/rooms/_walls.js  | 91 ++++++++++++++++++++++
 .../javascripts/rectangles/engine/rooms/builder.js |  1 +
 .../javascripts/rectangles/engine/rooms/grouper.js | 12 +--
 .../rectangles/engine/scenery/_scenery.js          |  2 +-
 .../javascripts/rectangles/engine/scenery/undo.js  |  4 +-
 .../assets/javascripts/rectangles/models/room.js   | 23 ------
 .../assets/javascripts/rectangles/models/wall.js   | 34 +++-----
 .../assets/javascripts/rectangles/util/colors.js   |  5 --
 .../javascripts/ui/builder/BuilderSettings.js      |  2 +
 .../assets/javascripts/ui/builder/BuilderView.js   |  1 +
 .../assets/javascripts/ui/editor/EditorSettings.js | 10 ++-
 .../assets/javascripts/ui/editor/LightControl.js   | 44 ++++++-----
 public/assets/stylesheets/app.css                  | 20 ++---
 views/controls/editor/wallpaper.ejs                |  2 +-
 views/partials/scripts.ejs                         |  2 +
 18 files changed, 168 insertions(+), 112 deletions(-)
 create mode 100644 public/assets/javascripts/defaults.js
 create mode 100644 public/assets/javascripts/rectangles/engine/rooms/_walls.js

(limited to 'public/assets/javascripts/rectangles')

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index ad3c601..1dd8a5e 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -98,11 +98,4 @@ app.position = function(obj){
 	return pos
 }
 
-app.defaults = {
-	viewHeight: window.viewHeight = 186,
-	units: app.units = "ft",
-	footResolution: 36,
-	meterResolution: 100,
-}
-
 document.addEventListener('DOMContentLoaded', app.init)
diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
new file mode 100644
index 0000000..98ea0c3
--- /dev/null
+++ b/public/assets/javascripts/defaults.js
@@ -0,0 +1,11 @@
+app.defaults = {
+	viewHeight: window.viewHeight = 186,
+	units: app.units = "ft",
+	footResolution: 36,
+	meterResolution: 100,
+	wallOpacity: 0.95,
+	wallColor: [255,255,255],
+	outlineColor: [0,0,0],
+	floorColor: [246,246,246],
+	ceilingColor: [255,255,255],
+}
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 29dee41..5ed7be8 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -35,7 +35,6 @@
 		var base = this
 	
 		base.list = {}
-		base.walls = {}
 		base.regions = []
 
 		base.uid = new UidGenerator(base.list)
@@ -110,14 +109,6 @@
 			Rooms.clipper.update()
 		}
 
-		base.serializeWalls = function(){
-			return []
-		}
-	
-		base.deserializeWalls = function(walls_data){
-			return []
-		}
-
 		base.sorted_by_position = function(){
 			return sort.rooms_by_position( base.values() )
 		}
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
new file mode 100644
index 0000000..f5ef6be
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -0,0 +1,91 @@
+(function(){
+
+	var vec2, Rect, Room, sort, UidGenerator, _
+	if ('window' in this) {
+		vec2 = window.vec2
+		Rect = window.Rect
+		Room = window.Room
+		sort = window.sort
+		UidGenerator = window.UidGenerator
+		_ = window._
+	}
+	else {
+		vec2 = require('../../models/vec2')
+		Rect = require('../../models/rect')
+		Room = require('../../models/room')
+		UidGenerator = require('../../util/uid')
+		sort = require('../../util/sort')
+		_ = require('lodash')
+		FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20
+		TOP = CEILING, BOTTOM = FLOOR
+		function sidesToString(sides){
+			var s = ""
+			if (sides & FRONT) s += "front "
+			if (sides & BACK)  s += "back "
+			if (sides & LEFT)  s += "left "
+			if (sides & RIGHT) s += "right "
+			if (sides & TOP)  s += "top "
+			if (sides & BOTTOM) s += "bottom "
+			return s
+		}
+	}
+
+	var Walls = new function(){
+
+		var base = this
+		
+		base.list = []
+		base.lookup = {}
+		base.colors = {}
+
+		base.first = function(){
+		  for (var i in base.list) {
+		    if (base.list.hasOwnProperty(i)) { 
+          return base.list[i]
+		    }
+		  }
+		}
+		
+		base.assign = function(list){
+		  base.list = list
+		  base.lookup = {}
+		  list.forEach(function(wall){
+		    base.lookup[wall.id] = wall
+		  })
+		}
+		
+		base.bind = function(){
+			base.list.forEach(function(wall){
+				wall.bind()
+			})
+		}
+
+		base.count = function(){
+			return this.list.length
+		}
+	
+		base.forEach = function(f){
+			return base.list.forEach(f)
+		}
+	
+		base.map = function(f){
+			return base.list.map(f)
+		}
+		
+		base.serialize = function(){
+			return []
+		}
+	
+		base.deserialize = function(walls_data){
+			return []
+		}
+		
+  }
+
+	if ('window' in this) {
+		window.Walls = Walls
+	}
+	else {
+		module.exports = Walls
+	}
+})()
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 5396ced..f0935d4 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -282,6 +282,7 @@
 			return el
 		}
 		this.make_wall = function (klass) {
+		  // klass += ".backface-hidden"
 			var el = new MX.Object3D(".face" + (klass || ""))
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
 			el.z = el.y = el.x = 0
diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
index 2ec1ee7..ba510e1 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js
@@ -52,8 +52,8 @@
 			base.group(walls, collections, BACK)
 			base.group(walls, collections, LEFT)
 			base.group(walls, collections, RIGHT)
-			Rooms.walls = walls
-			base.bind()
+			Walls.assign( walls )
+			Walls.bind()
 		}
 		base.collect = function(){			
 			var collections = {}
@@ -147,7 +147,6 @@
             }
           }
           wall = new Wall ({
-            id:      base.uid(),
             side:    side,
             mx:      [ mx ],
             surface: new Surface( mx.face ),
@@ -160,13 +159,6 @@
       
 			return walls
 		}
-		
-		base.bind = function(){
-			Rooms.walls.forEach(function(wall){
-				wall.bind()
-				wall.randomize_colors()
-			})
-		}
 
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 2fd6122..4cf5b06 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -84,7 +84,7 @@ var Scenery = new function(){
 
 	base.deserialize = function(scenery_data){
 		scenery_data.forEach(function(data){
-			var wall = Rooms.walls[data.wall_id] || Rooms.walls[0]
+			var wall = Walls.list[data.wall_id] || Walls.first()
 			var scene_media = base.add({
 			  data: data,
 				wall: wall,
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index 54ab755..a7e7d61 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -20,7 +20,7 @@
       undo: function(state){
         var scenery = Scenery.find(state.id)
         scenery.deserialize(state)
-        scenery.set_wall(Rooms.walls[ state.wall_id ])
+        scenery.set_wall(Walls.find( state.wall_id ))
         
         if (editor.permissions.resize) {
           Scenery.resize.show(scenery)
@@ -32,7 +32,7 @@
       redo: function(state){
         var scenery = Scenery.find(state.id)
         scenery.deserialize(state)
-        scenery.set_wall(Rooms.walls[ state.wall_id ])
+        scenery.set_wall(Walls.find( state.wall_id ))
 
         if (editor.permissions.resize) {
           Scenery.resize.show(scenery)
diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js
index 1cc929f..0f09325 100644
--- a/public/assets/javascripts/rectangles/models/room.js
+++ b/public/assets/javascripts/rectangles/models/room.js
@@ -32,9 +32,6 @@
 		this.id = opt.id || Rooms.uid("room_")
 		this.rect = opt.rect
 		this.regions = []
-		this.walls = []
-		this.floor = []
-		this.ceiling = []
 
 		this.height = opt.height || 200
 		this.focused = false
@@ -69,30 +66,10 @@
 		this.intersects = []
 		this.constructed = false
 		
-		this.walls = []
-		
 		this.mx_walls = []
 		this.mx_floor = []
 		this.mx_ceiling = []
 	}
-	
-	Room.prototype.bind = function(){
-		var base = this
-		base.mx_walls.forEach(function(wall){
-			$(wall.el).bind({
-				mouseover: function(){
-				},
-				mousemove: function(e){
-					var color = choice(window.palettes.colors)
-					base.mx_walls.forEach(function(wall){
-						$(wall.el).css("background-color", color)
-					})
-				},
-				mousedown: function(){
-				}
-			})
-		})
-	}
 
 	Room.prototype.clipTo = function(r){
 		// for each of this rect's regions split the region if necessary
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 1dd0ebf..61de95e 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -13,7 +13,7 @@
 	}
 	
 	var Wall = function(opt){
-		this.id = opt.id
+		this.id = [ opt.side, opt.edge, opt.vec.a ].join("_")
 		this.vec = opt.vec
 		this.edge = opt.edge
 		this.side = opt.side
@@ -89,9 +89,7 @@
 			this.mx.reverse()
 		}
 
-    var wallColor = "rgba(255,255,255,0.95)"
-    var outlineColor = "rgba(0,0,0,1.0)"
-		this.outline(wallColor, outlineColor)
+		// this.outline(wallColor, outlineColor)
 	}
 
 
@@ -199,7 +197,7 @@
 	}
 	
 	Wall.prototype.color = function(color){
-		this.$walls && this.$walls.css("background-color", color)
+		this.$walls.css("background-color", color)
 	}
 	
 	Wall.prototype.wallpaper = function(){
@@ -254,33 +252,21 @@
 	
 	Wall.prototype.siblings = function(){
 		return this
-// 		var base = this
-// 		var match = base.side | base.half_side
-// 		var walls = Rooms.list[this.room].walls.filter(function(w){
-// 			return (w.side | w.half_side) & match && w.$walls
-// 		})
-// 		return walls
-	}
-
-	Wall.prototype.randomize_colors = function(){
-		var color = window.grayColors[ this.side | this.half_side ]
-		// this.color(color)
 	}
 
 	Wall.prototype.stroke_colors = function(){
 		var color = "#fff"
-		var siblings = this.siblings()
-		siblings.forEach(function(w, i){
-			if (! w.$walls) return
+		var len = this.mx.length-1
+		this.mx.forEach(function(mx, i){
 			w.color(color)
 			if (i == 0) {
-				w.$walls.css("border-left", "1px solid #000")
+				mx.el.css("border-left", "1px solid #000")
 			}
-			if (i == siblings.length-1) {
-				w.$walls.css("border-right", "1px solid #000")
+			if (i == len) {
+				mx.el.css("border-right", "1px solid #000")
 			}
-			w.$walls.css("border-top", "1px solid #000")
-			w.$walls.css("border-bottom", "1px solid #000")
+			mx.el.css("border-top", "1px solid #000")
+			mx.el.css("border-bottom", "1px solid #000")
 		})
 	}
 	
diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js
index 16d34dd..4ad96fc 100644
--- a/public/assets/javascripts/rectangles/util/colors.js
+++ b/public/assets/javascripts/rectangles/util/colors.js
@@ -50,11 +50,6 @@
 	var select = document.querySelector("#palette")
 	select && select.addEventListener("change", function(){
 		colors = color_palettes[select.value]
-		Rooms.forEach(function(room){
-			room.walls.forEach(function(wall){
-				wall.randomize_colors()
-			})
-		})
 		select.blur()
 	})
 
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 0091454..796c398 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -29,6 +29,8 @@ var BuilderSettings = FormView.extend({
 		this.$id.val(data._id)
 		this.$name.val(data.name)
 
+		this.parent.lightControl.loadDefaults()
+
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.startPosition && scene.camera.move(data.startPosition)
 		data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop('checked', "checked")
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index 555cd58..a89111f 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -11,6 +11,7 @@ var BuilderView = View.extend({
 		this.info = new BuilderInfo ({ parent: this })
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
+		this.lightControl = new LightControl ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index e5dd844..2d3201e 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -32,8 +32,16 @@ var EditorSettings = FormView.extend({
     this.parent.data = data
     
 		data.rooms && Rooms.deserialize(data.rooms)
+		data.walls && Walls.deserialize(data.walls)
 		data.startPosition && scene.camera.move(data.startPosition)
-		
+
+    if (data.colors) {
+      this.parent.lightControl.load()
+    }
+    else {
+		  this.parent.lightControl.loadDefaults()
+    }
+
 		if (data.isNew) {
 		  this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") )
 		}
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index a3a19c7..5133de2 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -26,14 +26,25 @@ var LightControl = View.extend({
 		this.$floorSwatch = this.$("#floor-color")
 		this.$ceilingSwatch = this.$("#ceiling-color")
 		this.$brightnessControl = this.$("#brightness-control")
-		
-		this.setMode("wall")
-		
-		this.setWallColor(this.wallColor, false)
-		this.setOutlineColor(this.outlineColor)
-		this.setFloorColor(this.floorColor)
-		this.setCeilingColor(this.ceilingColor)
 	},
+
+  load: function(data){
+		this.setWallColor(data.wallColor, false)
+		this.setOutlineColor(data.outlineColor)
+		this.setFloorColor(data.floorColor)
+		this.setCeilingColor(data.ceilingColor)
+		this.setMode("wall")
+  },
+  
+  loadDefaults: function(){
+    var colors = {
+      wallColor: app.defaults.wallColor.slice(),
+      outlineColor: app.defaults.outlineColor.slice(),
+      floorColor: app.defaults.floorColor.slice(),
+      ceilingColor: app.defaults.ceilingColor.slice(),
+    }
+    this.load(colors)
+  },
 	
 	toggle: function(state){
     this.$el.toggleClass("active", state);
@@ -65,11 +76,6 @@ var LightControl = View.extend({
 	  }
 	},
 	
-	wallColor: [255,255,255],
-	outlineColor: [0,0,0],
-	floorColor: [246,246,246],
-	ceilingColor: [255,255,255],
-	
 	setMode: function (mode) {
 	  var color, brightness
 	  this.mode = mode
@@ -119,10 +125,10 @@ var LightControl = View.extend({
   setWallColor: function(rgb, repaint){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
-	  var rgbaColor = rgba_string(rgb, 0.95)
-	  this.wallColor = rgb
+	  var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity)
+	  Walls.colors.wall = this.wallColor = rgb
 	  this.$wallSwatch.css("background-color", rgbColor)
-	  Rooms.walls.forEach(function(wall){
+	  Walls.forEach(function(wall){
 	    wall.outline(rgbaColor, null)
 	  })
 	},
@@ -130,7 +136,7 @@ var LightControl = View.extend({
 	setFloorColor: function(rgb, repaint){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
-	  this.floorColor = rgb
+	  Walls.colors.floor = this.floorColor = rgb
 	  this.$floorSwatch.css("background-color", rgbColor)
 	  Rooms.forEach(function(room){
 	    room.setFloorColor(rgbColor)
@@ -140,7 +146,7 @@ var LightControl = View.extend({
 	setCeilingColor: function(rgb, repaint){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
-	  this.ceilingColor = rgb
+	  Walls.colors.ceiling = this.ceilingColor = rgb
 	  this.$ceilingSwatch.css("background-color", rgbColor)
 	  Rooms.forEach(function(room){
 	    room.setCeilingColor(rgbColor)
@@ -150,9 +156,9 @@ var LightControl = View.extend({
 	setOutlineColor: function(rgb){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
-	  this.outlineColor = rgb
+	  Walls.colors.outline = this.outlineColor = rgb
 	  this.$outlineSwatch.css("background-color", rgbColor)
-	  Rooms.walls.forEach(function(wall){
+	  Walls.forEach(function(wall){
 	    wall.outline(null, rgbColor)
 	  })
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 493cf67..c2e7119 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -768,13 +768,13 @@ iframe.embed {
   content:"show map";
 }
 .fixed {
-  position:fixed;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  z-index:3;
-  overflow-y:scroll;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  overflow-y: scroll;
 }
 
 .fixed::-webkit-scrollbar {
@@ -794,7 +794,7 @@ iframe.embed {
 }
 
 .fixed::-moz-scrollbar-track {
-  background:white;
+  background: white;
 }
 
 .fixed::-moz-scrollbar-thumb{
@@ -1116,9 +1116,9 @@ iframe.embed {
 }
 .wallpaper.active .swatches .swatch {
   width: 40px;
-  height: 35px;
+  height: 40px;
   display: inline-block;
-  border:1px solid;
+  border: 1px solid;
   background-size: contain;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   line-height: 0;
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index ecb15ca..55ecf85 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox wallpaper active">
+<div class="vvbox wallpaper">
   <div class="swatches"></div>
   
   <div class="wallpaperUpload">
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 544c37e..7d56b2e 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -41,6 +41,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/models/wall.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_rooms.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_walls.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/builder.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/clipper.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/grouper.js"></script>
@@ -104,6 +105,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/app.js"></script>
+<script type="text/javascript" src="/assets/javascripts/defaults.js"></script>
 
 <!-- external dependencies -->
 <script src="http://www.youtube.com/player_api"></script>
-- 
cgit v1.2.3-70-g09d2