diff options
7 files changed, 243 insertions, 273 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f5ef6be..f2f395b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -73,13 +73,56 @@ } base.serialize = function(){ - return [] + var data = [] + base.list.forEach(function(wall){ + data.push(wall.serialize()) + }) + return data } base.deserialize = function(walls_data){ - return [] - } - + walls_data.forEach(function(wall_data){ + if (! wall_data) { return } + 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 a7e7d61..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,48 +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){ + }, + { + 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/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index d606fac..05a78f7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -19,6 +19,7 @@ this.side = opt.side this.surface = opt.surface this.mx = opt.mx + this.background = "" } Wall.prototype.toString = function(){ @@ -63,7 +64,7 @@ e.stopPropagation() return } - + UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, @@ -74,7 +75,17 @@ Minotaur.watch( app.router.editorView.settings ) } else if (Scenery.nextWallpaper) { - base.wallpaper() + var oldState = base.serialize() + base.wallpaper(Scenery.nextWallpaper) + Scenery.nextWallpaper = null + + UndoStack.push({ + type: 'update-wallpaper', + undo: oldState, + redo: base.serialize(), + }) + + Minotaur.watch( app.router.editorView.settings ) } else { app.controller.hideExtras() @@ -91,6 +102,17 @@ // this.outline(wallColor, outlineColor) } + + Wall.prototype.serialize = function(){ + return { + id: this.id, + background: this.background, + } + } + + Wall.prototype.deserialize = function(data){ + this.wallpaper( data.background ) + } // wall @@ -147,69 +169,26 @@ position.a -= dimension.a / 2 position.b -= dimension.b / 2 } -// if (mx.width) { position.a -= mx.width / 2 } -// if (mx.height) { position.b -= mx.height / 2 } return position } - Wall.prototype.bounds_for = function(img, scale) { - scale = scale || 1 - var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y - var halfWidth = img.width/2 * scale - var halfHeight = img.height/2 * scale - - return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ), - new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) - } - - Wall.prototype.fits = function(img, scale){ - if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { - return false - } - if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * scale) { - return false - } - return true - } - - Wall.prototype.center = function(offset){ - - switch (this.side) { - case FRONT: - x = this.vec.midpoint() - z = this.edge + painting_distance_from_wall - break - case BACK: - x = this.vec.midpoint() - z = this.edge - painting_distance_from_wall - break - case LEFT: - x = this.edge + painting_distance_from_wall - z = this.vec.midpoint() - break - case RIGHT: - x = this.edge - painting_distance_from_wall - z = this.vec.midpoint() - break - } - - return new vec2 (x, z) - } - Wall.prototype.color = function(color){ this.$walls.css("background-color", color) } - Wall.prototype.wallpaper = function(){ + Wall.prototype.wallpaper = function(background){ var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) + + this.background = background || "none" + this.mx.forEach(function(mx){ var partitionOffset = useX ? mx.x : mx.z if (shouldFlip) partitionOffset *= -1 partitionOffset += mx.width/2 var floorOffset = mx.y + mx.height/2 - mx.el.style.backgroundImage = Scenery.nextWallpaper + mx.el.style.backgroundImage = background mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" }) } @@ -250,26 +229,6 @@ }) } - Wall.prototype.siblings = function(){ - return this - } - - Wall.prototype.stroke_colors = function(){ - var color = "#fff" - var len = this.mx.length-1 - this.mx.forEach(function(mx, i){ - w.color(color) - if (i == 0) { - mx.el.css("border-left", "1px solid #000") - } - if (i == len) { - mx.el.css("border-right", "1px solid #000") - } - mx.el.css("border-top", "1px solid #000") - mx.el.css("border-bottom", "1px solid #000") - }) - } - if ('window' in this) { window.Wall = Wall } 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> <!-- |