display room dimensions

11 files changed, 107 insertions, 5 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index ea7a356..577ea32 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -53,16 +53,21 @@ Map.UI.Editor = function(map){
 		if (intersects.length && base.permissions.destroy) {
 			base.mouse.down = false
 			Rooms.remove(intersects[0])
+			app.tube("builder-destroy-room", intersects[0])
 			return
 		}
 		else if (intersects.length && (base.permissions.move || base.permissions.resize)) {
 			base.dragging = intersects[0]
 			base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
 			base.dragging.rect.translation.sides = base.resizing
+			app.tube("builder-pick-room", intersects[0])
 		}
 		else if (base.permissions.create) {
 			base.creating = true
 		}
+		else if (intersects.length) {
+			app.tube("builder-pick-room", intersects[0])
+		}
 
 		if (e.shiftKey && base.dragging) {
 			base.dragging.rect.quantize(10/map.zoom)
@@ -109,7 +114,8 @@ Map.UI.Editor = function(map){
 			if (cursor.height() > side_min && cursor.width() > side_min) {
 				cursor.x.abs().quantize(1)
 				cursor.y.abs().quantize(1)
-				Rooms.add_with_rect( cursor )
+				var room = Rooms.add_with_rect( cursor )
+				app.tube("builder-pick-room", room)
 			}
 		}
 		
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 48931e9..e0033e3 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -26,6 +26,7 @@ var Rooms = new function(){
 			height: 500
 		})
 		base.add(room)
+		return room
 	}
 	
 	base.remove = function(room){
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
new file mode 100644
index 0000000..53a122d
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -0,0 +1,70 @@
+
+var BuilderInfo = View.extend({
+	el: "#builderInfo",
+
+	events: {
+		"keydown": 'stopPropagation',
+		"change [name=x]": 'changePosition',
+		"change [name=z]": 'changePosition',
+		"change [name=width]": 'changeDimensions',
+		"change [name=depth]": 'changeDimensions',
+		"change [name=height]": 'changeDimensions',
+		"change [name=units]": 'changeUnits',
+		"change [name=resolution]": 'changeResolution',
+		"change [name=camera-height]": 'changeCameraHeight',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.$x = this.$("[name=x]")
+		this.$z = this.$("[name=z]")
+		this.$width = this.$("[name=width]")
+		this.$depth = this.$("[name=depth]")
+		this.$height = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		this.$resolution = this.$("[name=resolution]")
+		this.$cameraHeight = this.$("[name=camera-height]")
+		app.on("builder-pick-room", this.pick.bind(this))
+		app.on("builder-destroy-room", this.destroy.bind(this))
+	},
+
+	toggle: function(state){
+		this.$el.toggleClass("active", state)
+	},
+	
+	show: function(){	
+		this.toggle(true)
+	},
+	
+	hide: function(){	
+		this.toggle(false)
+	},
+
+	room: null,
+	
+	pick: function(room){
+		this.room = room
+		this.$width.val( room.rect.x.length() )
+		this.$depth.val( room.rect.y.length() )
+		this.$height.val( room.height )
+		this.$x.val( room.rect.x.a )
+		this.$z.val( room.rect.y.a )
+
+		console.log(room)
+	},
+
+	destroy: function(room){
+		this.room = null
+		this.hide()
+	},
+	
+	changeDimensions: function(){
+	},
+	
+	changeUnits: function(){
+	},
+	
+	changeCameraHeight: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 6006868..c551f95 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -7,6 +7,7 @@ var BuilderSettings = FormView.extend({
 	destroyAction: "/api/layout/destroy",
 
 	events: {
+		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='save-layout']": 'save',
 		"click [data-role='clone-layout']": 'clone',
@@ -69,8 +70,8 @@ var BuilderSettings = FormView.extend({
 		}.bind(this))
 	},
 
-	toggle: function(){
-		this.$el.toggleClass("active")
+	toggle: function(state){
+		this.$el.toggleClass("active", state)
 	},
 
 	enterSubmit: function (e) {
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index a83bf43..7a92738 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -8,6 +8,7 @@ var BuilderView = View.extend({
 	},
 	
 	initialize: function(){
+		this.info = new BuilderInfo ({ parent: this })
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
 	},
@@ -26,5 +27,8 @@ var BuilderView = View.extend({
 	ready: function(data){
 		this.settings.load(data)
 	},
+	
+	hideExtras: function(){
+	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 887c894..13a6f60 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -7,6 +7,7 @@ var EditorSettings = FormView.extend({
 	destroyAction: "/api/project/destroy",
 
 	events: {
+		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='save-project']": 'save',
 		"click [data-role='clone-project']": 'clone',
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index f9eaad5..a075e6b 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,6 +3,7 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
+		"keydown": 'stopPropagation',
 		"click [data-role=play-media]": "togglePaused",
 		"mousedown [name=keyframe]": "stopPropagation",
 		"mousedown": "stopPropagation",
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 2e3358a..3e6dced 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1247,6 +1247,17 @@ input[type="range"]::-webkit-slider-thumb {
 	position: relative;
 	top: 5px;
 }
+.setting.number.halflines {
+	height: 30px;
+}
+.setting.number.halflines input[type=text] {
+	float: left;
+	width: 50px;
+}
+.setting.number.halflines label:nth-of-type(2) {
+	text-align: center;
+}
+
 .setting.number input[type=text] {
 	width: 150px;
 }
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index b096b85..33a5262 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -25,6 +25,7 @@ var LayoutSchema = new mongoose.Schema({
 	},
 	rooms: [mongoose.Schema.Types.Mixed],
 	startPosition: mongoose.Schema.Types.Mixed,
+	cameraHeight: { type: Number, default: 180 },
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index af0a76d..2cc8132 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -11,6 +11,12 @@
 		<label for="room-height">ceiling height</label>
 		<input type="text" name="height" id="room-height">
 	</div>
+	<div class="setting number halflines">
+		<label for="room-x">x</label>
+		<input type="text" name="x" id="room-x">
+		<label for="room-z">z</label>
+		<input type="text" name="z" id="room-z">
+	</div>
 
 	<div class="setting number twoline">
 		<label for="builder-units">units</label>
@@ -29,7 +35,6 @@
 	<div class="setting number twoline">
 		<label for="camera-height">camera height</label>
 		<input type="text" name="camera-height" id="camera-height">
-		<span class="unitName"></span>
 	</div>
 
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 47a027e..2173cd5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -72,9 +72,10 @@
 <script type="text/javascript" src="/assets/javascripts/ui/site/DocumentModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/ProfileView.js"></script>
 
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>