diff options
Diffstat (limited to 'public/assets/javascripts')
24 files changed, 389 insertions, 209 deletions
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 0ce03db..5ba5d69 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -25,193 +25,218 @@ MX.Movements = function (cam) { vx = vy = vz = 0, creepFactor = 0.3 + var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false + + var trackpad + var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) }) - return { + var exports = { init: function () { + + trackpad = new wheel ({ + el: scene.el, + update: exports.mousewheel, + }) + + document.addEventListener('keydown', exports.keydown) + document.addEventListener('keyup', exports.keyup) + document.addEventListener('mousedown', exports.mousedown) + document.addEventListener('mousemove', exports.mousemove) + document.addEventListener('mouseup', exports.mouseup) + window.addEventListener('blur', exports.reset) + window.addEventListener('focus', exports.reset) + }, + + keydown: function (e) { + // console.log(e.keyCode) + if (locked || e.altKey || e.metaKey || e.ctrlKey) { + return + } + switch ( e.keyCode ) { + + case 16: // shift + creeping = true + break - document.addEventListener('keydown', function (e) { - // console.log(e.keyCode) - if (locked || e.altKey || e.metaKey || e.ctrlKey) { - return - } - switch ( e.keyCode ) { - - case 16: // shift - creeping = true - break - - case 38: // up - case 87: // w - moveForward = true - break + case 38: // up + case 87: // w + moveForward = true + break - case 65: // a - moveLeft = true - break + case 65: // a + moveLeft = true + break - case 40: // down - case 83: // s - moveBackward = true - break + case 40: // down + case 83: // s + moveBackward = true + break - case 68: // d - moveRight = true - break + case 68: // d + moveRight = true + break - case 37: // left - case 81: // q - turnLeft = true - break - - case 39: // right - case 69: // e - turnRight = true - break - - case 82: // r - turnUp = true - break + case 37: // left + case 81: // q + turnLeft = true + break + + case 39: // right + case 69: // e + turnRight = true + break + + case 82: // r + turnUp = true + break - case 70: // f - turnDown = true - break + case 70: // f + turnDown = true + break - case 32: // space - if (gravity) { - jumping = true - vy = abs(vy) + jumpV * scale - if (e.shiftKey) { - vy *= -1 - } + case 32: // space + if (gravity) { + jumping = true + vy = abs(vy) + jumpV * scale + if (e.shiftKey) { + vy *= -1 } - else { - if (e.shiftKey) { - moveDown = true - } - else { - moveUp = true - } - } - break - - case 27: // esc - if (Scenery.nextMedia) { - Scenery.nextMedia = null - app.tube('cancel-scenery') - } - else if (Scenery.nextWallpaper) { - Scenery.nextWallpaper = null - app.tube('cancel-wallpaper') - } - else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { - app.controller.mediaViewer.hide() + } + else { + if (e.shiftKey) { + moveDown = true } else { - app.controller.toolbar.toggleMap() + moveUp = true } - break - } - }) + } + break - document.addEventListener('keyup', function (e) { - if (locked) return; - switch ( e.keyCode ) { - - case 16: // shift - creeping = false - break + case 27: // esc + if (Scenery.nextMedia) { + Scenery.nextMedia = null + app.tube('cancel-scenery') + } + else if (Scenery.nextWallpaper) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + app.controller.mediaViewer.hide() + } + else if (app.controller.lightControl.$el.hasClass('active')) { + app.controller.lightControl.hide() + } + else { + app.controller.toolbar.toggleMap() + } + break + } + }, - case 38: // up - case 87: // w - moveForward = false - break + keyup: function (e) { + if (locked) return; + switch ( e.keyCode ) { + + case 16: // shift + creeping = false + break - case 65: // a - moveLeft = false - break + case 38: // up + case 87: // w + moveForward = false + break - case 40: // down - case 83: // s - moveBackward = false - break + case 65: // a + moveLeft = false + break - case 68: // d - moveRight = false - break + case 40: // down + case 83: // s + moveBackward = false + break - case 37: // left - case 81: // q - turnLeft = false - break - - case 39: // right - case 69: // e - turnRight = false - break + case 68: // d + moveRight = false + break - case 82: // r - turnUp = false - break + case 37: // left + case 81: // q + turnLeft = false + break + + case 39: // right + case 69: // e + turnRight = false + break - case 70: // f - turnDown = false - break + case 82: // r + turnUp = false + break - case 32: // space - moveUp = moveDown = false - break + case 70: // f + turnDown = false + break + + case 32: // space + moveUp = moveDown = false + break /* - case 48: // 0 - cam.rotationX = 0 - cam.rotationY = 0 - cam.x = 0 - cam.y = viewHeight - cam.z = 0 - break + case 48: // 0 + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + break */ - } - }) - - var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false - document.addEventListener('mousedown', function (e) { - if (locked) return; - mouseX = e.pageX - mouseY = e.pageY - rotX = cam.rotationX - rotY = cam.rotationY - dragging = true - }) - - document.addEventListener('mousemove', function (e) { - if (locked || ! dragging) return - var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3 - var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3 - cam.rotationY = rotY + dx - cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max ) - }) - - document.addEventListener('mouseup', function (e) { - dragging = false - }) - - window.addEventListener('blur', reset) - window.addEventListener('focus', reset) - function reset(){ - moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false } + }, + + mousedown: function (e) { + if (locked) return; + mouseX = e.pageX + mouseY = e.pageY + rotX = cam.rotationX + rotY = cam.rotationY + dragging = true + }, + + mousemove: function (e) { + if (locked || ! dragging) return + var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3 + var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3 + cam.rotationY = rotY + dx + cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max ) + }, + + mouseup: function (e) { + dragging = false + }, + + reset: function(){ + moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false + }, + + mousewheel: function (e, deltaY, deltaX) { + cam.rotationY += deltaX / 20 + + pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 + pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 + app.tube("move", pos) }, update: function () { - if (locked) return; + if (locked) { return } var ry = cam.rotationY var s = creeping ? scale * creepFactor : scale @@ -301,4 +326,6 @@ MX.Movements = function (cam) { velocity: function(n){ v = clamp(n, 1, 50) }, jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) }, } + + return exports } diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 99ede82..3a47dab 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -66,8 +66,8 @@ var Map = function(opt){ canvas.height = base.dimensions.b = window.innerHeight } - base.toggle = function(){ - $(base.el).toggle() + base.toggle = function(state){ + $(base.el).toggle(state) } } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 7eb6e7c..eceda3c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -177,11 +177,11 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(200) - for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) { + var quant = sides.clone().quantize(MAP_GRID_SIZE) + for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { line(x, sides.y.a, x, sides.y.b) } - for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) { + for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 3c3347b..072ff7e 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -161,18 +161,19 @@ Map.UI.Editor = function(map){ cursor.y.abs().quantize(1) var room = Rooms.add_with_rect( cursor ) + Rooms.rebuild() + UndoStack.push({ type: "create-room", undo: { id: room.id }, redo: room.copy() }) + Rooms.rebuild() app.tube("builder-pick-room", room) } } - if (base.resizing || base.dragging) { - var oldState = base.dragging.copy() if (base.resizing) { @@ -187,14 +188,22 @@ Map.UI.Editor = function(map){ undo: oldState, redo: base.dragging.copy() }) + Rooms.rebuild() } + + var intersects = Rooms.filter(function(r){ + return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + }) + if (! intersects.length) { + app.tube("builder-pick-nothing") + } base.creating = base.dragging = base.resizing = false } var wheelState, wheelTimeout - function mousewheel (e, val, delta){ + function mousewheel (e, deltaY, deltaX){ var cursor = base.mouse.cursor var intersects = Rooms.filter(function(r){ @@ -204,7 +213,7 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max ) clearTimeout(wheelTimeout) wheelTimeout = setTimeout(function(){ @@ -218,7 +227,7 @@ Map.UI.Editor = function(map){ }, 500) } else { - map.set_zoom(map.zoom_exponent - delta/20) + map.set_zoom(map.zoom_exponent - deltaY/20) } } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js index fabbdb9..0fdd336 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js @@ -72,8 +72,8 @@ Map.UI.Minimap = function(map){ base.dragging = false } - function mousewheel (e, val, delta){ - map.set_zoom(map.zoom_exponent - delta/20) + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) } function rightclick (e){ diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index b901a25..5686aba 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -13,6 +13,7 @@ vec2 = require('../../models/vec2') Rect = require('../../models/rect') Room = require('../../models/room') + Walls = require('./_walls') UidGenerator = require('../../util/uid') sort = require('../../util/sort') _ = require('lodash') @@ -59,7 +60,6 @@ height: 500 }) base.add(room) - Rooms.rebuild() return room } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 0da3b9a..119a659 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -134,19 +134,24 @@ }) } + base.luminance = function(rgb){ + rgb = rgb || Walls.colors.wall + var rgb_max = Math.max.apply(0, rgb) + var rgb_min = Math.min.apply(255, rgb) + return (rgb_max + rgb_min ) / 2 + } + base.setColor = { wall: function(rgb){ var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) var rgbColor = rgb_string(rgb) + + if (Rooms.mover.room) { + $("#header").toggleClass("black", base.luminance() < 100) + $("body").css("background-color", rgbColor) + } - var rgb_max = Math.max.apply(0, rgb) - var rgb_min = Math.min.apply(255, rgb) - var luminance = (rgb_max + rgb_min ) / 2 - - $("#header").toggleClass("black", luminance < 128) - $("body").css("background-color", rgbColor) - Walls.colors.wall = rgb Walls.list.forEach(function(wall){ wall.outline(rgbaColor, null) diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 4619eb1..33333fb 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -293,7 +293,7 @@ this.el = this.rect = this.face = null } - // possible if walls are opaque + // preferable if walls are opaque // el.el.classList.add("backface-hidden") return el diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..a2d2223 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -43,6 +43,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") + $("#header").removeClass("black") $("body").css("background-color", "transparent") base.room = null } @@ -59,6 +60,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] + $("#header").toggleClass("black", Walls.luminance() < 100) $("body").css("background-color", rgb_string( Walls.colors.wall )) app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js index 4f1144a..82b6bf9 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/randomize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js @@ -10,11 +10,11 @@ Scenery.randomize = function (media_data) { var media_list = media_data.map(function(media){ var width, height if (media.width > media.height) { - width = Math.min(300, media.width) + width = Math.min(DEFAULT_PICTURE_WIDTH, media.width) height = media.height/media.width * width } else { - height = Math.min(300, media.height) + height = Math.min(DEFAULT_PICTURE_WIDTH, media.height) width = media.width/media.height * height } return { diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index bed847b..10fc917 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -7,7 +7,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ init: function(opt){ - opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) base.init.call(this, opt) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index b723f56..a669a90 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -6,7 +6,7 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ type: 'video', init: function(opt){ - opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) base.init.call(this, opt) diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 198cc41..3bc314c 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -20,7 +20,9 @@ var height_min = 200, side_min = 10, side_max = 5000, resize_margin = 8, - cursor_amp = 1.5 + cursor_amp = 1.5, + DEFAULT_PICTURE_WIDTH = 350, + MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3 diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 6836772..712d470 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -21,37 +21,44 @@ function wheel (opt) { val: 0, }) - opt.el.addEventListener('mousewheel', onMouseWheel, false); + opt.el.addEventListener('wheel', onMouseWheel, false); +// opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { if (opt.locked) { return } + if (! opt.propagate) { e.stopPropagation() e.preventDefault() } - var delta = 0; + var deltaX = 0, deltaY = 0; // WebKit - if ( event.wheelDeltaY ) { - delta -= event.wheelDeltaY * opt.ratio + if ( event.deltaY ) { + deltaY -= event.deltaY * opt.ratio + deltaX -= event.deltaX * opt.ratio + } + else if ( event.wheelDeltaY ) { + deltaY -= event.wheelDeltaY * opt.ratio + deltaX -= event.wheelDeltaX * opt.ratio } // Opera / Explorer 9 else if ( event.wheelDelta ) { - delta -= event.wheelDelta * opt.ratio + deltaY -= event.wheelDelta * opt.ratio } // Firefox else if ( event.detail ) { - delta += event.detail * 2 + deltaY += event.detail * 2 } - if (! opt.reversible && delta < 0) return; + if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return; - opt.val = clamp(opt.val + delta, opt.min, opt.max) + // opt.val = clamp(opt.val + delta, opt.min, opt.max) - opt.update(e, opt.val, delta) + opt.update(e, deltaY, deltaX) } opt.lock = function(){ opt.locked = true } diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 0bf2338..67834e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -13,6 +13,7 @@ var BuilderInfo = View.extend({ "change [name=units]": 'changeUnits', "change [name=resolution]": 'changeResolution', "change [name=viewHeight]": 'changeViewHeight', + "click [data-role=destroy-room]": 'destroy', }, initialize: function(opt){ @@ -25,17 +26,22 @@ var BuilderInfo = View.extend({ this.$units = this.$("[name=units]") this.$viewHeight = this.$("[name=viewHeight]") this.$unitName = this.$(".unitName") + this.$noSelection = this.$(".no-selection") + this.$settings = this.$(".setting") app.on("builder-pick-room", this.pick.bind(this)) - app.on("builder-destroy-room", this.destroy.bind(this)) + app.on("builder-destroy-room", this.hide.bind(this)) + app.on("builder-pick-nothing", this.deselect.bind(this)) }, load: function(data){ - this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) + this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) }, toggle: function(state){ + this.$settings.toggle( !! this.room ) + this.$noSelection.toggle( ! this.room ) this.$el.toggleClass("active", state) }, @@ -43,7 +49,8 @@ var BuilderInfo = View.extend({ this.toggle(true) }, - hide: function(){ + hide: function(){ + this.room = null this.toggle(false) }, @@ -58,8 +65,22 @@ var BuilderInfo = View.extend({ this.$y.unitVal( room.rect.y.a ) this.show() }, + + deselect: function(){ + this.room = null + this.toggle(true) + }, + + destroy: function(){ + UndoStack.push({ + type: "destroy-room", + undo: this.room.copy(), + redo: { id: this.room.id }, + }) + + Rooms.remove(this.room) + app.tube("builder-destroy-room", this.room) - destroy: function(room){ this.room = null this.hide() }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..ac361a7 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -15,6 +15,10 @@ var EditorSettings = FormView.extend({ "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', "click [data-role='destroy-project']": 'destroy', + "click #startText": "setStartPosition", + "click #moveText": "confirmStartPosition", + "click #confirmText": "setStartPosition", + "click #goText": "goToStartPosition", }, initialize: function(opt){ @@ -26,6 +30,7 @@ var EditorSettings = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") this.$privacy = this.$("[name=privacy]") + this.$startPoint = this.$("#startpoint") }, load: function(data){ @@ -33,7 +38,11 @@ var EditorSettings = FormView.extend({ this.parent.data = data data.rooms && Rooms.deserialize(data.rooms, data.walls) - data.startPosition && scene.camera.move(data.startPosition) + if (data.startPosition) { + scene.camera.move(data.startPosition) + this.startPosition = data.startPosition + this.$startPoint.addClass("confirmed") + } if (data.colors && data.colors.wall) { this.parent.lightControl.load(data.colors) @@ -141,6 +150,19 @@ var EditorSettings = FormView.extend({ ErrorModal.alert($errors) }, + startPosition: null, + setStartPosition: function(){ + this.$startPoint.addClass("active").removeClass("confirmed") + }, + confirmStartPosition: function(){ + this.$startPoint.removeClass("active").addClass("confirmed") + this.startPosition = app.position(scene.camera) + }, + goToStartPosition: function(){ + if (! this.startPosition) return + scene.camera.move(this.startPosition) + }, + serialize: function(){ var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) @@ -148,11 +170,13 @@ var EditorSettings = FormView.extend({ fd.append( "name", this.$name.val() ) fd.append( "description", this.$description.val() ) fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) + fd.append( "viewHeight", window.viewHeight ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) 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) ) ) + fd.append( "startPosition", JSON.stringify( this.startPosition || false ) ) + fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) ) if (this.thumbnailIsStale()) { var thumbnail = map.draw.render() diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 8a707ec..4f07d1f 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -4,11 +4,11 @@ var EditorToolbar = View.extend({ events: { "mousedown": 'stopPropagation', + "click [data-role='undo']": 'undo', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', -// "click [data-role='destroy-media']": 'destroyMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', @@ -18,9 +18,22 @@ var EditorToolbar = View.extend({ this.parent = opt.parent }, - toggleMap: function(){ - var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") - this.resetControls() + undo: function(e){ + if (e.shiftKey) { + var canRedo = UndoStack.redo() + console.log("can redo", canRedo) + } + else { + var canUndo = UndoStack.undo() + console.log("can undo", canUndo) + } + }, + + toggleMap: function(state){ + if (typeof state != "boolean") { + state = ! $("[data-role='toggle-map-view']").hasClass("inuse") + this.resetControls() + } $("[data-role='toggle-map-view']").toggleClass("inuse", state) map.toggle(state) $("#minimap").toggleClass("hide", state) @@ -29,6 +42,7 @@ var EditorToolbar = View.extend({ toggleSettings: function(){ // this.resetMode() + this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() this.parent.lightControl.hide() @@ -42,6 +56,7 @@ var EditorToolbar = View.extend({ this.parent.mediaUpload.show() this.resetMode() this.resetControls() + this.toggleMap(false) }, resetMode: function(){ @@ -55,6 +70,7 @@ var EditorToolbar = View.extend({ resetControls: function(){ $(".inuse").removeClass("inuse") + this.toggleMap(false) this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() @@ -98,6 +114,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.wallpaperPicker.toggle(state) }, @@ -110,6 +127,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.lightControl.toggle(state) }, @@ -122,6 +140,7 @@ var EditorToolbar = View.extend({ this.parent.lightControl.hide() this.parent.settings.hide() this.parent.presets.hide() + this.toggleMap(false) this.parent.textEditor.toggle(state) }, @@ -134,6 +153,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.settings.hide() this.parent.lightControl.hide() + this.toggleMap(false) this.parent.presets.toggle(state) }, }) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6aff601..ccd6c63 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -41,6 +41,7 @@ var EditorView = View.extend({ $("#map").hide() this.settings.load(data) + this.info.load(data) }, readyLayout: function(data){ diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..34a5a51 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -64,6 +64,7 @@ var LightControl = View.extend({ pick: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(this.mode, rgb) + // console.log(rgb) Walls.setColor[ this.mode ](rgb) }, diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index fddfefc..9799f99 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) - this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia) - this.parent.mediaViewer.$deleteMedia.show() - this.parent.mediaViewer.$noMedia.hide() + this.parent.mediaViewer.addUploadedMedia(media) }, beforeUpload: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index c18fb49..10819af 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -4,23 +4,30 @@ var MediaViewer = ModalView.extend({ destroyAction: "/api/media/destroy", usesFileUpload: true, loaded: false, - + perPage: 12, + offset: 0, + fixedClose: true, + events: { 'mousedown': "stopPropagation", 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", + 'click .viewMore': "load", }, initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent this.$myMedia = this.$(".myMedia") + this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") this.$foundMedia = this.$(".foundMedia") + this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") + this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, @@ -55,7 +62,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", this.populate.bind(this)) + $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) }, loadTrending: function(){ @@ -85,7 +92,7 @@ var MediaViewer = ModalView.extend({ width: img.naturalWidth, height: img.naturalHeight, } - this.add(media, this.$foundMedia) + this.add(media, this.$foundMediaContainer) }.bind(this) img.src = url if (img.complete && ! loaded) { img.onload() } @@ -100,22 +107,40 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ - this.loaded = true + var scrollTop = this.loaded ? $('.myMedia .container').height() : 0 if (data && data.length) { + if (data.length < this.perPage) { + this.$viewMore.hide() + } data.forEach(function(media){ - this.add(media, this.$myMedia) + this.add(media, this.$myMediaContainer) + this.offset += 1 }.bind(this)) this.$noMedia.hide() this.$deleteMedia.show() } else { + this.$viewMore.hide() this.$noMedia.show() this.$deleteMedia.hide() } - this.__super__.show.call(this) + if (this.loaded) { + this.$el.delay(300).animate({ scrollTop: scrollTop }, 200) + } + else { + this.loaded = true + this.__super__.show.call(this) + } + }, + + addUploadedMedia: function(media){ + this.parent.mediaViewer.$deleteMedia.show() + this.parent.mediaViewer.$noMedia.hide() + this.add(media, this.$myMedia, true) // prepend + this.offset += 1 }, - add: function(media, $container){ + add: function(media, $container, prepend){ var image = new Image () var $span = $("<span>") $span.addClass("mediaContainer") @@ -142,7 +167,8 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + if (prepend) $container.prepend($span) + else $container.append($span) }, deleteIsArmed: false, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index a7e92b6..1e70aa2 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -2,8 +2,26 @@ var Presets = View.extend({ el: "#presets", events: { + "mousedown": "stopPropagation", "click .presets span": "selectPreset", + "click .swatches span": "selectColor", }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], presets: { wireframe: { @@ -34,6 +52,13 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("<span>") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) }, toggle: function(state){ @@ -56,4 +81,9 @@ var Presets = View.extend({ $(e.currentTarget).addClass('active') }, + selectColor: function(e){ + var preset = $(e.currentTarget).data('color') + console.log(preset) + }, + })
\ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c8879b3..b559ba5 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -28,16 +28,15 @@ var TextEditor = FormView.extend({ }, toggle: function(state){ - $("#keyhint").fadeOut(200) - this.$el.toggleClass("active", state) if (state) { + $("#keyhint").fadeOut(200) Scenery.nextMedia = { type: 'text', width: 600, height: 450, scale: 0.5, - font: { family: 'Lato', size: 12, align: 'left' }, + font: { family: 'Lato', size: 24, align: 'left', color: "#000" }, } this.createMode(true) } diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js index d9b518a..1c41861 100644 --- a/public/assets/javascripts/ui/lib/ModalView.js +++ b/public/assets/javascripts/ui/lib/ModalView.js @@ -18,6 +18,10 @@ var ModalView = View.extend({ if (! this.usesFileUpload) { $(".fileUpload").removeClass("active") } + if (this.fixedClose) { + $("#fixed_close").addClass("active") + $("#fixed_close").bind("click", this.hide.bind(this)) + } this.$el.addClass("active") $("body").addClass("noOverflow") @@ -25,6 +29,10 @@ var ModalView = View.extend({ hide: function(){ // $(".mediaDrawer, .room1").removeClass("active editing"); + if (this.fixedClose) { + $("#fixed_close").removeClass("active") + $("#fixed_close").unbind("click", this.hide.bind(this)) + } this.$el.removeClass("active"); $("body").removeClass("noOverflow"); }, |