diff options
Diffstat (limited to 'public/assets/javascripts/ui/builder')
4 files changed, 102 insertions, 25 deletions
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index e6b7e97..aa58d6e 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -3,15 +3,21 @@ var BuilderInfo = View.extend({ el: "#builderInfo", events: { + "mousedown": "stopPropagation", "keydown": 'stopPropagation', "change [name=x]": 'changeX', "change [name=y]": 'changeY', "change [name=width]": 'changeWidth', "change [name=depth]": 'changeDepth', "change [name=height]": 'changeHeight', + "keydown [name=width]": 'enterWidth', + "keydown [name=depth]": 'enterDepth', + "keydown [name=height]": 'enterHeight', "change [name=units]": 'changeUnits', - "change [name=resolution]": 'changeResolution', + "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', + "change [name=heightGlobal]": 'changeHeightGlobal', + "click [data-role=destroy-room]": 'destroy', }, initialize: function(opt){ @@ -24,25 +30,51 @@ var BuilderInfo = View.extend({ this.$units = this.$("[name=units]") this.$viewHeight = this.$("[name=viewHeight]") this.$unitName = this.$(".unitName") + this.$noSelection = this.$(".no-selection") + this.$settings = this.$(".setting") + this.$heightGlobalCheckbox = this.$("[name=heightGlobal]") app.on("builder-pick-room", this.pick.bind(this)) - app.on("builder-destroy-room", this.destroy.bind(this)) + app.on("builder-destroy-room", this.hide.bind(this)) + app.on("builder-pick-nothing", this.deselect.bind(this)) }, load: function(data){ - this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) - this.$units.val( "ft" ) - this.$unitName.html( "ft" ) + this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) + this.$units.val( data.units || "ft" ) + this.$unitName.html( data.units || "ft" ) + + if (Rooms.regions.length == 0) { + this.changeHeightGlobal(true) + } + else { + var rooms = Rooms.values() + var height = rooms[0].height + var differentHeights = Rooms.some(function(room){ + return room.height != height + }) + this.changeHeightGlobal( ! differentHeights ) + } }, toggle: function(state){ + this.$settings.toggle( !! this.room ) + this.$noSelection.toggle( ! this.room ) this.$el.toggleClass("active", state) + if (state) { + this.$viewHeight.unitVal( window.viewHeight ) + this.parent.cursor.message("builder") + } + else { + this.parent.cursor.message("start") + } }, show: function(){ this.toggle(true) }, - hide: function(){ + hide: function(){ + this.room = null this.toggle(false) }, @@ -57,43 +89,84 @@ var BuilderInfo = View.extend({ this.$y.unitVal( room.rect.y.a ) this.show() }, + + deselect: function(){ + this.room = null + this.toggle(true) + }, + + destroy: function(){ + UndoStack.push({ + type: "destroy-room", + undo: this.room.copy(), + redo: { id: this.room.id }, + }) + + Rooms.remove(this.room) + app.tube("builder-destroy-room", this.room) - destroy: function(room){ this.room = null this.hide() }, + enterWidth: function(e){ + if (e.keyCode == 13) this.changeWidth(e) + }, changeWidth: function(e){ e.stopPropagation() this.room.rect.x.setLength( this.$width.unitVal() ) - Rooms.clipper.update() + Rooms.rebuild() + }, + + enterDepth: function(e){ + if (e.keyCode == 13) this.changeDepth(e) }, changeDepth: function(e){ e.stopPropagation() this.room.rect.y.setLength( this.$depth.unitVal() ) - Rooms.clipper.update() + Rooms.rebuild() + }, + + enterHeight: function(e){ + if (e.keyCode == 13) this.changeHeight(e) }, changeHeight: function(e){ e.stopPropagation() - this.room.height = this.$height.unitVal() - Rooms.clipper.update() + var height = this.room.height = this.$height.unitVal() + if (window.heightIsGlobal) { + Rooms.forEach(function(room){ + room.height = height + }) + } + Rooms.rebuild() }, changeX: function(e){ e.stopPropagation() this.room.rect.x.setPosition( this.$x.unitVal() ) - Rooms.clipper.update() + Rooms.rebuild() }, changeY: function(e){ e.stopPropagation() this.room.rect.y.setPosition( this.$y.unitVal() ) - Rooms.clipper.update() + Rooms.rebuild() }, changeUnits: function(){ app.units = this.$units.val() this.$('.units').resetUnitVal() }, - changeViewHeight: function(){ + enterViewHeight: function(e){ + if (e.keyCode == 13) this.changeViewHeight(e) + }, + changeViewHeight: function(){ window.viewHeight = this.$viewHeight.unitVal( ) }, + changeHeightGlobal: function(state){ + if (typeof state == "boolean") { + this.$heightGlobalCheckbox.prop("checked", state) + window.heightIsGlobal = state + return + } + window.heightIsGlobal = this.$heightGlobalCheckbox.prop("checked") + }, }) diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 94eed29..256bffe 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: { + "mousedown": "stopPropagation", "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-layout']": 'clickSave', @@ -29,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) @@ -51,7 +52,7 @@ var BuilderSettings = FormView.extend({ this.$name.val( names.join(" ") ) this.action = this.createAction - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/layout/new") }, clear: function(){ @@ -107,7 +108,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() + var thumbnail = map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -115,7 +116,7 @@ var BuilderSettings = FormView.extend({ fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) return fd }, diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 2eb7590..e9dcce3 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -3,6 +3,7 @@ var BuilderToolbar = View.extend({ el: "#builderToolbar", events: { + "mousedown": "stopPropagation", "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-layout-settings']": 'toggleSettings', "click [data-role='undo']": 'undo', @@ -59,6 +60,9 @@ var BuilderToolbar = View.extend({ var state = map.ui.permissions.toggle("destroy") $(".inuse").removeClass("inuse") $(e.currentTarget).toggleClass("inuse", state) + if (! state) { + this.resetPermissions() + } }, }) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 81dce52..b975499 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,12 +11,8 @@ 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 }) - - app.on("rooms-built", function(){ - Walls.paint() - }) - + this.colorControl = new ColorControl ({ parent: this }) + this.cursor = new HelpCursor({ parent: this }) }, load: function(name){ @@ -36,6 +32,9 @@ var BuilderView = View.extend({ }, hideExtras: function(){ - } + }, + + pickWall: function(wall, pos){ + }, }) |