diff options
6 files changed, 201 insertions, 202 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 046961b..f2f395b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -86,8 +86,43 @@ var wall = base.lookup[ wall_data.id ] wall.deserialize( wall_data ) }) + }, + + base.setColor = { + + wall: function(rgb){ + var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) + Walls.colors.wall = rgb + Walls.forEach(function(wall){ + wall.outline(rgbaColor, null) + }) + }, + + outline: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.outline = rgb + Walls.forEach(function(wall){ + wall.outline(null, rgbColor) + }) + }, + + floor: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.floor = rgb + Rooms.forEach(function(room){ + room.setFloorColor(rgbColor) + }) + }, + + ceiling: function(rgb){ + var rgbColor = rgb_string(rgb) + Walls.colors.ceiling = rgb + Rooms.forEach(function(room){ + room.setCeilingColor(rgbColor) + }) + }, + } - } if ('window' in this) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 1632c5b..ac9fdc0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -1,7 +1,7 @@ (function(){ - UndoStack.register([ - { - type: "create-scenery", + UndoStack.register([ + { + type: "create-scenery", undo: function(state){ Scenery.remove(state.id) @@ -14,9 +14,9 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - { - type: "update-scenery", + }, + { + type: "update-scenery", undo: function(state){ var scenery = Scenery.find(state.id) scenery.deserialize(state) @@ -43,9 +43,9 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - { - type: "destroy-scenery", + }, + { + type: "destroy-scenery", undo: function(state){ Scenery.deserialize([ state ]) @@ -58,12 +58,12 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) }, - }, - - // - - { - type: "create-room", + }, + + // + + { + type: "create-room", undo: function(room){ Rooms.remove(room) Rooms.clipper.update() @@ -71,52 +71,55 @@ redo: function(room){ Rooms.add(new Room(room)) Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, - }, - { - type: "update-room", + }, + { + type: "update-room", undo: function(state){ var room = Rooms.list[state.id] room.rect.assign( state.rect ) room.height = state.height Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, redo: function(state){ var room = Rooms.list[state.id] room.rect.assign( state.rect ) room.height = state.height Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, - }, - { - type: "destroy-room", + }, + { + type: "destroy-room", undo: function(room){ Rooms.add(new Room(room)) Rooms.clipper.update() - app.tube("builder-pick-room", room) + app.tube("builder-pick-room", room) }, redo: function(room){ Rooms.remove(room) Rooms.clipper.update() }, - }, - - // + }, + + // - { - type: "update-wallpaper", + { + type: "update-wallpaper", undo: function(state){ var wall = Walls.lookup[state.id] wall.deserialize(state) }, - redo: function(state){ - var wall = Walls.lookup[state.id] - wall.deserialize(state) + }, + { + type: "update-colors", + undo: function(state){ + Walls.setColor[ state.mode ]( state.rgb ) + app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) }, - }, - - ]) + }, + + ]) })() diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 039a053..e6a37e0 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 500 + base.delay = 1000 base.objects = {} base.init = function () { diff --git a/public/assets/javascripts/rectangles/util/undostack.js b/public/assets/javascripts/rectangles/util/undostack.js index b93c79e..959e3d1 100644 --- a/public/assets/javascripts/rectangles/util/undostack.js +++ b/public/assets/javascripts/rectangles/util/undostack.js @@ -31,16 +31,17 @@ this.types[ action.type ].redo(action.redo) return this.pointer < this.stack.length-1 } - UndoStack.prototype.register = function(actionType){ - if (actionType.length) { - actionType.forEach(this.registerOne.bind(this)) + UndoStack.prototype.register = function(actions){ + if (actions.length) { + actions.forEach(this.registerOne.bind(this)) } else { - this.registerOne(actionType) + this.registerOne(actions) } } - UndoStack.prototype.registerOne = function(actionType){ - this.types[ actionType.type ] = actionType + UndoStack.prototype.registerOne = function(action){ + if (! action.redo) { action.redo = action.undo } + this.types[ action.type ] = action } if ('window' in this) { window.UndoStack = new UndoStack diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 84f2e58..76e9da1 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -1,39 +1,41 @@ var LightControl = View.extend({ - el: ".lightcontrol", - - events: { - "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", - "input #outline-hue": "updateShadow", - "input #wall-hue": "updateShadow", - }, - - initialize: function(){ - 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") - }, + el: ".lightcontrol", + + events: { + "mousedown": "stopPropagation", + "click .swatch": "clickSwatch", + "click label": "clickLabel", + "input #shadow-control": "updateShadow", + "mousedown #brightness-control": "beginBrightness", + "input #brightness-control": "updateBrightness", + "input #outline-hue": "updateShadow", + "input #wall-hue": "updateShadow", + }, + + initialize: function(){ + this.colorPicker = new LabColorPicker(this, 180, 180) + this.$el.prepend( this.colorPicker.canvas ) + + this.$swatches = this.$(".swatch") + this.$labels = this.$(".swatch + label") + this.$swatch = { + wall: this.$("#wall-color"), + outline: this.$("#outline-color"), + floor: this.$("#floor-color"), + ceiling: this.$("#ceiling-color"), + } + this.$brightnessControl = this.$("#brightness-control") + }, + modes: [ "wall", "outline", "floor", "ceiling" ], + load: function(data){ - this.setWallColor(data.wall, false) - this.setOutlineColor(data.outline) - this.setFloorColor(data.floor) - this.setCeilingColor(data.ceiling) - this.setMode("wall") + this.modes.forEach(function(mode){ + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + }.bind(this)) + this.setMode("wall") }, loadDefaults: function(){ @@ -45,129 +47,85 @@ var LightControl = View.extend({ } this.load(colors) }, - - toggle: function(state){ + + toggle: function(state){ this.$el.toggleClass("active", state); - }, - - show: function(){ - this.toggle(true) - }, - - hide: function(){ - this.toggle(false) - }, - - pick: function(rgb, Lab){ - this.labColor = Lab - switch (this.mode) { - case "wall": - this.setWallColor(rgb) - break - case "outline": - this.setOutlineColor(rgb) - break - case "floor": - this.setFloorColor(rgb) - break - case "ceiling": - this.setCeilingColor(rgb) - break - } - }, - - setMode: function (mode) { - var color, brightness - this.mode = mode + }, + + show: function(){ + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + pick: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(this.mode, rgb) + Walls.setColor[ this.mode ](rgb) + }, + + setSwatchColor: function(mode, rgb) { + this.$swatch[ mode ].css("background-color", rgb_string(rgb)) + }, + + initialState: null, + + begin: function(){ + this.initialState = this.serialize() + }, + + serialize: function(){ + return { + mode: this.mode, + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + this.initialState = null + + Minotaur.watch( app.router.editorView.settings ) + }, + + 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") - color = this.wallColor - break - case "outline": - this.$outlineSwatch.addClass("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[ mode ].addClass("selected") + color = Walls.colors[ mode ] + this.$(".swatch.selected").next("label").addClass("selected") - this.labColor = this.colorPicker.load(color) - this.$brightnessControl.val( this.labColor[0] ) - }, - - clickLabel: function(e){ - $(e.currentTarget).prev(".swatch").trigger("click") - }, - editWallColor: function(){ - this.setMode("wall") - }, - editOutlineColor: function(){ - this.setMode("outline") - }, - - 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, app.defaults.wallOpacity) - Walls.colors.wall = this.wallColor = rgb - this.$wallSwatch.css("background-color", rgbColor) - Walls.forEach(function(wall){ - wall.outline(rgbaColor, null) - }) - }, - - setFloorColor: function(rgb, repaint){ - repaint = typeof repaint != "undefined" ? repaint : true - var rgbColor = rgb_string(rgb) - Walls.colors.floor = 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) - Walls.colors.ceiling = 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) - Walls.colors.outline = this.outlineColor = rgb - this.$outlineSwatch.css("background-color", rgbColor) - Walls.forEach(function(wall){ - wall.outline(null, rgbColor) - }) - }, - - updateBrightness: function(){ - this.labColor[0] = parseFloat( this.$brightnessControl.val() ) - var rgb = this.colorPicker.setLab( this.labColor ) - this.pick(rgb, this.labColor) - }, + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + }, + + clickLabel: function(e){ + $(e.currentTarget).prev(".swatch").trigger("click") + }, + clickSwatch: function(e){ + var mode = $(e.currentTarget).data('mode') + this.setMode(mode) + }, + + beginBrightness: function(){ + this.begin() + $(window).one("mouseup", this.finalize.bind(this)) + }, + + updateBrightness: function(){ + this.labColor[0] = parseFloat( this.$brightnessControl.val() ) + var rgb = this.colorPicker.setLab( this.labColor ) + this.pick(rgb, this.labColor) + }, }) @@ -185,8 +143,6 @@ var LabColorPicker = function (parent, w, h) { canvas.height = h canvas.className = "colorPicker" - var down = false - var ww = w-1 var hh = h-1 @@ -197,16 +153,20 @@ var LabColorPicker = function (parent, w, h) { var rgb = [0,0,0] var val = 80 - + this.mouse = new mouse({ el: canvas, down: function(e, cursor){ + parent.begin() cursor.x.a = -cursor.x.a base.pick(cursor.x.a, cursor.y.a) }, drag: function(e, cursor){ cursor.x.b = -cursor.x.b base.pick(cursor.x.b, cursor.y.b) + }, + up: function(){ + parent.finalize() } }) diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8536b74..a67df34 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -6,11 +6,11 @@ </div> <div class="color-swatches"> - <div class="swatch" id="wall-color"></div><label>wall</label> - <div class="swatch" id="floor-color"></div><label>floor</label> - <div class="swatch" id="ceiling-color"></div><label>ceiling</label> + <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label> + <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label> + <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label> <br> - <div class="swatch" id="outline-color"></div><label>outlines</label> + <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label> </div> <!-- |