diff options
30 files changed, 509 insertions, 337 deletions
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 f321f71..f0935d4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -165,7 +165,6 @@ room.mx_ceiling.push(el) } }.bind(this)) - } else { // render floor and ceiling for the entire rectangle @@ -282,8 +281,8 @@ el.side = CEILING 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 @@ -293,7 +292,7 @@ el.side = 0 el.rect = null el.destroy = function(){ - this.el = this.rect = this.face = null + this.el = this.rect = this.face = null } // possible if walls are opaque diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index cde9fbb..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 = {} @@ -83,7 +83,10 @@ collection.sort( useX ? sort.compare_zx : sort.compare_xz ) collection.forEach(function(mx){ - if (last_mx && last_mx.rect.eq(mx.rect)) { + if (mx.culled) { + return + } + if (last_mx && mx && last_mx.rect.eq(mx.rect)) { // culls half-walls if (last_mx.rect.id == mx.rect.id) { last_mx.height += mx.height/2 @@ -91,9 +94,11 @@ last_mx.face.y.b += mx.height/2 } last_mx.side = side - mx.culled = true - mx.destroy() - scene.remove(mx) + if (! mx.culled) { + scene.remove(mx) + mx.destroy() + mx.culled = true + } return } widthVec = mx.rect[useX ? 'x' : 'y'].clone() @@ -142,7 +147,6 @@ } } wall = new Wall ({ - id: base.uid(), side: side, mx: [ mx ], surface: new Surface( mx.face ), @@ -155,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 33a94d0..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 @@ -182,6 +159,18 @@ return collision } + Room.prototype.setFloorColor = function(rgbColor) { + this.mx_floor.map(function(mx){ + mx.el.style.backgroundColor = rgbColor + }) + } + + Room.prototype.setCeilingColor = function(rgbColor) { + this.mx_ceiling.map(function(mx){ + mx.el.style.backgroundColor = rgbColor + }) + } + if ('window' in this) { window.Room = Room } diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index ce0efa5..53977c8 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -147,11 +147,6 @@ 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 7aa5578..d606fac 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..2a3929a 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 && data.colors.wall) { + this.parent.lightControl.load(data.colors) + } + else { + this.parent.lightControl.loadDefaults() + } + if (data.isNew) { this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) } @@ -128,7 +136,8 @@ var EditorSettings = FormView.extend({ fd.append( "description", this.$description.val() ) fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) - fd.append( "walls", JSON.stringify( Rooms.serializeWalls() ) ) + fd.append( "walls", JSON.stringify( Walls.serialize() ) ) + fd.append( "colors", JSON.stringify( Walls.colors ) ) fd.append( "media", JSON.stringify( Scenery.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 1bd660e..84f2e58 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -6,6 +6,8 @@ var LightControl = View.extend({ "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", @@ -17,15 +19,32 @@ var LightControl = View.extend({ 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") - - this.setMode("wall") - - this.setWallColor([255,255,255], false) - this.setOutlineColor([0,0,0]) }, + + load: function(data){ + this.setWallColor(data.wall, false) + this.setOutlineColor(data.outline) + this.setFloorColor(data.floor) + this.setCeilingColor(data.ceiling) + this.setMode("wall") + }, + + loadDefaults: function(){ + var colors = { + wall: app.defaults.wallColor.slice(), + outline: app.defaults.outlineColor.slice(), + floor: app.defaults.floorColor.slice(), + ceiling: app.defaults.ceilingColor.slice(), + } + this.load(colors) + }, toggle: function(state){ this.$el.toggleClass("active", state); @@ -48,27 +67,39 @@ var LightControl = View.extend({ case "outline": this.setOutlineColor(rgb) break + case "floor": + this.setFloorColor(rgb) + break + case "ceiling": + this.setCeilingColor(rgb) + break } }, - wallColor: [255,255,255], - outlineColor: [0,0,0], - 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") - this.$outlineSwatch.removeClass("selected") color = this.wallColor break case "outline": this.$outlineSwatch.addClass("selected") - this.$wallSwatch.removeClass("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.selected").next("label").addClass("selected") this.labColor = this.colorPicker.load(color) this.$brightnessControl.val( this.labColor[0] ) }, @@ -83,23 +114,51 @@ var LightControl = View.extend({ this.setMode("outline") }, - setWallColor: function(rgb, repaint){ + 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, 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) }) }, + 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) - 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) }) }, @@ -170,7 +229,6 @@ var LabColorPicker = function (parent, w, h) { var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) // move the cursor this.setLab(Lab) - console.log(rgba) return Lab } this.paint = function() { diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 86bf767..92cf2bd 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -1,5 +1,5 @@ -var MediaUpload = View.extend({ +var MediaUpload = UploadView.extend({ el: ".fileUpload", createAction: "/api/media/new", @@ -7,16 +7,12 @@ var MediaUpload = View.extend({ events: { "keydown .url": "enterSubmit", - "change .file": "handleFileSelect", - "submit form": "preventDefault", }, initialize: function(opt){ + this.__super__.initialize.call(this) this.parent = opt.parent - this.$csrf = this.$("[name=_csrf]") this.$url = this.$(".url") - this.$file = this.$(".file") - this.$upload = this.$(".upload-icon") }, show: function(){ @@ -45,7 +41,7 @@ var MediaUpload = View.extend({ return } - media._csrf = this.$csrf.val() + media._csrf = $("[name=_csrf]").val() console.log(media) var request = $.ajax({ @@ -57,68 +53,13 @@ var MediaUpload = View.extend({ }.bind(this)) }, - handleFileSelect: function(e) { - e.stopPropagation(); - e.preventDefault(); - - this.parent.mediaViewer.deleteArmed(false) - - var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - - for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*')) { - continue; - } - - this.getImageDimensions(f) - } - }, - - getImageDimensions: function(f){ - var base = this - - this.$upload.addClass('uploading') - - var reader = new FileReader(); - - reader.onload = function(e) { - var image = new Image() - image.onload = function(){ - var width = image.naturalWidth, - height = image.naturalHeight - base.upload(f, width, height) - } - image.src = e.target.result - } - - reader.readAsDataURL(f); - }, - - upload: function(f, width, height){ - var fd = new FormData() - fd.append('image', f) - fd.append('width', width) - fd.append('height', height) - fd.append('_csrf', this.$csrf.val()) - - var request = $.ajax({ - url: this.uploadAction, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done(this.add.bind(this)) - }, - add: function(media){ console.log(media) - if (media.error) { - return - } - this.$upload.removeClass('uploading') this.parent.mediaViewer.add(media) + }, + + beforeUpload: function(){ + this.parent.mediaViewer.deleteArmed(false) } }) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 40bfe80..7cfa863 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -2,6 +2,7 @@ var MediaViewer = ModalView.extend({ el: ".mediaDrawer.mediaViewer", destroyAction: "/api/media/destroy", + usesFileUpload: true, events: { 'click .foundToggle': "foundToggle", diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 2309e22..61ecb78 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -1,44 +1,70 @@ -var WallpaperPicker = View.extend({ +var WallpaperPicker = UploadView.extend({ el: ".wallpaper", + mediaTag: "wallpaper", + uploadAction: "/api/media/upload", + events: { "click .swatch": 'pick', - }, + }, initialize: function(){ - this.el.innerHTML = "wallpaper coming soon" - this.el.style.padding = "10px" - this.el.style.fontWeight = "300" - return - var wm = new WallpaperManager() - app.on('wallpaper-ready', function(){ - var black = [0,0,0,1.0] - var white = [255,255,255,1.0] - var swatches = wm.buildSwatches(black, white, 2) - swatches.forEach(function(swatch){ - var dataUrl = swatch.toDataURL() - var span = document.createElement('span') - span.style.backgroundImage = "url(" + dataUrl + ")" - span.className = "swatch" - this.$el.append(span) - }.bind(this)) - }.bind(this)) - wm.init() + this.__super__.initialize.call(this) + this.$swatches = this.$(".swatches") + }, + + loaded: false, + show: function(){ + if (! this.loaded) { + this.load() + } + else { + this.toggle(true) + } + }, + + hide: function(){ + this.__super__.hide.call(this) }, - toggle: function(state){ - this.$el.toggleClass("active", state); - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper"); + load: function(){ + $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, - show: function(){ - this.toggle(true) + + populate: function(data){ + console.log(data) + this.loaded = true + data && data.forEach(this.add.bind(this)) + this.toggle(true) + }, + + add: function (media) { + if (media.type !== "image") { return } + var swatch = document.createElement("div") + swatch.className = "swatch" + swatch.style.backgroundImage = "url(" + media.url + ")" + this.$swatches.append(swatch) + }, + + toggle: function (state) { + if (state && ! this.loaded) { + this.show() + } + else { + this.$el.toggleClass("active", state) + } + // toggle the class that makes the cursor a paintbucket + // $("body").removeClass("pastePaper") }, + hide: function(){ this.toggle(false) }, + beforeUpload: function(){ + }, + pick: function(e){ var $swatch = $(e.currentTarget) var $floatingSwatch = $(".floatingSwatch") @@ -62,94 +88,6 @@ var WallpaperPicker = View.extend({ $floatingSwatch.show() _followCursor(e); }) - } + }, }) - -// pattern -// scale -// foreground -// background - -var WallpaperManager = function () { - - var image = new Image () - var imageData - var w, h - - this.masks = [] - - this.init = function(){ - this.load() - } - - this.load = function(){ - image.onload = function(){ - this.loadImageData() - this.buildMasks() - app.tube('wallpaper-ready') - }.bind(this) - - image.src = "/assets/img/palette.gif" - } - - this.loadImageData = function(){ - var canvas = document.createElement('canvas') - var ctx = canvas.getContext('2d') - w = canvas.width = image.naturalWidth - h = canvas.height = image.naturalHeight - ctx.drawImage(image, 0,0) - imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data - } - - this.buildMasks = function(){ - var mask - for (var y = 0; y < 6; y++) { - for (var x = 0; x < 16; x++) { - mask = this.buildMask(x,y) - this.masks.push(mask) - } - } - } - - this.buildMask = function(x,y){ - // add the offset of the top-left swatch - x = (x * 18) + 15 - y = (y * 16) + 5 - - var mask = new Array(64) - var t = 0 - for (var i = 0; i < 8; i++) { - for (var j = 0; j < 8; j++) { - t = ( w*(y+j) + x+i ) * 4 - mask[j*8+i] = imageData[t] === 0 - } - } - return mask - } - - this.buildSwatches = function(black, white, scale) { - var swatches = this.masks.map(function(mask){ - return this.buildSwatch(mask,black,white,scale) - }.bind(this)) - - return swatches - } - - this.buildSwatch = function(mask,black,white,scale){ - black = 'rgba(' + black.join(',') + ')' - white = 'rgba(' + white.join(',') + ')' - var canvas = document.createElement("canvas") - canvas.width = 8*scale - canvas.height = 8*scale - var ctx = canvas.getContext('2d') - for (var i = 0; i < 8; i++) { - for (var j = 0; j < 8; j++) { - ctx.fillStyle = mask[j*8+i] ? black : white - ctx.fillRect(i*scale, j*scale, scale, scale) - } - } - return canvas - } - -}
\ No newline at end of file diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index 937c1e9..d9b518a 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -10,9 +10,15 @@ var ModalView = View.extend({ } }, + usesFileUpload: false, + show: function(){ $(".mediaDrawer").removeClass("active") - $(".fileUpload").removeClass("active") + + if (! this.usesFileUpload) { + $(".fileUpload").removeClass("active") + } + this.$el.addClass("active") $("body").addClass("noOverflow") }, @@ -32,4 +38,5 @@ var ModalView = View.extend({ this.hide() } } + }) diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js new file mode 100644 index 0000000..efaa8c9 --- /dev/null +++ b/public/assets/javascripts/ui/lib/UploadView.js @@ -0,0 +1,90 @@ + +var UploadView = View.extend({ + + // define uploadAction + + events: { + "change .file": "handleFileSelect", + "submit form": "preventDefault", + }, + + initialize: function(){ + this.$file = this.$(".file") + this.$upload = this.$(".upload-icon") + }, + + beforeUpload: function(){ + }, + + handleFileSelect: function(e) { + e.stopPropagation(); + e.preventDefault(); + + this.beforeUpload() + + var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; + + for (var i = 0, f; f = files[i]; i++) { + if ( ! f.type.match('image.*')) { + continue; + } + + this.getImageDimensions(f) + } + }, + + getImageDimensions: function(f){ + var base = this + + this.$upload.addClass('uploading') + + var reader = new FileReader(); + + reader.onload = function(e) { + var image = new Image() + image.onload = function(){ + var width = image.naturalWidth, + height = image.naturalHeight + base.upload(f, width, height) + } + image.src = e.target.result + } + + reader.readAsDataURL(f); + }, + + upload: function(f, width, height){ + var fd = new FormData() + fd.append('image', f) + fd.append('width', width) + fd.append('height', height) + fd.append('_csrf', $("[name=_csrf]").val()) + + if (this.mediaTag) { + fd.append('tag', this.mediaTag) + } + + var request = $.ajax({ + url: this.uploadAction, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done(this.success.bind(this)) + }, + + success: function(media){ + if (media.error) { + return + } + this.$upload.removeClass('uploading') + this.add(media) + }, + + add: function(media){ + console.log(media) + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index ff35ca4..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{ @@ -1099,14 +1099,14 @@ iframe.embed { /* WALLPAPER PICKER */ -.wallpaper{ +.wallpaper { right: 80px; margin-top: 77px; width: 162px; z-index: 1; -webkit-transition: -webkit-transform 0.1s ease-in-out; -webkit-transform: translateX(400px); - transition: -webkit-transform 0.1s ease-in-out; + transition: transform 0.1s ease-in-out; transform: translateX(400px); } .wallpaper.active { @@ -1114,46 +1114,68 @@ iframe.embed { -webkit-transform: translateX(0px); transform: translateX(0px); } -.wallpaper.active span { +.wallpaper.active .swatches .swatch { width: 40px; - height: 35px; + height: 40px; display: inline-block; - float: left; - border:1px solid; - background: url(../img/MacPaint.gif); + border: 1px solid; + background-size: contain; -webkit-transition: -webkit-transform 0.1s ease-in-out; + line-height: 0; + vertical-align: text-bottom; -webkit-user-drag: element; } - -.wallpaper.active span:nth-child(1){ - background-position:103px 70px; +.wallpaper.active .swatches .swatch:hover { + cursor: pointer; + -webkit-transform: translateX(3px) translateY(-3px); + transform: translateX(3px) translateY(-3px); } -.wallpaper.active span:nth-child(2){ - background-position:200px -98px; +.wallpaper .swatches { + width: 100%; + border-bottom: 1px solid black; + min-height: 30px; } -.wallpaper.active span:nth-child(3){ - background-position:200px -260px; +.wallpaperUpload { + font-size: 14px; + font-weight: 300; } -.wallpaper.active span:nth-child(4){ - background-position:200px -350px; +.wallpaperUpload label { + position: relative; + top: -6px; + float: none; } -.wallpaper.active span:nth-child(5){ - background-position:200px -484px; +.wallpaperUpload .icon-ios7-upload-outline { + font-size: 26px; } -.wallpaper.active span:nth-child(6){ - background-position:200px -581px; +.wallpaperUpload .upload-icon.uploading { } -.wallpaper.active span:nth-child(7){ - background-position:200px -645px; +.wallpaperUpload .upload-icon.uploading:before { + content: ' ' !important; + background-image: url("/assets/img/loader.gif"); + background-repeat: no-repeat; + width: 40px; + height: 40px; } -.wallpaper.active span:nth-child(8){ - background-position:200px -772px; +.wallpaperUpload input[type="text"]{ + border: 1px solid #ccc; + font-size: 15px; + padding: 5px; + width: 100px; + text-align: center; + border-radius: 20px; } - -.wallpaper.active span:hover { - cursor: pointer; - -webkit-transform: translateX(3px) translateY(-3px); - transform: translateX(3px) translateY(-3px); +.wallpaperUpload input[type="text"]:focus{ + border: 1px solid #000; +} +.wallpaperUpload input[type="file"]{ + position: absolute; + margin-left: -134px; + background: blue; + height: 28px; + width: 100%; + margin-top: 0px; + opacity: 0; + cursor:pointer; } @@ -1201,6 +1223,7 @@ input[type="range"]::-webkit-slider-thumb { height: 20px; border: 1px solid black; display: inline-block; + cursor: pointer; } .swatch.selected { border-width: 2px; @@ -1213,7 +1236,13 @@ input[type="range"]::-webkit-slider-thumb { font-weight: 300; position: relative; top: -6px; - margin-right: 15px; + padding-left: 5px; + display: inline-block; + min-width: 35px; + cursor: pointer; +} +.color-swatches label.selected { + font-weight: 500; } diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 16f9d41..1eb08c1 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -8,8 +8,13 @@ var _ = require('lodash'), Media = require('../schemas/Media'); var media = { + user: function(req, res){ - Media.find({ user_id: req.user._id }, function(err, media){ + var query = { user_id: req.user._id } + if (req.query.tag) { + query.tag = req.query.tag + } + Media.find(query, function(err, media){ res.json(media || []) }) }, @@ -18,10 +23,14 @@ var media = { var data = util.cleanQuery(req.body) data.user_id = req.user._id data.created_at = new Date () + + if (data.tag) { + data.tag = util.sanitize(data.tag) + } new Media(data).save(function(err, rec){ if (err || ! rec) { return res.json({ error: err }) } - return res.json(rec) + return res.json(rec) }) }, diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index bd3cb81..2a5beff 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -39,6 +39,7 @@ var projects = { data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) + data.colors = JSON.parse(data.colors) data.startPosition = JSON.parse(data.startPosition) upload.put("projects", req.files.thumbnail, { @@ -91,8 +92,10 @@ var projects = { Project.findOne({ _id: _id }, function(err, doc){ if (err || ! doc) { return res.json({ error: err }) } _.extend(doc, data) + doc.rooms = JSON.parse(data.rooms) doc.walls = JSON.parse(data.walls) + doc.colors = JSON.parse(data.colors) doc.media = JSON.parse(data.media) doc.startPosition = JSON.parse(data.startPosition) diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 1f26b8e..1de354d 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -41,7 +41,8 @@ var MediaSchema = new mongoose.Schema({ loop: { type: Boolean, default: false }, mute: { type: Boolean, default: true }, keyframe: { type: Number, default: 0.0 }, - + tag: { type: String, default: "" }, + widthDimension: { type: Number }, heightDimension: { type: Number }, units: { type: String }, diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index 0f54eaa..abf34fb 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -30,6 +30,7 @@ var ProjectSchema = new mongoose.Schema({ rooms: [mongoose.Schema.Types.Mixed], walls: [mongoose.Schema.Types.Mixed], media: [mongoose.Schema.Types.Mixed], + colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4324087..8536b74 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -6,8 +6,11 @@ </div> <div class="color-swatches"> - <div class="swatch" id="wall-color"></div> <label>wall color</label> - <div class="swatch" id="outline-color"></div> <label>outline color</label> + <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> + <br> + <div class="swatch" id="outline-color"></div><label>outlines</label> </div> <!-- diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 144e419..55ecf85 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -1,4 +1,16 @@ <div class="vvbox wallpaper"> + <div class="swatches"></div> + + <div class="wallpaperUpload"> + <form> + <span class="icon-ios7-upload-outline upload-icon"></span> + <label>Upload wallpaper</label> + <input type="file" accept="image/*" class="file" multiple> + </form> +<!-- + <input type="text" placeholder="Enter Image URL" class="url"> + --> + </div> </div> <div class="floatingSwatch"></div> diff --git a/views/partials/meta.ejs b/views/partials/meta.ejs index ceaaba1..9916b34 100644 --- a/views/partials/meta.ejs +++ b/views/partials/meta.ejs @@ -1,3 +1,20 @@ + +<!-----+ +------+ +------+ +------+ +------+ +|`. `. |\ \ | | / /| .' .'| +| `+------+ | +------+ +------+ +------+ | +------+' | +| | | | | | | | | | | | | | ++ | | + | | | | | | + | | + + `. | | \| | | | | |/ | | .' + `+------+ +------+ +------+ +------+ +------+' + VVALLS - developed by okfoc.us + .+------+ +------+ +------+ +------+ +------+. + .' .'| / /| | | |\ \ |`. `. ++------+' | +------+ | +------+ | +------+ | `+------+ +| | | | | | | | | | | | | | +| | + | | + | | + | | + | | +| | .' | |/ | | \| | `. | | ++------+' +------+ +------+ +------+ `+------> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index ae5b31f..7d56b2e 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -41,6 +41,7 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/models/wall.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_rooms.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/_walls.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/builder.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/clipper.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/rooms/grouper.js"></script> @@ -63,6 +64,7 @@ <script type="text/javascript" src="/assets/javascripts/ui/lib/Router.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/ModalView.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/FormView.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/lib/UploadView.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/AlertModal.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/ConfirmModal.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/ErrorModal.js"></script> @@ -103,6 +105,7 @@ <script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script> <script type="text/javascript" src="/assets/javascripts/app.js"></script> +<script type="text/javascript" src="/assets/javascripts/defaults.js"></script> <!-- external dependencies --> <script src="http://www.youtube.com/player_api"></script> |