From b6aa758e4a760c244594dd5bc17004347a66913d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 11:59:53 -0400 Subject: keep showing resize dots after you click --- .../javascripts/rectangles/engine/scenery/resize.js | 4 ++-- .../rectangles/engine/scenery/types/_object.js | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index e26c0a7..532ca4e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -124,8 +124,8 @@ Scenery.resize = new function(){ Scenery.resize.hovering = true }, mouseleave: function(e){ - Scenery.resize.hovering = false - base.defer_hide() +// Scenery.resize.hovering = false +// base.defer_hide() } }) }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 2dbae48..5eed53e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -70,17 +70,17 @@ Scenery.types.base = Fiber.extend(function(base){ }, enter: function(e){ - if (editor.permissions.resize) { - Scenery.resize.show(this) - Scenery.hovering = true - } +// if (editor.permissions.resize) { +// Scenery.resize.show(this) +// Scenery.hovering = true +// } }, leave: function(e){ - if (editor.permissions.resize) { - Scenery.resize.defer_hide(this) - Scenery.hovering = false - } +// if (editor.permissions.resize) { +// Scenery.resize.defer_hide(this) +// Scenery.hovering = false +// } }, serialize: function(){ -- cgit v1.2.3-70-g09d2 From 742f4cc410bb04421800d7462f81fc64c59aa0bc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 12:36:42 -0400 Subject: tracing menu appearing/disappearing logic ; set title from filename --- .../javascripts/rectangles/engine/scenery/move.js | 2 +- .../rectangles/engine/scenery/resize.js | 1 + .../assets/javascripts/rectangles/models/wall.js | 5 ++++- .../assets/javascripts/ui/editor/EditorToolbar.js | 5 ++++- public/assets/javascripts/ui/editor/MediaEditor.js | 23 ++++++++++++++++++---- public/assets/javascripts/util.js | 4 ++++ 6 files changed, 33 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 93bccb0..55d6ef1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -142,7 +142,7 @@ Scenery.move = function(base){ if (editor.permissions.resize) { Scenery.resize.rotate_dots() -// Scenery.resize.move_dots() + Scenery.resize.move_dots() } cursor.x.a = cursor.x.b diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 532ca4e..dc1a39a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -195,6 +195,7 @@ Scenery.resize = new function(){ } function up (e, cursor){ + if (! dragging) return dragging = false selected_dot = null if (! editor.permissions.resize) { return } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 1a3ef7c..5513a9b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -64,7 +64,10 @@ e.stopPropagation() return } - + + Scenery.resize.show(scenery) + Scenery.hovering = true + UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index bc56d88..9c74c7c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -37,15 +37,18 @@ var EditorToolbar = View.extend({ this.resetMode() this.resetControls() }, - + resetMode: function(){ this.resizeMedia(true) this.destroyMedia(false) + app.controller.hideExtras() }, resetControls: function(){ + $(".inuse").removeClass("inuse") this.parent.wallpaperPicker.hide() this.parent.lightControl.hide() + this.parent.settings.hide() }, resizeMedia: function(e, state){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index cb57b69..eaa3134 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -3,7 +3,7 @@ var MediaEditor = FormView.extend({ el: "#mediaEditor", events: { - "keydown": 'stopPropagation', + "keydown": 'taint', "focus [name]": "clearMinotaur", "click [data-role=play-media]": "togglePaused", "mousedown [name=keyframe]": "stopPropagation", @@ -58,12 +58,16 @@ var MediaEditor = FormView.extend({ this.bind(scenery) this.$el.addClass("active") +// app.controller.toolbar.resetMode() + app.controller.toolbar.resetControls() Scenery.resize.show(scenery) Scenery.hovering = true var media = scenery.media - this.$name.val(media.title) + console.log(media) + + this.$name.val(media.title || filenameFromUrl(media.url) ) this.$description.val(media.description) this.setDimensions() this.$units.val( "ft" ) @@ -101,12 +105,14 @@ var MediaEditor = FormView.extend({ seek: function(){ var n = parseFloat( this.$keyframe.val() ) this.scenery.seek(n) + this.tainted = true this.scenery.media.keyframe = n }, setAutoplay: function(){ var checked = this.$autoplay.prop('checked') this.scenery.media.autoplay = checked + this.tainted = true if (checked && this.scenery.paused()) { this.togglePaused() } @@ -114,17 +120,20 @@ var MediaEditor = FormView.extend({ setLoop: function(){ var checked = this.$loop.prop('checked') this.scenery.setLoop(checked) + this.tainted = true }, setMute: function(){ var checked = this.$mute.prop('checked') this.scenery.media.mute = checked this.scenery.mute(checked) + this.tainted = true }, setDimensions: function(){ if (! this.scenery) return this.$width.unitVal( Number(this.scenery.naturalDimensions.a * this.scenery.scale) || "" ) this.$height.unitVal( Number(this.scenery.naturalDimensions.b * this.scenery.scale) || "" ) + this.tainted = true }, changeWidth: function(e){ e.stopPropagation() @@ -140,6 +149,11 @@ var MediaEditor = FormView.extend({ app.units = this.$units.val() this.$('.units').resetUnitVal() }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, bind: function(scenery){ this.scenery = scenery @@ -148,7 +162,7 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery) { + if (this.scenery && this.tainted) { this.scenery.media.title = this.$name.val() this.scenery.media.description = this.$description.val() Minotaur.watch( app.router.editorView.settings ) @@ -158,11 +172,12 @@ var MediaEditor = FormView.extend({ this.scenery.mx.el.classList.remove("picked") } } + this.tainted = false this.scenery = null }, destroy: function(){ - ConfirmModal.confirm("Are you sure you want delete to this media?", function(){ + ConfirmModal.confirm("Are you sure you want delete this object?", function(){ var scenery = this.scenery this.hide() Scenery.remove(scenery.id) diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 7812a4d..5a89c48 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -173,6 +173,10 @@ function invert_hash (h) { for (var i in h) { if (h.hasOwnProperty(i)) k[h[i]] = i } return k } +function filenameFromUrl (url) { + var partz = url.split( "/" ) + return partz[partz.length-1].split(".")[0] +} function bitcount(v) { v = v - ((v >>> 1) & 0x55555555); -- cgit v1.2.3-70-g09d2 From 70efc8490ed885317f757eb5252bc14cdcb51a31 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 12:44:42 -0400 Subject: crisper dots --- public/assets/javascripts/rectangles/engine/scenery/resize.js | 3 ++- public/assets/javascripts/ui/editor/EditorSettings.js | 4 ++++ public/assets/javascripts/ui/editor/EditorView.js | 2 +- public/assets/stylesheets/app.css | 4 ++-- 4 files changed, 9 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index dc1a39a..ca77525 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -31,7 +31,8 @@ Scenery.resize = new function(){ // generate a dot element base.build_dot = function(side) { var dot = new MX.Object3D('.dot') - dot.width = dot.height = dot_side + dot.width = dot.height = dot_side * 2 + dot.scale = 0.5 dot.side = side $(dot.el).on({ mouseenter: function(){ base.hovering = true }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 8a88f7a..f47eb81 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -65,6 +65,10 @@ var EditorSettings = FormView.extend({ data.media && Scenery.deserialize(data.media) } + + app.on("rooms-built", function(){ + Walls.paint() + }) }, showCollaborators: function(e){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index f200d0f..6636a8c 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -31,7 +31,7 @@ var EditorView = View.extend({ ready: function(data){ $("#map").hide() - + this.settings.load(data) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6929cef..a2db961 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -673,8 +673,8 @@ iframe.embed { .dot { background:white; - border-radius:20px; - border: 1px solid black; + border-radius: 50%; + border: 2px solid black; } .image { -- cgit v1.2.3-70-g09d2 From 385dc017b65cbd7cd94b16e86a8368320d4274ea Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 13:10:08 -0400 Subject: adding prefixfree, bower install --- bower.json | 3 +- .../rectangles/engine/scenery/resize.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 5 +- .../assets/javascripts/rectangles/util/minotaur.js | 2 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 59 +++++++++++++--------- views/partials/scripts.ejs | 1 + 6 files changed, 44 insertions(+), 28 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/bower.json b/bower.json index ee8f9ba..faffbfb 100644 --- a/bower.json +++ b/bower.json @@ -7,6 +7,7 @@ "momentjs": "~2.5.1", "lodash": "", "fiber": "", - "jquery-jsonview": "1.2.0" + "jquery-jsonview": "1.2.0", + "prefixfree": "" } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index ca77525..96817c2 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -122,7 +122,7 @@ Scenery.resize = new function(){ Scenery.mouse.bind_el(dot.el) $(dot.el).bind({ mouseenter: function(e){ - Scenery.resize.hovering = true +// Scenery.resize.hovering = true }, mouseleave: function(e){ // Scenery.resize.hovering = false diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 5513a9b..2bfb258 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -64,9 +64,10 @@ e.stopPropagation() return } - + + app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) - Scenery.hovering = true + Scenery.hovering = true UndoStack.push({ type: 'create-scenery', diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 0fcc766..4d9a795 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 1000 + base.delay = 5000 base.objects = {} base.init = function () { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 9c74c7c..ec6bb46 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -6,7 +6,7 @@ var EditorToolbar = View.extend({ "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', - "click [data-role='resize-media']": 'resizeMedia', +// "click [data-role='resize-media']": 'resizeMedia', "click [data-role='destroy-media']": 'destroyMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', @@ -39,9 +39,10 @@ var EditorToolbar = View.extend({ }, resetMode: function(){ - this.resizeMedia(true) + // this.resizeMedia(true) this.destroyMedia(false) app.controller.hideExtras() + base.resetPermissions() }, resetControls: function(){ @@ -51,27 +52,34 @@ var EditorToolbar = View.extend({ this.parent.settings.hide() }, - resizeMedia: function(e, state){ - this.resetControls() - if (! state && typeof e == "boolean") { - state = e - editor.permissions.assign("resize", state) - } - else { - state = editor.permissions.toggle("resize") - } - ! state && editor.permissions.assign("move", true) - $(".inuse").removeClass("inuse") - $("[data-role='resize-media']").toggleClass("inuse", state) - if (state) { - if (this.parent.mediaEditor.scenery) { - Scenery.resize.show( this.parent.mediaEditor.scenery ) - } - } - else { - Scenery.resize.hide() - } + resetPermissions: function(){ + editor.permissions.assign("pick", true) + editor.permissions.assign("move", true) + editor.permissions.assign("resize", true) + editor.permissions.assign("destroy", false) }, + +// resizeMedia: function(e, state){ +// this.resetControls() +// if (! state && typeof e == "boolean") { +// state = e +// editor.permissions.assign("resize", state) +// } +// else { +// state = editor.permissions.toggle("resize") +// } +// ! state && editor.permissions.assign("move", true) +// $(".inuse").removeClass("inuse") +// $("[data-role='resize-media']").toggleClass("inuse", state) +// if (state) { +// if (this.parent.mediaEditor.scenery) { +// Scenery.resize.show( this.parent.mediaEditor.scenery ) +// } +// } +// else { +// Scenery.resize.hide() +// } +// }, destroyMedia: function(e, state){ this.resetControls() @@ -82,7 +90,12 @@ var EditorToolbar = View.extend({ else { state = editor.permissions.toggle("destroy") } - ! state && editor.permissions.assign("move", true) + if (! state) { + this.resetPermissions() + } + else { + app.controller.hideExtras() + } $(".inuse").removeClass("inuse") $("[data-role='destroy-media']").toggleClass("inuse", state) $("body").toggleClass("destroyActive", state) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 7d56b2e..e0dd0f5 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -2,6 +2,7 @@ + -- cgit v1.2.3-70-g09d2 From c32a6ff52628fbe0a530b4f72fc907a2ef651127 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 13:18:45 -0400 Subject: fixing points not moving bug --- .../assets/javascripts/rectangles/engine/scenery/resize.js | 2 +- public/assets/javascripts/rectangles/models/wall.js | 2 +- public/assets/javascripts/rectangles/util/permissions.js | 2 +- public/assets/javascripts/ui/editor/EditorToolbar.js | 12 ++++++------ public/assets/javascripts/ui/site/LayoutsModal.js | 1 - 5 files changed, 9 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 96817c2..2ba84a1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -147,7 +147,7 @@ Scenery.resize = new function(){ function down (e, cursor){ var selection = dots.filter(function(dot){return e.target == dot.el}) if (! selection.length) return - + selected_dot = selection[0] dragging = true diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 2bfb258..1b37aa0 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -64,7 +64,7 @@ e.stopPropagation() return } - + app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) Scenery.hovering = true diff --git a/public/assets/javascripts/rectangles/util/permissions.js b/public/assets/javascripts/rectangles/util/permissions.js index 1b5a1b5..9e3ef4d 100644 --- a/public/assets/javascripts/rectangles/util/permissions.js +++ b/public/assets/javascripts/rectangles/util/permissions.js @@ -31,7 +31,7 @@ Permissions.prototype.add = function (key) { Permissions.prototype.remove = function (key) { var base = this - base[key] = true + base[key] = false } Permissions.prototype.clear = function () { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index ec6bb46..9f439c8 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -41,8 +41,8 @@ var EditorToolbar = View.extend({ resetMode: function(){ // this.resizeMedia(true) this.destroyMedia(false) - app.controller.hideExtras() - base.resetPermissions() + this.parent.hideExtras() + this.resetPermissions() }, resetControls: function(){ @@ -53,10 +53,10 @@ var EditorToolbar = View.extend({ }, resetPermissions: function(){ - editor.permissions.assign("pick", true) - editor.permissions.assign("move", true) - editor.permissions.assign("resize", true) - editor.permissions.assign("destroy", false) + editor.permissions.add("pick") + editor.permissions.add("move") + editor.permissions.add("resize") + editor.permissions.remove("destroy") }, // resizeMedia: function(e, state){ diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 2449465..1bfc6cb 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -29,7 +29,6 @@ var LayoutsIndex = View.extend({ this.$templates.append($span) }.bind(this)) - console.log(this.$templates.html()) this.show() } -- cgit v1.2.3-70-g09d2 From e3b1885a05f78a41ffc51f60324976c2330a0d20 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 14:11:05 -0400 Subject: fix video resize --- public/assets/javascripts/rectangles/engine/scenery/types/video.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index ef25d8d..76f32ac 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -4,8 +4,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { init: function(opt){ - opt.scale = opt.scale || 300 / max(300, opt.media.width) - + opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) + base.init.call(this, opt) this.build() @@ -106,6 +106,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ deserialize: function(data){ this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b }, } -- cgit v1.2.3-70-g09d2 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 ++++ public/assets/javascripts/rectangles/engine/scenery/undo.js | 3 +++ 2 files changed, 7 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/scenery') 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 = {} diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index e5624a0..57a0886 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -10,6 +10,7 @@ }, redo: function(state){ Scenery.deserialize([ state ]) + Scenery.resize.show( scenery ) // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) @@ -19,6 +20,7 @@ type: "update-scenery", undo: function(state){ var scenery = Scenery.find(state.id) + scenery.deserialize(state) scenery.set_wall(Walls.find( state.wall_id )) @@ -48,6 +50,7 @@ type: "destroy-scenery", undo: function(state){ Scenery.deserialize([ state ]) + Scenery.resize.show( scenery ) // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) -- cgit v1.2.3-70-g09d2 From 7afac43f11d1ccae6f3b8d1febcd293db11bd2b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Oct 2014 15:42:21 -0400 Subject: randomly place images on the walls --- .../rectangles/engine/scenery/randomize.js | 77 ++++++++++++++++++++++ .../javascripts/rectangles/models/surface.js | 4 +- public/assets/javascripts/ui/editor/MediaViewer.js | 21 ++++-- public/assets/javascripts/util.js | 5 +- views/partials/scripts.ejs | 1 + 5 files changed, 97 insertions(+), 11 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/randomize.js (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js new file mode 100644 index 0000000..4f1144a --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js @@ -0,0 +1,77 @@ +/* + // get the list of media we want to place + var media_data = $(".mediaContainer").toArray().map(function(el){ + return $(el).data("media") + }) + Scenery.randomize( media_data ) +*/ + +Scenery.randomize = function (media_data) { + var media_list = media_data.map(function(media){ + var width, height + if (media.width > media.height) { + width = Math.min(300, media.width) + height = media.height/media.width * width + } + else { + height = Math.min(300, media.height) + width = media.width/media.height * height + } + return { + dimensions: new vec2( width, height ), + media: media, + } + }) + + // get a list of all walls + var walls = {} + Walls.forEach(function(wall){ + walls[wall.id] = wall + }) + + // remove the walls that already have stuff on them + Scenery.forEach(function(scenery){ + delete walls[scenery.wall.id] + }) + + var wall_ids = _.keys(walls) + if (! wall_ids.length) { + return + } + + // randomize walls + shuffle(wall_ids) + + // assign each of the media to the walls, until we run out of either + media_list.some(function(media){ + if (wall_ids.length == 0) { + return true + } + + var i, fits = -1 + + for (i = 0; i < wall_ids.length; i++) { + if (walls[wall_ids[i]].surface.fits(media.dimensions)) { + // walls[wall_ids[i]] + fits = i + break + } + } + + if (fits != -1) { + var wall = walls[wall_ids[fits]] + wall_ids.splice(fits, 1) + + Scenery.add({ + media: media.media, + wall: wall, + index: 0, + }) + } + else { + // artwork won't fit anywhere?? + } + + return false + }) +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index 53977c8..c85682a 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -36,7 +36,7 @@ Surface.prototype.fits = function(v){ var faces = this.faces var scratch - if (this.bounds.x.b < v.a || this.bounds.y.b < v.b) { + if (this.bounds.width() < v.a || this.bounds.height() < v.b) { return null } for (var i = 0; i < faces.length; i++) { @@ -46,7 +46,7 @@ } scratch = new Rect (0,0,0,0) for (var i = 0; i < faces.length; i++) { - if (faces[i].y.length() < v.b) { + if (faces[i].height() < v.b) { continue } scratch.x.a = faces[i].x.a diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e2ed341..b51d8f2 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -3,6 +3,7 @@ var MediaViewer = ModalView.extend({ el: ".mediaDrawer.mediaViewer", destroyAction: "/api/media/destroy", usesFileUpload: true, + loaded: false, events: { 'click .foundToggle': "foundToggle", @@ -19,7 +20,7 @@ var MediaViewer = ModalView.extend({ this.$foundMedia = this.$(".foundMedia") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") - }, + }, foundToggle: function(){ this.$foundMedia.addClass("active"); @@ -52,9 +53,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", function(data){ - this.populate() - }.bind(this)) + $.get("/api/media/user", this.populate.bind(this)) }, loadTrending: function(){ @@ -90,11 +89,20 @@ var MediaViewer = ModalView.extend({ if (img.complete && ! loaded) { img.onload() } }.bind(this)) }, + + randomize: function(){ + var media_data = $(".mediaContainer").toArray().map(function(el){ + return $(el).data("media") + }) + Scenery.randomize( media_data ) + }, populate: function(data){ this.loaded = true if (data && data.length) { - data.forEach(this.add.bind(this)) + data.forEach(function(media){ + this.add(media, this.$myMedia) + }.bind(this)) this.$deleteMedia.show() } else { @@ -104,7 +112,6 @@ var MediaViewer = ModalView.extend({ }, add: function(media, $container){ - $container = $container || this.$myMedia var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -131,7 +138,7 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + $container.prepend($span) }, deleteIsArmed: false, diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js index 5a89c48..76c5c7b 100644 --- a/public/assets/javascripts/util.js +++ b/public/assets/javascripts/util.js @@ -92,9 +92,10 @@ function smoothstep(min,max,n){ } function shuffle(a){ + var r, swap for (var i = a.length; i > 0; i--){ - var r = randint(i) - var swap = a[i-1] + r = randint(i) + swap = a[i-1] a[i-1] = a[r] a[r] = swap } diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 11512b9..349d0d0 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -51,6 +51,7 @@ + -- cgit v1.2.3-70-g09d2 From b512bcdfe49e0bce336f848dcf620c3c533e1f8c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 13:12:40 -0400 Subject: saving icon --- public/assets/javascripts/rectangles/engine/scenery/move.js | 1 + public/assets/javascripts/rectangles/util/minotaur.js | 2 +- public/assets/stylesheets/app.css | 6 +++--- 3 files changed, 5 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 55d6ef1..e7ca4ef 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -88,6 +88,7 @@ Scenery.move = function(base){ } function up (e, cursor){ + console.log(dragging, oldState) if (! dragging || ! oldState) return dragging = false diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 4d9a795..d165ccc 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -4,7 +4,7 @@ var base = this base.$el = $("#minotaur") base.timeout = null - base.delay = 5000 + base.delay = 2500 base.objects = {} base.init = function () { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e278fab..57ca3c6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -757,8 +757,8 @@ iframe.embed { #minotaur { position: absolute; - top: 0; - right: 230px; + top: 0px; + right: 0px; opacity: 0; } #minotaur .label:after { @@ -771,9 +771,9 @@ iframe.embed { color: white; background: black; font-weight: 300; - float: right; text-decoration: none; z-index: 33; + opacity: 1; } #minotaur.saving .label:after { content: 'SAVING'; -- cgit v1.2.3-70-g09d2 From fa81420e382366ffd0d2262f1af6143399f7a91d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 14:32:03 -0400 Subject: transform screen coordinates into a 3d point --- .../javascripts/rectangles/engine/scenery/move.js | 2 +- .../assets/javascripts/rectangles/models/vec2.js | 7 ++++++ .../assets/javascripts/rectangles/models/wall.js | 29 +++++++++++++++++----- 3 files changed, 31 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index e7ca4ef..981eb68 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -102,7 +102,7 @@ Scenery.move = function(base){ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) - + oldState = null } diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 0040435..a5a832e 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -37,6 +37,9 @@ vec2.prototype.midpoint = function(){ return lerp(0.5, this.a, this.b) } + vec2.prototype.lerp = function(n){ + return lerp(n, this.a, this.b) + } vec2.prototype.eq = function(v){ return this.a == v.a && this.b == v.b } @@ -63,6 +66,10 @@ vec2.prototype.zero = function(){ this.a = this.b = 0 } + vec2.prototype.round = function(){ + this.a = Math.round(this.a) + this.b = Math.round(this.b) + } vec2.prototype.setPosition = function(n){ var len = this.length() this.a = n diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 07c3971..fdf54f0 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -50,16 +50,24 @@ index: index, }) }, +/* mousemove: function(e){ var offset = offsetFromPoint(e, mx.el) + var shouldFlip = base.side & (RIGHT | FRONT) if (offset) { - console.log([offset.left * mx.width + mx.face.x.a, (1-offset.top) * mx.height + mx.face.y.a].map(Math.round)) -// console.log(mx) - } - else { - console.log("NONE") + var pos = base.mxOffsetToPosition( offset, index ) + + var mx_pos = base.positionToMx(pos, new vec2(5,5)) + var mx_dot = new MX.Object3D + mx_dot.move(mx_pos) + mx_dot.width = 5 + mx_dot.height = 5 + mx_dot.rotationY = wall_rotation[base.side] + mx_dot.el.style.backgroundColor = "red" + scene.add(mx_dot) } }, +*/ mousedown: function(e){ if (Scenery.nextMedia) { var scenery = Scenery.addNextToWall({ @@ -184,7 +192,16 @@ } return position } - + Wall.prototype.mxOffsetToPosition = function( offset, index ) { + var face = this.surface.faces[index] + var shouldFlip = this.side & (RIGHT | FRONT) + var position = new vec2(0,0) + position.a = face.x.lerp(shouldFlip ? 1-offset.left : offset.left) + position.b = face.y.lerp(1-offset.top) + position.round() + return position + } + Wall.prototype.color = function(color){ this.$walls.css("background-color", color) } -- cgit v1.2.3-70-g09d2 From f7c36f7a3394caa90937c5687f3ac7aeeed82e82 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 16:18:12 -0400 Subject: add media closer to where you clicked --- .../javascripts/rectangles/engine/scenery/move.js | 1 - .../rectangles/engine/scenery/types/_object.js | 26 ++++++++++++++++++++-- .../rectangles/engine/scenery/types/image.js | 9 +++++++- .../rectangles/engine/scenery/types/video.js | 9 +++++++- .../assets/javascripts/rectangles/models/vec2.js | 10 +++++++++ .../assets/javascripts/rectangles/models/wall.js | 9 ++++++-- views/projects/list-projects.ejs | 7 +++--- 7 files changed, 61 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 981eb68..7d148cf 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -88,7 +88,6 @@ Scenery.move = function(base){ } function up (e, cursor){ - console.log(dragging, oldState) if (! dragging || ! oldState) return dragging = false diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 5eed53e..4e5e2c5 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -33,11 +33,33 @@ Scenery.types.base = Fiber.extend(function(base){ var center = this.bounds.center() center.a -= this.dimensions.a / 2 center.b -= this.dimensions.b / 2 - var mx_position = this.wall.positionToMx( center, this.dimensions ) - this.mx.move(mx_position) this.position.assign(center) }, + translateTo: function (position){ + var flipX = this.wall.side & (FRONT | RIGHT) + var delta = position.clone().subVec(this.position) + delta.a -= this.dimensions.a/2 + delta.b -= this.dimensions.b/2 + + if (flipX) { delta.a *= -1 } + + var new_bounds = this.wall.surface.translate( this.bounds, this.dimensions, this.position, delta ) + + this.position.b += delta.b + + switch (this.wall.side) { + case FRONT: + case BACK: + this.position.a += delta.a * cos(wall_rotation[this.wall.side]) + break + case LEFT: + case RIGHT: + this.position.a += delta.a * sin(wall_rotation[this.wall.side]) + break + } + }, + bind: function(){ this.move.bind() $(this.mx.el).bind({ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index d2fa3ab..aa43341 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -22,7 +22,14 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ } else { this.set_wall(opt) - this.bounds && this.recenter() + 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) + } } }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 76f32ac..2ef6ec3 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -21,7 +21,14 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ } else { this.set_wall(opt) - this.bounds && this.recenter() + 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) + } } }, diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index a5a832e..49613c3 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -63,6 +63,16 @@ this.b /= n return this } + vec2.prototype.addVec = function(v){ + this.a += v.a + this.b += v.b + return this + } + vec2.prototype.subVec = function(v){ + this.a -= v.a + this.b -= v.b + return this + } vec2.prototype.zero = function(){ this.a = this.b = 0 } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index ce958db..fdc8d8c 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -53,7 +53,6 @@ /* mousemove: function(e){ var offset = offsetFromPoint(e, mx.el) - var shouldFlip = base.side & (RIGHT | FRONT) if (offset) { var pos = base.mxOffsetToPosition( offset, index ) @@ -72,9 +71,15 @@ if (Scenery.nextText) { } else if (Scenery.nextMedia) { + var offset = offsetFromPoint(e, mx.el) + if (! offset) { return } + + var pos = base.mxOffsetToPosition( offset, index ) + var scenery = Scenery.addNextToWall({ wall: base, - index: index + index: index, + position: pos, }) // scenery was not placed diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index 5694648..f3332b2 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -14,11 +14,12 @@ [[ }) ]] - [[ if (String(user._id) == String(project.user_id)) { ]] -
edit
 - [[ } ]]
