From 5d567454d7d2f4f7e885720d310d42063eeba4dd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 18:12:39 -0400 Subject: undo fix --- public/assets/javascripts/rectangles/engine/rooms/_walls.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 82ccb87..f0cd558 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -46,6 +46,10 @@ } } + base.find = function(id){ + return base.lookup[id] + } + base.assign = function(list){ base.list = list base.lookup = {} -- cgit v1.2.3-70-g09d2 From a4eb980bcb2cce616abfb6300e1b80d8323899e4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 18:34:58 -0400 Subject: trackin stuff --- .../javascripts/rectangles/engine/rooms/mover.js | 4 +-- public/assets/javascripts/ui/reader/ReaderView.js | 2 ++ public/assets/javascripts/ui/reader/Tracker.js | 41 +++++++++++++++------- 3 files changed, 31 insertions(+), 16 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 7195fcc..5c7b4af 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -65,9 +65,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] - base.room.mx_floor.forEach(function(w){ $(w.el).addClass("active") }) - base.room.mx_ceiling.forEach(function(w){ $(w.el).addClass("active") }) - base.room.mx_walls.forEach(function(w){ $(w.el).addClass("active") }) + app.tube("change-room", { room: base.room }) } } diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index c43dc9c..82db048 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -75,10 +75,12 @@ var ReaderView = View.extend({ pick: function(scenery){ this.mediaPlayer.pick(scenery) + app.tube("pick-scenery", { scenery: scenery }) }, hideExtras: function(){ this.mediaPlayer.hide() + app.tube("close-scenery") } }) diff --git a/public/assets/javascripts/ui/reader/Tracker.js b/public/assets/javascripts/ui/reader/Tracker.js index 7d9d936..beef071 100644 --- a/public/assets/javascripts/ui/reader/Tracker.js +++ b/public/assets/javascripts/ui/reader/Tracker.js @@ -17,21 +17,28 @@ var Tracker = Fiber.extend(function(base){ }, bind: function () { - // window.addEventListener("click", this.trackClick.bind(this), true) + app.on("change-wall", this.changeWall.bind(this)) + app.on("pick-scenery", this.pickScenery.bind(this)) + app.on("close-scenery", this.trackScenery.bind(this)) + app.on("change-room", this.changeRoom.bind(this)) + }, + + pushEvent: function(event){ + this.events.push(event) }, trackPageview: function(opt){ - this.events.push([ "view" ]) + this.pushEvent([ "view" ]) }, // // how long they spend in front of each wall - trackChangeWall: function(opt){ + changeWall: function(opt){ var duration = this.wallTimer.currentTime() if (this.wall_id && duration > 5000) { - this.events.push([ "wall", this.wall_id, duration ]) + this.pushEvent([ "wall", this.wall_id, duration ]) } this.wall_id = opt.wall.id this.wallTimer.start() @@ -41,14 +48,19 @@ var Tracker = Fiber.extend(function(base){ // how long the user spends on each item they click pickScenery: function(opt){ - this.sceneryTimer.start() + if (this.scenery_id && opt.scenery.id !== this.scenery_id) { + this.trackScenery() + } + else { + this.sceneryTimer.start() + } this.scenery_id = opt.scenery.id }, trackScenery: function(){ var duration = this.sceneryTimer.currentTime() if (this.scenery_id && duration > 5000) { - this.events.push([ "scenery", this.scenery_id, duration ]) + this.pushEvent([ "scenery", this.scenery_id, duration ]) } this.scenery_id = null this.sceneryTimer.reset() @@ -57,24 +69,26 @@ var Tracker = Fiber.extend(function(base){ // // how long they spend in the room - trackChangeRoom: function(opt){ + changeRoom: function(opt){ var duration = this.roomTimer.currentTime() - if (this.room_id && duration > 5000) { - this.events.push([ "room", this.room_id, duration ]) + if (this.room_id !== opt.room.id) { + if (this.room_id && duration > 5000) { + this.pushEvent([ "room", this.room_id, duration ]) + } + this.roomTimer.start() + this.room_id = opt.room.id } - this.room_id = opt.room.id - this.roomTimer.start() }, // // how many clicks per room trackClick: function(opt){ - console.log("track click") this.clicks += 1 }, save: function () { + // possibly just push to google analytics }, } @@ -101,8 +115,9 @@ var Timer = Fiber.extend(function(base){ currentTime: function(){ return this.time ? Date.now() - this.time : 0 }, - } + + return exports }) -- cgit v1.2.3-70-g09d2 From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- public/assets/img/text-cursor.png | Bin 0 -> 1622 bytes public/assets/javascripts/mx/primitives/mx.text.js | 67 +++++++++------- .../rectangles/engine/rooms/projector.js | 30 -------- .../rectangles/engine/scenery/_scenery.js | 4 + .../rectangles/engine/scenery/resize.js | 16 +--- .../rectangles/engine/scenery/types/image.js | 2 + .../rectangles/engine/scenery/types/text.js | 66 ++++++++++++++++ .../rectangles/engine/scenery/types/video.js | 2 + .../assets/javascripts/rectangles/models/mat4.js | 78 ------------------- .../assets/javascripts/rectangles/models/wall.js | 8 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 3 + public/assets/javascripts/ui/editor/EditorView.js | 10 ++- public/assets/javascripts/ui/editor/MediaEditor.js | 5 -- public/assets/javascripts/ui/editor/TextEditor.js | 85 ++++++++++++++++++++- public/assets/stylesheets/app.css | 5 +- views/controls/editor/text-editor.ejs | 4 + views/controls/editor/toolbar.ejs | 2 +- views/partials/scripts.ejs | 13 ++-- 18 files changed, 230 insertions(+), 170 deletions(-) create mode 100644 public/assets/img/text-cursor.png delete mode 100644 public/assets/javascripts/rectangles/engine/rooms/projector.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/text.js delete mode 100644 public/assets/javascripts/rectangles/models/mat4.js (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/img/text-cursor.png b/public/assets/img/text-cursor.png new file mode 100644 index 0000000..66e9e0d Binary files /dev/null and b/public/assets/img/text-cursor.png differ diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 9c7af5c..7b8e595 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -3,34 +3,49 @@ MX.Text = MX.Object3D.extend({ init: function (ops) { this.type = "Text" - - var layer = new MX.Object3D('text') - layer.width = ops.width || 100 - layer.height = ops.height || 50 - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.scale = ops.scale || 1 - layer.el.innerHTML = ops.value || "" - if (ops.id) layer.el.id = ops.id; - if (ops.background) layer.el.style.background = ops.background; - if (ops.color) layer.el.style.color = ops.color; - if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px"; - this.add(layer) + this.type = "Image" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - this.children.forEach(function (c, i) { - if (ops.classname) { - c.el.classList.add(ops.classname) - } - else { - } - c.el.style.backgroundRepeat = 'no-repeat' - }) + this.scale = ops.scale || 1 + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("text") + this.el.classList.add("mx-scenery") + + this.inner = document.createElement("div") + this.inner.style.width = "100%" + this.el.appendChild(this.inner) + + this.load(ops) + }, + + load: function(ops){ + if (ops.color) this.el.style.color = ops.color; + if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; + if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.dirty = true - this.updateChildren = true - this.update() - } + this.inner.innerHTML = ops.media.description || "" + }, + + setText: function(text){ + this.inner.innerHTML = text + }, }) diff --git a/public/assets/javascripts/rectangles/engine/rooms/projector.js b/public/assets/javascripts/rectangles/engine/rooms/projector.js deleted file mode 100644 index 2eac314..0000000 --- a/public/assets/javascripts/rectangles/engine/rooms/projector.js +++ /dev/null @@ -1,30 +0,0 @@ - -rooms.projector = new function(){ - - projector = new THREE.Projector(); - vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); - projector.unprojectVector( vector, camera ); - - raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); - intersects = raycaster.intersectObjects( scene.children, true ); - -} - - - -THREE.Projector = function () { - - _viewProjectionMatrix = new THREE.Matrix4(), - - this.unprojectVector = function ( vector, camera ) { - camera.projectionMatrixInverse.getInverse( camera.projectionMatrix ); - - _viewProjectionMatrix.multiplyMatrices( - camera.matrixWorld, - camera.projectionMatrixInverse - ); - - return vector.applyProjection( _viewProjectionMatrix ); - }; - -} diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 69e9ba7..3d3067f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -24,6 +24,10 @@ var Scenery = new function(){ case 'vimeo': scene_media = new Scenery.types.video (opt) break + + case 'text': + scene_media = new Scenery.types.text (opt) + break } base.list[scene_media.id] = scene_media return scene_media diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 893237c..0ce976e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -117,22 +117,13 @@ Scenery.resize = new function(){ base.bind = function(){ dots.forEach(function(dot){ Scenery.mouse.bind_el(dot.el) - $(dot.el).bind({ - mouseenter: function(e){ -// Scenery.resize.hovering = true - }, - mouseleave: function(e){ -// Scenery.resize.hovering = false -// base.defer_hide() - } - }) }) Scenery.mouse.on("down", down) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) } - this.unbind = function(){ + base.unbind = function(){ dots.forEach(function(dot){ Scenery.mouse.unbind_el(dot.el) }) @@ -151,7 +142,6 @@ Scenery.resize = new function(){ naturalDimension = obj.naturalDimensions dimension = obj.dimensions position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) - scale = obj.mx.scale oldState = obj.serialize() document.body.classList.add("dragging") @@ -165,7 +155,6 @@ Scenery.resize = new function(){ var width = cursor.x.magnitude() var height = cursor.y.magnitude() var mag = cursor.magnitude() - var old_width = dimension.a * scale if (abs(width) > abs(height)) { mag = x_sign * mag * sign(width) @@ -175,9 +164,6 @@ Scenery.resize = new function(){ } obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) - // dimension.a // scale * (old_width + mag) / old_width - -// console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a) if (selected_dot.side & LEFT_RIGHT) { obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index aa43341..bed847b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -3,6 +3,8 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { + type: 'image', + init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js new file mode 100644 index 0000000..16c7a5c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -0,0 +1,66 @@ + +Scenery.types.text = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'text', + + init: function(opt){ + + opt.scale = 1 + + base.init.call(this, opt) + + this.build() + this.bind() + + if (opt.data) { + if (opt.wall) { + var position = opt.wall.mxToPosition(opt.data.position) + opt.index = opt.wall.surface.index_for_x( position.a, 0 ) + } + this.set_wall(opt) + this.deserialize(opt.data) + } + else { + this.set_wall(opt) + if (this.bounds) { + this.recenter() + if (opt.position) { + this.translateTo(opt.position) + } + var mx_position = this.wall.positionToMx( this.position, this.dimensions ) + this.mx.move(mx_position) + } + } + }, + + build: function(){ + this.mx = new MX.Text({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + }, + + setText: function(text){ + this.media.description = text + this.mx.setText(text) + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + }, + } + + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 2ef6ec3..b723f56 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -2,6 +2,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { + + type: 'video', init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/models/mat4.js b/public/assets/javascripts/rectangles/models/mat4.js deleted file mode 100644 index b061199..0000000 --- a/public/assets/javascripts/rectangles/models/mat4.js +++ /dev/null @@ -1,78 +0,0 @@ -function mat4(e){ - this.elements = [ 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 ] - return this -} -mat4.prototype.set = function (a) { - var els = this.elements - a.forEach(function(n,i){ els[i] = n }) - return this -} -mat4.prototype.clone = function(){ - return (new mat4).set(this.els) -} -mat4.prototype.identity = function () { - this.set([ - 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 - ]); - return this; -} -mat4.prototype.getInverse = function (m, throwOnInvertible) { - - // based on http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm - var te = this.elements; - var me = m.elements; - - var n11 = me[0], n12 = me[4], n13 = me[8], n14 = me[12]; - var n21 = me[1], n22 = me[5], n23 = me[9], n24 = me[13]; - var n31 = me[2], n32 = me[6], n33 = me[10], n34 = me[14]; - var n41 = me[3], n42 = me[7], n43 = me[11], n44 = me[15]; - - te[0] = n23*n34*n42 - n24*n33*n42 + n24*n32*n43 - n22*n34*n43 - n23*n32*n44 + n22*n33*n44; - te[4] = n14*n33*n42 - n13*n34*n42 - n14*n32*n43 + n12*n34*n43 + n13*n32*n44 - n12*n33*n44; - te[8] = n13*n24*n42 - n14*n23*n42 + n14*n22*n43 - n12*n24*n43 - n13*n22*n44 + n12*n23*n44; - te[12] = n14*n23*n32 - n13*n24*n32 - n14*n22*n33 + n12*n24*n33 + n13*n22*n34 - n12*n23*n34; - te[1] = n24*n33*n41 - n23*n34*n41 - n24*n31*n43 + n21*n34*n43 + n23*n31*n44 - n21*n33*n44; - te[5] = n13*n34*n41 - n14*n33*n41 + n14*n31*n43 - n11*n34*n43 - n13*n31*n44 + n11*n33*n44; - te[9] = n14*n23*n41 - n13*n24*n41 - n14*n21*n43 + n11*n24*n43 + n13*n21*n44 - n11*n23*n44; - te[13] = n13*n24*n31 - n14*n23*n31 + n14*n21*n33 - n11*n24*n33 - n13*n21*n34 + n11*n23*n34; - te[2] = n22*n34*n41 - n24*n32*n41 + n24*n31*n42 - n21*n34*n42 - n22*n31*n44 + n21*n32*n44; - te[6] = n14*n32*n41 - n12*n34*n41 - n14*n31*n42 + n11*n34*n42 + n12*n31*n44 - n11*n32*n44; - te[10] = n12*n24*n41 - n14*n22*n41 + n14*n21*n42 - n11*n24*n42 - n12*n21*n44 + n11*n22*n44; - te[14] = n14*n22*n31 - n12*n24*n31 - n14*n21*n32 + n11*n24*n32 + n12*n21*n34 - n11*n22*n34; - te[3] = n23*n32*n41 - n22*n33*n41 - n23*n31*n42 + n21*n33*n42 + n22*n31*n43 - n21*n32*n43; - te[7] = n12*n33*n41 - n13*n32*n41 + n13*n31*n42 - n11*n33*n42 - n12*n31*n43 + n11*n32*n43; - te[11] = n13*n22*n41 - n12*n23*n41 - n13*n21*n42 + n11*n23*n42 + n12*n21*n43 - n11*n22*n43; - te[15] = n12*n23*n31 - n13*n22*n31 + n13*n21*n32 - n11*n23*n32 - n12*n21*n33 + n11*n22*n33; - - var det = n11 * te[ 0 ] + n21 * te[ 4 ] + n31 * te[ 8 ] + n41 * te[ 12 ]; - - if ( det == 0 ) { - var msg = "Matrix4.getInverse(): can't invert matrix, determinant is 0"; - - if ( throwOnInvertible || false ) { - throw new Error( msg ) - } - else { - console.warn( msg ) - } - this.identity(); - return this - } - this.multiplyScalar( 1 / det ); - return this -} -mat4.prototype.multiplyScalar = function (n) { - var els = this.elements - els[0] *= n; els[4] *= n; els[8] *= n; els[12] *= n - els[1] *= n; els[5] *= n; els[9] *= n; els[13] *= n - els[2] *= n; els[6] *= n; els[10] *= n; els[14] *= n - els[3] *= n; els[7] *= n; els[11] *= n; els[15] *= n - return this -} - diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fdc8d8c..dc38183 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,9 +68,7 @@ }, */ mousedown: function(e){ - if (Scenery.nextText) { - } - else if (Scenery.nextMedia) { + if (Scenery.nextMedia) { var offset = offsetFromPoint(e, mx.el) if (! offset) { return } @@ -91,13 +89,15 @@ app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) Scenery.hovering = true + + app.controller.pick(scenery) UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, redo: scenery.serialize(), }) - + // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 513306d..49decc2 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -3,6 +3,7 @@ var EditorToolbar = View.extend({ el: "#editorToolbar", events: { + "mousedown": 'stopPropagation', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', @@ -42,6 +43,7 @@ var EditorToolbar = View.extend({ // this.resizeMedia(true) // this.destroyMedia(false) $(".inuse").removeClass("inuse") + $("body").removeClass("addText") this.parent.hideExtras() this.resetPermissions() }, @@ -131,6 +133,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.lightControl.hide() this.parent.settings.hide() this.parent.textEditor.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 83db532..67687fe 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -42,11 +42,19 @@ var EditorView = View.extend({ }, pick: function(scenery){ - this.mediaEditor.pick(scenery) + if (scenery.type == "text") { + this.mediaEditor.hide() + this.textEditor.pick(scenery) + } + else { + this.textEditor.hide() + this.mediaEditor.pick(scenery) + } }, hideExtras: function(){ this.mediaEditor.hide() + this.textEditor.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index e4f93df..0a4d894 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -76,7 +76,6 @@ var MediaEditor = FormView.extend({ case "image": this.$(".image").show() this.$(".video").hide() - break case "youtube": @@ -90,7 +89,6 @@ var MediaEditor = FormView.extend({ this.$loop.prop('checked', !! media.loop) this.$mute.prop('checked', !! media.mute) this.$keyframe.val( Number(media.keyframe || 0) ) - break } }, @@ -166,7 +164,6 @@ var MediaEditor = FormView.extend({ this.scenery.media.title = this.$name.val() this.scenery.media.description = this.$description.val() Minotaur.watch( app.router.editorView.settings ) - if (this.scenery.mx) { this.scenery.mx.bound = false this.scenery.mx.el.classList.remove("picked") @@ -177,8 +174,6 @@ var MediaEditor = FormView.extend({ }, destroy: function(){ -// ConfirmModal.confirm("Are you sure you want delete this object?", function(){ -// }.bind(this)) var scenery = this.scenery this.hide() Scenery.remove(scenery.id) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0319a31..0d082ca 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -1,6 +1,8 @@ var TextEditor = FormView.extend({ el: "#textEditor", + tainted: false, + scenery: null, events: { "keydown": 'taint', @@ -9,20 +11,87 @@ var TextEditor = FormView.extend({ "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', "input [name=text-body]": 'changeText', - "click [data-role=destroy-media]": "destroy", + "click [data-role=destroy-text]": "destroy", }, initialize: function(opt){ this.parent = opt.parent this.__super__.initialize.call(this) + this.$settings = this.$(".setting") + this.$noTextMessage = this.$(".no-text") this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") }, toggle: function(state){ - this.$el.toggleClass("active", state); + $("#keyhint").fadeOut(200) + + this.$el.toggleClass("active", state) + if (state) { + Scenery.nextMedia = { type: 'text', width: 300, height: 150 } + this.createMode(true) + } + }, + + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(scenery){ + this.tainted = false + this.scenery = scenery + this.scenery.mx.bound = true + this.scenery.mx.el.classList.add("picked") + }, + + unbind: function(){ + if (this.scenery && this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } + } + this.tainted = false + this.scenery = null + }, + + createMode: function(state){ + this.$settings.toggle(! state) + this.$noTextMessage.toggle(!! state) + $("body").toggleClass("addText", !! state) + }, + + pick: function(scenery){ + if (this.scenery) { + this.unbind() + } + + Scenery.resize.show(scenery) + Scenery.hovering = true + + this.bind(scenery) + this.$el.toggleClass("active", true) + this.$textBody.val( this.scenery.media.description ) + + this.createMode(false) + + if (! this.scenery.media.description) { + setTimeout(function(){ + this.$textBody.focus() + }.bind(this), 100) + } }, taint: function(e){ @@ -35,7 +104,17 @@ var TextEditor = FormView.extend({ changeFontSize: function(){ }, - changeText: function(){ + changeText: function(e){ + e.stopPropagation() + var text = this.$textBody.val() + this.scenery.setText(text) }, + + destroy: function(){ + var scenery = this.scenery + this.hide() + Scenery.remove(scenery.id) + Scenery.resize.hide() + }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e626d39..e746cad 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -667,9 +667,12 @@ iframe.embed { -webkit-box-sizing: content-box; box-sizing: content-box; } -.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] { +.destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } +.addText .mx-scene, .menu span.inuse[data-role="toggle-text-editor"] { + cursor:url(/assets/img/text-cursor.png), auto; +} .mx-scenery:active { cursor: pointer; diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index 205fbdf..a14c469 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -1,6 +1,10 @@

Edit Text

+
+ Click a wall to add text. +
+
-
-
- Upload File - -
- ~ or ~
- - -
@@ -16,13 +5,28 @@
X +

Your Media – Found Media


You have no media yet. Upload some!
+ + view more
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-
+ +
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:04:00 -0400 Subject: cursor that follows mouse --- .../javascripts/mx/extensions/mx.movements.js | 14 ++++---- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/rectangles/engine/rooms/mover.js | 3 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/HelpCursor.js | 38 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 33 ++++++++++++++----- public/assets/stylesheets/app.css | 18 +++++++--- views/controls/editor/media-drawer.ejs | 13 +++++++- views/controls/editor/settings.ejs | 2 ++ views/partials/scripts.ejs | 1 + 10 files changed, 104 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 5ba5d69..b158625 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -226,12 +226,14 @@ MX.Movements = function (cam) { }, 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) + if (e.shiftKey) { + cam.rotationY -= deltaY / 150 + } + else { + 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 () { diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 119a659..f2348f0 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -135,7 +135,7 @@ } base.luminance = function(rgb){ - rgb = rgb || Walls.colors.wall + rgb = rgb || Walls.colors.ceiling var rgb_max = Math.max.apply(0, rgb) var rgb_min = Math.min.apply(255, rgb) return (rgb_max + rgb_min ) / 2 diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index a2d2223..dd63db2 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -11,7 +11,8 @@ Rooms.mover = new function(){ base.bind = function(){ app.on("move", base.update) - keys.on("backslash", function(){ + keys.on("backslash", function(e){ + if ( ! (e.ctrlKey || e.metaKey) ) return base.noclip = ! base.noclip base.room = null app.movements.gravity( ! base.noclip ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index ccd6c63..05d1bec 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -9,6 +9,7 @@ var EditorView = View.extend({ }, initialize: function(){ + this.cursor = new HelpCursor ({ parent: this }) this.toolbar = new EditorToolbar ({ parent: this }) this.settings = new EditorSettings ({ parent: this }) this.info = new BuilderInfo ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..842e871 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,38 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + messages: { + start: "Welcome to Vvalls!", + move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + }, + shown: {}, + + initialize: function(){ + $(window).mousemove(function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }.bind(this)) + this.show("start") + }, + + show: function(name){ + if (name) this.showMessage(name) + this.$el.show() + }, + + hide: function(){ + this.$el.hide() + }, + + showMessage: function(name){ + if (+(this.shown[name] || 0) < 2) { + this.$el.html(this.messages[name]) + this.shown[name] = (+this.shown[name] || 0) + 1 + } + else { + this.$el.html("") + } + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 10819af..b270be5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({ 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.$wallpaperMedia = this.$(".wallpaperMedia") + this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container") + this.$wallpaperToggle = this.$(".wallpaperToggle") + this.$deleteMedia = this.$("#deleteMedia") this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, + wallpaperToggle: function(){ + this.$wallpaperMedia.addClass("active") + this.$foundMedia.addClass("inactive") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") + }, + foundToggle: function(){ - this.$foundMedia.addClass("active"); - this.$myMedia.addClass("inactive"); - this.$("a").removeClass("active"); - this.$foundToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.addClass("active") + this.$myMedia.addClass("inactive") + this.$("a").removeClass("active") + this.$foundToggle.addClass("active") }, userToggle: function(){ - this.$foundMedia.removeClass("active"); - this.$myMedia.removeClass("inactive"); - this.$("a").removeClass("active"); - this.$userToggle.addClass("active"); + this.$wallpaperMedia.removeClass("active") + this.$foundMedia.removeClass("active") + this.$myMedia.removeClass("inactive") + this.$("a").removeClass("active") + this.$userToggle.addClass("active") }, show: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index cf98170..0140dc6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -901,7 +901,7 @@ border-left: 1px solid black; .face { background-color: #fff; - transition: 0.1s background-color ease; + transition: 0.1s background-color ease, 0.05s background-color ease; } .front { background-color: #fff; } .back { background-color: #fff; } @@ -1271,7 +1271,7 @@ border-left: 1px solid black; .noMedia { margin: 40px; } -.foundMedia { +.foundMedia, .wallpaperMedia { position:absolute; top:0; left:0; @@ -1282,8 +1282,7 @@ border-left: 1px solid black; padding-top:40px; width: 100%; } - -.foundMedia.active { +.foundMedia.active, .wallpaperMedia.active { -webkit-transform: translateX(0%); transform: translateX(0%); } @@ -1718,6 +1717,17 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; } +#helpCursor { + position: fixed; + max-width: 200px; + font-size: 13px; + color: black; + background: #fff; + margin: 8px 0 0 8px; + padding: 4px; + font-weight: 500; + z-index: 22; +} .settings.info { right: auto; diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 7996f84..d1e2c99 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -6,7 +6,13 @@ X
-

Your Media – Found Media


+

+ Your Media + – Found Media + +


@@ -29,4 +35,9 @@
+ +
+ +
+
\ No newline at end of file diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 7c40a75..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,3 +1,5 @@ + +

Room Settings

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..05f4b58 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 9ae4f45f24e3e79aeb32e0a128ee798381b80569 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 15 Oct 2014 22:35:48 -0400 Subject: more help text --- public/assets/javascripts/defaults.js | 2 +- public/assets/javascripts/rectangles/engine/rooms/builder.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 8 +++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 5 ++++- public/assets/javascripts/ui/editor/Presets.js | 4 ++-- public/assets/stylesheets/app.css | 2 ++ 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 9ba0b4d..12aed62 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -3,7 +3,7 @@ app.defaults = { units: app.units = "ft", footResolution: 36, meterResolution: 100, - wallOpacity: 0.95, + wallOpacity: 0.98, outlineWidth: 2, colors: { wall: [255,255,255], diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 33333fb..c95734b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -280,7 +280,7 @@ return el } this.make_wall = function (klass) { - // klass += ".backface-hidden" + 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/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 8bfaef8..9b6807e 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -5,9 +5,11 @@ var HelpCursor = View.extend({ active: false, messages: { - start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", - media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", - presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + start: "Welcome to Vvalls! Click one of the tools at right to learn about it.", + media: "This is where you pick media to go on the walls. You can upload media and paste links.", + addmedia: "Great, now click a wall to place this image.", + resize: "Drag the image to position it, or use the dots to resize.", + presets: "These are some basic presets to get you started. Click em! :-)", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e196e41..8cae4a4 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -77,6 +77,7 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.cursor.message('start') }, load: function(){ @@ -232,7 +233,8 @@ var MediaViewer = ModalView.extend({ } this.hide() - + this.parent.cursor.message('addmedia') + var $ants = $('.ants'); var $floatingImg = $('.floatingImg'); @@ -267,6 +269,7 @@ var MediaViewer = ModalView.extend({ $(window).off('mousedown', _hideCursor) app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') + app.controller.cursor.message('resize') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 35b5b58..4edc957 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -39,11 +39,11 @@ var Presets = View.extend({ }, toggle: function(state){ - this.$el.toggleClass("active", state); + this.$el.toggleClass("active", state) + this.parent.cursor.message(state ? "presets" : "start") }, show: function(){ - this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 250ae67..1ab1198 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1676,6 +1676,7 @@ input[type="range"]::-webkit-slider-thumb { cursor:pointer; border-bottom: 1px transparent solid; } +.presets span:hover, .presets span.active { text-decoration: underline; } @@ -1728,6 +1729,7 @@ input[type="range"]::-webkit-slider-thumb { padding: 4px; font-weight: 500; z-index: 22; + display: none; } .settings.info { -- cgit v1.2.3-70-g09d2 From c13532ec95c2d410354f7d342df70fd68dd78272 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 02:21:46 -0400 Subject: matrix mode --- .../javascripts/rectangles/engine/rooms/_walls.js | 31 ++++++++++++++++- .../javascripts/rectangles/engine/rooms/mover.js | 8 ++--- .../assets/javascripts/rectangles/models/wall.js | 4 +-- .../assets/javascripts/ui/editor/ColorControl.js | 21 ++++++++---- public/assets/javascripts/ui/editor/Presets.js | 39 ++++++++++++++++++++-- public/assets/stylesheets/app.css | 22 +++++++----- views/controls/editor/presets.ejs | 12 ------- 7 files changed, 101 insertions(+), 36 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index f2348f0..5c16ce6 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -140,6 +140,36 @@ var rgb_min = Math.min.apply(255, rgb) return (rgb_max + rgb_min ) / 2 } + + base.setBodyColor = function(){ + $("#header").toggleClass("black", Walls.luminance() < 100) + $("body").css("background-color", rgb_string( Walls.colors.wall )) + } + base.clearBodyColor = function(){ + $("#header").removeClass("black") + $("body").css("background-color", "transparent") + } + + base.setWallpaper = { + wall: function(background){ + var img = new Image () + img.onload = function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper(background, img) + }) + }.bind(this) + img.src = background.src + img.complete && img.onload() + } + } + + base.clearWallpaper = { + wall: function(){ + Walls.list.forEach(function(wall){ + wall.wallpaper("none") + }) + } + } base.setColor = { @@ -181,7 +211,6 @@ room.setCeilingColor(rgbColor) }) }, - } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index dd63db2..fae2ce6 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -44,8 +44,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") + Walls.clearBodyColor() base.room = null } @@ -61,8 +60,9 @@ 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 )) + if (! base.noclip) { + Walls.setBodyColor() + } app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 2ee88d9..542c99a 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -213,7 +213,7 @@ this.$walls.css("background-color", color) } - Wall.prototype.wallpaper = function(background){ + Wall.prototype.wallpaper = function(background, img){ if (! background) { background = { src: "none" } } @@ -235,7 +235,7 @@ return } - var img = new Image () + img = img || new Image () img.onload = function(){ this.backgroundImage = img this.wallpaperLoad(this.background.src) diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 26358f1..61a7ef6 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -4,9 +4,10 @@ var ColorControl = View.extend({ events: { "mousedown": "stopPropagation", - "click .color-swatches span": "select", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", + "click .color-swatches span": "setSurface", + "click .colors span": "setHue", }, colors: [ @@ -48,16 +49,15 @@ var ColorControl = View.extend({ $swatch.css("background-color","rgb(" + color + ")") $swatch.data('color', color) this.$colors.append($swatch) - }.bind(this)) - + }.bind(this)) }, modes: [ "wall", "outline", "floor", "ceiling" ], load: function(data){ this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) }.bind(this)) this.setMode("wall") }, @@ -134,11 +134,20 @@ var ColorControl = View.extend({ this.$brightnessControl.val( this.labColor[0] ) }, - select: function(e){ + setSurface: function(e){ var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, + setHue: function(e){ + var color = $(e.currentTarget).data('color') + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + + this.pick(color, this.labColor) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index a3dc610..c34c826 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -19,8 +19,9 @@ var Presets = View.extend({ outline: [0,0,0], floor: [109,116,106], ceiling: [159,163,157], + background: [109,116,106], }, - pfunk: { + "p.funk": { wall: [255,63,78], outline: [255,246,0], floor: [255,255,0], @@ -32,10 +33,24 @@ var Presets = View.extend({ floor: [0,0,0], ceiling: [0,0,0], }, + matrix: { + wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] }, + outline: [0,0,0], + floor: [10,15,10], + ceiling: [0,0,0], + }, }, initialize: function(opt){ this.parent = opt.parent + + this.$presets = this.$(".presets") + _.keys(this.presets).forEach(function(name){ + var $swatch = $("") + $swatch.html(capitalize(name)) + $swatch.data('preset', name) + this.$presets.append($swatch) + }.bind(this)) }, toggle: function(state){ @@ -54,9 +69,9 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') + this.load(this.presets[preset]) }, selectColor: function(e){ @@ -64,4 +79,24 @@ var Presets = View.extend({ console.log(preset) }, + lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]}, + load: function(preset){ + this.parent.colorControl.modes.forEach(function(mode){ + if (! preset[mode].length) { + Walls.setWallpaper[mode](preset[mode]) + Walls.setColor[mode](preset[mode].color) + } + else { + if (! this.lastPreset[mode].length) { + Walls.clearWallpaper[mode]() + } + Walls.setColor[mode](preset[mode]) + this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode])) + } + }.bind(this)) + this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor") + Walls.setBodyColor() + this.lastPreset = preset + }, + }) \ No newline at end of file diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d7999b9..bd2d42c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1445,12 +1445,12 @@ border-left: 1px solid black; .wallpaper, #presets { right: 80px; margin-top: 77px; - width: 172px; + width: 202px; -webkit-transition: -webkit-transform 0.1s ease-in-out; -webkit-transform: translateX(400px); transition: transform 0.1s ease-in-out; transform: translateX(400px); - padding: 5px 5px 9px 5px; + padding: 10px 12px 12px 12px; } #presets { @@ -1467,6 +1467,7 @@ border-left: 1px solid black; display: inline-block; border: 1px solid; background-size: contain; + margin: 0 2px 4px 2px; -webkit-transition: -webkit-transform 0.1s ease-in-out; line-height: 0; vertical-align: text-bottom; @@ -1486,7 +1487,7 @@ border-left: 1px solid black; } .vvbox .colors { - max-width: 170px; + max-width: 155px; margin-bottom: 5px; } .vvbox .colors span { @@ -1585,7 +1586,7 @@ border-left: 1px solid black; .colorcontrol { margin-top: 8%; right: 80px; - padding: 13px 20px 20px 20px; + padding: 10px 12px 12px 12px; -webkit-transform: translateX(400px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateX(400px); @@ -1607,8 +1608,8 @@ input[type=range] { -moz-appearance: none; cursor: pointer; background-color: black; - width: 180px; - height:3px; + width: 155px; + height: 3px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; @@ -1702,8 +1703,7 @@ input[type="range"]::-webkit-slider-thumb { margin-bottom:5px; } .color-swatches span.active, .color-swatches span.active:hover{ - background:#000; - color:white; + background: #fff; } .color-swatches span:nth-child(3){ clear:left; @@ -1711,10 +1711,14 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches span:hover { background:#eee; } +.color-swatches span.active label, +.color-swatches span:hover label { + border-bottom: 1px solid; +} .color-swatches label { position: relative; - padding-left: 5px; + margin-left: 5px; display: inline-block; cursor: pointer; } diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 8dd1986..04b1cf1 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,17 +1,5 @@

Preset Styles

- - Inverse - - - Shaded - - - Wireframe - - - P.Funk -
-- cgit v1.2.3-70-g09d2 From 37851cbd12dcb17be77265164876184019d34602 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 03:09:22 -0400 Subject: .. and floor and ceiling --- .../javascripts/rectangles/engine/rooms/_walls.js | 28 ++++++++++++++++++++-- .../assets/javascripts/rectangles/models/floor.js | 5 ++-- public/assets/javascripts/ui/editor/Presets.js | 25 ++++++++++++++++--- public/assets/javascripts/util.js | 3 ++- public/assets/stylesheets/app.css | 7 ++++++ views/controls/editor/presets.ejs | 1 + 6 files changed, 60 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 5c16ce6..fe5913d 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -160,7 +160,19 @@ }.bind(this) img.src = background.src img.complete && img.onload() - } + }, + floor: function(background){ + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + floor.wallpaper(background) + }) + }, + ceiling: function(background){ + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + floor.wallpaper(background) + }) + }, } base.clearWallpaper = { @@ -168,7 +180,19 @@ Walls.list.forEach(function(wall){ wall.wallpaper("none") }) - } + }, + floor: function(){ + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + wall.wallpaper("none") + }) + }, + ceiling: function(){ + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + wall.wallpaper("none") + }) + }, } base.setColor = { diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 7ed52a1..9838232 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -15,6 +15,7 @@ var Floor = function(opt){ this.id = opt.id this.side = opt.side + this.ceiling = opt.side & CEILING this.mx = opt.mx } @@ -114,8 +115,6 @@ this.background.x = background.x || this.background.x this.background.y = background.y || this.background.y this.background.scale = background.scale || this.background.scale || 1 - - var shouldFlip = this.side & (CEILING) var mx, dx, dy var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) @@ -125,7 +124,7 @@ var region = mx.rect - if (shouldFlip) { + if (this.ceiling) { dx = Math.round( this.background.x - region.x.a ) dy = Math.round( this.background.y - region.y.a ) } diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index c34c826..cde2fdf 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -5,6 +5,8 @@ var Presets = View.extend({ "mousedown": "stopPropagation", "click .presets span": "selectPreset", "click .swatches span": "selectColor", + "change .url": "tileWalls", + "keydown .url": "enterSetUrl", }, presets: { @@ -21,7 +23,7 @@ var Presets = View.extend({ ceiling: [159,163,157], background: [109,116,106], }, - "p.funk": { + "p.Funk": { wall: [255,63,78], outline: [255,246,0], floor: [255,255,0], @@ -34,7 +36,7 @@ var Presets = View.extend({ ceiling: [0,0,0], }, matrix: { - wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] }, + wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] }, outline: [0,0,0], floor: [10,15,10], ceiling: [0,0,0], @@ -43,7 +45,9 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - + + this.$url = this.$(".url") + this.$presets = this.$(".presets") _.keys(this.presets).forEach(function(name){ var $swatch = $("") @@ -99,4 +103,19 @@ var Presets = View.extend({ this.lastPreset = preset }, + tileWalls: function(){ + var url = this.$url.sanitize() + if (url.length && url.indexOf("http://") == 0) { + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + } + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.tileWalls.bind(this), 100) + } + }, + }) \ No newline at end of file diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 76c5c7b..367e20e 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -4,10 +4,11 @@ if (window.$) { $.fn.string = function() { return trim($(this).val()) } $.fn.enable = function() { return $(this).attr("disabled",null) } $.fn.disable = function() { return $(this).attr("disabled","disabled") } + $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) } $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) } } -function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } +function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bd2d42c..a711baa 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1698,6 +1698,13 @@ input[type="range"]::-webkit-slider-thumb { width: 100%; color: #555; } +#presets .url { + margin: 4px 0; + padding: 2px; + font-size: 12px; + border: 1px black solid; + width: 100%; +} .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){ margin-bottom:5px; diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 04b1cf1..02e9d42 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -2,4 +2,5 @@

Preset Styles

+
-- cgit v1.2.3-70-g09d2 From 27e6f068a626239f47041b800f33676769ce9591 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 11:40:20 -0400 Subject: coupla things --- public/assets/javascripts/mx/extensions/mx.movements.js | 6 +++--- public/assets/javascripts/rectangles/engine/rooms/_walls.js | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 386819a..5b1e2de 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -139,15 +139,15 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.colorControl.$el.hasClass('active')) { + else if (app.controller.colorControl && app.controller.colorControl.$el.hasClass('active')) { app.controller.colorControl.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.wallpaperPicker.$el.hasClass('active')) { + else if (app.controller.wallpaperPicker && app.controller.wallpaperPicker.$el.hasClass('active')) { app.controller.wallpaperPicker.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.presets.$el.hasClass('active')) { + else if (app.controller.presets && app.controller.presets.$el.hasClass('active')) { app.controller.presets.hide() $(".inuse").removeClass("inuse") } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index fe5913d..29338cb 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -181,6 +181,8 @@ wall.wallpaper("none") }) }, + outline: function(){ + }, floor: function(){ Walls.floors.forEach(function(floor){ if (floor.ceiling) return -- cgit v1.2.3-70-g09d2 From 8ad9d0afa5175c4f54606e419319916e2f2a7667 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 11:41:08 -0400 Subject: etc --- public/assets/javascripts/rectangles/engine/rooms/_walls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 29338cb..69b9aa4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -186,13 +186,13 @@ floor: function(){ Walls.floors.forEach(function(floor){ if (floor.ceiling) return - wall.wallpaper("none") + floor.wallpaper("none") }) }, ceiling: function(){ Walls.floors.forEach(function(floor){ if (! floor.ceiling) return - wall.wallpaper("none") + floor.wallpaper("none") }) }, } -- cgit v1.2.3-70-g09d2 From 38a948be224d704589fa203520f224615a81c7d9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 12:09:21 -0400 Subject: colors work after editing layout --- .../javascripts/rectangles/engine/map/ui_editor.js | 4 ++-- .../javascripts/rectangles/engine/rooms/_walls.js | 17 +++++++++-------- public/assets/javascripts/rectangles/models/room.js | 14 +------------- 3 files changed, 12 insertions(+), 23 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 1a4ea3c..1ab9c73 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -220,7 +220,7 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY * 2), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) @@ -235,7 +235,7 @@ Map.UI.Editor = function(map){ }, 250) } else { - map.set_zoom(map.zoom_exponent - deltaY/20) + map.set_zoom(map.zoom_exponent + deltaY/20) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 69b9aa4..653278c 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -126,11 +126,10 @@ var ceilingColor = rgb_string(Walls.colors.ceiling) Walls.list.forEach(function(wall){ wall.outline(wallColor, outlineColor) - // TODO: SET WALLPAPER HERE }) - Rooms.forEach(function(room){ - room.setFloorColor(floorColor) - room.setCeilingColor(ceilingColor) + Walls.floors.forEach(function(floor){ + if (floor.ceiling) floor.color(ceilingColor) + else floor.color(floorColor) }) } @@ -225,16 +224,18 @@ floor: function(rgb){ var rgbColor = rgb_string(rgb) Walls.colors.floor = rgb - Rooms.forEach(function(room){ - room.setFloorColor(rgbColor) + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + floor.color(rgbColor) }) }, ceiling: function(rgb){ var rgbColor = rgb_string(rgb) Walls.colors.ceiling = rgb - Rooms.forEach(function(room){ - room.setCeilingColor(rgbColor) + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + floor.color(rgbColor) }) }, } diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 1a4606c..b0344a1 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -158,19 +158,7 @@ }) 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 } -- cgit v1.2.3-70-g09d2 From 6fa1570122f2bae9abfaffc5ed90c8b6e36675ea Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:57:50 -0400 Subject: hit enter to flood, floods room, badaboom --- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 37 ++++++++++++++++------ public/assets/stylesheets/app.css | 3 +- 3 files changed, 30 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 653278c..25b1c58 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -157,7 +157,7 @@ wall.wallpaper(background, img) }) }.bind(this) - img.src = background.src + img.src = background.src.replace("url(","").replace(")","") img.complete && img.onload() }, floor: function(background){ diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 3b6168e..20fdf85 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -7,12 +7,12 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { - "contextmenu": 'cancel', + "contextmenu": 'contextmenu', "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', "input [data-role='wallpaper-scale']": 'updateScale', - "change .url": "tileWalls", + "change .url": "enterUrl", "keydown .url": "enterSetUrl", }, @@ -122,15 +122,21 @@ var WallpaperPicker = UploadView.extend({ } }, - cancel: function(e){ + contextmenu: function(e){ if (Scenery.nextWallpaper) { e.preventDefault() + this.cancel() + } + }, + cancel: function(){ + if (Scenery.nextWallpaper) { Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } }, follow: function(e, wallpaper, icon){ + var base = this icon = icon || wallpaper var $floatingSwatch = $(".floatingSwatch") @@ -139,6 +145,8 @@ var WallpaperPicker = UploadView.extend({ Scenery.nextWallpaper = wallpaper + $(".floodMessage").show() + setTimeout(function(){ function _followCursor(e) { $floatingSwatch.css({ @@ -151,7 +159,12 @@ var WallpaperPicker = UploadView.extend({ // $(window).off('click', _hideCursor) app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() + $(".floodMessage").hide() } + function _floodRoom (e) { + base.flood() + } + $(window).on('keydown', _floodRoom) $(window).on('mousemove', _followCursor) // $(window).one('click', _hideCursor); app.on('cancel-wallpaper', _hideCursor) @@ -178,22 +191,26 @@ var WallpaperPicker = UploadView.extend({ this.wall.wallpaperPosition({ scale: scale }) }, - tileWalls: function(){ + enterUrl: function(){ var url = this.$url.sanitize() - if (url.length && url.indexOf("http") == 0) { - Walls.setWallpaper.wall({ src: url }) - Walls.setWallpaper.floor({ src: url }) - Walls.setWallpaper.ceiling({ src: url }) - } this.addUrl(url) this.$url.val("") }, enterSetUrl: function (e) { e.stopPropagation() if (e.keyCode == 13) { - setTimeout(this.tileWalls.bind(this), 100) + setTimeout(this.enterUrl.bind(this), 100) } }, + + flood: function(url){ + url = url || Scenery.nextWallpaper + if (! url) return + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + this.cancel() + }, initializePositionCursor: function(){ var base = this diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e5b10e3..8e259ef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1706,7 +1706,8 @@ input[type="range"]::-webkit-slider-thumb { display: none; animation: flicker 0.2s infinite; color: black; - margin: 5px 5px 49px 5px; + float: left; + margin: 10px 5px 5px 5px; font-size: 13px; font-weight: 300; text-align: center; -- cgit v1.2.3-70-g09d2 From de6fa5bf0e7f0a55341d05f5a5b1dfb19330aeb0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 29 Oct 2014 18:25:12 -0400 Subject: stub in fixes to mover --- .../javascripts/rectangles/engine/rooms/mover.js | 38 +++++++++++++++++++++- .../assets/javascripts/rectangles/models/room.js | 6 ++-- public/assets/javascripts/ui/reader/MediaPlayer.js | 2 +- server/lib/views/index.js | 6 ++-- 4 files changed, 44 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index fae2ce6..121ecec 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -34,7 +34,43 @@ Rooms.mover = new function(){ } // check if we've breached one of the walls.. clamp position if so - var collision = base.room.collidesDisc(pos.x, pos.z, radius) + var collision = base.room.collidesDisc(cam, pos, radius) + +/* + var dz = new vec2( cam.z, pos.z ) + dz.normalize() + + var dx = new vec2( cam.x, pos.x ) + dx.normalize() + + Walls.list.forEach(function(wall){ + switch (wall.side) { + case FRONT: + break + case BACK: + break + case LEFT: + if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && (wall.vec.intersects(dz) ) { + // intersects the wall.. next check if it intersects any of the surface frames + wall.surface.faces.some(function(face, i){ + // if we can pass through the wall at this point, we do not need to clamp + if (face.y.a === 0 && face.x.intersects(dz)) { + dz.a = pos.z = face.x.clamp(pos.z) + dz.b = cam.z + dz.normalize() + return true + } + }) + } + break + case RIGHT: + if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && (wall.vec.contains(cam.z) || wall.vec.contains(pos.z)) ) { + // intersects + } + break + } + }) +*/ if (collision && ! base.noclip) { cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index b0344a1..26bf055 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -122,7 +122,8 @@ return collision } - Room.prototype.collidesDisc = function(x,y,radius){ + Room.prototype.collidesDisc = function(src, dest, radius){ + var x = dest.x, y = dest.z var collision = 0, wall_collision, contains_x, contains_y this.regions.forEach(function(r){ if (! r.sides) return @@ -152,9 +153,6 @@ if (contains_y) { collision |= wall_collision & LEFT_RIGHT } -// if (bitcount(wall_collision) > 1) { -// collision |= wall_collision -// } }) return collision } diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 7f73e1b..e40c6ff 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -44,7 +44,7 @@ var MediaPlayer = FormView.extend({ this.unbind() } if (media.type == "image") { - if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length) || (media.title == filenameFromUrl(media.url)) ) { + if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) { this.hide() return } diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 0b5a1fe..7ffadb9 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -38,10 +38,12 @@ var views = module.exports = { } else if (req.isOwner || req.isCollaborator || req.isStaff) { res.locals.opt.editing = true - res.render('editor') + res.render('editor', { + ogUrl: "http://vvalls.com/project/" + req.project.slug + "/", + }) } else { - views.reader(req, res) + res.redirect("/project/" + req.project.slug + "/") } }, -- cgit v1.2.3-70-g09d2 From c0fe6750cc0462adbc2165ac7f8c9cf1e0aea925 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 30 Oct 2014 17:59:44 -0400 Subject: intersection test --- .../javascripts/rectangles/engine/rooms/mover.js | 95 ++++++++++---- .../assets/javascripts/vendor/canvasutilities.js | 145 +++++++++++++++++++++ public/assets/test/intersect.html | 132 +++++++++++++++++++ 3 files changed, 348 insertions(+), 24 deletions(-) create mode 100644 public/assets/javascripts/vendor/canvasutilities.js create mode 100644 public/assets/test/intersect.html (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 121ecec..8ce00fe 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -36,6 +36,18 @@ Rooms.mover = new function(){ // check if we've breached one of the walls.. clamp position if so var collision = base.room.collidesDisc(cam, pos, radius) + if (collision && ! base.noclip) { + cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x + cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z + return + } + + // in this case, we appear to have left the room.. + // $(".face.active").removeClass("active") + Walls.clearBodyColor() + base.room = null + } + /* var dz = new vec2( cam.z, pos.z ) dz.normalize() @@ -43,47 +55,82 @@ Rooms.mover = new function(){ var dx = new vec2( cam.x, pos.x ) dx.normalize() + // first check if the cam-pos movement intersects the wall. + // next check if it intersects any of the surface frames + // if we can pass through the wall at this point, we do not need to clamp. + // otherwise, get the distance along the cam-pos vector where we would hit the wall and clamp to it. Walls.list.forEach(function(wall){ + var t = -1 switch (wall.side) { case FRONT: + if (cam.z >= wall.edge + radius && wall.edge + radius >= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, radius ) + } break case BACK: + // console.log(cam.z|0, wall.edge-radius, pos.z|0, wall.vec.intersects(dx)) + if (cam.z <= wall.edge - radius && wall.edge - radius <= pos.z && wall.vec.intersects(dx) ) { + t = check_intersection( front_back_intersection, cam, pos, dx, wall, -radius ) + console.log(t) + } break case LEFT: - if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && (wall.vec.intersects(dz) ) { - // intersects the wall.. next check if it intersects any of the surface frames - wall.surface.faces.some(function(face, i){ - // if we can pass through the wall at this point, we do not need to clamp - if (face.y.a === 0 && face.x.intersects(dz)) { - dz.a = pos.z = face.x.clamp(pos.z) - dz.b = cam.z - dz.normalize() - return true - } - }) + if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, radius ) } break case RIGHT: - if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && (wall.vec.contains(cam.z) || wall.vec.contains(pos.z)) ) { - // intersects + if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && wall.vec.intersects(dz) ) { + t = check_intersection( left_right_intersection, cam, pos, dz, wall, -radius ) } break } + if (0 <= t && t <= 1) { + pos.x = cam.x + (pos.x - cam.x) * t + pos.z = cam.z + (pos.z - cam.z) * t + + dz = new vec2( cam.z, pos.z ) + dz.normalize() + + dx = new vec2( cam.x, pos.x ) + dx.normalize() + } }) -*/ - if (collision && ! base.noclip) { - cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x - cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z - return - } + function check_intersection(intersection_function, cam, pos, cam_pos_vector, wall, radius) { + var t = -1 + wall.surface.faces.some(function(face, i){ + if (face.y.a == 0 && face.x.intersects(cam_pos_vector)) { + t = intersection_function( cam, pos, wall, face, radius ) + console.log(">>", t) + if (0 <= t && t <= 1) { + return true + } + else { + t = -1 + } + } + return false + }) + return t + } + function left_right_intersection (cam, pos, wall, face, radius) { + var perp_n = (face.x.a - face.x.b) * (wall.edge - cam.z + radius) + var perp_d = (face.x.a - face.x.b) * (pos.z - cam.z) + if (perp_d == 0) return Infinity + return perp_n / perp_d + } + function front_back_intersection (cam, pos, wall, face, radius) { + // va.vx*vb.vy - va.vy*vb.vx + var perp_n = (face.x.b - face.x.a) * (wall.edge - cam.x + radius) + var perp_d = (face.x.b - face.x.a) * (pos.x - cam.x) - // in this case, we appear to have left the room.. - // $(".face.active").removeClass("active") - Walls.clearBodyColor() - base.room = null - } + console.log((pos.x - cam.x), wall.edge - cam.x, radius) + if (perp_d == 0) return Infinity + return perp_n / perp_d + } +*/ // collision test failed, so update position cam.x = pos.x cam.z = pos.z diff --git a/public/assets/javascripts/vendor/canvasutilities.js b/public/assets/javascripts/vendor/canvasutilities.js new file mode 100644 index 0000000..011ebb0 --- /dev/null +++ b/public/assets/javascripts/vendor/canvasutilities.js @@ -0,0 +1,145 @@ +var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) { + 'use strict'; + // Ceason pointed to a problem when x1 or y1 were a string, and concatenation + // would happen instead of addition + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + style = typeof(style) != 'undefined' ? style : 3; + which = typeof(which) != 'undefined' ? which : 1; // end point gets arrow + angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8; + d = typeof(d) != 'undefined' ? d : 10; + // default to using drawHead to draw the head, but if the style + // argument is a function, use it instead + var toDrawHead = typeof(style) != 'function' ? drawHead : style; + + // For ends with arrow we actually want to stop before we get to the arrow + // so that wide lines won't put a flat end on the arrow. + // + var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + var ratio = (dist - d / 3) / dist; + var tox, toy, fromx, fromy; + if (which & 1) { + tox = Math.round(x1 + (x2 - x1) * ratio); + toy = Math.round(y1 + (y2 - y1) * ratio); + } else { + tox = x2; + toy = y2; + } + if (which & 2) { + fromx = x1 + (x2 - x1) * (1 - ratio); + fromy = y1 + (y2 - y1) * (1 - ratio); + } else { + fromx = x1; + fromy = y1; + } + + // Draw the shaft of the arrow + ctx.beginPath(); + ctx.moveTo(fromx, fromy); + ctx.lineTo(tox, toy); + ctx.stroke(); + + // calculate the angle of the line + var lineangle = Math.atan2(y2 - y1, x2 - x1); + // h is the line length of a side of the arrow head + var h = Math.abs(d / Math.cos(angle)); + + if (which & 1) { // handle far end arrow head + var angle1 = lineangle + Math.PI + angle; + var topx = x2 + Math.cos(angle1) * h; + var topy = y2 + Math.sin(angle1) * h; + var angle2 = lineangle + Math.PI - angle; + var botx = x2 + Math.cos(angle2) * h; + var boty = y2 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style); + } + if (which & 2) { // handle near end arrow head + var angle1 = lineangle + angle; + var topx = x1 + Math.cos(angle1) * h; + var topy = y1 + Math.sin(angle1) * h; + var angle2 = lineangle - angle; + var botx = x1 + Math.cos(angle2) * h; + var boty = y1 + Math.sin(angle2) * h; + toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style); + } +} + +var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) { + 'use strict'; + if (typeof(x0) == 'string') x0 = parseInt(x0); + if (typeof(y0) == 'string') y0 = parseInt(y0); + if (typeof(x1) == 'string') x1 = parseInt(x1); + if (typeof(y1) == 'string') y1 = parseInt(y1); + if (typeof(x2) == 'string') x2 = parseInt(x2); + if (typeof(y2) == 'string') y2 = parseInt(y2); + var radius = 3; + var twoPI = 2 * Math.PI; + + // all cases do this. + ctx.save(); + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + switch (style) { + case 0: + // curved filled, add the bottom as an arcTo curve and fill + var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + ctx.arcTo(x1, y1, x0, y0, .55 * backdist); + ctx.fill(); + break; + case 1: + // straight filled, add the bottom as a line and fill. + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.lineTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.lineTo(x0, y0); + ctx.fill(); + break; + case 2: + // unfilled head, just stroke. + ctx.stroke(); + break; + case 3: + //filled head, add the bottom as a quadraticCurveTo curve and fill + var cpx = (x0 + x1 + x2) / 3; + var cpy = (y0 + y1 + y2) / 3; + ctx.quadraticCurveTo(cpx, cpy, x0, y0); + ctx.fill(); + break; + case 4: + //filled head, add the bottom as a bezierCurveTo curve and fill + var cp1x, cp1y, cp2x, cp2y, backdist; + var shiftamt = 5; + if (x2 == x0) { + // Avoid a divide by zero if x2==x0 + backdist = y2 - y0; + cp1x = (x1 + x0) / 2; + cp2x = (x1 + x0) / 2; + cp1y = y1 + backdist / shiftamt; + cp2y = y1 - backdist / shiftamt; + } else { + backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0))); + var xback = (x0 + x2) / 2; + var yback = (y0 + y2) / 2; + var xmid = (xback + x1) / 2; + var ymid = (yback + y1) / 2; + + var m = (y2 - y0) / (x2 - x0); + var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt; + var dy = m * dx; + cp1x = xmid - dx; + cp1y = ymid - dy; + cp2x = xmid + dx; + cp2y = ymid + dy; + } + + ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0); + ctx.fill(); + break; + } + ctx.restore(); +} diff --git a/public/assets/test/intersect.html b/public/assets/test/intersect.html new file mode 100644 index 0000000..3f6d110 --- /dev/null +++ b/public/assets/test/intersect.html @@ -0,0 +1,132 @@ + + + + + + + + + + -- cgit v1.2.3-70-g09d2 From a61ad3cea5b7a76777d594d1a6d960943a0e776f Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 31 Oct 2014 22:38:27 -0400 Subject: correctly intercepting walls in mover --- .../javascripts/rectangles/engine/rooms/mover.js | 188 +++++++++++---------- public/assets/test/intersect3.html | 10 +- 2 files changed, 105 insertions(+), 93 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 8ce00fe..69e821f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -4,6 +4,14 @@ Rooms.mover = new function(){ base.room = null base.noclip = false + var cursor = base.cursor = new Rect (0,0,0,0) + var wall_vec = new Rect (0,0,0,0) + var intersect = new vec2(0,0) + + var origins = new Rect() + origins.x = cursor.x + origins.y = wall_vec.x + base.init = function(){ base.bind() base.update(scene.camera) @@ -33,6 +41,14 @@ Rooms.mover = new function(){ return } + var intersect = base.intersect(pos) + + if (intersect && ! base.noclip) { + cam.x = intersect.a + cam.z = intersect.b + return + } +/* // check if we've breached one of the walls.. clamp position if so var collision = base.room.collidesDisc(cam, pos, radius) @@ -41,96 +57,13 @@ Rooms.mover = new function(){ cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z return } - +*/ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") Walls.clearBodyColor() base.room = null } -/* - var dz = new vec2( cam.z, pos.z ) - dz.normalize() - - var dx = new vec2( cam.x, pos.x ) - dx.normalize() - - // first check if the cam-pos movement intersects the wall. - // next check if it intersects any of the surface frames - // if we can pass through the wall at this point, we do not need to clamp. - // otherwise, get the distance along the cam-pos vector where we would hit the wall and clamp to it. - Walls.list.forEach(function(wall){ - var t = -1 - switch (wall.side) { - case FRONT: - if (cam.z >= wall.edge + radius && wall.edge + radius >= pos.z && wall.vec.intersects(dx) ) { - t = check_intersection( front_back_intersection, cam, pos, dx, wall, radius ) - } - break - case BACK: - // console.log(cam.z|0, wall.edge-radius, pos.z|0, wall.vec.intersects(dx)) - if (cam.z <= wall.edge - radius && wall.edge - radius <= pos.z && wall.vec.intersects(dx) ) { - t = check_intersection( front_back_intersection, cam, pos, dx, wall, -radius ) - console.log(t) - } - break - case LEFT: - if (cam.x >= wall.edge + radius && wall.edge + radius >= pos.x && wall.vec.intersects(dz) ) { - t = check_intersection( left_right_intersection, cam, pos, dz, wall, radius ) - } - break - case RIGHT: - if (cam.x <= wall.edge - radius && wall.edge - radius <= pos.x && wall.vec.intersects(dz) ) { - t = check_intersection( left_right_intersection, cam, pos, dz, wall, -radius ) - } - break - } - if (0 <= t && t <= 1) { - pos.x = cam.x + (pos.x - cam.x) * t - pos.z = cam.z + (pos.z - cam.z) * t - - dz = new vec2( cam.z, pos.z ) - dz.normalize() - - dx = new vec2( cam.x, pos.x ) - dx.normalize() - } - }) - - function check_intersection(intersection_function, cam, pos, cam_pos_vector, wall, radius) { - var t = -1 - wall.surface.faces.some(function(face, i){ - if (face.y.a == 0 && face.x.intersects(cam_pos_vector)) { - t = intersection_function( cam, pos, wall, face, radius ) - console.log(">>", t) - if (0 <= t && t <= 1) { - return true - } - else { - t = -1 - } - } - return false - }) - return t - } - function left_right_intersection (cam, pos, wall, face, radius) { - var perp_n = (face.x.a - face.x.b) * (wall.edge - cam.z + radius) - var perp_d = (face.x.a - face.x.b) * (pos.z - cam.z) - if (perp_d == 0) return Infinity - return perp_n / perp_d - } - function front_back_intersection (cam, pos, wall, face, radius) { - // va.vx*vb.vy - va.vy*vb.vx - var perp_n = (face.x.b - face.x.a) * (wall.edge - cam.x + radius) - var perp_d = (face.x.b - face.x.a) * (pos.x - cam.x) - - console.log((pos.x - cam.x), wall.edge - cam.x, radius) - - if (perp_d == 0) return Infinity - return perp_n / perp_d - } -*/ // collision test failed, so update position cam.x = pos.x cam.z = pos.z @@ -148,7 +81,92 @@ Rooms.mover = new function(){ } app.tube("change-room", { room: base.room }) } - } + base.intersect = function(pos){ + var closest_intersect, t, min_t = 1 + + cursor.x.a = cam.x + cursor.x.b = cam.z + cursor.y.a = pos.x + cursor.y.b = pos.z + + var a = angle(cursor) + cursor.y.a += scene.camera.radius * cos(a) + cursor.y.b += scene.camera.radius * sin(a) + + Walls.list.forEach(function(wall, i){ + var actually_intersects, intersecting_face + + if (wall.side & LEFT_RIGHT) { + wall_vec.x.a = wall.edge + wall_vec.x.b = wall.vec.a + wall_vec.y.a = wall.edge + wall_vec.y.b = wall.vec.b + } + else { + wall_vec.x.a = wall.vec.a + wall_vec.x.b = wall.edge + wall_vec.y.a = wall.vec.b + wall_vec.y.b = wall.edge + } + t = perp(origins, wall_vec) / ( perp(cursor, wall_vec) || 0.0000001 ) + + if ( min_t < t || t < 0 || 1 < t ) return + + intersect.a = cursor.x.a + ( cursor.y.a - cursor.x.a ) * t + intersect.b = cursor.x.b + ( cursor.y.b - cursor.x.b ) * t + + if ( ! is_collinear( intersect, wall_vec ) ) return + + if (wall.side & LEFT_RIGHT) { + intersecting_face = wall.surface.face_for_x(intersect.b) + } + else { + intersecting_face = wall.surface.face_for_x(intersect.a) + } + + actually_intersects = !! (intersecting_face && intersecting_face.y.a == 0) + if (actually_intersects) { + closest_intersect = intersect.clone() + min_t = t + } + }) + + if (min_t < 1) { + var a = angle(cursor) + closest_intersect.a -= scene.camera.radius * cos(a) + closest_intersect.b -= scene.camera.radius * sin(a) + } + return closest_intersect + } + function angle (va) { + return atan2(va.y.b - va.x.b, va.y.a - va.x.a) + } + function dot (va, vb) { + return (va.y.a - va.x.a) * (vb.y.a - vb.x.a) + (va.y.b - va.x.b) * (vb.y.b - vb.x.b) + } + function perp (va, vb) { + return (va.y.a - va.x.a) * (vb.y.b - vb.x.b) - (va.y.b - va.x.b) * (vb.y.a - vb.x.a) + } + function is_collinear (p, vec) { + var on_x, on_y + var pa = round(p.a), pb = round(p.b) + + if (vec.x.a < vec.y.a) { + on_x = vec.x.a <= pa && pa <= vec.y.a + } + else { + on_x = vec.x.a >= pa && pa >= vec.y.a + } + + if (vec.x.b < vec.y.b) { + on_y = vec.x.b <= pb && pb <= vec.y.b + } + else { + on_y = vec.x.b >= pb && pb >= vec.y.b + } + + return !! (on_x && on_y) + } } diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html index e897e8a..1e2a1a4 100644 --- a/public/assets/test/intersect3.html +++ b/public/assets/test/intersect3.html @@ -167,12 +167,12 @@ function draw () { } drawPoint(intersect) - if (actually_intersects && intersecting_face && t < min_t) { + if (actually_intersects && t < min_t) { min_t = t hud.innerHTML += t + "
" var clone = intersect.clone() clone.t = t - closest_face = intersecting_face + closest_intersect = intersecting_face closest_intersect = clone } }) @@ -185,12 +185,6 @@ function draw () { ctx.fillStyle = "#00f" drawPoint(closest_intersect) drawLine(cursor.x, closest_intersect, "#00f") - // closest_face.vec - - // get the closest intersect, i.e. the one with smallest t value - // get the angle of the cursor - // move the desired position to pos - 20px - } } function drawLine (pa, pb, color, headless) { -- cgit v1.2.3-70-g09d2 From 6b9cf0e41c4e0c09a715e59c162380b5fad42cba Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 3 Nov 2014 12:44:23 -0500 Subject: different collision algo for mobile movement --- .../javascripts/rectangles/engine/rooms/mover.js | 179 +++++++++++++++------ public/assets/test/intersect3.html | 19 ++- 2 files changed, 147 insertions(+), 51 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 69e821f..5682be8 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -5,6 +5,7 @@ Rooms.mover = new function(){ base.noclip = false var cursor = base.cursor = new Rect (0,0,0,0) + var cursor_copy = new Rect (0,0,0,0) var wall_vec = new Rect (0,0,0,0) var intersect = new vec2(0,0) @@ -28,6 +29,7 @@ Rooms.mover = new function(){ } base.update = function(pos){ + var intersect, collision, distance var radius = scene.camera.radius cam.y = pos.y @@ -41,23 +43,38 @@ Rooms.mover = new function(){ return } - var intersect = base.intersect(pos) + distance = sqrt(pow(cam.x-pos.x, 2), pow(cam.z-pos.z, 2)) + + // check if we've breached one of the walls.. clamp position if so. + // there are two algorithms for this now, ridiculously.. + // - the first one is smoother, best for keyboard use + // but if the distance travelled is greater than the min. distance from the wall, + // then there is a possibility of ejection from the room. so is bad for phone/mousewheel. - if (intersect && ! base.noclip) { - cam.x = intersect.a - cam.z = intersect.b - return + // - the second one determines fortuitously if we have breached any of the walls + // however it can get jumpy if you run into a wall.. thus it is best for devices like phone or mousewheel + // the benefit is you will never leave the room. + if (base.noclip) { + // in no-clip mode we walk through walls. } -/* - // check if we've breached one of the walls.. clamp position if so - var collision = base.room.collidesDisc(cam, pos, radius) + else if (distance < radius) { + collision = base.room.collidesDisc(cam, pos, radius) + + if (collision) { + cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x + cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z + return + } + } + else { + intersect = base.intersect(pos) + if (intersect) { + cam.x = intersect.a + cam.z = intersect.b + return + } + } - if (collision && ! base.noclip) { - cam.x = (collision & LEFT_RIGHT) ? base.room.rect.x.clampDisc(pos.x, radius) : pos.x - cam.z = (collision & FRONT_BACK) ? base.room.rect.y.clampDisc(pos.z, radius) : pos.z - return - } -*/ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") Walls.clearBodyColor() @@ -83,39 +100,30 @@ Rooms.mover = new function(){ } } base.intersect = function(pos){ - var closest_intersect, t, min_t = 1 - - cursor.x.a = cam.x - cursor.x.b = cam.z - cursor.y.a = pos.x - cursor.y.b = pos.z + var closest_intersect, closest_wall, new_t, wall_t, t, min_t = 1 - var a = angle(cursor) - cursor.y.a += scene.camera.radius * cos(a) - cursor.y.b += scene.camera.radius * sin(a) + cursor_copy.x.a = cursor.x.a = cam.x + cursor_copy.x.b = cursor.x.b = cam.z + cursor_copy.y.a = cursor.y.a = pos.x + cursor_copy.y.b = cursor.y.b = pos.z + + cursor_copy.extend_ends(scene.camera.radius) + + origins.x = cursor_copy.x + origins.y = wall_vec.x Walls.list.forEach(function(wall, i){ - var actually_intersects, intersecting_face + var actually_intersects = false, intersecting_face + + wall.get_points(wall_vec) - if (wall.side & LEFT_RIGHT) { - wall_vec.x.a = wall.edge - wall_vec.x.b = wall.vec.a - wall_vec.y.a = wall.edge - wall_vec.y.b = wall.vec.b - } - else { - wall_vec.x.a = wall.vec.a - wall_vec.x.b = wall.edge - wall_vec.y.a = wall.vec.b - wall_vec.y.b = wall.edge - } - t = perp(origins, wall_vec) / ( perp(cursor, wall_vec) || 0.0000001 ) + t = perp(origins, wall_vec) / ( perp(cursor_copy, wall_vec) || 0.0000001 ) if ( min_t < t || t < 0 || 1 < t ) return - intersect.a = cursor.x.a + ( cursor.y.a - cursor.x.a ) * t - intersect.b = cursor.x.b + ( cursor.y.b - cursor.x.b ) * t + intersect.a = cursor_copy.x.a + ( cursor_copy.y.a - cursor_copy.x.a ) * t + intersect.b = cursor_copy.x.b + ( cursor_copy.y.b - cursor_copy.x.b ) * t if ( ! is_collinear( intersect, wall_vec ) ) return @@ -128,24 +136,76 @@ Rooms.mover = new function(){ actually_intersects = !! (intersecting_face && intersecting_face.y.a == 0) if (actually_intersects) { - closest_intersect = intersect.clone() + closest_intersect = intersect.clone() + closest_wall = wall_vec.clone() min_t = t } }) - if (min_t < 1) { - var a = angle(cursor) - closest_intersect.a -= scene.camera.radius * cos(a) - closest_intersect.b -= scene.camera.radius * sin(a) + if (closest_intersect) { + + var aw, len, dd + aw = angle(closest_wall) + wall_vec.assign(closest_wall) + wall_vec.x.a -= scene.camera.radius * sin(aw) + wall_vec.x.b += scene.camera.radius * cos(aw) + wall_vec.y.a -= scene.camera.radius * sin(aw) + wall_vec.y.b += scene.camera.radius * cos(aw) + + origins.x = cursor.x + origins.y = wall_vec.x + + new_t = perp(origins, wall_vec) / ( perp(cursor, wall_vec) || 0.0000001 ) + wall_t = perp(origins, cursor) / ( perp(wall_vec, cursor) || 0.0000001 ) + + intersect.a = cursor.x.a + ( cursor.y.a - cursor.x.a ) * new_t + intersect.b = cursor.x.b + ( cursor.y.b - cursor.x.b ) * new_t + + // here compare len to the length of the wall in the direction we are travelling + dd = dot2(diff(closest_wall), diff(cursor)) + len = sqrt(dot(wall_vec, wall_vec)) + + if (dd > 0) { + len *= 1-abs(wall_t) + } + else { + len *= abs(wall_t) + aw += PI + } + + len = clamp(len, 0, (1-min_t) * sqrt(dot(cursor, cursor))) + + intersect.a += len * cos(aw) + intersect.b += len * sin(aw) + + wall_vec.normalize() + intersect.a = clamp(intersect.a, wall_vec.x.a, wall_vec.y.a) + intersect.b = clamp(intersect.b, wall_vec.x.b, wall_vec.y.b) + + return intersect + } + else { + return cursor.y } - return closest_intersect } + function diff (v) { + return new vec2(v.y.a - v.x.a, v.y.b - v.x.b) + } function angle (va) { return atan2(va.y.b - va.x.b, va.y.a - va.x.a) } - function dot (va, vb) { - return (va.y.a - va.x.a) * (vb.y.a - vb.x.a) + (va.y.b - va.x.b) * (vb.y.b - vb.x.b) - } + function angle2 (pa, pb) { + return atan2(pb.b - pa.b, pb.a - pa.a) + } + function normal (va) { + return atan2(va.x.a - va.y.a, va.y.b - va.x.b) + } + function dot (va, vb) { + return (va.y.a - va.x.a) * (vb.y.a - vb.x.a) + (va.y.b - va.x.b) * (vb.y.b - vb.x.b) + } + function dot2 (pa, pb) { + return pa.a * pb.a + pa.b * pb.b + } function perp (va, vb) { return (va.y.a - va.x.a) * (vb.y.b - vb.x.b) - (va.y.b - va.x.b) * (vb.y.a - vb.x.a) } @@ -169,4 +229,27 @@ Rooms.mover = new function(){ return !! (on_x && on_y) } + cursor_copy.extend_ends = function(n){ + var a = angle(this) + this.x.a -= n*cos(a) + this.x.b -= n*sin(a) + this.y.a += n*cos(a) + this.y.b += n*sin(a) + return this + } + wall_vec.normalize = function(){ + var carry + if (this.x.a > this.y.a) { + console.log("SWAP X") + carry = this.x.a + this.x.a = this.y.a + this.y.a = carry + } + if (this.x.b > this.y.b) { + console.log("SWAP Y") + carry = this.x.b + this.x.b = this.y.b + this.y.b = carry + } + } } diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html index ed81346..5440a76 100644 --- a/public/assets/test/intersect3.html +++ b/public/assets/test/intersect3.html @@ -217,8 +217,9 @@ function draw (time) { end_of_ray.a += len * cos(aw) end_of_ray.b += len * sin(aw) -// end_of_ray.a = clamp(end_of_ray.a, wall_vec.x.a, wall_vec.y.a) -// end_of_ray.b = clamp(end_of_ray.b, wall_vec.x.b, wall_vec.y.b) + wall_vec.normalize() + end_of_ray.a = clamp(end_of_ray.a, wall_vec.x.a, wall_vec.y.a) + end_of_ray.b = clamp(end_of_ray.b, wall_vec.x.b, wall_vec.y.b) drawPoint(end_of_ray) drawLine(closest_intersect2, end_of_ray, "#00f") @@ -295,7 +296,19 @@ cursor.extend_ends = function(n){ clone.y.b += n*sin(a) return clone } - +wall_vec.normalize = function(){ + var carry + if (this.x.a > this.y.a) { + carry = this.x.a + this.x.a = this.y.a + this.y.a = carry + } + if (this.x.b > this.y.b) { + carry = this.x.b + this.x.b = this.y.b + this.y.b = carry + } +} function animate(time){ requestAnimationFrame(animate) draw(time) -- cgit v1.2.3-70-g09d2 From 7e20e81927b4d52de2f54c0923c65869f4c253ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 3 Nov 2014 13:16:05 -0500 Subject: z --- public/assets/javascripts/rectangles/engine/rooms/mover.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 5682be8..ac27aba 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -117,7 +117,6 @@ Rooms.mover = new function(){ wall.get_points(wall_vec) - t = perp(origins, wall_vec) / ( perp(cursor_copy, wall_vec) || 0.0000001 ) if ( min_t < t || t < 0 || 1 < t ) return @@ -240,13 +239,13 @@ Rooms.mover = new function(){ wall_vec.normalize = function(){ var carry if (this.x.a > this.y.a) { - console.log("SWAP X") +// console.log("SWAP X") carry = this.x.a this.x.a = this.y.a this.y.a = carry } if (this.x.b > this.y.b) { - console.log("SWAP Y") +// console.log("SWAP Y") carry = this.x.b this.x.b = this.y.b this.y.b = carry -- cgit v1.2.3-70-g09d2 From 0df2cd6c000e593795c1de868a47666862d3ed96 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 3 Nov 2014 14:54:12 -0500 Subject: undo presets --- .../javascripts/rectangles/engine/rooms/_walls.js | 15 +++++++---- .../javascripts/rectangles/engine/scenery/undo.js | 28 +++++++++++++++++++-- public/assets/javascripts/ui/editor/Presets.js | 29 +++++++++++++++++----- 3 files changed, 59 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 25b1c58..04d0594 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -40,12 +40,17 @@ base.colors = {} base.init = function(){ - base.colors = { - wall: app.defaults.colors.wall.slice(), - outline: app.defaults.colors.outline.slice(), - floor: app.defaults.colors.floor.slice(), - ceiling: app.defaults.colors.ceiling.slice(), + base.colors = base.copyColors( app.defaults.colors ) + } + + base.copyColors = function(colors){ + var copy = { + wall: colors.wall.slice(), + outline: colors.outline.slice(), + floor: colors.floor.slice(), + ceiling: colors.ceiling.slice(), } + return copy } base.first = function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index ff4f911..52a57d9 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -114,7 +114,32 @@ undo: function(state){ var wall = Walls.lookup[state.id] wall.deserialize(state) - + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "update-all-wallpaper", + undo: function(state){ + Walls.deserialize(state) + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "choose-preset", + undo: function(state){ + app.controller.colorControl.load(state.colors) + Walls.deserialize(state.walls) + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + app.controller.presets.loadByName(state) + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "choose-another-preset", + undo: function(state){ + app.controller.presets.loadByName(state) Minotaur.watch( app.router.editorView.settings ) }, }, @@ -123,7 +148,6 @@ undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb ) - Minotaur.watch( app.router.editorView.settings ) }, }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index ac77d6b..1327e03 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -4,7 +4,6 @@ var Presets = View.extend({ events: { "mousedown": "stopPropagation", "click .presets span": "selectPreset", - "click .swatches span": "selectColor", }, presets: { @@ -53,7 +52,9 @@ var Presets = View.extend({ }.bind(this)) }, - modified: false, + modified: true, + lastPreset: "wireframe", + toggle: function(state){ this.$el.toggleClass("active", state) this.parent.cursor.message(state ? "presets" : "start") @@ -75,15 +76,31 @@ var Presets = View.extend({ if (! this.presets[preset]) return this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') + if (this.modified) { + UndoStack.push({ + type: "choose-preset", + undo: { walls: Walls.serialize(), colors: Walls.copyColors(Walls.colors) }, + redo: preset, + }) + Minotaur.watch( app.router.editorView.settings ) + } + else { + UndoStack.push({ + type: "choose-another-preset", + undo: this.lastPreset, + redo: preset, + }) + Minotaur.watch( app.router.editorView.settings ) + } + this.lastPreset = preset this.load(this.presets[preset]) this.modified = false }, - selectColor: function(e){ - var preset = $(e.currentTarget).data('color') - console.log(preset) + loadByName: function(name){ + var preset = this.presets[name] + this.load(preset) }, - load: function(preset){ this.parent.colorControl.modes.forEach(function(mode){ var color -- cgit v1.2.3-70-g09d2 From bc4517c6b09e03f52161dc38ca591ed0cc227d5d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 18:33:39 -0500 Subject: toggle global height --- .../javascripts/rectangles/engine/map/ui_editor.js | 1 + .../javascripts/rectangles/engine/rooms/_rooms.js | 4 ++++ .../assets/javascripts/ui/builder/BuilderInfo.js | 22 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 14 +++++++++++++- views/controls/builder/info.ejs | 2 ++ 5 files changed, 42 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index c838b8b..44ca91d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -42,6 +42,7 @@ Map.UI.Editor = function(map){ cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) if (e.ctrlKey || e.which === 3) { + if (Rooms.regions.length == 0) return cursor.quantize(1/map.zoom) map.center.a = cursor.x.a map.center.b = -cursor.y.a diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 5686aba..46c1d7f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -81,6 +81,10 @@ base.forEach = function(f){ return base.values().forEach(f) } + + base.some = function(f){ + return base.values().some(f) + } base.map = function(f){ return base.values().map(f) diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 7606361..c25f03c 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -16,6 +16,7 @@ var BuilderInfo = View.extend({ "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', + "change [name=heightGlobal]": 'changeHeightGlobal', "click [data-role=destroy-room]": 'destroy', }, @@ -31,6 +32,7 @@ var BuilderInfo = View.extend({ this.$unitName = this.$(".unitName") this.$noSelection = this.$(".no-selection") this.$settings = this.$(".setting") + this.$heightGlobalCheckbox = this.$("[name=heightGlobal]") app.on("builder-pick-room", this.pick.bind(this)) app.on("builder-destroy-room", this.hide.bind(this)) app.on("builder-pick-nothing", this.deselect.bind(this)) @@ -40,6 +42,18 @@ var BuilderInfo = View.extend({ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) + + if (Rooms.regions.length == 0) { + this.changeHeightGlobal(true) + } + else { + var rooms = Rooms.values() + var height = rooms[0].height + var differentHeights = Rooms.some(function(room){ + return room.height != height + }) + this.changeHeightGlobal( ! differentHeights ) + } }, toggle: function(state){ @@ -141,5 +155,13 @@ var BuilderInfo = View.extend({ changeViewHeight: function(){ window.viewHeight = this.$viewHeight.unitVal( ) }, + changeHeightGlobal: function(state){ + if (typeof state == "boolean") { + this.$heightGlobalCheckbox.prop("checked", state) + window.heightIsGlobal = state + return + } + window.heightIsGlobal = this.$heightGlobalCheckbox.prop("checked") + }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 814df90..55f3219 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,8 @@ border-left: 1px solid black; transition:opacity 0.3s ease-in-out; } .reader #minimap { - right: 20px; + right: 10px; + bottom: 10px; left: auto; -webkit-transform:translateX(180px); -moz-transform:translateX(180px); @@ -2141,6 +2142,17 @@ input[type="range"]::-webkit-slider-thumb { top: 0px; } +.setting.number #room-height { + width: 60px; +} +.setting.number #room-height-global-label { + float: none; + margin-left: 6px; +} +.setting.number #room-height-global-label:after { + content: ''; +} + #mediaEditor .setting.number label { width: 40px; } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 2762207..8a0e0d5 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -20,6 +20,8 @@
+ +
-- cgit v1.2.3-70-g09d2 From 87ce2f24887f20cf34165f92b43bbfd33435f30a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 13:59:42 -0500 Subject: hiding floor/ceiling in ff --- public/assets/javascripts/rectangles/engine/rooms/builder.js | 6 ++++++ public/assets/javascripts/ui/editor/ColorControl.js | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index c95734b..5e09fab 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -261,6 +261,9 @@ el.rotationX = PI/2 el.rect = region el.side = FLOOR + if ($.browser.mozilla) { + el.el.style.display = "none" + } return el } this.make_ceiling = function (room, region) { @@ -277,6 +280,9 @@ el.rotationX = -PI/2 el.rect = region el.side = CEILING + if ($.browser.mozilla) { + el.el.style.display = "none" + } return el } this.make_wall = function (klass) { diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 9ab2623..54a6a2e 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -47,7 +47,12 @@ var ColorControl = View.extend({ $swatch.css("background-color","rgb(" + color + ")") $swatch.data('color', color) this.$colors.append($swatch) - }.bind(this)) + }.bind(this)) + + if ($.browser.mozilla) { + $("#floor-color").parent().hide() + $("#ceiling-color").parent().hide() + } }, modes: [ "wall", "outline", "floor", "ceiling" ], -- cgit v1.2.3-70-g09d2 From 48fc9b27a77126da649959c8f74ad8faffcd6e2c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 11:15:50 -0400 Subject: comment the regionlist algorithm --- .../javascripts/rectangles/engine/map/_map.js | 6 +- .../javascripts/rectangles/engine/rooms/builder.js | 1 + .../rectangles/engine/shapes/polyline.js | 4 ++ .../rectangles/engine/shapes/regionlist.js | 83 ++++++++++++++++------ .../rectangles/engine/shapes/shapelist.js | 2 + .../assets/javascripts/rectangles/models/vec2.js | 4 +- .../assets/javascripts/rectangles/models/wall.js | 5 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 5 +- 8 files changed, 79 insertions(+), 31 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 2aee962..e27346d 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -69,9 +69,9 @@ var Map = function(opt){ break } - base.resize = function(){ - canvas.width = base.dimensions.a = window.innerWidth - canvas.height = base.dimensions.b = window.innerHeight + base.resize = function(w, h){ + canvas.width = base.dimensions.a = w || window.innerWidth + canvas.height = base.dimensions.b = h || window.innerHeight // resize here - esp if 2d-hires } diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 5e09fab..f78fb91 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -14,6 +14,7 @@ PI = Math.PI HALF_PI = PI/2 TOP = CEILING, BOTTOM = FLOOR + $ = { browser: { mozilla: false } } function sidesToString(sides){ var s = "" if (sides & FRONT) s += "front " diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 6c64128..609a2c8 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,3 +1,7 @@ +// A Polyline is a set of points inputted by the user using the V2 editor to trace a blueprint. +// Additionally, it manages a set of MX objects which correspond to the walls in 3D. +// In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 71f19d8..663f3fd 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -1,36 +1,58 @@ +// This algorithm takes the polylines from ShapeList as input and produces +// a set of Rooms which can be used by the existing V1 mover and editor. + +// The algorithm assumes that +// 1) all angles are orthogonal +// 2) all polylines are closed + var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions RegionList.build = function(){ + + // first, get the segments sorted right to left & top to bottom var segments = RegionList.getSortedSegments() var rooms = [] var seen_rooms = {} var open_segments = [] - var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped, seen_segments + // first pass: generate rooms from the vertical segments only for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } + + // check all the "open segments" we know about, i.e. rooms where we've only found + // the right wall. overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] + + // if these two segments overlap each other, then there is a room between them. if (segment.y.overlaps(open_segment.y)) { overlapped = true - closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) + // the X part of the room will be the span between these two vertical segments' + // X components. the Y part of the room is the "split" or subdivision between + // the two horizontal vectors. + + // the split function is non-commutative, + // so we need to call A split B and B split A, + // then dedupe the segments we got back.. x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} + // check each of the splits.. if the two segments overlap, then we definitely + // have a room here. y_segments.forEach(function(seg){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) @@ -46,7 +68,8 @@ var RegionList = (function(){ j++ }) - y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + // splitting the other way.. + y_segments = segment.y.split(open_segment.y, 0, 0) y_segments.forEach(function(seg){ if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) @@ -55,6 +78,9 @@ var RegionList = (function(){ }) } } + + // if we have overlap, then re-sort the open segments Y-wise + // and (again) dedupe.. if (overlapped) { open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } @@ -74,6 +100,7 @@ var RegionList = (function(){ } } } + // if we don't have any overlap, then this is a new open segment. else { open_segments.push(segment) } @@ -81,11 +108,15 @@ var RegionList = (function(){ var splits, splitter + // second pass: now that we have a bunch of rooms, assign sides to all of them. + // sides are used in the "mover" script to do bounds checking. for (var i = 0; i < segments.length; i++) { segment = segments[i] var horizontal = segment.isHorizontal(), vertical = segment.isVertical() for (var r = 0; r < rooms.length; r++){ room = rooms[r] + + // vertical segments determine the left and right edges of the room, fairly simply. if (vertical) { if (segment.y.containsVec(room.y)) { if (segment.x.a == room.x.a) { @@ -96,6 +127,8 @@ var RegionList = (function(){ } } } + + // horizontal segments determine the front and back edges of the room. if (horizontal) { if (segment.x.containsVec(room.x)) { if (segment.y.a == room.y.a) { @@ -105,28 +138,30 @@ var RegionList = (function(){ room.sides |= BACK } } - - else if (segment.y.a == room.y.a || segment.y.a == room.y.b) { - if (room.x.overlaps(segment.x)) { - splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) - rooms.splice(r--, 1) - console.log(splits) - for (var k = 0; k < splits.length; k++) { - splitter = splits[k] - var new_room = new Rect( splitter[0], room.y ) - new_room.sides = 0 - new_room.sides |= splitter[1] | ( room.sides & FRONT_BACK ) - if (segment.x.overlaps( splitter[0] )) { - if (segment.y.a == new_room.y.a) { - new_room.sides |= FRONT - } - if (segment.y.a == new_room.y.b) { - new_room.sides |= BACK - } + + // however, since we did not split on horizontal segments, our rooms may + // only have partial overlap with these segments, in which case we need to + // split the rooms apart. + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.overlaps(segment.x)) { + + // split the room across the segment. preserve whether or not we know the + // room borders a segment on the left or right. + splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) + rooms.splice(r--, 1) + for (var k = 0; k < splits.length; k++) { + splitter = splits[k] + var new_room = new Rect( splitter[0], room.y ) + new_room.sides = splitter[1] | ( room.sides & FRONT_BACK ) + if (segment.x.overlaps( splitter[0] )) { + if (segment.y.a == new_room.y.a) { + new_room.sides |= FRONT + } + if (segment.y.a == new_room.y.b) { + new_room.sides |= BACK } - rooms.unshift(new_room) - r++ } + rooms.unshift(new_room) + r++ } } @@ -137,6 +172,8 @@ var RegionList = (function(){ return { rooms: rooms } } + + // Gets a list of polylines from the ShapeList and sorts the segments. RegionList.getSortedSegments = function(){ // get a list of all segments from these polylines var segments = shapes.getAllSegments() diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 4373caf..90714c2 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,3 +1,5 @@ +// The ShapeList manages the list of polylines which form a V2 layout. + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 226e56f..8942d92 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -214,13 +214,13 @@ } vec2.prototype.toString = function(){ - return "[" + round(this.a) + " " + round(this.b) + "]" + return "[" + Math.round(this.a) + " " + Math.round(this.b) + "]" } vec2.prototype.exactString = function(){ return "[" + this.a + " " + this.b + "]" } vec2.prototype.serialize = function(){ - return [ round(this.a), round(this.b) ] + return [ Math.round(this.a), Math.round(this.b) ] } vec2.prototype.deserialize = function(data){ this.a = data[0] diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 13f5cd7..9d4650b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -10,6 +10,11 @@ vec2 = require('./vec2') Rect = require('./rect') UidGenerator = require('../util/uid') + wall_rotation = {} + wall_rotation[FRONT] = PI + wall_rotation[BACK] = 0 + wall_rotation[LEFT] = HALF_PI + wall_rotation[RIGHT] = -HALF_PI } var Wall = function(opt){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 39cf62e..a341a24 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -62,8 +62,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ if (this.parent.orbiting) { scene.width = window.innerWidth/2 scene.height = window.innerHeight - this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2 - this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight + this.parent.map.resize( window.innerWidth/2, window.innerHeight ) this.parent.map.canvas.style.display = "block" } else { @@ -119,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // -// map.draw.regions(this.rooms.rooms, colors, "#000") + map.draw.regions(this.rooms.rooms, colors, "#000") // this.rooms.rooms.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From 630c08b712a2ace833217428f1ef20bddc0b975d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 18:32:14 -0400 Subject: blueprint integration into project editor --- .../javascripts/rectangles/engine/rooms/_rooms.js | 32 +++++++++ public/assets/javascripts/ui/_router.js | 75 +++++++++++++--------- .../javascripts/ui/blueprint/BlueprintSettings.js | 3 + .../javascripts/ui/blueprint/BlueprintView.js | 2 +- .../assets/javascripts/ui/builder/BuilderInfo.js | 4 +- .../assets/javascripts/ui/editor/EditorSettings.js | 7 +- public/assets/javascripts/ui/editor/EditorView.js | 5 ++ server/lib/api/blueprint.js | 3 + server/lib/api/projects.js | 14 +++- server/lib/schemas/Blueprint.js | 1 + server/lib/schemas/Project.js | 2 + server/lib/util.js | 4 ++ 12 files changed, 117 insertions(+), 35 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 46c1d7f..d4281ad 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -37,6 +37,7 @@ base.list = {} base.regions = [] + base.shapesMode = false base.uid = new UidGenerator(base.list) @@ -95,6 +96,7 @@ } base.rebuild = function(walls_data){ + if (base.shapesMode) return walls_data = walls_data || Walls.serialize() Rooms.clipper.update() Rooms.builder.rebuild() @@ -124,6 +126,36 @@ }) Rooms.rebuild(walls_data) } + + base.deserializeFromShapes = function(shapes_data, walls_data) { + base.shapesMode = true + window.viewHeight = data.viewHeight || app.defaults.viewHeight + window.wallHeight = data.wallHeight || app.defaults.wallHeight + $(".units").val( data.units ) + + shapes.deserialize( data.shapes ) + shapes.build() + + regions.forEach(function(region){ + var room = new Room({ + rect: region, + regions: [region], + height: wallHeight, + }) + room.sides = region.sides + region.id = Rooms.uid("room_") + Rooms.list[ region.id ] = room + Rooms.builder.build(region) + room.mx_floor = Rooms.builder.make_floor(room, region) + room.mx_ceiling = Rooms.builder.make_ceiling(room, region) + }) + + Rooms.grouper.build() + + Walls.paint() + Walls.deserialize(walls_data) + app.tube("rooms-built") + } base.report = function(){ var data = [] diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index e5e46e5..61b1d1b 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -18,35 +18,36 @@ var SiteRouter = Router.extend({ }, routes: { - "/": 'home', - "/home": 'home', - "/login": 'signin', - "/signin": 'signin', - "/signup": 'signup', - - "/auth/usernameTaken": 'usernameTaken', - "/auth/password": 'passwordReset', - "/auth/forgotPassword": 'passwordForgot', - - "/profile": 'profile', - "/profile/edit": 'editProfile', - "/profile/billing": 'editSubscription', - "/profile/:name": 'profile', - "/about/:name/edit": 'editDocument', - "/about/new": 'newDocument', - - "/layout": 'layoutPicker', - "/layout/:name": 'layoutEditor', - - "/blueprint": 'blueprintEditor', - "/blueprint/:name": 'blueprintEditor', - - "/project": 'projectPicker', - "/project/new": 'newProject', - "/project/new/:layout": 'projectNewWithLayout', - "/project/:name": 'projectViewer', - "/project/:name/edit": 'projectEditor', - "/project/:name/view": 'projectViewer', + "/": 'home', + "/home": 'home', + "/login": 'signin', + "/signin": 'signin', + "/signup": 'signup', + + "/auth/usernameTaken": 'usernameTaken', + "/auth/password": 'passwordReset', + "/auth/forgotPassword": 'passwordForgot', + + "/profile": 'profile', + "/profile/edit": 'editProfile', + "/profile/billing": 'editSubscription', + "/profile/:name": 'profile', + "/about/:name/edit": 'editDocument', + "/about/new": 'newDocument', + + "/layout": 'layoutPicker', + "/layout/:name": 'layoutEditor', + + "/blueprint": 'blueprintEditor', + "/blueprint/:name": 'blueprintEditor', + + "/project": 'projectPicker', + "/project/new": 'newProject', + "/project/blueprint/:blueprint": 'projectNewWithBlueprint', + "/project/new/:layout": 'projectNewWithLayout', + "/project/:name": 'projectViewer', + "/project/:name/edit": 'projectEditor', + "/project/:name/view": 'projectViewer', "/test/blueprint": 'blueprintEditor', }, @@ -123,6 +124,22 @@ var SiteRouter = Router.extend({ window.history.pushState(null, document.title, "/project/new") this.newProjectModal.load() }, + + projectNewWithBlueprint: function(e, blueprint){ + e && e.preventDefault() + + Rooms.shapesMode = true + + app.mode.editor = true + app.launch() + if (app.unsupported) return + + blueprint = slugify(blueprint) + + window.history.pushState(null, document.title, "/project/blueprint/" + blueprint) + this.editorView = app.controller = new EditorView() + this.editorView.loadBlueprint(blueprint) + }, projectNewWithLayout: function(e, layout){ e && e.preventDefault() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 9c8808a..0870a11 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -95,6 +95,9 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ fd.append( "name", this.$name.val() ) fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) + fd.append( "wallHeight", this.parent.info.$height.unitVal() ) + fd.append( "units", this.parent.info.$units.val() ) + return fd }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index e1d360f..3095cfe 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -48,8 +48,8 @@ var BlueprintView = View.extend({ }, ready: function(data){ - this.settings.load(data) this.info.load(data) + this.settings.load(data) this.editor.loadFloorplan(data) }, diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 9a7dbf9..aa58d6e 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -40,8 +40,8 @@ var BuilderInfo = View.extend({ load: function(data){ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) - this.$units.val( "ft" ) - this.$unitName.html( "ft" ) + this.$units.val( data.units || "ft" ) + this.$unitName.html( data.units || "ft" ) if (Rooms.regions.length == 0) { this.changeHeightGlobal(true) diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 460863e..000852e 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,12 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - data.rooms && Rooms.deserialize(data.rooms, data.walls) + if (data.rooms) { + Rooms.deserialize(data.rooms, data.walls) + } + else if (data.shapes) { + Rooms.deserializeFromShapes(data.shapes, data.walls) + } if (data.startPosition) { scene.camera.move(data.startPosition) this.startPosition = data.startPosition diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index a2d84a6..879c963 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -2,6 +2,7 @@ var EditorView = View.extend({ el: "#editorView", + blueprintAction: "/api/blueprint/", projectAction: "/api/project/", layoutAction: "/api/layout/", @@ -41,6 +42,10 @@ var EditorView = View.extend({ $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, + loadBlueprint: function(blueprint){ + $.get(this.blueprintAction + blueprint, this.readyLayout.bind(this)) + }, + ready: function(data){ $("#map").hide() diff --git a/server/lib/api/blueprint.js b/server/lib/api/blueprint.js index e581d8f..222b466 100644 --- a/server/lib/api/blueprint.js +++ b/server/lib/api/blueprint.js @@ -92,6 +92,9 @@ var blueprint = { doc.name = util.sanitize(data.name) doc.slug = util.slugify(data.name) + doc.units = util.sanitize(data.units) + doc.viewHeight = util.sanitizeNumber(data.viewHeight) + doc.wallHeight = util.sanitizeNumber(data.wallHeight) doc.shapes = JSON.parse(data.shapes) doc.startPosition = JSON.parse(data.startPosition) diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 3810168..50d3b49 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -37,7 +37,12 @@ var projects = { data.slug = util.slugify(data.name) + "-" + (+new Date) data.description = util.sanitize(data.description) data.viewHeight = Number(data.viewHeight || 0) - data.rooms = JSON.parse(data.rooms) + if (data.shapes) { + data.shapes = JSON.parse(data.shapes) + } + else { + data.rooms = JSON.parse(data.rooms) + } data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) data.sculpture = JSON.parse(data.sculpture) @@ -102,7 +107,12 @@ var projects = { _.extend(doc, data) - doc.rooms = JSON.parse(data.rooms) + if (data.shapes) { + doc.shapes = JSON.parse(data.shapes) + } + else { + doc.rooms = JSON.parse(data.rooms) + } doc.walls = JSON.parse(data.walls) doc.colors = JSON.parse(data.colors) doc.media = JSON.parse(data.media) diff --git a/server/lib/schemas/Blueprint.js b/server/lib/schemas/Blueprint.js index 76d0a09..3c3b0cc 100644 --- a/server/lib/schemas/Blueprint.js +++ b/server/lib/schemas/Blueprint.js @@ -51,6 +51,7 @@ var BlueprintSchema = new mongoose.Schema({ widthDimension: { type: Number }, heightDimension: { type: Number }, + wallHeight: { type: Number }, units: { type: String }, line: { type: String }, diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index 855d95a..687555d 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -28,6 +28,7 @@ var ProjectSchema = new mongoose.Schema({ type: String, }, rooms: [mongoose.Schema.Types.Mixed], + shapes: [mongoose.Schema.Types.Mixed], walls: [mongoose.Schema.Types.Mixed], media: [mongoose.Schema.Types.Mixed], sculpture: [mongoose.Schema.Types.Mixed], @@ -35,6 +36,7 @@ var ProjectSchema = new mongoose.Schema({ startPosition: mongoose.Schema.Types.Mixed, lastPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, + units: { type: String, default: "ft" }, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/server/lib/util.js b/server/lib/util.js index e3fd1ed..86fbdcc 100644 --- a/server/lib/util.js +++ b/server/lib/util.js @@ -5,6 +5,7 @@ var whitespace = new RegExp('\\s', 'g') var whitespaceHead = /^\s+/ var whitespaceTail = /\s+$/ var nonAlphanumerics = new RegExp('[^-_a-zA-Z0-9]', 'g') +var nonNumerics = new RegExp('[^0-9]', 'g') var consecutiveDashes = new RegExp("-+", 'g') var entities = new RegExp("[<>&]", 'g') @@ -19,6 +20,9 @@ util.slugify = function (s){ util.sanitize = function (s){ return (s || "").replace(entities, "") } +util.sanitizeNumber = function (s){ + return (s || "").replace(nonNumerics, "") +} util.escape = function (s){ return (s || "").replace(/&/g, "&").replace(//g, ">") } -- cgit v1.2.3-70-g09d2 From 73b8036e977a21d4b1e327245d02826eade3c843 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 12:24:12 -0400 Subject: loading rooms into editor --- .../assets/javascripts/rectangles/engine/rooms/_rooms.js | 13 ++++++++++--- public/assets/javascripts/rectangles/models/room.js | 4 ++++ public/assets/javascripts/ui/editor/EditorSettings.js | 15 ++++++++++----- public/assets/javascripts/ui/editor/EditorView.js | 2 +- server/index.js | 2 ++ server/lib/api/blueprint.js | 15 +++++++++++++++ 6 files changed, 42 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index d4281ad..5c9945c 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -127,14 +127,16 @@ Rooms.rebuild(walls_data) } - base.deserializeFromShapes = function(shapes_data, walls_data) { + base.deserializeFromShapes = function(data, walls_data) { + walls_data = walls_data || Walls.serialize() base.shapesMode = true window.viewHeight = data.viewHeight || app.defaults.viewHeight window.wallHeight = data.wallHeight || app.defaults.wallHeight $(".units").val( data.units ) shapes.deserialize( data.shapes ) - shapes.build() + // shapes.build() + var regions = RegionList.build() regions.forEach(function(region){ var room = new Room({ @@ -142,12 +144,17 @@ regions: [region], height: wallHeight, }) + room.sides = region.sides region.id = Rooms.uid("room_") Rooms.list[ region.id ] = room - Rooms.builder.build(region) + var mx_walls = Rooms.builder.build_walls(region) room.mx_floor = Rooms.builder.make_floor(room, region) room.mx_ceiling = Rooms.builder.make_ceiling(room, region) + + mx_walls.forEach(function(mx){ scene.add(mx) }) + scene.add(room.mx_floor) + scene.add(room.mx_ceiling) }) Rooms.grouper.build() diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 26bf055..0ef76e4 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -35,6 +35,10 @@ this.height = opt.height || 200 this.focused = false + + this.mx_walls = [] + this.mx_floor = [] + this.mx_ceiling = [] } Room.prototype.copy = function(){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 000852e..83bc8b7 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,11 +41,11 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.rooms) { - Rooms.deserialize(data.rooms, data.walls) + if (data.shapes) { + Rooms.deserializeFromShapes(data, data.walls) } - else if (data.shapes) { - Rooms.deserializeFromShapes(data.shapes, data.walls) + else if (data.rooms) { + Rooms.deserialize(data.rooms, data.walls) } if (data.startPosition) { scene.camera.move(data.startPosition) @@ -194,7 +194,12 @@ var EditorSettings = FormView.extend({ 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() ) ) + if (Rooms.shapesMode) { + fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) + } + else { + 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() ) ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 879c963..c05b373 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -2,7 +2,7 @@ var EditorView = View.extend({ el: "#editorView", - blueprintAction: "/api/blueprint/", + blueprintAction: "/api/blueprint/user/", projectAction: "/api/project/", layoutAction: "/api/layout/", diff --git a/server/index.js b/server/index.js index 7143da2..224aa86 100644 --- a/server/index.js +++ b/server/index.js @@ -138,6 +138,7 @@ site.route = function () { app.get('/project', middleware.ensureAuthenticated, views.modal) app.get('/project/new', middleware.ensureAuthenticated, views.modal) app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor_new) + app.get('/project/blueprint/:layout', middleware.ensureAuthenticated, views.editor_new) app.get('/project/:slug', middleware.ensureProject, middleware.ensureIsCollaborator, views.reader) app.get('/project/:slug/view', middleware.ensureProject, middleware.ensureIsCollaborator, views.reader) app.get('/project/:slug/edit', middleware.ensureProject, middleware.ensureIsCollaborator, views.editor) @@ -163,6 +164,7 @@ site.route = function () { app.post('/api/blueprint/new', middleware.ensureAuthenticated, api.blueprint.create) app.post('/api/blueprint/upload', middleware.ensureAuthenticated, api.blueprint.upload) + app.get('/api/blueprint/user/:slug', middleware.ensureAuthenticated, api.blueprint.show) app.get('/api/blueprint/user', middleware.ensureAuthenticated, api.blueprint.user) app.post('/api/blueprint/scale', middleware.ensureAuthenticated, api.blueprint.scale) app.post('/api/blueprint/edit', middleware.ensureAuthenticated, api.blueprint.update) diff --git a/server/lib/api/blueprint.js b/server/lib/api/blueprint.js index 222b466..e780b92 100644 --- a/server/lib/api/blueprint.js +++ b/server/lib/api/blueprint.js @@ -25,6 +25,21 @@ var blueprint = { }) }, + show: function(req, res){ + Blueprint.findOne({ slug: req.params.slug }, function(err, doc){ + if (doc) { + res.json(doc) + return + } + else { + Project.count({}, function(err, count){ + var name = "Project #" + (count || 0) + res.json({ _id: "new", name: name, isNew: true }) + }) + } + }) + }, + create: function(req, res){ var data = util.cleanQuery(req.body) data.user_id = req.user._id -- cgit v1.2.3-70-g09d2 From f2b0b712d4a73bfaeb1ed21674b0843f0d6fa28a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 12:52:02 -0400 Subject: toggle map with esc --- public/assets/javascripts/mx/extensions/mx.movements.js | 5 ++++- public/assets/javascripts/rectangles/engine/rooms/_rooms.js | 4 +++- public/assets/javascripts/ui/blueprint/BlueprintToolbar.js | 13 +++++++++---- public/assets/javascripts/ui/blueprint/BlueprintView.js | 1 + 4 files changed, 17 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cecba7a..3e34c1b 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -155,7 +155,10 @@ MX.Movements = function (cam) { app.controller.presets.hide() $(".inuse").removeClass("inuse") } - else if (! Rooms.shapesMode) { + else if (Rooms.shapesMode) { + // don't show map in editor for now.. + } + else { app.controller.toolbar.toggleMap() } break diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 5c9945c..9aff33f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -134,10 +134,12 @@ window.wallHeight = data.wallHeight || app.defaults.wallHeight $(".units").val( data.units ) + Rooms.builder.clear() + shapes.deserialize( data.shapes ) // shapes.build() var regions = RegionList.build() - + regions.forEach(function(region){ var room = new Room({ rect: region, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 8b0a08f..458357d 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -24,6 +24,10 @@ var BlueprintToolbar = View.extend({ this.$eraserMode = this.$('[data-role=eraser-mode]') this.$startPositionMode = this.$('[data-role=start-position-mode]') + keys.on('escape', function(){ + app.controller.toolbar.toggleOrbitMode() + }) + this.arrowMode() }, @@ -44,11 +48,12 @@ var BlueprintToolbar = View.extend({ controls.toggle(false) movements.unlock() movements.gravity(true) - cam.rotationX = 0 - cam.rotationY = -cam.rotationY - cam.x = this.parent.startPosition.x + var pos = this.parent.quantizeStartPosition() + cam.rotationX = pos.rotationX + cam.rotationY = pos.rotationY + cam.x = pos.x cam.y = viewHeight - cam.z = this.parent.startPosition.z + cam.z = pos.z } }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 19b9e84..e249c91 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -18,6 +18,7 @@ var BlueprintView = View.extend({ this.info = new BlueprintInfo ({ parent: this }) this.settings = new BlueprintSettings ({ parent: this }) this.notice = new BlueprintNotice ({ parent: this }) + Rooms.shapesMode = true }, load: function(name){ -- cgit v1.2.3-70-g09d2 From 9d3c9cb918d03a8a30eb325e1f7e4d55f1765dcc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 25 Jan 2016 20:31:37 +0100 Subject: remove quotes from css url --- public/assets/javascripts/rectangles/engine/rooms/_walls.js | 2 +- public/assets/javascripts/rectangles/models/floor.js | 2 +- public/assets/javascripts/rectangles/models/wall.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/rooms') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 04d0594..38dac84 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -162,7 +162,7 @@ wall.wallpaper(background, img) }) }.bind(this) - img.src = background.src.replace("url(","").replace(")","") + img.src = background.src.replace(/url\(\"?\'?/,"").replace(/\"?\'?\)/,"") img.complete && img.onload() }, floor: function(background){ diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 799bdc7..63eebcc 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -153,7 +153,7 @@ background.scale = background.scale || 1 this.background = background - this.background.src = this.background.src.replace("url(","").replace(")","") + this.background.src = this.background.src.replace(/url\(\"?\'?/,"").replace(/\"?\'?\)/,"") if (this.background.src == "none") { this.wallpaperLoad(this.background.src) diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 5aa8359..cf3cea8 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -294,7 +294,7 @@ background.scale = background.scale || 1 this.background = background - this.background.src = this.background.src.replace("url(","").replace(")","") + this.background.src = this.background.src.replace(/url\(\"?\'?/,"").replace(/\"?\'?\)/,"") if (this.background.src == "none") { this.wallpaperLoad(this.background.src) -- cgit v1.2.3-70-g09d2