From 2bf7351025b29d1bc8ec2e5792dcb0532c4deb95 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 26 Aug 2014 18:59:24 -0400 Subject: color picker thingie --- .../assets/javascripts/rectangles/models/wall.js | 70 ++++++++++++---------- 1 file changed, 37 insertions(+), 33 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 8723c3c..1dd0ebf 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -82,7 +82,16 @@ } }) }) - this.outline() + + // flip the mx order + var shouldFlip = this.side & (LEFT | BACK) + if (! shouldFlip) { + this.mx.reverse() + } + + var wallColor = "rgba(255,255,255,0.95)" + var outlineColor = "rgba(0,0,0,1.0)" + this.outline(wallColor, outlineColor) } @@ -207,44 +216,39 @@ }) } - Wall.prototype.outline = function(){ + Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK - var shouldFlip = this.side & (LEFT | BACK) var mx = this.mx - if (! shouldFlip) { - mx = mx.reverse() - } - var len = this.mx.length - - var backgroundColor = "rgba(255,255,255,0.95)" - var borderColor = "rgba(0,0,0,1.0)" - - zz = window.zz || 0 + var outlineString = "1px solid " + outlineColor + zz = 0 mx.forEach(function(mx, i){ - if (mx.outlined) return - mx.outlined = true - mx.el.style.backgroundColor = backgroundColor - - // all walls get bottom lines - mx.el.style.borderBottom = "1px solid " + borderColor - - // all walls get top lines - mx.el.style.borderTop = "1px solid " + borderColor - - // walls on initial sides get left lines - // if their left edge lines up with the rect edge - if (i == 0) { - mx.el.style.borderLeft = "1px solid " + borderColor - } - - // walls on terminal sides get right lines.... - // if their right edge lines up with the rect edge - if (i == len-1) { - mx.el.style.borderRight = "1px solid " + borderColor - } + // if (mx.outlined) return + // mx.outlined = true + if (wallColor) { + mx.el.style.backgroundColor = wallColor + } + if (outlineColor) { + // all walls get bottom lines + mx.el.style.borderBottom = outlineString + + // all walls get top lines + mx.el.style.borderTop = outlineString + + // walls on initial sides get left lines + // if their left edge lines up with the rect edge + if (i == 0) { + mx.el.style.borderLeft = outlineString + } + + // walls on terminal sides get right lines.... + // if their right edge lines up with the rect edge + if (i == len-1) { + mx.el.style.borderRight = outlineString + } + } }) } -- cgit v1.2.3-70-g09d2 From a3d40aa3718fce0754d7f78b19de9a00cac15395 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 27 Aug 2014 06:41:33 -0400 Subject: surface thing broke some tests --- public/assets/javascripts/rectangles/models/surface.js | 2 ++ public/assets/javascripts/rectangles/models/wall.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index 636f7c0..ce0efa5 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -147,9 +147,11 @@ Surface.prototype.index_for_x = function(x, min_i){ min_i = min_i || 0 +/* if (min_i >= this.faces.length-1) { return -1 } +*/ for (var i = min_i; i < this.faces.length; i++) { if (this.faces[i].x.contains(x)) { return i diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 1dd0ebf..7aa5578 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -221,7 +221,7 @@ var mx = this.mx var len = this.mx.length - var outlineString = "1px solid " + outlineColor + var outlineString = "10px solid " + outlineColor zz = 0 mx.forEach(function(mx, i){ -- cgit v1.2.3-70-g09d2 From e200f73bdc55e4b6e3dcdf17f5fb5bfd6c020c2a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 28 Aug 2014 17:22:28 -0400 Subject: split out walls stuff, remove dead code --- public/assets/javascripts/app.js | 7 -- public/assets/javascripts/defaults.js | 11 +++ .../javascripts/rectangles/engine/rooms/_rooms.js | 9 --- .../javascripts/rectangles/engine/rooms/_walls.js | 91 ++++++++++++++++++++++ .../javascripts/rectangles/engine/rooms/builder.js | 1 + .../javascripts/rectangles/engine/rooms/grouper.js | 12 +-- .../rectangles/engine/scenery/_scenery.js | 2 +- .../javascripts/rectangles/engine/scenery/undo.js | 4 +- .../assets/javascripts/rectangles/models/room.js | 23 ------ .../assets/javascripts/rectangles/models/wall.js | 34 +++----- .../assets/javascripts/rectangles/util/colors.js | 5 -- .../javascripts/ui/builder/BuilderSettings.js | 2 + .../assets/javascripts/ui/builder/BuilderView.js | 1 + .../assets/javascripts/ui/editor/EditorSettings.js | 10 ++- .../assets/javascripts/ui/editor/LightControl.js | 44 ++++++----- public/assets/stylesheets/app.css | 20 ++--- views/controls/editor/wallpaper.ejs | 2 +- views/partials/scripts.ejs | 2 + 18 files changed, 168 insertions(+), 112 deletions(-) create mode 100644 public/assets/javascripts/defaults.js create mode 100644 public/assets/javascripts/rectangles/engine/rooms/_walls.js (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index ad3c601..1dd8a5e 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -98,11 +98,4 @@ app.position = function(obj){ return pos } -app.defaults = { - viewHeight: window.viewHeight = 186, - units: app.units = "ft", - footResolution: 36, - meterResolution: 100, -} - document.addEventListener('DOMContentLoaded', app.init) diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js new file mode 100644 index 0000000..98ea0c3 --- /dev/null +++ b/public/assets/javascripts/defaults.js @@ -0,0 +1,11 @@ +app.defaults = { + viewHeight: window.viewHeight = 186, + units: app.units = "ft", + footResolution: 36, + meterResolution: 100, + wallOpacity: 0.95, + wallColor: [255,255,255], + outlineColor: [0,0,0], + floorColor: [246,246,246], + ceilingColor: [255,255,255], +} diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 29dee41..5ed7be8 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -35,7 +35,6 @@ var base = this base.list = {} - base.walls = {} base.regions = [] base.uid = new UidGenerator(base.list) @@ -110,14 +109,6 @@ Rooms.clipper.update() } - base.serializeWalls = function(){ - return [] - } - - base.deserializeWalls = function(walls_data){ - return [] - } - base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js new file mode 100644 index 0000000..f5ef6be --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -0,0 +1,91 @@ +(function(){ + + var vec2, Rect, Room, sort, UidGenerator, _ + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + Room = window.Room + sort = window.sort + UidGenerator = window.UidGenerator + _ = window._ + } + else { + vec2 = require('../../models/vec2') + Rect = require('../../models/rect') + Room = require('../../models/room') + UidGenerator = require('../../util/uid') + sort = require('../../util/sort') + _ = require('lodash') + FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 + TOP = CEILING, BOTTOM = FLOOR + function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s + } + } + + var Walls = new function(){ + + var base = this + + base.list = [] + base.lookup = {} + base.colors = {} + + base.first = function(){ + for (var i in base.list) { + if (base.list.hasOwnProperty(i)) { + return base.list[i] + } + } + } + + base.assign = function(list){ + base.list = list + base.lookup = {} + list.forEach(function(wall){ + base.lookup[wall.id] = wall + }) + } + + base.bind = function(){ + base.list.forEach(function(wall){ + wall.bind() + }) + } + + base.count = function(){ + return this.list.length + } + + base.forEach = function(f){ + return base.list.forEach(f) + } + + base.map = function(f){ + return base.list.map(f) + } + + base.serialize = function(){ + return [] + } + + base.deserialize = function(walls_data){ + return [] + } + + } + + if ('window' in this) { + window.Walls = Walls + } + else { + module.exports = Walls + } +})() diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 5396ced..f0935d4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -282,6 +282,7 @@ return el } this.make_wall = function (klass) { + // klass += ".backface-hidden" var el = new MX.Object3D(".face" + (klass || "")) el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1 el.z = el.y = el.x = 0 diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index 2ec1ee7..ba510e1 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -52,8 +52,8 @@ base.group(walls, collections, BACK) base.group(walls, collections, LEFT) base.group(walls, collections, RIGHT) - Rooms.walls = walls - base.bind() + Walls.assign( walls ) + Walls.bind() } base.collect = function(){ var collections = {} @@ -147,7 +147,6 @@ } } wall = new Wall ({ - id: base.uid(), side: side, mx: [ mx ], surface: new Surface( mx.face ), @@ -160,13 +159,6 @@ return walls } - - base.bind = function(){ - Rooms.walls.forEach(function(wall){ - wall.bind() - wall.randomize_colors() - }) - } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 2fd6122..4cf5b06 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -84,7 +84,7 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ - var wall = Rooms.walls[data.wall_id] || Rooms.walls[0] + var wall = Walls.list[data.wall_id] || Walls.first() var scene_media = base.add({ data: data, wall: wall, diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 54ab755..a7e7d61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -20,7 +20,7 @@ undo: function(state){ var scenery = Scenery.find(state.id) scenery.deserialize(state) - scenery.set_wall(Rooms.walls[ state.wall_id ]) + scenery.set_wall(Walls.find( state.wall_id )) if (editor.permissions.resize) { Scenery.resize.show(scenery) @@ -32,7 +32,7 @@ redo: function(state){ var scenery = Scenery.find(state.id) scenery.deserialize(state) - scenery.set_wall(Rooms.walls[ state.wall_id ]) + scenery.set_wall(Walls.find( state.wall_id )) if (editor.permissions.resize) { Scenery.resize.show(scenery) diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 1cc929f..0f09325 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -32,9 +32,6 @@ this.id = opt.id || Rooms.uid("room_") this.rect = opt.rect this.regions = [] - this.walls = [] - this.floor = [] - this.ceiling = [] this.height = opt.height || 200 this.focused = false @@ -69,30 +66,10 @@ this.intersects = [] this.constructed = false - this.walls = [] - this.mx_walls = [] this.mx_floor = [] this.mx_ceiling = [] } - - Room.prototype.bind = function(){ - var base = this - base.mx_walls.forEach(function(wall){ - $(wall.el).bind({ - mouseover: function(){ - }, - mousemove: function(e){ - var color = choice(window.palettes.colors) - base.mx_walls.forEach(function(wall){ - $(wall.el).css("background-color", color) - }) - }, - mousedown: function(){ - } - }) - }) - } Room.prototype.clipTo = function(r){ // for each of this rect's regions split the region if necessary diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 1dd0ebf..61de95e 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -13,7 +13,7 @@ } var Wall = function(opt){ - this.id = opt.id + this.id = [ opt.side, opt.edge, opt.vec.a ].join("_") this.vec = opt.vec this.edge = opt.edge this.side = opt.side @@ -89,9 +89,7 @@ this.mx.reverse() } - var wallColor = "rgba(255,255,255,0.95)" - var outlineColor = "rgba(0,0,0,1.0)" - this.outline(wallColor, outlineColor) + // this.outline(wallColor, outlineColor) } @@ -199,7 +197,7 @@ } Wall.prototype.color = function(color){ - this.$walls && this.$walls.css("background-color", color) + this.$walls.css("background-color", color) } Wall.prototype.wallpaper = function(){ @@ -254,33 +252,21 @@ Wall.prototype.siblings = function(){ return this -// var base = this -// var match = base.side | base.half_side -// var walls = Rooms.list[this.room].walls.filter(function(w){ -// return (w.side | w.half_side) & match && w.$walls -// }) -// return walls - } - - Wall.prototype.randomize_colors = function(){ - var color = window.grayColors[ this.side | this.half_side ] - // this.color(color) } Wall.prototype.stroke_colors = function(){ var color = "#fff" - var siblings = this.siblings() - siblings.forEach(function(w, i){ - if (! w.$walls) return + var len = this.mx.length-1 + this.mx.forEach(function(mx, i){ w.color(color) if (i == 0) { - w.$walls.css("border-left", "1px solid #000") + mx.el.css("border-left", "1px solid #000") } - if (i == siblings.length-1) { - w.$walls.css("border-right", "1px solid #000") + if (i == len) { + mx.el.css("border-right", "1px solid #000") } - w.$walls.css("border-top", "1px solid #000") - w.$walls.css("border-bottom", "1px solid #000") + mx.el.css("border-top", "1px solid #000") + mx.el.css("border-bottom", "1px solid #000") }) } diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 16d34dd..4ad96fc 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -50,11 +50,6 @@ var select = document.querySelector("#palette") select && select.addEventListener("change", function(){ colors = color_palettes[select.value] - Rooms.forEach(function(room){ - room.walls.forEach(function(wall){ - wall.randomize_colors() - }) - }) select.blur() }) diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 0091454..796c398 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -29,6 +29,8 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) + this.parent.lightControl.loadDefaults() + data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop('checked', "checked") diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 555cd58..a89111f 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,6 +11,7 @@ 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 }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e5dd844..2d3201e 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -32,8 +32,16 @@ var EditorSettings = FormView.extend({ this.parent.data = data data.rooms && Rooms.deserialize(data.rooms) + data.walls && Walls.deserialize(data.walls) data.startPosition && scene.camera.move(data.startPosition) - + + if (data.colors) { + this.parent.lightControl.load() + } + else { + this.parent.lightControl.loadDefaults() + } + if (data.isNew) { this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) } diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index a3a19c7..5133de2 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -26,14 +26,25 @@ var LightControl = View.extend({ this.$floorSwatch = this.$("#floor-color") this.$ceilingSwatch = this.$("#ceiling-color") this.$brightnessControl = this.$("#brightness-control") - - this.setMode("wall") - - this.setWallColor(this.wallColor, false) - this.setOutlineColor(this.outlineColor) - this.setFloorColor(this.floorColor) - this.setCeilingColor(this.ceilingColor) }, + + load: function(data){ + this.setWallColor(data.wallColor, false) + this.setOutlineColor(data.outlineColor) + this.setFloorColor(data.floorColor) + this.setCeilingColor(data.ceilingColor) + this.setMode("wall") + }, + + loadDefaults: function(){ + var colors = { + wallColor: app.defaults.wallColor.slice(), + outlineColor: app.defaults.outlineColor.slice(), + floorColor: app.defaults.floorColor.slice(), + ceilingColor: app.defaults.ceilingColor.slice(), + } + this.load(colors) + }, toggle: function(state){ this.$el.toggleClass("active", state); @@ -65,11 +76,6 @@ var LightControl = View.extend({ } }, - wallColor: [255,255,255], - outlineColor: [0,0,0], - floorColor: [246,246,246], - ceilingColor: [255,255,255], - setMode: function (mode) { var color, brightness this.mode = mode @@ -119,10 +125,10 @@ var LightControl = View.extend({ setWallColor: function(rgb, repaint){ repaint = typeof repaint != "undefined" ? repaint : true var rgbColor = rgb_string(rgb) - var rgbaColor = rgba_string(rgb, 0.95) - this.wallColor = rgb + var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) + Walls.colors.wall = this.wallColor = rgb this.$wallSwatch.css("background-color", rgbColor) - Rooms.walls.forEach(function(wall){ + Walls.forEach(function(wall){ wall.outline(rgbaColor, null) }) }, @@ -130,7 +136,7 @@ var LightControl = View.extend({ setFloorColor: function(rgb, repaint){ repaint = typeof repaint != "undefined" ? repaint : true var rgbColor = rgb_string(rgb) - this.floorColor = rgb + Walls.colors.floor = this.floorColor = rgb this.$floorSwatch.css("background-color", rgbColor) Rooms.forEach(function(room){ room.setFloorColor(rgbColor) @@ -140,7 +146,7 @@ var LightControl = View.extend({ setCeilingColor: function(rgb, repaint){ repaint = typeof repaint != "undefined" ? repaint : true var rgbColor = rgb_string(rgb) - this.ceilingColor = rgb + Walls.colors.ceiling = this.ceilingColor = rgb this.$ceilingSwatch.css("background-color", rgbColor) Rooms.forEach(function(room){ room.setCeilingColor(rgbColor) @@ -150,9 +156,9 @@ var LightControl = View.extend({ setOutlineColor: function(rgb){ repaint = typeof repaint != "undefined" ? repaint : true var rgbColor = rgb_string(rgb) - this.outlineColor = rgb + Walls.colors.outline = this.outlineColor = rgb this.$outlineSwatch.css("background-color", rgbColor) - Rooms.walls.forEach(function(wall){ + Walls.forEach(function(wall){ wall.outline(null, rgbColor) }) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 493cf67..c2e7119 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -768,13 +768,13 @@ iframe.embed { content:"show map"; } .fixed { - position:fixed; - top:0; - left:0; - width:100%; - height:100%; - z-index:3; - overflow-y:scroll; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 3; + overflow-y: scroll; } .fixed::-webkit-scrollbar { @@ -794,7 +794,7 @@ iframe.embed { } .fixed::-moz-scrollbar-track { - background:white; + background: white; } .fixed::-moz-scrollbar-thumb{ @@ -1116,9 +1116,9 @@ iframe.embed { } .wallpaper.active .swatches .swatch { width: 40px; - height: 35px; + height: 40px; display: inline-block; - border:1px solid; + border: 1px solid; background-size: contain; -webkit-transition: -webkit-transform 0.1s ease-in-out; line-height: 0; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index ecb15ca..55ecf85 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -1,4 +1,4 @@ -
+
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 544c37e..7d56b2e 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -41,6 +41,7 @@ + @@ -104,6 +105,7 @@ + -- cgit v1.2.3-70-g09d2 From 8abb36413413363f226486c78e7c01e7c37632bd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 29 Aug 2014 21:01:45 -0400 Subject: store wallpaper and undo setting it --- .../javascripts/rectangles/engine/rooms/_walls.js | 14 ++- .../javascripts/rectangles/engine/scenery/undo.js | 4 + .../assets/javascripts/rectangles/models/wall.js | 99 +++++++--------------- 3 files changed, 44 insertions(+), 73 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f5ef6be..046961b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -73,12 +73,20 @@ } 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 ) + }) + } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index a7e7d61..1632c5b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -109,8 +109,12 @@ { 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) }, }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 61de95e..f04ac2d 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 } -- cgit v1.2.3-70-g09d2 From f40b8ec59a81d0b82fb1b8083742e1ff8b7b29a9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 29 Aug 2014 22:18:17 -0400 Subject: etc --- public/assets/javascripts/rectangles/engine/scenery/undo.js | 4 ++++ public/assets/javascripts/rectangles/models/wall.js | 7 +------ public/assets/javascripts/ui/editor/LightControl.js | 2 -- 3 files changed, 5 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index ac9fdc0..e5624a0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -111,6 +111,8 @@ undo: function(state){ var wall = Walls.lookup[state.id] wall.deserialize(state) + + Minotaur.watch( app.router.editorView.settings ) }, }, { @@ -118,6 +120,8 @@ undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + + Minotaur.watch( app.router.editorView.settings ) }, }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 05a78f7..0f74f4c 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -70,9 +70,6 @@ undo: { id: scenery.id }, redo: scenery.serialize(), }) - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) } else if (Scenery.nextWallpaper) { var oldState = base.serialize() @@ -84,9 +81,7 @@ undo: oldState, redo: base.serialize(), }) - - Minotaur.watch( app.router.editorView.settings ) - } + } else { app.controller.hideExtras() } diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 76e9da1..bd09dc2 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -91,8 +91,6 @@ var LightControl = View.extend({ redo: this.serialize(), }) this.initialState = null - - Minotaur.watch( app.router.editorView.settings ) }, setMode: function (mode) { -- cgit v1.2.3-70-g09d2 From 851ddfd46abb7f944c1a6b7f198b5fd8cabd4c13 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 29 Aug 2014 22:21:16 -0400 Subject: outline thickness --- public/assets/javascripts/defaults.js | 1 + public/assets/javascripts/rectangles/models/wall.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/models/wall.js') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 98ea0c3..5573073 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -5,6 +5,7 @@ app.defaults = { meterResolution: 100, wallOpacity: 0.95, wallColor: [255,255,255], + outlineWidth: 2, outlineColor: [0,0,0], floorColor: [246,246,246], ceilingColor: [255,255,255], diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 0f74f4c..6043181 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -193,7 +193,7 @@ var mx = this.mx var len = this.mx.length - var outlineString = "10px solid " + outlineColor + var outlineString = app.defaults.outlineWidth + "px solid " + outlineColor zz = 0 mx.forEach(function(mx, i){ -- cgit v1.2.3-70-g09d2