+ [[ if (String(user._id) == String(project.user_id)) { ]] + + [[ } else { ]] + [[ } ]] [[- project.name ]]
[[- project.date ]] -- cgit v1.2.3-70-g09d2 From 0a060fc9c9c3b4f93a79e7ee350cbaeac14ba589 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 16:26:04 -0400 Subject: fix clear button --- public/assets/javascripts/rectangles/engine/scenery/_scenery.js | 2 +- public/assets/javascripts/ui/editor/EditorSettings.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d34e299..69e9ba7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -48,7 +48,7 @@ var Scenery = new function(){ base.find = function(id){ return base.list[id] || null } - + base.remove = function(id){ var scene_media = base.list[id] delete base.list[id] diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index eb0d044..fd251b7 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -93,7 +93,7 @@ var EditorSettings = FormView.extend({ }, clear: function(){ - Rooms.removeAll() + Scenery.removeAll() }, destroy: function(){ -- cgit v1.2.3-70-g09d2 From c996ec3c93316b7a28b6707c9f7f595488d05cb9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 16:30:53 -0400 Subject: fix dot positioning --- .../rectangles/engine/scenery/resize.js | 27 ++++++++++------------ 1 file changed, 12 insertions(+), 15 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 2ba84a1..893237c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -57,35 +57,32 @@ Scenery.resize = new function(){ // move all the dots to the object's current position base.move_dots = function(){ - x = obj.mx.x + sin(rotationY) * dot_distance_from_picture - y = obj.mx.y - z = obj.mx.z - cos(rotationY) * dot_distance_from_picture + var x = obj.mx.x + sin(rotationY) * dot_distance_from_picture + var y = obj.mx.y + var z = obj.mx.z - cos(rotationY) * dot_distance_from_picture dots.forEach(function(dot){ - base.move_dot(dot) + base.move_dot(dot, { x: x, y: y, z: z }) }) } // move a dot .. to the initial position of the image - base.move_dot = function(dot){ - dot.x = x - dot.y = y - dot.z = z - + base.move_dot = function(dot, pos){ if (dot.side & TOP) { - dot.y += obj.mx.height * obj.mx.scale / 2 + pos.y += obj.dimensions.b / 2 } if (dot.side & BOTTOM) { - dot.y -= obj.mx.height * obj.mx.scale / 2 + pos.y -= obj.dimensions.b / 2 } if (dot.side & LEFT) { - dot.x -= cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2 - dot.z -= sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2 + pos.x -= cos(rotationY) * (obj.dimensions.a) / 2 + pos.z -= sin(rotationY) * (obj.dimensions.a) / 2 } if (dot.side & RIGHT) { - dot.x += cos(rotationY) * (obj.mx.width * obj.mx.scale) / 2 - dot.z += sin(rotationY) * (obj.mx.width * obj.mx.scale) / 2 + pos.x += cos(rotationY) * (obj.dimensions.a) / 2 + pos.z += sin(rotationY) * (obj.dimensions.a) / 2 } + dot.move(pos) } // pick a new object to focus on and show the dots -- 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/scenery') 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. +
+
+
+ +
+ +
+ + +
+ + +
+ + +
+ +
+
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs deleted file mode 100644 index 99d68f5..0000000 --- a/views/controls/editor/light-control.ejs +++ /dev/null @@ -1,28 +0,0 @@ -
-

Edit Room Colors

- -
-
- - - -
- -
- -
- -
- - -
- - -
- - -
- -
-
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 1bb31b8..7b08db6 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -29,7 +29,7 @@ data-info="add wallpaper" class="ion-ios7-keypad-outline">

+

Randomize

You have no media yet. Upload some!
-- cgit v1.2.3-70-g09d2 From 2bdfa57b147f461d002865b6e7973033ca9987b7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Nov 2014 16:21:01 -0500 Subject: attempt to place something even if it’s “too big” for the wall MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rectangles/engine/scenery/types/_object.js | 40 ++++++++++++++++++++++ .../rectangles/engine/scenery/types/image.js | 21 +----------- .../rectangles/engine/scenery/types/video.js | 22 ++---------- .../assets/javascripts/ui/builder/BuilderInfo.js | 1 + 4 files changed, 44 insertions(+), 40 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 10ba2b0..c3fd6f3 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -28,6 +28,46 @@ Scenery.types.base = Fiber.extend(function(base){ this.dimensions = this.naturalDimensions.clone().mul(this.scale) }, + place: function(opt){ + console.log(opt) + 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.wall && ! this.bounds) { + this.find_minimum_scale(opt) + if (! this.bounds) return + } + + this.recenter() + if (opt.position) { + this.translateTo(opt.position) + } + var mx_position = this.wall.positionToMx( this.position, this.dimensions ) + this.mx.move(mx_position) + } + }, + + find_minimum_scale: function(opt){ + var bounds = this.wall.surface.bounds_at_index_with_dimensions(opt.index || 0, new vec2(50, 50)) + var scale = 1 + if (! bounds || bounds.width() < 50 || bounds.height < 50) return + if (this.naturalDimensions.a > bounds.width()) { + scale = bounds.width() / (this.naturalDimensions.a + 10) + } + if (this.naturalDimensions.b > bounds.height()) { + scale = Math.min(scale, bounds.height() / (this.naturalDimensions.b + 10)) + } + this.set_scale(scale) + this.set_wall(opt) + }, + recenter: function () { if (! this.bounds) return var center = this.bounds.center() diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index 848f8d4..0e5e77c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -13,26 +13,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ 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) - } - } + this.place(opt) }, build: function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index d83cc63..d1b1763 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -6,32 +6,14 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ type: 'video', init: function(opt){ + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) 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) - } - } + this.place(opt) }, build: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index e1c90c8..7606361 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -47,6 +47,7 @@ var BuilderInfo = View.extend({ this.$noSelection.toggle( ! this.room ) this.$el.toggleClass("active", state) if (state) { + this.$viewHeight.unitVal( window.viewHeight ) this.parent.cursor.message("builder") } else { -- cgit v1.2.3-70-g09d2 From b9cf4175a3882415824f707a5431222e352658b2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Nov 2014 16:42:30 -0500 Subject: cancel scenery for text --- public/assets/javascripts/rectangles/engine/scenery/_scenery.js | 1 + public/assets/javascripts/ui/editor/TextEditor.js | 5 +++++ views/controls/editor/toolbar.ejs | 4 +++- 3 files changed, 9 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index f6cc8e4..8ca00d3 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -5,6 +5,7 @@ var Scenery = new function(){ base.list = {} base.nextMedia = null + base.nextWallpaper = null base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 51077af..33b5386 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -25,6 +25,11 @@ var TextEditor = FormView.extend({ this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") this.$textAlign = this.$("[name=text-align]") + + app.on("cancel-scenery", function(){ + this.createMode(true) + $("body").toggleClass("addText", false) + }.bind(this)) }, toggle: function(state){ diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 7b08db6..23d5eb4 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -32,11 +32,13 @@ data-role='toggle-color-control' data-info="edit room colors" class="ion-ios7-sunny-outline"> -