display room dimensions

7 files changed, 87 insertions, 3 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",