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') 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') 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') 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') 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') 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') 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') 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 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') 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 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') 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') 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') 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') 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') 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') 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') 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/toolbar.ejs b/views/controls/editor/toolbar.ejs index 85800f8..47d7c3c 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -4,10 +4,10 @@ data-role='open-media-viewer' data-info="add media" class="ion-ios7-photos-outline"> - + +

@@ -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 dd6b2cc2cdd97b6163d115e5415736bccbffa831 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:36:52 -0400 Subject: get rid of menu options --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 5 +++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 10 +++++----- public/assets/javascripts/ui/editor/HelpCursor.js | 8 ++++++-- views/controls/builder/info.ejs | 5 ++++- views/controls/editor/light-control.ejs | 7 ++++++- views/controls/editor/presets.ejs | 12 ++++-------- views/controls/editor/toolbar.ejs | 4 ++++ views/controls/editor/wallpaper.ejs | 3 +++ 8 files changed, 35 insertions(+), 19 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 072ff7e..44e416d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -213,7 +213,8 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY), 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) wheelTimeout = setTimeout(function(){ @@ -224,7 +225,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() wheelState = null - }, 500) + }, 250) } else { map.set_zoom(map.zoom_exponent - deltaY/20) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4f07d1f..9c2f3d3 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -30,11 +30,11 @@ var EditorToolbar = View.extend({ }, toggleMap: function(state){ - if (typeof state != "boolean") { - state = ! $("[data-role='toggle-map-view']").hasClass("inuse") - this.resetControls() - } - $("[data-role='toggle-map-view']").toggleClass("inuse", state) +// if (typeof state != "boolean") { +// state = ! $("[data-role='toggle-map-view']").hasClass("inuse") +// this.resetControls() +// } +// $("[data-role='toggle-map-view']").toggleClass("inuse", state) map.toggle(state) $("#minimap").toggleClass("hide", state) this.parent.info.toggle(state) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 842e871..b2f411d 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -3,8 +3,12 @@ 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.", + 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.", + wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + colors: "", + settings: "This is where you publish your project.", }, shown: {}, diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 205938f..54bb38e 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -2,7 +2,10 @@

Map Editor

- Click a room to select it, or click and drag to make a new room. + Click and drag to make a new room. + Click a room to select it. +

+ Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b20464..4604a7a 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,6 +1,11 @@

Edit Room Colors

-
+ +

Preset Colors

+
+
+ +
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 70e48e3..8dd1986 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,18 +1,14 @@
-

Preset Colors

-
-
-

Preset Styles

- - Wireframe + + Inverse Shaded - - Inverse + + Wireframe P.Funk diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 57a98b9..1bb31b8 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -1,9 +1,11 @@ +
+
-- 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') 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 a7fe78b6059e3568d38876ba68e650b841912125 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:48:22 -0400 Subject: unfocus ui on esc --- public/assets/javascripts/rectangles/engine/map/_map.js | 2 +- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 12 ++++++++++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 3 ++- 3 files changed, 13 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 3a47dab..64372c5 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -67,7 +67,7 @@ var Map = function(opt){ } base.toggle = function(state){ - $(base.el).toggle(state) + return $(base.el).toggle(state).is(':visible') } } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 44e416d..9d69990 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -26,6 +26,13 @@ Map.UI.Editor = function(map){ resize: true, destroy: false, }) + + base.blur = function(){ + Rooms.forEach(function(r){ + return r.focused = false + }) + app.tube("builder-pick-nothing") + } // @@ -190,7 +197,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() } - + var intersects = Rooms.filter(function(r){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) @@ -207,7 +214,7 @@ Map.UI.Editor = function(map){ var cursor = base.mouse.cursor var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) }) if (intersects.length) { @@ -234,4 +241,5 @@ Map.UI.Editor = function(map){ function rightclick (e){ } + } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 9c2f3d3..a460bbf 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -35,7 +35,8 @@ var EditorToolbar = View.extend({ // this.resetControls() // } // $("[data-role='toggle-map-view']").toggleClass("inuse", state) - map.toggle(state) + var state = map.toggle(state) + if (state) { map.ui.blur() } $("#minimap").toggleClass("hide", state) this.parent.info.toggle(state) }, -- cgit v1.2.3-70-g09d2 From 513a272520222784d67dc22c1ac833aa47a9c844 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:58:28 -0400 Subject: rename light control to color control --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../javascripts/rectangles/engine/scenery/undo.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 2 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 305 +++++++++++++++++++++ .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 20 +- public/assets/javascripts/ui/editor/EditorView.js | 2 +- .../assets/javascripts/ui/editor/LightControl.js | 305 --------------------- public/assets/javascripts/ui/editor/Presets.js | 2 +- public/assets/stylesheets/app.css | 6 +- views/controls/editor/color-control.ejs | 28 ++ views/controls/editor/light-control.ejs | 28 -- views/controls/editor/toolbar.ejs | 2 +- views/editor.ejs | 2 +- views/partials/scripts.ejs | 2 +- 16 files changed, 358 insertions(+), 358 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/ColorControl.js delete mode 100644 public/assets/javascripts/ui/editor/LightControl.js create mode 100644 views/controls/editor/color-control.ejs delete mode 100644 views/controls/editor/light-control.ejs (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 40e786d..c2a2473 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -131,8 +131,8 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.lightControl.$el.hasClass('active')) { - app.controller.lightControl.hide() + else if (app.controller.colorControl.$el.hasClass('active')) { + app.controller.colorControl.hide() $(".inuse").removeClass("inuse") } else if (app.controller.wallpaperPicker.$el.hasClass('active')) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index bee8c49..ff4f911 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -122,7 +122,7 @@ type: "update-colors", undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) - app.router.editorView.lightControl.setSwatchColor( 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/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index fe67e9b..c8c8880 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..735274e 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,7 +11,7 @@ var BuilderView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js new file mode 100644 index 0000000..26358f1 --- /dev/null +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -0,0 +1,305 @@ + +var ColorControl = View.extend({ + el: ".colorcontrol", + + events: { + "mousedown": "stopPropagation", + "click .color-swatches span": "select", + "mousedown #brightness-control": "beginBrightness", + "input #brightness-control": "updateBrightness", + }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], + + initialize: function(opt){ + this.parent = opt.parent + + this.colorPicker = new LabColorPicker(this, 180, 180) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) + + this.$swatches = this.$(".swatch") + this.$labels = this.$(".swatch + label") + this.$swatch = { + wall: this.$("#wall-color"), + outline: this.$("#outline-color"), + floor: this.$("#floor-color"), + ceiling: this.$("#ceiling-color"), + } + this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.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])) + }.bind(this)) + this.setMode("wall") + }, + + loadDefaults: function(){ + var 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(), + } + this.load(colors) + }, + + toggle: function(state){ + this.$el.toggleClass("active", state); + }, + + show: function(){ + this.parent.cursor.message("colors") + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + pick: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(this.mode, rgb) + // console.log(rgb) + Walls.setColor[ this.mode ](rgb) + }, + + setSwatchColor: function(mode, rgb) { + this.$swatch[ mode ].css("background-color", rgb_string(rgb)) + }, + + initialState: null, + + begin: function(){ + this.initialState = this.serialize() + }, + + serialize: function(){ + return { + mode: this.mode, + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, + + setMode: function (mode) { + var color, brightness + this.mode = mode + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") + color = Walls.colors[ mode ] + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + }, + + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') + this.setMode(mode) + }, + + beginBrightness: function(){ + this.begin() + $(window).one("mouseup", this.finalize.bind(this)) + }, + + updateBrightness: function(){ + this.labColor[0] = parseFloat( this.$brightnessControl.val() ) + var rgb = this.colorPicker.setLab( this.labColor ) + this.pick(rgb, this.labColor) + }, + +}) + +var LabColorPicker = function (parent, w, h) { + var base = this + var canvas = this.canvas = document.createElement('canvas') + var ctx = this.ctx = canvas.getContext('2d') + var imageData = ctx.createImageData(w,h) + var data = imageData.data + + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" + + canvas.width = w + canvas.height = h + canvas.className = "colorPicker" + + var ww = w-1 + var hh = h-1 + + var L_range = [0, 110] + var a_range = [-86.185, 98.254] + var b_range = [-107.863, 94.482] + + var rgb = [0,0,0] + + var val = 80 + + this.mouse = new mouse({ + el: canvas, + down: function(e, cursor){ + parent.begin() + cursor.x.a = -cursor.x.a + base.pick(cursor.x.a, cursor.y.a) + }, + drag: function(e, cursor){ + cursor.x.b = -cursor.x.b + base.pick(cursor.x.b, cursor.y.b) + }, + up: function(){ + parent.finalize() + } + }) + + this.setLab = function(Lab) { + val = Lab[0] + this.paint() + var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) + return rgb + } + this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) + var x = mix( i/ww, a_range[0], a_range[1] ) + var y = mix( j/hh, b_range[0], b_range[1] ) + var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) + parent.pick( rgb, [val,x,y] ) + } + this.load = function(rgba){ + var Lab = xyz2hunterlab(rgb2xyz(rgba)) + var val = clamp( Lab[0], L_range[0], L_range[1] ) + var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) + var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) + + this.moveCursor(x,y) + this.setLab(Lab) + return Lab + } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } + this.paint = function() { + val = clamp(val, L_range[0], L_range[1]) + var x, y, t + for (var i = 0; i < w; i++) { + for (var j = 0; j < h; j++) { + x = mix( i/ww, a_range[0], a_range[1] ) + y = mix( j/hh, b_range[0], b_range[1] ) + t = (j*w + i) * 4 + rgb = xyz2rgb(hunterlab2xyz(val, x, y)) + data[t] = Math.round( rgb[0] ) + data[t+1] = Math.round( rgb[1] ) + data[t+2] = Math.round( rgb[2] ) + data[t+3] = 255 + } + } + ctx.putImageData(imageData,0,0) + } + + function hunterlab2xyz (L,a,b) { + var_Y = L / 10 + var_X = a / 17.5 * L / 10 + var_Z = b / 7 * L / 10 + + Y = Math.pow(var_Y, 2) + X = ( var_X + Y ) / 1.02 + Z = -( var_Z - Y ) / 0.847 + xyz = [X,Y,Z] + } + function xyz2rgb(){ + var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) + var var_Y = xyz[1] / 100 //Y from 0 to 100.000 + var var_Z = xyz[2] / 100 //Z from 0 to 108.883 + + var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 + var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 + var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 + + if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 + else var_R = 12.92 * var_R + if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 + else var_G = 12.92 * var_G + if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 + else var_B = 12.92 * var_B + + rgb[0] = clamp(var_R * 255, 0, 255) + rgb[1] = clamp(var_G * 255, 0, 255) + rgb[2] = clamp(var_B * 255, 0, 255) + return rgb + } + function rgb2xyz(RGB){ + var var_R = ( RGB[0] / 255 ) // R from 0 to 255 + var var_G = ( RGB[1] / 255 ) // G from 0 to 255 + var var_B = ( RGB[2] / 255 ) // B from 0 to 255 + + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) + else var_R = var_R / 12.92 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) + else var_G = var_G / 12.92 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) + else var_B = var_B / 12.92 + + var_R = var_R * 100 + var_G = var_G * 100 + var_B = var_B * 100 + + //Observer. = 2°, Illuminant = D65 + var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 + var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 + var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 + return [x,y,z] + } + function xyz2hunterlab (XYZ) { + var X = XYZ[0] + var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) + var Z = XYZ[2] + var L = 10 * sqrt( Y ) + var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) + var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) + return [L,a,b] + } +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index c0c140f..664b102 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({ } if (data.colors && data.colors.wall) { - this.parent.lightControl.load(data.colors) + this.parent.colorControl.load(data.colors) } else { - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() } if (data.walls) { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index a460bbf..dceae3c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', - "click [data-role='toggle-light-control']": 'toggleLightControl', + "click [data-role='toggle-color-control']": 'toggleColorControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, @@ -46,7 +46,7 @@ var EditorToolbar = View.extend({ this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() this.parent.settings.toggle() @@ -75,7 +75,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() }, @@ -111,7 +111,7 @@ var EditorToolbar = View.extend({ this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() @@ -119,17 +119,17 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.toggle(state) }, - toggleLightControl: function(){ - var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") + toggleColorControl: function(){ + var state = ! $("[data-role='toggle-color-control']").hasClass("inuse") this.resetMode() - $("[data-role='toggle-light-control']").toggleClass("inuse", state) + $("[data-role='toggle-color-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) - this.parent.lightControl.toggle(state) + this.parent.colorControl.toggle(state) }, toggleTextEditor: function(){ @@ -138,7 +138,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.colorControl.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) @@ -153,7 +153,7 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.toggleMap(false) this.parent.presets.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 05d1bec..9946feb 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,7 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js deleted file mode 100644 index 10f8d2c..0000000 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ /dev/null @@ -1,305 +0,0 @@ - -var LightControl = View.extend({ - el: ".lightcontrol", - - events: { - "mousedown": "stopPropagation", - "click .color-swatches span": "select", - "mousedown #brightness-control": "beginBrightness", - "input #brightness-control": "updateBrightness", - }, - - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - - initialize: function(opt){ - this.parent = opt.parent - - this.colorPicker = new LabColorPicker(this, 180, 180) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) - - this.$swatches = this.$(".swatch") - this.$labels = this.$(".swatch + label") - this.$swatch = { - wall: this.$("#wall-color"), - outline: this.$("#outline-color"), - floor: this.$("#floor-color"), - ceiling: this.$("#ceiling-color"), - } - this.$brightnessControl = this.$("#brightness-control") - - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.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])) - }.bind(this)) - this.setMode("wall") - }, - - loadDefaults: function(){ - var 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(), - } - this.load(colors) - }, - - toggle: function(state){ - this.$el.toggleClass("active", state); - }, - - show: function(){ - this.parent.cursor.message("colors") - this.toggle(true) - }, - - hide: function(){ - this.toggle(false) - }, - - pick: function(rgb, Lab){ - this.labColor = Lab - this.setSwatchColor(this.mode, rgb) - // console.log(rgb) - Walls.setColor[ this.mode ](rgb) - }, - - setSwatchColor: function(mode, rgb) { - this.$swatch[ mode ].css("background-color", rgb_string(rgb)) - }, - - initialState: null, - - begin: function(){ - this.initialState = this.serialize() - }, - - serialize: function(){ - return { - mode: this.mode, - rgb: Walls.colors[ this.mode ] - } - }, - - finalize: function(){ - if (! this.initialState) { return } - UndoStack.push({ - type: 'update-colors', - undo: this.initialState, - redo: this.serialize(), - }) - - this.initialState = null - - // TODO: watch individual wall object here - Minotaur.watch( app.router.editorView.settings ) - }, - - setMode: function (mode) { - var color, brightness - this.mode = mode - this.$(".active").removeClass("active") - this.$swatch[ mode ].parent().addClass("active") - color = Walls.colors[ mode ] - - this.labColor = this.colorPicker.load(color) - this.$brightnessControl.val( this.labColor[0] ) - }, - - select: function(e){ - var mode = $('.swatch', e.currentTarget).data('mode') - this.setMode(mode) - }, - - beginBrightness: function(){ - this.begin() - $(window).one("mouseup", this.finalize.bind(this)) - }, - - updateBrightness: function(){ - this.labColor[0] = parseFloat( this.$brightnessControl.val() ) - var rgb = this.colorPicker.setLab( this.labColor ) - this.pick(rgb, this.labColor) - }, - -}) - -var LabColorPicker = function (parent, w, h) { - var base = this - var canvas = this.canvas = document.createElement('canvas') - var ctx = this.ctx = canvas.getContext('2d') - var imageData = ctx.createImageData(w,h) - var data = imageData.data - - var cursor = this.cursor = document.createElement("div") - cursor.className = "colorPickerCursor" - - canvas.width = w - canvas.height = h - canvas.className = "colorPicker" - - var ww = w-1 - var hh = h-1 - - var L_range = [0, 110] - var a_range = [-86.185, 98.254] - var b_range = [-107.863, 94.482] - - var rgb = [0,0,0] - - var val = 80 - - this.mouse = new mouse({ - el: canvas, - down: function(e, cursor){ - parent.begin() - cursor.x.a = -cursor.x.a - base.pick(cursor.x.a, cursor.y.a) - }, - drag: function(e, cursor){ - cursor.x.b = -cursor.x.b - base.pick(cursor.x.b, cursor.y.b) - }, - up: function(){ - parent.finalize() - } - }) - - this.setLab = function(Lab) { - val = Lab[0] - this.paint() - var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) - return rgb - } - this.pick = function(i, j){ - i = clamp(i, 0, w) - j = clamp(j, 0, h) - var x = mix( i/ww, a_range[0], a_range[1] ) - var y = mix( j/hh, b_range[0], b_range[1] ) - var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) - this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) - } - this.load = function(rgba){ - var Lab = xyz2hunterlab(rgb2xyz(rgba)) - var val = clamp( Lab[0], L_range[0], L_range[1] ) - var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) - var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - - this.moveCursor(x,y) - this.setLab(Lab) - return Lab - } - this.moveCursor = function(x,y){ - cursor.style.left = x + "px" - cursor.style.top = y + "px" - } - this.paint = function() { - val = clamp(val, L_range[0], L_range[1]) - var x, y, t - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { - x = mix( i/ww, a_range[0], a_range[1] ) - y = mix( j/hh, b_range[0], b_range[1] ) - t = (j*w + i) * 4 - rgb = xyz2rgb(hunterlab2xyz(val, x, y)) - data[t] = Math.round( rgb[0] ) - data[t+1] = Math.round( rgb[1] ) - data[t+2] = Math.round( rgb[2] ) - data[t+3] = 255 - } - } - ctx.putImageData(imageData,0,0) - } - - function hunterlab2xyz (L,a,b) { - var_Y = L / 10 - var_X = a / 17.5 * L / 10 - var_Z = b / 7 * L / 10 - - Y = Math.pow(var_Y, 2) - X = ( var_X + Y ) / 1.02 - Z = -( var_Z - Y ) / 0.847 - xyz = [X,Y,Z] - } - function xyz2rgb(){ - var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) - var var_Y = xyz[1] / 100 //Y from 0 to 100.000 - var var_Z = xyz[2] / 100 //Z from 0 to 108.883 - - var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 - var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 - var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 - - if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 - else var_R = 12.92 * var_R - if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 - else var_G = 12.92 * var_G - if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 - else var_B = 12.92 * var_B - - rgb[0] = clamp(var_R * 255, 0, 255) - rgb[1] = clamp(var_G * 255, 0, 255) - rgb[2] = clamp(var_B * 255, 0, 255) - return rgb - } - function rgb2xyz(RGB){ - var var_R = ( RGB[0] / 255 ) // R from 0 to 255 - var var_G = ( RGB[1] / 255 ) // G from 0 to 255 - var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - - if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) - else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) - else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) - else var_B = var_B / 12.92 - - var_R = var_R * 100 - var_G = var_G * 100 - var_B = var_B * 100 - - //Observer. = 2°, Illuminant = D65 - var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 - var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 - var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 - return [x,y,z] - } - function xyz2hunterlab (XYZ) { - var X = XYZ[0] - var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) - var Z = XYZ[2] - var L = 10 * sqrt( Y ) - var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) - var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) - return [L,a,b] - } -} diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 4edc957..a3dc610 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -54,7 +54,7 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.lightControl.load(this.presets[preset]) + this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1ab1198..d7999b9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,7 @@ border-left: 1px solid black; /* COLOR PICKER */ -.lightcontrol { +.colorcontrol { margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; @@ -1592,11 +1592,11 @@ border-left: 1px solid black; transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol.active { +.colorcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); } -.lightcontrol .slider { +.colorcontrol .slider { } h4 { font-weight:300; diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs new file mode 100644 index 0000000..040808e --- /dev/null +++ b/views/controls/editor/color-control.ejs @@ -0,0 +1,28 @@ +
+

Edit Room Colors

+ +
+
+ + + +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ +
+
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') 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') 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"> - -- cgit v1.2.3-70-g09d2 From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 17:41:36 -0500 Subject: orthographic polyline --- .../javascripts/rectangles/engine/map/_map.js | 8 + .../javascripts/rectangles/engine/map/draw.js | 19 +- .../assets/javascripts/rectangles/models/vec2.js | 5 + public/assets/test/ortho.html | 224 +++++++++++++++++++++ 4 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 public/assets/test/ortho.html (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 202803a..d582982 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -48,6 +48,13 @@ var Map = function(opt){ base.el.appendChild(canvas) switch (opt.type) { + case "ortho": + base.draw = new Map.Draw (base, { ortho: true }) + base.ui = new Map.UI.Ortho (base) + base.sides = base.sides_for_camera + $(window).resize(base.resize) + break + case "editor": base.draw = new Map.Draw (base) base.ui = new Map.UI.Editor (base) @@ -65,6 +72,7 @@ var Map = function(opt){ base.resize = function(){ canvas.width = base.dimensions.a = window.innerWidth canvas.height = base.dimensions.b = window.innerHeight + // resize here - esp if 2d-hires } base.toggle = function(state){ diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5a9b592..b525696 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -5,14 +5,16 @@ Map.Draw = function(map, opt){ var draw = this - var ctx = map.canvas.getContext("2d") + var ctx = draw.ctx = map.canvas.getContext("2d") draw.animate = function(){ ctx.save() draw.clear() draw.fill("rgba(255,255,255,0.98)") - if (opt.minimap) { + if (opt.ortho) { + } + else if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) ctx.translate( opt.center.x, - opt.center.z ) @@ -22,7 +24,6 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } - else { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) @@ -31,12 +32,19 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) + draw.mouse_dimensions(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) } ctx.restore() } + draw.translate = function(){ + ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) + ctx.scale( map.zoom, map.zoom ) + ctx.translate( map.center.a, map.center.b ) + ctx.scale( -1, 1 ) + } // changes the ctx temporarily draw.render = function(){ @@ -87,7 +95,7 @@ Map.Draw = function(map, opt){ ctx.putImageData(pixelData, 0, 0) // reset the ctx - ctx = map.canvas.getContext("2d") + ctx = draw.ctx return canvas } @@ -123,7 +131,8 @@ Map.Draw = function(map, opt){ ctx.beginPath(); ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false); ctx.fill(); - + } + draw.mouse_dimensions = function(mouse){ if (mouse.width() != 0 && mouse.height() != 0) { if (map.ui.dragging) { stroke_rect(mouse) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 14d0e6b..290e45e 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -80,6 +80,11 @@ this.a = Math.round(this.a) this.b = Math.round(this.b) } + vec2.prototype.distanceTo = function(v){ + var va = (this.a - v.a) + var vb = (this.b - v.b) + return Math.sqrt( va*va + vb*vb ) + } vec2.prototype.setPosition = function(n){ var len = this.length() this.a = n diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html new file mode 100644 index 0000000..8626453 --- /dev/null +++ b/public/assets/test/ortho.html @@ -0,0 +1,224 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + height: i, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() } +function add_center () { + var mx = new MX.Object3D() + mx.width = 79 + mx.height = 64 + mx.y = 32 * 0.05 + mx.scale = 0.05 + mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)" + scene.add(mx) +} function build_circle () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ map.draw.translate() map.draw.coords() + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From bcf1904e0bdd64353e6d06f922112cf28b1bc87f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 5 Feb 2015 12:28:04 -0500 Subject: line to cursor --- public/assets/javascripts/rectangles/engine/map/draw.js | 4 ++-- public/assets/test/ortho.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 564b351..24f7cf3 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,11 +228,11 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - draw.dot_at = function dot_at (x,z){ + draw.dot_at = function dot_at (x, z, radius){ ctx.save() ctx.translate(x,z) - var radius = 2 / map.zoom + radius = (radius || 2) / map.zoom ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI, false); diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index ce52f99..1ca7e06 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) last_point = new vec2( cursor.x.a, cursor.y.a ) - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) { + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b } else { document.body.style.cursor = "crosshair" @@ -119,7 +121,7 @@ function polyline (points, finished) { if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" - ctx.fillRect(points[0].a, points[0].b, 10, 10) + map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { ctx.fillStyle = "#ff0" @@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){ rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) - console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) return mx @@ -256,10 +257,13 @@ function animate(time){ map.draw.coords() polyline(points) - if (placing && last_point && points.length) { + if (placing && last_point) { + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() - ctx.moveTo(points[0].a, points[0].b) + ctx.moveTo(points[points.length-1].a, points[points.length-1].b) ctx.lineTo(last_point.a, last_point.b) + ctx.stroke() } shapes.forEach(function(shape){ -- cgit v1.2.3-70-g09d2 From 3832685358c9d3ad3e0aead51228f29255702007 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 13:23:33 -0400 Subject: setVolume functions --- public/assets/javascripts/mx/primitives/mx.video.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.vimeo.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.youtube.js | 5 +++++ public/assets/javascripts/rectangles/engine/scenery/types/video.js | 4 ++++ 4 files changed, 19 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c281f02..9138cdd 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -87,6 +87,11 @@ MX.Video = MX.Object3D.extend({ this.muted = false }, + setVolume: function(n){ + if (this.muted) return + this.player.volume = n + }, + setLoop: function(state){ this.media.loop = state }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index fe5ce86..bff781b 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -130,6 +130,11 @@ MX.Vimeo = MX.Object3D.extend({ this.player.api('setVolume', 0.8) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.api('setVolume', n) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 5c92378..fad66dd 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -173,6 +173,11 @@ MX.Youtube = MX.Object3D.extend({ this.player.setVolume(80) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.setVolume( floor(n * 100) ) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index d1b1763..fb1a868 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -90,6 +90,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ } }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + serialize: function(){ var data = base.serialize.call(this) return data -- cgit v1.2.3-70-g09d2 From 0a67e7f8ab74f82212a123dd6c30903124c1e8df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 17:08:47 -0400 Subject: sound interpolation --- .../assets/javascripts/mx/primitives/mx.soundcloud.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.video.js | 2 +- public/assets/javascripts/mx/primitives/mx.vimeo.js | 2 +- public/assets/javascripts/mx/primitives/mx.youtube.js | 2 +- .../javascripts/rectangles/engine/scenery/_scenery.js | 1 + .../javascripts/rectangles/engine/scenery/sound.js | 17 +++++++++++++++++ .../rectangles/engine/scenery/types/audio.js | 4 ++++ views/partials/scripts.ejs | 1 + 8 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/sound.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js index 75286d9..fecb2f4 100644 --- a/public/assets/javascripts/mx/primitives/mx.soundcloud.js +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -102,6 +102,11 @@ MX.Soundcloud = MX.Object3D.extend({ setLoop: function(state){ this.media.loop = state }, + + setVolume: function(n){ + if (this.muted || ! this.player) return + this.player.setVolume(floor( n * 100 )) + }, didPlay: function(){ this.paused = false diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 9138cdd..43c392a 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -88,7 +88,7 @@ MX.Video = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.volume = n }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index bff781b..ccd0a13 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -132,7 +132,7 @@ MX.Vimeo = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.api('setVolume', n) }, diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index fad66dd..e4e73d6 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -175,7 +175,7 @@ MX.Youtube = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player || ! this.player.setVolume) return this.player.setVolume( floor(n * 100) ) }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d52fe21..18d665f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -11,6 +11,7 @@ var Scenery = new function(){ base.init = function(){ base.resize.init() + base.sound.init() } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js new file mode 100644 index 0000000..2f7f8de --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -0,0 +1,17 @@ + +Scenery.sound = {} +Scenery.sound.max_distance = 600 +Scenery.sound.init = function(){ + app.tube.on("move", Scenery.sound.move) +} +Scenery.sound.move = function(){ + var vals = Scenery.map(function(scenery){ + if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { + //get distance from A to B + var distance = dist(cam.x, cam.z, + scenery.mx.x, scenery.mx.z) + var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) + scenery.setVolume(volume) + } + }) +} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js index 82f984e..fdd221d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -39,6 +39,10 @@ Scenery.types.audio = Scenery.types.base.extend(function(base){ this.dimensions.deserialize(data.dimensions) }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + play: function(){ this.mx.play() }, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 011644b..72aaa8c 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -65,6 +65,7 @@ + -- cgit v1.2.3-70-g09d2 From d7a12fac00ce78ef37a17da5eb1094281272bad7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 25 Mar 2015 15:09:57 -0400 Subject: longer distance --- public/assets/javascripts/rectangles/engine/scenery/sound.js | 3 +-- views/controls/editor/color-control.ejs | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js index 2f7f8de..776dd80 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/sound.js +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -1,13 +1,12 @@ Scenery.sound = {} -Scenery.sound.max_distance = 600 +Scenery.sound.max_distance = 2000 Scenery.sound.init = function(){ app.tube.on("move", Scenery.sound.move) } Scenery.sound.move = function(){ var vals = Scenery.map(function(scenery){ if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { - //get distance from A to B var distance = dist(cam.x, cam.z, scenery.mx.x, scenery.mx.z) var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index bcc955d..c035e24 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -1,4 +1,4 @@ -
+

Edit Room Colors

-- cgit v1.2.3-70-g09d2 From 2a984d83343d6d5f7510697ac6f61d2def21e721 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 25 Mar 2015 15:11:26 -0400 Subject: lil less --- public/assets/javascripts/rectangles/engine/scenery/sound.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js index 776dd80..37bdee0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/sound.js +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -1,6 +1,6 @@ Scenery.sound = {} -Scenery.sound.max_distance = 2000 +Scenery.sound.max_distance = 1500 Scenery.sound.init = function(){ app.tube.on("move", Scenery.sound.move) } -- cgit v1.2.3-70-g09d2 From b38b008981ee88c58cfff5c2e2e7820046dde415 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 17:35:30 -0400 Subject: store rotation on wall object --- public/assets/javascripts/rectangles/engine/scenery/move.js | 5 +++-- public/assets/javascripts/rectangles/engine/scenery/resize.js | 2 +- public/assets/javascripts/rectangles/engine/scenery/types/_object.js | 4 ++-- public/assets/javascripts/rectangles/models/wall.js | 5 +++-- 4 files changed, 9 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index f57ddba..0d26582 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -75,13 +75,14 @@ Scenery.move = function(base){ switch (base.wall.side) { case FRONT: case BACK: - base.mx.x = position.a + delta.a * cos(wall_rotation[base.wall.side]) + dimension.a / 2 + base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 break case LEFT: case RIGHT: - base.mx.z = position.a + delta.a * sin(wall_rotation[base.wall.side]) + dimension.a / 2 + base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } + console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) if (editor.permissions.resize) { Scenery.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 5af7f3f..73fd82a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,7 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ - rotationY = wall_rotation[obj.wall.side] + rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index cd3f981..e3b9b4d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -90,11 +90,11 @@ Scenery.types.base = Fiber.extend(function(base){ switch (this.wall.side) { case FRONT: case BACK: - this.position.a += delta.a * cos(wall_rotation[this.wall.side]) + this.position.a += delta.a * cos(this.wall.rotationY) break case LEFT: case RIGHT: - this.position.a += delta.a * sin(wall_rotation[this.wall.side]) + this.position.a += delta.a * sin(this.wall.rotationY) break } }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index a026c3c..13f5cd7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -18,6 +18,7 @@ this.edge = opt.edge this.side = opt.side this.surface = opt.surface + this.rotationY = ('rotationY' in opt) ? opt.rotationY : wall_rotation[opt.side] this.mx = opt.mx this.background = { src: "none" } } @@ -89,7 +90,7 @@ mx_dot.move(mx_pos) mx_dot.width = 5 mx_dot.height = 5 - mx_dot.rotationY = wall_rotation[base.side] + mx_dot.rotationY = base.rotationY mx_dot.el.style.backgroundColor = "red" scene.add(mx_dot) } @@ -236,7 +237,7 @@ x: x, y: position.b + dimension.b / 2, z: z, - rotationY: wall_rotation[ this.side ], + rotationY: this.rotationY, } } Wall.prototype.mxToPosition = function(mx, dimension) { -- cgit v1.2.3-70-g09d2 From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 20:25:45 -0400 Subject: split out mx.grid --- public/assets/javascripts/mx/primitives/mx.grid.js | 60 +++++++ .../javascripts/rectangles/engine/map/ui_ortho.js | 65 +++++++ .../javascripts/rectangles/engine/scenery/move.js | 3 +- public/assets/test/ortho2.html | 200 +++++++++++++++++++++ 4 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.grid.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js create mode 100644 public/assets/test/ortho2.html (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js new file mode 100644 index 0000000..7a40144 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -0,0 +1,60 @@ +MX.Grid = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Grid" + + var ops = this.ops = defaults(ops, { + x: 0, + y: 0, + z: 0, + space: 20, + cells: 20, + }) + + ops.side = ops.space * ops.cells + + var ctx, canvas = document.createElement("canvas") + + this.el = canvas + this.width = this.height = canvas.width = canvas.height = ops.side + 4 + + ctx = canvas.getContext('2d') + + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = PI/2 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-grid") + + this.draw(ctx) + }, + + draw: function(ctx){ + ctx = ctx || this.ctx + + var cells = this.ops.cells, + space = this.ops.space, + side = this.ops.side + + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.closePath() + ctx.stroke() + }, + +}) + + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js new file mode 100644 index 0000000..adff4d2 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,65 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 0d26582..dd60a61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -82,7 +82,7 @@ Scenery.move = function(base){ base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } - console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) + if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -105,7 +105,6 @@ Scenery.move = function(base){ dragging = moved = false oldState = null document.body.classList.remove("dragging") - } function switch_wall (e, target, cursor){ diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 835fbcd8b47715d34d17b784409db1d45f992c29 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:46:25 -0400 Subject: rightclick to recenter canvas --- .../javascripts/rectangles/engine/map/ui_ortho.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adff4d2..adcc078 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -10,6 +10,23 @@ Map.UI.Ortho = function(map){ down: function(e, cursor){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) 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 (placing) { + // close polyline or cancel + return + } + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + // compare to initial point var p = new vec2( cursor.x.a, cursor.y.a ) if (placing) { -- cgit v1.2.3-70-g09d2 From 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 12:44:28 -0400 Subject: etc --- public/assets/javascripts/app.js | 2 - .../javascripts/rectangles/engine/map/ui_ortho.js | 82 --------------------- public/assets/test/ortho.html | 9 +++ public/assets/test/ortho2.html | 83 ++++++++++++++++++++++ 4 files changed, 92 insertions(+), 84 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ff062e..6ebcda5 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,8 +21,6 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - var movements - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adcc078..e69de29 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -1,82 +0,0 @@ -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - 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 (placing) { - // close polyline or cancel - return - } - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - }, - move: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b =last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - }, - up: function(e, cursor, new_cursor){ - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 1ca7e06..2257006 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } } var scene, map, controls diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 733c90c..17acead 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -46,6 +46,89 @@ body { + + + -- cgit v1.2.3-70-g09d2 From c6eea0f4887ba14e5a6ecfff8c9e8480ae6421c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Apr 2015 17:05:31 -0400 Subject: placing objects on the floor --- .../rectangles/engine/sculpture/_sculpture.js | 24 +++-- .../rectangles/engine/sculpture/types/_object.js | 91 +++++++++++++++++ .../rectangles/engine/sculpture/types/image.js | 110 ++++++--------------- .../assets/javascripts/rectangles/models/floor.js | 7 +- .../assets/javascripts/rectangles/models/vec3.js | 9 ++ .../assets/javascripts/ui/editor/EditorSettings.js | 3 + server/lib/schemas/Project.js | 1 + views/partials/scripts.ejs | 1 + 8 files changed, 149 insertions(+), 97 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/types/_object.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index eb64e92..c8c90d3 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -4,7 +4,6 @@ var Sculpture = new function(){ var base = this; base.list = {} - base.nextMedia = null base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) @@ -12,29 +11,28 @@ var Sculpture = new function(){ } base.add = function(opt){ - var scene_media + var sculpture switch (opt.media.type) { case 'image': - scene_media = new Sculpture.types.image (opt) + sculpture = new Sculpture.types.image (opt) break } - base.list[scene_media.id] = scene_media - return scene_media + base.list[sculpture.id] = sculpture + return sculpture } - base.addNextToWall = function(opt){ + base.addNext = function(opt){ opt.newMedia = true - opt.media = base.nextMedia - opt.index = opt.index || 0 - var scene_media = base.add(opt) + opt.media = Scenery.nextMedia + var sculpture = base.add(opt) - // test if scenery was placed here - if (! scene_media) { + // test if sculpture was placed here + if (! sculpture) { return null } else { - base.nextMedia = null - return scene_media + Scenery.nextMedia = null + return sculpture } } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js new file mode 100644 index 0000000..fa6b0b1 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -0,0 +1,91 @@ +Sculpture.types.base = Fiber.extend(function(base){ + + var exports = { + + init: function(opt){ + this.id = opt.id || Sculpture.uid("sculpture") + // this.move = new Sculpture.move (this) + this.media = opt.media + this.naturalDimensions = new vec2(this.media.width, this.media.height) + + this.set_scale( opt.scale || this.media.scale || 1.0 ) + this.position = new vec2(0,0) + }, + + set_scale: function(scale){ + this.scale = scale || 1.0 + if (this.mx) { + this.mx.scale = this.mx.ops.scale = this.scale + } + this.dimensions = this.naturalDimensions.clone().mul(this.scale) + }, + + place: function(opt){ + if (opt.data) { + this.deserialize(opt.data) + } + else { + this.mx.move(opt.position) + } + }, + + bind: function(){ + // this.move.bind() + }, + + unbind: function(){ + // this.move.unbind() + }, + + remove: function(){ + if (this.removed) return + this.removed = true + + UndoStack.push({ + type: 'destroy-sculpture', + undo: this.serialize(), + redo: { id: this.id }, + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + Sculpture.remove(this.id) + + // Sculpture.resize.hide() + if (app.controller.sculptureEditor) { + app.controller.sculptureEditor.tainted = false + app.controller.sculptureEditor.hide() + } + }, + + destroy: function(){ + this.unbind() + scene.remove(this.mx) + this.mx.media = null + this.mx.ops = null + this.mx = null + this.move = null + this.media = null + this.dimensions = null + this.naturalDimensions = null + this.wall = null + this.bounds = null + this.center = null + }, + + serialize: function(){ + var data = { + id: this.id, + dimensions: this.dimensions.serialize(), + position: app.position(this.mx), + scale: this.scale, + media: this.media, + } + return data + }, + } + + return exports + +}) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index af538f7..ae62133 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -1,98 +1,48 @@ -Scenery.types.base = Fiber.extend(function(base){ - var exports = { +Sculpture.types.image = Sculpture.types.base.extend(function(base){ + var exports = { + + type: 'image', + init: function(opt){ - _.bindAll(this, 'enter', 'leave') - this.id = opt.id || Scenery.uid("scenery") - this.move = new Scenery.move (this) - this.media = opt.media - this.naturalDimensions = new vec2(this.media.width, this.media.height) - - this.set_scale( opt.scale || this.media.scale || 1.0 ) - this.position = new vec2(0,0) - }, + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) - set_scale: function(scale){ - this.scale = scale || 1.0 - if (this.mx) { - this.mx.scale = this.mx.ops.scale = this.scale - } - this.dimensions = this.naturalDimensions.clone().mul(this.scale) - }, - - bind: function(){ - this.move.bind() -// $(this.mx.el).bind({ -// mouseenter: this.enter, -// mouseleave: this.leave, -// }) - }, - - unbind: function(){ - this.move.unbind() -// $(this.mx.el).unbind({ -// mouseenter: this.enter, -// mouseleave: this.leave, -// }) - }, - - remove: function(){ - if (this.removed) return - this.removed = true - - UndoStack.push({ - type: 'destroy-sculpture', - undo: this.serialize(), - redo: { id: this.id }, - }) + base.init.call(this, opt) - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + this.build(opt) + this.bind() + this.place(opt) + }, - Scenery.remove(this.id) + build: function(opt){ + this.footprint = new MX.Object3D() + this.mx = new MX.Image({ + src: this.media.url, + scale: this.scale, + media: this.media, + backface: true, + }) - Scenery.resize.hide() - if (app.controller.mediaEditor) { - app.controller.mediaEditor.tainted = false - app.controller.mediaEditor.hide() - } - if (app.controller.textEditor) { - app.controller.textEditor.tainted = false - app.controller.textEditor.hide() - } - }, + opt.position.y = opt.position.y || this.scale * this.media.height/2, + opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY, - destroy: function(){ - this.unbind() - scene.remove(this.mx) - this.mx.media = null - this.mx.ops = null - this.mx = null - this.move = null - this.media = null - this.dimensions = null - this.naturalDimensions = null - this.wall = null - this.bounds = null - this.center = null + scene.add( this.mx ) }, serialize: function(){ - var data = { - id: this.id, - wall_id: this.wall && this.wall.id, - side: this.wall && this.wall.side, - dimensions: this.dimensions.serialize(), - position: app.position(this.mx), - scale: this.scale, - media: this.media, - } + 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 + this.dimensions.deserialize(data.dimensions) + }, } return exports - }) diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 7b020a9..530de2b 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -79,9 +79,8 @@ if (Scenery.nextMedia) { e.preventDefault() - var sculpture = Sculpture.addNextToWall({ - index: index, - position: pos, + var sculpture = Sculpture.addNext({ + position: { x: x, y: 0, z: z }, }) // scenery was not placed @@ -91,7 +90,7 @@ } app.controller.toolbar.resetPermissions() - Sculpture.resize.show(sculpture) + // Sculpture.resize.show(sculpture) Sculpture.hovering = true // app.controller.pick(sculpture) diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js index c44dfe6..97329ed 100644 --- a/public/assets/javascripts/rectangles/models/vec3.js +++ b/public/assets/javascripts/rectangles/models/vec3.js @@ -32,3 +32,12 @@ vec3.prototype.apply_projection = function (m) { return this; } + +vec3.prototype.serialize = function(){ + return [ round(this.a), round(this.b), round(this.c) ] +} +vec3.prototype.deserialize = function(data){ + this.a = data[0] + this.b = data[1] + this.c = data[2] +} \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index b319404..460863e 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -77,6 +77,7 @@ var EditorSettings = FormView.extend({ data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop("checked", "checked") data.media && Scenery.deserialize(data.media) + data.sculpture && Sculpture.deserialize(data.sculpture) } }, @@ -112,6 +113,7 @@ var EditorSettings = FormView.extend({ clear: function(e){ e.preventDefault() Scenery.removeAll() + Sculpture.removeAll() }, destroy: function(){ @@ -191,6 +193,7 @@ var EditorSettings = FormView.extend({ fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) fd.append( "media", JSON.stringify( Scenery.serialize() ) ) + fd.append( "sculpture", JSON.stringify( Sculpture.serialize() ) ) fd.append( "startPosition", JSON.stringify( this.startPosition || false ) ) fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) ) diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index a923d85..e9501fc 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -30,6 +30,7 @@ var ProjectSchema = new mongoose.Schema({ rooms: [mongoose.Schema.Types.Mixed], walls: [mongoose.Schema.Types.Mixed], media: [mongoose.Schema.Types.Mixed], + sculpture: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, lastPosition: mongoose.Schema.Types.Mixed, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6cc5315..ca6cc94 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -74,6 +74,7 @@ + -- cgit v1.2.3-70-g09d2 From 3986bd98b0c0a4674310aa6425c75dba5962f2c7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 16:23:51 -0400 Subject: persist sculpture to db --- .../assets/javascripts/rectangles/engine/sculpture/types/image.js | 8 +++++--- server/lib/api/projects.js | 4 +++- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index ae62133..914abdf 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,9 +25,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ backface: true, }) - opt.position.y = opt.position.y || this.scale * this.media.height/2, - opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY, - + if (opt.position) { + opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 + opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY + } + scene.add( this.mx ) }, diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 1bf046f..3810168 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -40,6 +40,7 @@ var projects = { data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) + data.sculpture = JSON.parse(data.sculpture) data.colors = JSON.parse(data.colors) data.startPosition = JSON.parse(data.startPosition) data.lastPosition = JSON.parse(data.lastPosition) @@ -100,11 +101,12 @@ var projects = { data.updated_at = new Date () _.extend(doc, data) - + doc.rooms = JSON.parse(data.rooms) doc.walls = JSON.parse(data.walls) doc.colors = JSON.parse(data.colors) doc.media = JSON.parse(data.media) + doc.sculpture = JSON.parse(data.sculpture) doc.startPosition = JSON.parse(data.startPosition) doc.lastPosition = JSON.parse(data.lastPosition) -- cgit v1.2.3-70-g09d2 From 66e10f749fcc35e779e2492521b8dd98a8770820 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 16:54:51 -0400 Subject: billboard mode --- public/assets/javascripts/rectangles/_env.js | 1 + .../assets/javascripts/rectangles/engine/sculpture/_sculpture.js | 9 +++++++++ .../javascripts/rectangles/engine/sculpture/types/image.js | 3 +++ 3 files changed, 13 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 3221bac..14f73e3 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -20,6 +20,7 @@ environment.init = function(){ Rooms.init() Walls.init() Scenery.init() + Sculpture.init() scene.update() environment.update() diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index c8c90d3..1543def 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -8,6 +8,15 @@ var Sculpture = new function(){ base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) base.init = function(){ + app.on("move", base.updateBillboards) + } + + base.updateBillboards = function(){ + base.forEach(function(sculpture){ + if (sculpture.billboard) { + sculpture.mx.rotationY = cam.rotationY + } + }) } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 914abdf..9399097 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -28,6 +28,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ if (opt.position) { opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY + this.billboard = true } scene.add( this.mx ) @@ -35,6 +36,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ serialize: function(){ var data = base.serialize.call(this) + data.billboard = this.billboard return data }, @@ -42,6 +44,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ this.mx.move(data.position) this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b + this.billboard = data.billboard this.dimensions.deserialize(data.dimensions) }, } -- cgit v1.2.3-70-g09d2 From 1f4d4c1034f7e3403c9671bd88e6e83d22696dcb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 17:30:37 -0400 Subject: backface --- .../assets/javascripts/rectangles/engine/sculpture/types/image.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 9399097..9e8de58 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -17,7 +17,6 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }, build: function(opt){ - this.footprint = new MX.Object3D() this.mx = new MX.Image({ src: this.media.url, scale: this.scale, @@ -26,9 +25,10 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY this.billboard = true + this.backface = true } scene.add( this.mx ) @@ -37,6 +37,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ serialize: function(){ var data = base.serialize.call(this) data.billboard = this.billboard + data.backface = this.backface return data }, @@ -45,6 +46,8 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b this.billboard = data.billboard + this.backface = data.backface + if (! this.backface) this.mx.el.classList.remove("backface-visible") this.dimensions.deserialize(data.dimensions) }, } -- cgit v1.2.3-70-g09d2 From 519ff21e00c5c48d06e1ddee0cdc1dc3d90a26f8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 18:40:04 -0400 Subject: pulling in move code / view code --- .../rectangles/engine/scenery/resize.js | 1 + .../rectangles/engine/sculpture/move.js | 158 ++++++++++++++++ .../rectangles/engine/sculpture/types/_object.js | 22 ++- .../rectangles/engine/sculpture/types/image.js | 18 -- public/assets/javascripts/ui/editor/EditorView.js | 10 +- .../javascripts/ui/editor/SculptureEditor.js | 200 +++++++++++++++++++++ views/partials/scripts.ejs | 2 + 7 files changed, 390 insertions(+), 21 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/move.js create mode 100644 public/assets/javascripts/ui/editor/SculptureEditor.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 73fd82a..a5e255a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,6 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ + console.trace() rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js new file mode 100644 index 0000000..b5a4b40 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -0,0 +1,158 @@ + +Sculpture.move = function(base){ + + var x, y, z, position, dimension, bounds + var dragging = false, moved = false + var oldState + + this.bind = function(){ + Sculpture.mouse.bind_el(base.mx.el) + Sculpture.mouse.on("down", down) + Sculpture.mouse.on("enter", switch_wall) + Sculpture.mouse.on("drag", drag) + Sculpture.mouse.on("up", up) + } + + this.unbind = function(){ + base.focused = false + Sculpture.mouse.unbind_el(base.mx.el) + Sculpture.mouse.off("down", down) + Sculpture.mouse.off("enter", switch_wall) + Sculpture.mouse.off("drag", drag) + Sculpture.mouse.off("up", up) + } + + function down (e, cursor){ + if (e.target != base.mx.el && (e.target != base.mx.overlay)) return; + if (editor.permissions.destroy) { + base.remove() + return + } + + // load the modal + app.controller.pick(base) + + if (! base.focused) { + e.clickAccepted = false + base.focused = true + return + } + if (! (editor.permissions.move || editor.permissions.resize) ) { + e.clickAccepted = false + return + } + dragging = true + moved = false + x = base.mx.x + y = base.mx.y + z = base.mx.z + + bounds = base.bounds + dimension = base.dimensions + position = base.wall.mxToPosition( base.mx, dimension ) + + oldState = base.serialize() + document.body.classList.add("dragging") + } + + function drag (e, cursor){ + if (! dragging) return + + moved = true + + var flipX = base.wall.side & (FRONT | RIGHT) + + var delta = cursor.delta() + delta.mul( cursor_amp ) // TODO: this should be proportional to your distance from the wall + if (flipX) { delta.a *= -1 } + delta.b *= -1 + + var new_bounds = base.wall.surface.translate( bounds, dimension, position, delta ) + if (new_bounds) bounds = new_bounds + if (flipX) { delta.a *= -1 } + + base.mx.y = position.b + delta.b + dimension.b / 2 + switch (base.wall.side) { + case FRONT: + case BACK: + base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 + break + case LEFT: + case RIGHT: + base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 + break + } + + if (editor.permissions.resize) { + Sculpture.resize.move_dots() + } + } + + function up (e, cursor){ + if (! dragging || ! oldState) return + + if (moved) { + UndoStack.push({ + type: 'update-sculpture', + undo: oldState, + redo: base.serialize(), + }) + + // TODO: watch individual sculpture object here + Minotaur.watch( app.router.editorView.settings ) + } + + dragging = moved = false + oldState = null + document.body.classList.remove("dragging") + } + + function switch_wall (e, target, cursor){ + if (! dragging) return + if (target.wall.id == base.wall.id) return + + var old_wall_side = base.wall.side + var wall_group = old_wall_side | target.wall.side + var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension) + + if (! new_bounds) return + + base.wall = target.wall + base.bounds = bounds = new_bounds + + position.a = bounds.x.midpoint() - dimension.a / 2 + + if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { + switch (old_wall_side) { + case FRONT: + position.a = bounds.x.a + dimension.a / 2 + break + case BACK: + position.a = bounds.x.b - dimension.a / 2 + break + case LEFT: + position.a = bounds.x.a + dimension.a / 2 + break + case RIGHT: + position.a = bounds.x.b - dimension.a / 2 + break + } + } + + var mx_delta = base.wall.positionToMx( position, dimension ) + base.mx.move(mx_delta) + + if (editor.permissions.resize) { + Sculpture.resize.rotate_dots() + Sculpture.resize.move_dots() + } + + cursor.x.a = cursor.x.b + //var delta = cursor.delta() + drag(e, cursor) + + } + + return this + +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index fa6b0b1..6c93b41 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -8,8 +8,14 @@ Sculpture.types.base = Fiber.extend(function(base){ this.media = opt.media this.naturalDimensions = new vec2(this.media.width, this.media.height) + this.move = new Sculpture.move (this) + this.billboard = true + this.backface = true + this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) + + this.isSculpture = true }, set_scale: function(scale){ @@ -30,11 +36,11 @@ Sculpture.types.base = Fiber.extend(function(base){ }, bind: function(){ - // this.move.bind() + this.move.bind() }, unbind: function(){ - // this.move.unbind() + this.move.unbind() }, remove: function(){ @@ -81,9 +87,21 @@ Sculpture.types.base = Fiber.extend(function(base){ position: app.position(this.mx), scale: this.scale, media: this.media, + billboard: this.billboard, + backface: this.backface, } return data }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + this.billboard = data.billboard + this.backface = data.backface + if (! this.backface) this.mx.el.classList.remove("backface-visible") + this.dimensions.deserialize(data.dimensions) + }, } return exports diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 9e8de58..3e5ab08 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -27,29 +27,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ if (opt.position) { opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY - this.billboard = true - this.backface = true } scene.add( this.mx ) }, - serialize: function(){ - var data = base.serialize.call(this) - data.billboard = this.billboard - data.backface = this.backface - return data - }, - - deserialize: function(data){ - this.mx.move(data.position) - this.mx.ops.width = data.dimensions.a - this.mx.ops.height = data.dimensions.b - this.billboard = data.billboard - this.backface = data.backface - if (! this.backface) this.mx.el.classList.remove("backface-visible") - this.dimensions.deserialize(data.dimensions) - }, } return exports diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 50d3650..e5e2ca0 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,6 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaTumblr = new MediaTumblr ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) + this.sculptureEditor = new SculptureEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) @@ -56,12 +57,19 @@ var EditorView = View.extend({ }, pick: function(scenery){ - if (scenery.type == "text") { + if (scenery.isSculpture) { this.mediaEditor.hide() + this.textEditor.hide() + this.sculptureEditor.pick(scenery) + } + else if (scenery.type == "text") { + this.mediaEditor.hide() + this.sculptureEditor.hide() this.textEditor.pick(scenery) } else { this.textEditor.hide() + this.sculptureEditor.hide() this.mediaEditor.pick(scenery) } }, diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js new file mode 100644 index 0000000..cce000e --- /dev/null +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -0,0 +1,200 @@ + +var SculptureEditor = FormView.extend({ + el: "#sculptureEditor", + + events: { + "keydown": 'taint', + "focus [name]": "clearMinotaur", + "click [data-role=play-media]": "togglePaused", + "mousedown [name=keyframe]": "stopPropagation", + "mousedown": "stopPropagation", + "change [name=keyframe]": "seek", + "change [name=autoplay]": "setAutoplay", + "change [name=loop]": "setLoop", + "change [name=mute]": "setMute", + "change [name=width]": 'changeWidth', + "change [name=height]": 'changeHeight', + "change [name=units]": 'changeUnits', + "click [data-role=destroy-media]": "destroy", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$("[name=name]") + this.$description = this.$("[name=description]") + + // image fields + this.$width = this.$("[name=width]") + this.$height = this.$("[name=height]") + this.$units = this.$("[name=units]") + + // video fields + this.$playButton = this.$("[data-role=play-media]") + this.$autoplay = this.$("[name=autoplay]") + this.$loop = this.$("[name=loop]") + this.$mute = this.$("[name=mute]") + this.$keyframe = this.$("[name=keyframe]") + }, + + toggle: function(state) { + if (state) { + this.parent.settings.toggle() + } + this.$el.toggleClass("active", state); + }, + + togglePaused: function(state){ + var state = this.sculpture.toggle(state) + this.$playButton.toggleClass("paused", ! state) + }, + + pick: function(sculpture) { + if (this.sculpture && sculpture !== this.sculpture) { + this.unbind() + } + + this.bind(sculpture) + this.$el.addClass("active") + +// app.controller.toolbar.resetMode() + app.controller.toolbar.resetControls() + // Sculpture.resize.show(sculpture) + Sculpture.hovering = true + + var media = sculpture.media + + // console.log(media) + + this.$name.val(media.title) // || filenameFromUrl(media.url) ) + this.$description.val(media.description) + this.setDimensions() + this.$units.val( "ft" ) + + switch (media.type) { + case "image": + this.$(".video").hide() + this.$(".audio").hide() + this.$(".image").show() + break + + case "youtube": + case "vimeo": + case "video": + this.$(".image").hide() + this.$(".audio").hide() + this.$(".video").show() + + this.$playButton.toggleClass("paused", ! this.sculpture.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + this.$mute.prop('checked', !! media.mute) + this.$keyframe.val( Number(media.keyframe || 0) ) + break + + case "soundcloud": + this.$(".image").hide() + this.$(".video").hide() + this.$(".audio").show() + this.$playButton.toggleClass("paused", ! this.sculpture.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + break + } + }, + + hide: function(sculpture){ + if (this.sculpture) { + this.unbind() + } + this.toggle(false) + }, + + seek: function(){ + var n = parseFloat( this.$keyframe.val() ) + this.sculpture.seek(n) + this.tainted = true + + this.sculpture.media.keyframe = n + }, + setAutoplay: function(){ + var checked = this.$autoplay.prop('checked') + this.sculpture.media.autoplay = checked + this.tainted = true + if (checked && this.sculpture.paused()) { + this.togglePaused() + } + }, + setLoop: function(){ + var checked = this.$loop.prop('checked') + this.sculpture.setLoop(checked) + this.tainted = true + }, + setMute: function(){ + var checked = this.$mute.prop('checked') + this.sculpture.media.mute = checked + this.sculpture.mute(checked) + this.tainted = true + }, + + setDimensions: function(){ + if (! this.sculpture) return + this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) + this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" ) + this.tainted = true + }, + changeWidth: function(e){ + e.stopPropagation() + this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a ) + this.setDimensions() + }, + changeHeight: function(e){ + e.stopPropagation() + this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b ) + this.setDimensions() + }, + changeUnits: function(){ + app.units = this.$units.val() + this.$('.units').resetUnitVal() + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(sculpture){ + this.sculpture = sculpture + this.sculpture.mx.bound = true + this.sculpture.mx.el.classList.add("picked") + }, + + unbind: function(){ + if (this.sculpture) { + this.sculpture.focused = false + if (this.tainted && this.sculpture.media) { + this.sculpture.media.title = this.$name.val() + this.sculpture.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + } + if (this.sculpture.mx) { + this.sculpture.mx.bound = false + this.sculpture.mx.el.classList.remove("picked") + } + } + this.tainted = false + this.sculpture = null + }, + + destroy: function(){ + var sculpture = this.sculpture + this.hide() + + sculpture.remove() + + this.tainted = false + this.sculpture = null + }, + +}) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index ca6cc94..1eda8bd 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -74,6 +74,7 @@ + @@ -124,6 +125,7 @@ + -- cgit v1.2.3-70-g09d2 From d7c461e09e9ed644e35be86f067ccbe6d19e8b8c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 3 Apr 2015 20:23:30 -0400 Subject: moving statues --- .../rectangles/engine/sculpture/move.js | 77 ++-------------------- 1 file changed, 7 insertions(+), 70 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index b5a4b40..28d707e 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -8,7 +8,6 @@ Sculpture.move = function(base){ this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) Sculpture.mouse.on("down", down) - Sculpture.mouse.on("enter", switch_wall) Sculpture.mouse.on("drag", drag) Sculpture.mouse.on("up", up) } @@ -17,7 +16,6 @@ Sculpture.move = function(base){ base.focused = false Sculpture.mouse.unbind_el(base.mx.el) Sculpture.mouse.off("down", down) - Sculpture.mouse.off("enter", switch_wall) Sculpture.mouse.off("drag", drag) Sculpture.mouse.off("up", up) } @@ -49,7 +47,6 @@ Sculpture.move = function(base){ bounds = base.bounds dimension = base.dimensions - position = base.wall.mxToPosition( base.mx, dimension ) oldState = base.serialize() document.body.classList.add("dragging") @@ -60,32 +57,18 @@ Sculpture.move = function(base){ moved = true - var flipX = base.wall.side & (FRONT | RIGHT) - var delta = cursor.delta() delta.mul( cursor_amp ) // TODO: this should be proportional to your distance from the wall - if (flipX) { delta.a *= -1 } delta.b *= -1 - var new_bounds = base.wall.surface.translate( bounds, dimension, position, delta ) - if (new_bounds) bounds = new_bounds - if (flipX) { delta.a *= -1 } - - base.mx.y = position.b + delta.b + dimension.b / 2 - switch (base.wall.side) { - case FRONT: - case BACK: - base.mx.x = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2 - break - case LEFT: - case RIGHT: - base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 - break - } + // here we need to move the element based on the XY coords, as + // base.mx.y = position.b + delta.b + dimension.b / 2 + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - if (editor.permissions.resize) { - Sculpture.resize.move_dots() - } +// if (editor.permissions.resize) { +// Sculpture.resize.move_dots() +// } } function up (e, cursor){ @@ -107,52 +90,6 @@ Sculpture.move = function(base){ document.body.classList.remove("dragging") } - function switch_wall (e, target, cursor){ - if (! dragging) return - if (target.wall.id == base.wall.id) return - - var old_wall_side = base.wall.side - var wall_group = old_wall_side | target.wall.side - var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension) - - if (! new_bounds) return - - base.wall = target.wall - base.bounds = bounds = new_bounds - - position.a = bounds.x.midpoint() - dimension.a / 2 - - if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { - switch (old_wall_side) { - case FRONT: - position.a = bounds.x.a + dimension.a / 2 - break - case BACK: - position.a = bounds.x.b - dimension.a / 2 - break - case LEFT: - position.a = bounds.x.a + dimension.a / 2 - break - case RIGHT: - position.a = bounds.x.b - dimension.a / 2 - break - } - } - - var mx_delta = base.wall.positionToMx( position, dimension ) - base.mx.move(mx_delta) - - if (editor.permissions.resize) { - Sculpture.resize.rotate_dots() - Sculpture.resize.move_dots() - } - - cursor.x.a = cursor.x.b - //var delta = cursor.delta() - drag(e, cursor) - - } - return this } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 24543d0839ad51b2afa7195b16d29bc52b3f1a1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 13:15:19 -0400 Subject: remove sculpture --- .../javascripts/mx/extensions/mx.movements.js | 5 +++- .../rectangles/engine/sculpture/types/_object.js | 12 +++++++++ .../javascripts/ui/editor/SculptureEditor.js | 31 +++++++++++++++++++++- public/assets/stylesheets/app.css | 3 +++ views/controls/editor/sculpture.ejs | 10 +++---- 5 files changed, 54 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index bc71fc4..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -162,7 +162,10 @@ MX.Movements = function (cam) { case 8: // backspace e.preventDefault() - if (app.controller.mediaEditor.scenery) { + if (app.controller.sculptureEditor.sculpture) { + app.controller.sculptureEditor.sculpture.remove() + } + else if (app.controller.mediaEditor.scenery) { app.controller.mediaEditor.scenery.remove() } else if (app.controller.textEditor.scenery) { diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 6c93b41..48fd96a 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -43,6 +43,18 @@ Sculpture.types.base = Fiber.extend(function(base){ this.move.unbind() }, + setOutline: function(val){ + this.outline = val + // show/hide outline + }, + setOutlineColor: function(val){ + this.outlineColor = val + // set outline color + }, + setBillboard: function(val){ + this.billboard = val + }, + remove: function(){ if (this.removed) return this.removed = true diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index cce000e..ab0ccd2 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -10,12 +10,15 @@ var SculptureEditor = FormView.extend({ "mousedown": "stopPropagation", "change [name=keyframe]": "seek", "change [name=autoplay]": "setAutoplay", + "change [name=billboard]": "setBillboard", + "change [name=outline]": "setOutline", + "change [name=outlineColor]": "setOutlineColor", "change [name=loop]": "setLoop", "change [name=mute]": "setMute", "change [name=width]": 'changeWidth', "change [name=height]": 'changeHeight', "change [name=units]": 'changeUnits', - "click [data-role=destroy-media]": "destroy", + "click [data-role=destroy-sculpture]": "destroy", }, initialize: function(opt){ @@ -25,6 +28,10 @@ var SculptureEditor = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") + this.$billboard = this.$("[name=billboard]") + this.$outline = this.$("[name=outline]") + this.$outlineColor = this.$("[name=outlineColor]") + // image fields this.$width = this.$("[name=width]") this.$height = this.$("[name=height]") @@ -71,6 +78,11 @@ var SculptureEditor = FormView.extend({ this.$description.val(media.description) this.setDimensions() this.$units.val( "ft" ) + + this.$outline.prop( 'checked', !! media.outline ) + this.$outlineColor.val( media.outlineColor ) + this.$billboard.prop( 'checked', !! media.billboard ) + switch (media.type) { case "image": @@ -138,6 +150,23 @@ var SculptureEditor = FormView.extend({ this.tainted = true }, + + setBillboard: function(){ + var checked = this.$billboard.prop('checked') + this.sculpture.setBillboard(checked) + this.tainted = true + }, + setOutline: function(){ + var checked = this.$outline.prop('checked') + this.sculpture.setOutline(checked) + this.tainted = true + }, + setOutlineColor: function(){ + var color = this.$outlineColor.val() + this.sculpture.setOutlineColor(color) + this.tainted = true + }, + setDimensions: function(){ if (! this.sculpture) return this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b23b50b..6e97500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2455,6 +2455,9 @@ input[type="range"]::-webkit-slider-thumb { #mediaEditor .setting.number [type=text] { width: 140px; } +#sculptureEditor .setting.number input[type=text] { + width: 130px; +} .playButton,.muteButton { border-radius: 50%; diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs index 21e5039..4b8535a 100644 --- a/views/controls/editor/sculpture.ejs +++ b/views/controls/editor/sculpture.ejs @@ -13,14 +13,14 @@
- - - + + +
- - + +
-- cgit v1.2.3-70-g09d2 From cee602fc6e1431fd505665a7b285c3fa85d32d3e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 13:17:15 -0400 Subject: toggle billboard --- .../javascripts/rectangles/engine/sculpture/types/_object.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 48fd96a..489a6a1 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -53,7 +53,13 @@ Sculpture.types.base = Fiber.extend(function(base){ }, setBillboard: function(val){ this.billboard = val - }, + if (this.billboard) { + this.mx.rotationY = cam.rotationY + } + else { + this.mx.rotationY = PI/2 + } + }, remove: function(){ if (this.removed) return -- cgit v1.2.3-70-g09d2 From 546fba7ee9dac48d2fb0015709247b1b2efca8bc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 14:31:24 -0400 Subject: store billboard setting --- public/assets/javascripts/rectangles/engine/scenery/resize.js | 2 +- .../javascripts/rectangles/engine/sculpture/types/_object.js | 6 ++++++ public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/SculptureEditor.js | 7 +++---- 4 files changed, 11 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index a5e255a..006ff2a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -49,7 +49,7 @@ Scenery.resize = new function(){ // rotate the dots as appropriate base.rotate_dots = function(){ - console.trace() + // console.trace() rotationY = obj.wall.rotationY dots.forEach(function(dot){ dot.rotationY = rotationY diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 489a6a1..b903c5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -54,9 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){ setBillboard: function(val){ this.billboard = val if (this.billboard) { + this.mx.el.classList.add("backface-visible") + this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = cam.rotationY } else { + this.mx.el.classList.add("backface-hidden") + this.mx.el.classList.remove("backface-visible") this.mx.rotationY = PI/2 } }, @@ -106,6 +110,8 @@ Sculpture.types.base = Fiber.extend(function(base){ scale: this.scale, media: this.media, billboard: this.billboard, + outline: this.outline, + outlineColor: this.outlineColor, backface: this.backface, } return data diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index e5e2ca0..a7b4f20 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -80,6 +80,7 @@ var EditorView = View.extend({ }, hideExtras: function(){ + this.sculptureEditor.hide() this.mediaEditor.hide() this.textEditor.hide() this.share.hide() diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index ab0ccd2..ff1e6b9 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -79,10 +79,9 @@ var SculptureEditor = FormView.extend({ this.setDimensions() this.$units.val( "ft" ) - this.$outline.prop( 'checked', !! media.outline ) - this.$outlineColor.val( media.outlineColor ) - this.$billboard.prop( 'checked', !! media.billboard ) - + this.$outline.prop( 'checked', !! sculpture.outline ) + this.$outlineColor.val( sculpture.outlineColor || "#000000" ) + this.$billboard.prop( 'checked', !! sculpture.billboard ) switch (media.type) { case "image": -- cgit v1.2.3-70-g09d2 From 0b8b54e26aa7a40065a0be6f7708b7021e4fec13 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:03:35 -0400 Subject: resize scenery --- Gruntfile.js | 1 + .../rectangles/engine/scenery/resize.js | 1 + .../rectangles/engine/sculpture/_sculpture.js | 4 + .../rectangles/engine/sculpture/move.js | 6 +- .../rectangles/engine/sculpture/resize.js | 207 +++++++++++++++++++++ .../rectangles/engine/sculpture/types/_object.js | 2 +- .../assets/javascripts/rectangles/models/floor.js | 2 +- public/assets/javascripts/ui/editor/EditorView.js | 1 + .../javascripts/ui/editor/SculptureEditor.js | 3 +- views/partials/scripts.ejs | 1 + 10 files changed, 221 insertions(+), 7 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/resize.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/Gruntfile.js b/Gruntfile.js index 026ec6f..789ce6f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -79,6 +79,7 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/resize.js", "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 006ff2a..8dac140 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -8,6 +8,7 @@ Scenery.resize = new function(){ var dragging = false var naturalDimension, naturalDimensionCopy, dimension, position, scale var oldState + var rotationY var dots = [], dot, selected_dot diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index 1543def..888b925 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -9,6 +9,7 @@ var Sculpture = new function(){ base.init = function(){ app.on("move", base.updateBillboards) + base.resize.init() } base.updateBillboards = function(){ @@ -17,6 +18,9 @@ var Sculpture = new function(){ sculpture.mx.rotationY = cam.rotationY } }) + if (Sculpture.resize.obj && Sculpture.resize.obj.billboard) { + Sculpture.resize.move_dots() + } } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index 28d707e..f968bcf 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -66,9 +66,9 @@ Sculpture.move = function(base){ base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) -// if (editor.permissions.resize) { -// Sculpture.resize.move_dots() -// } + if (editor.permissions.resize) { + Sculpture.resize.move_dots() + } } function up (e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js new file mode 100644 index 0000000..53b8b2d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -0,0 +1,207 @@ +Sculpture.resize = new function(){ + + var base = this + + var obj + var x, y, z, bounds + var dragging = false + var naturalDimension, naturalDimensionCopy, dimension, position, scale + var oldState + var rotationY + + var dots = [], dot, selected_dot + + base.init = function(){ + base.build() + base.bind() + } + + // create 9 dots at the corners of the div + base.build = function(){ + [ TOP, + TOP_RIGHT, + RIGHT, + BOTTOM_RIGHT, + BOTTOM, + BOTTOM_LEFT, + LEFT, + TOP_LEFT ].forEach(base.build_dot) + } + + // generate a dot element + base.build_dot = function(side) { + var dot = new MX.Object3D('.dot') + dot.width = dot.height = dot_side * 2 + dot.scale = 0.5 + dot.side = side + $(dot.el).on({ + mouseenter: function(){ base.hovering = true }, + mouseleave: function(){ base.hovering = false }, + }) + dots.push(dot) + } + + base.add_dots = function(){ + dots.forEach(function(dot){ + scene.add(dot) + }) + } + + // move all the dots to the object's current position + base.move_dots = function(){ + rotationY = obj.mx.rotationY + + 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, { x: x, y: y, z: z, rotationY: rotationY }) + }) + } + + // move a dot .. to the initial position of the image + base.move_dot = function(dot, pos){ + if (dot.side & TOP) { + pos.y += obj.dimensions.b / 2 + } + if (dot.side & BOTTOM) { + pos.y -= obj.dimensions.b / 2 + } + if (dot.side & LEFT) { + pos.x -= cos(rotationY) * (obj.dimensions.a) / 2 + pos.z -= sin(rotationY) * (obj.dimensions.a) / 2 + } + if (dot.side & RIGHT) { + 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 + base.show = function(new_object) { + // if (obj === new_object) return + if (! new_object) return + base.obj = obj = new_object + base.add_dots() + base.move_dots() + } + + // dismiss the dots on blur + var dotsHideTimeout; + base.defer_hide = function(){ + clearTimeout(dotsHideTimeout) + + dotsHideTimeout = setTimeout(function(){ + if (Scenery.hovering || Scenery.resize.hovering || Scenery.mouse.down) return + Scenery.resize.hide() + }, dot_hide_delay) + } + + base.hide = function () { + if (! obj) return + base.obj = obj = null + dots.forEach(function(dot){ + scene.remove(dot) + }) + } + + base.bind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.bind_el(dot.el) + }) + Sculpture.mouse.on("down", down) + Sculpture.mouse.on("drag", drag) + Sculpture.mouse.on("up", up) + } + + base.unbind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.unbind_el(dot.el) + }) + Sculpture.mouse.off("down", down) + Sculpture.mouse.off("drag", drag) + Sculpture.mouse.off("up", up) + } + + 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 + + naturalDimension = obj.naturalDimensions + dimension = obj.dimensions + position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) + oldState = obj.serialize() + + if (obj.type == "text") { + naturalDimensionCopy = naturalDimension.clone() + positionCopy = position.clone() + } + + document.body.classList.add("dragging") + } + + function drag (e, cursor){ + if (! dragging) return + + var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0 + var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0 + var width = cursor.x.magnitude() + var height = cursor.y.magnitude() + var mag = cursor.magnitude() + + if (abs(width) > abs(height)) { + mag = x_sign * mag * sign(width) + } + else { + mag = y_sign * mag * sign(height) + } + + if (obj.type == "text") { + obj.mx.width = obj.media.width = naturalDimension.a = naturalDimensionCopy.a + (mag * 2) + obj.mx.height = obj.media.height = naturalDimension.b = naturalDimensionCopy.b + (mag * 2) + dimension.a = naturalDimension.a * obj.scale + dimension.b = naturalDimension.b * obj.scale + } + else { + obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) + } + + if (selected_dot.side & LEFT_RIGHT) { + obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) + obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign) + } + if (selected_dot.side & TOP_BOTTOM) { + obj.mx.y = position.b - mag/2 * y_sign + } + + base.move_dots() + + app.controller.sculptureEditor.setDimensions() + } + + function up (e, cursor){ + if (! dragging) return + dragging = false + if (! editor.permissions.resize) { return } + + obj.scale = obj.mx.ops.scale = obj.mx.scale + obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale) + + UndoStack.push({ + type: 'update-sculpture', + undo: oldState, + redo: obj.serialize(), + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + document.body.classList.remove("dragging") + selected_dot = null + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index b903c5b..390c42e 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -80,7 +80,7 @@ Sculpture.types.base = Fiber.extend(function(base){ Sculpture.remove(this.id) - // Sculpture.resize.hide() + Sculpture.resize.hide() if (app.controller.sculptureEditor) { app.controller.sculptureEditor.tainted = false app.controller.sculptureEditor.hide() diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 530de2b..799bdc7 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -90,7 +90,7 @@ } app.controller.toolbar.resetPermissions() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true // app.controller.pick(sculpture) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index a7b4f20..a2d84a6 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -84,6 +84,7 @@ var EditorView = View.extend({ this.mediaEditor.hide() this.textEditor.hide() this.share.hide() + Sculpture.resize.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index ff1e6b9..35abc00 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -67,7 +67,7 @@ var SculptureEditor = FormView.extend({ // app.controller.toolbar.resetMode() app.controller.toolbar.resetControls() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true var media = sculpture.media @@ -149,7 +149,6 @@ var SculptureEditor = FormView.extend({ this.tainted = true }, - setBillboard: function(){ var checked = this.$billboard.prop('checked') this.sculpture.setBillboard(checked) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 1eda8bd..6dfe912 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -75,6 +75,7 @@ + -- cgit v1.2.3-70-g09d2 From 226e90a540e185c8ae2f861eac5e2b1747f5d729 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:05:11 -0400 Subject: hide dots --- public/assets/javascripts/rectangles/engine/scenery/resize.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 8dac140..252af74 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -95,6 +95,7 @@ Scenery.resize = new function(){ base.add_dots() base.rotate_dots() base.move_dots() + Sculpture.resize.hide() } // dismiss the dots on blur -- cgit v1.2.3-70-g09d2 From 06fc629e2be66d79e94a02b169e12bc0918d0881 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:45:55 -0400 Subject: shift-drag scupltures up and down; dont drag through floor --- .../assets/javascripts/rectangles/engine/scenery/move.js | 2 +- .../javascripts/rectangles/engine/sculpture/move.js | 16 ++++++++++++---- .../rectangles/engine/sculpture/types/image.js | 2 +- public/assets/javascripts/rectangles/util/constants.js | 3 ++- 4 files changed, 16 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index dd60a61..94c6281 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ base.remove() return } - + // load the modal app.controller.pick(base) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index f968bcf..4f6d176 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,8 +2,9 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, moved = false + var dragging = false, shiftPressed = false, moved = false var oldState + var height, width this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) @@ -39,11 +40,13 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + height = base.mx.height * base.mx.scale bounds = base.bounds dimension = base.dimensions @@ -63,9 +66,14 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) - base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - + if (e.shiftKey) { + base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) + } + else { + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) + } + if (editor.permissions.resize) { Sculpture.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 3e5ab08..1a53f5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,7 +25,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + sculpture_distance_from_floor opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 3bc314c..a70cacd 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -25,7 +25,8 @@ var height_min = 200, MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, - dot_distance_from_picture = 3 + dot_distance_from_picture = 3, + sculpture_distance_from_floor = 3 var dot_hide_delay = 50, // ms dot_side = 20 -- cgit v1.2.3-70-g09d2 From 6ce9d713a9ffdbf27155718ca8c9a3a4645389f2 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 16:45:09 -0400 Subject: alt to rotate a non-billboard scenery obj --- public/assets/javascripts/rectangles/engine/sculpture/move.js | 11 +++++++++-- .../javascripts/rectangles/engine/sculpture/types/_object.js | 8 ++++---- 2 files changed, 13 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index 4f6d176..e571c3b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,7 +2,8 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, shiftPressed = false, moved = false + var rotationY + var dragging = false, altPressed = false, shiftPressed = false, moved = false var oldState var height, width @@ -40,12 +41,14 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + altPressed = (e.altKey && ! base.billboard) shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + rotationY = base.mx.rotationY height = base.mx.height * base.mx.scale bounds = base.bounds @@ -66,9 +69,13 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - if (e.shiftKey) { + if (shiftPressed) { base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) } + else if (altPressed) { + base.mx.rotationY = mod( rotationY + delta.a / (window.innerWidth / 2) , TWO_PI ) + Sculpture.resize.move_dots() + } else { base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 390c42e..a9c1669 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -54,13 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){ setBillboard: function(val){ this.billboard = val if (this.billboard) { - this.mx.el.classList.add("backface-visible") - this.mx.el.classList.remove("backface-hidden") + this.mx.el.classList.add("backface-hidden") + this.mx.el.classList.remove("backface-visible") this.mx.rotationY = cam.rotationY } else { - this.mx.el.classList.add("backface-hidden") - this.mx.el.classList.remove("backface-visible") + this.mx.el.classList.add("backface-visible") + this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = PI/2 } }, -- cgit v1.2.3-70-g09d2 From e2bb9e31b5cafe6bac49ef97dd791ab217797e94 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 16:51:41 -0400 Subject: wall --- public/assets/javascripts/rectangles/engine/sculpture/types/_object.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index a9c1669..5dd0aae 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -63,6 +63,7 @@ Sculpture.types.base = Fiber.extend(function(base){ this.mx.el.classList.remove("backface-hidden") this.mx.rotationY = PI/2 } + Sculpture.resize.move_dots() }, remove: function(){ -- cgit v1.2.3-70-g09d2 From 53695472cfb20b730d04b2d6a6a16c6d281e9180 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Apr 2015 20:47:41 -0400 Subject: outline box --- .../rectangles/engine/sculpture/move.js | 1 + .../rectangles/engine/sculpture/resize.js | 3 +- .../rectangles/engine/sculpture/types/_object.js | 52 +++++++++++++++++++--- .../assets/javascripts/rectangles/models/vec3.js | 18 +++++++- .../javascripts/rectangles/util/measurement.js | 4 ++ .../javascripts/ui/editor/SculptureEditor.js | 11 +++++ public/assets/stylesheets/app.css | 7 +++ views/controls/editor/sculpture.ejs | 2 +- 8 files changed, 90 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index e571c3b..0cbeccd 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -83,6 +83,7 @@ Sculpture.move = function(base){ if (editor.permissions.resize) { Sculpture.resize.move_dots() + base.updateOutline() } } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js index 53b8b2d..5f21d66 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/resize.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -180,7 +180,8 @@ Sculpture.resize = new function(){ } base.move_dots() - + obj.updateOutline() + app.controller.sculptureEditor.setDimensions() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 5dd0aae..2f24ae5 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -6,7 +6,8 @@ Sculpture.types.base = Fiber.extend(function(base){ this.id = opt.id || Sculpture.uid("sculpture") // this.move = new Sculpture.move (this) this.media = opt.media - this.naturalDimensions = new vec2(this.media.width, this.media.height) + this.naturalDimensions = new vec3(this.media.width, this.media.height, this.media.width) + this.dimensions = new vec3(this.media.width, this.media.height, this.media.width) this.move = new Sculpture.move (this) this.billboard = true @@ -14,7 +15,7 @@ Sculpture.types.base = Fiber.extend(function(base){ this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) - + this.isSculpture = true }, @@ -25,6 +26,11 @@ Sculpture.types.base = Fiber.extend(function(base){ } this.dimensions = this.naturalDimensions.clone().mul(this.scale) }, + set_depth: function(depth){ + console.log(this.dimensions.c, this.naturalDimensions.c, depth) + this.dimensions.c = depth + this.naturalDimensions.c = depth / this.scale + }, place: function(opt){ if (opt.data) { @@ -45,11 +51,16 @@ Sculpture.types.base = Fiber.extend(function(base){ setOutline: function(val){ this.outline = val - // show/hide outline + if (val && ! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.el.style.display = val ? "block" : "none" }, setOutlineColor: function(val){ this.outlineColor = val - // set outline color + if (this.outlineEl) { + this.outlineColor = this.outlineEl.el.style.borderColor = val + } }, setBillboard: function(val){ this.billboard = val @@ -65,6 +76,32 @@ Sculpture.types.base = Fiber.extend(function(base){ } Sculpture.resize.move_dots() }, + + buildOutline: function(){ + this.outlineEl = new MX.Object3D(".mx-outline") + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + this.outlineEl.scale = this.mx.scale + this.outlineEl.rotationX = -PI/2 + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.el.style.borderColor = this.outlineColor || "#000000" + scene.add(this.outlineEl) + }, + updateOutline: function(){ + if (! this.outline) { return } + if (! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + + this.outlineEl.scale = this.mx.scale + }, remove: function(){ if (this.removed) return @@ -112,7 +149,7 @@ Sculpture.types.base = Fiber.extend(function(base){ media: this.media, billboard: this.billboard, outline: this.outline, - outlineColor: this.outlineColor, + outlineColor: this.outlineColor || "#000000", backface: this.backface, } return data @@ -123,9 +160,14 @@ Sculpture.types.base = Fiber.extend(function(base){ this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b this.billboard = data.billboard + this.outline = data.outline + this.outlineColor = data.outlineColor || "#000000" this.backface = data.backface if (! this.backface) this.mx.el.classList.remove("backface-visible") this.dimensions.deserialize(data.dimensions) + if (this.outline) { + this.buildOutline() + } }, } diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js index 97329ed..b3825a9 100644 --- a/public/assets/javascripts/rectangles/models/vec3.js +++ b/public/assets/javascripts/rectangles/models/vec3.js @@ -39,5 +39,21 @@ vec3.prototype.serialize = function(){ vec3.prototype.deserialize = function(data){ this.a = data[0] this.b = data[1] - this.c = data[2] + this.c = data[2] || data[0] + return this +} +vec3.prototype.clone = function(){ + return new vec3(this.a, this.b, this.c) +} +vec3.prototype.assign = function(v){ + this.a = v.a + this.b = v.b + this.c = v.c + return this +} +vec3.prototype.mul = function(n) { + this.a *= n + this.b *= n + this.c *= n + return this } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js index d6a0b35..6346eac 100644 --- a/public/assets/javascripts/rectangles/util/measurement.js +++ b/public/assets/javascripts/rectangles/util/measurement.js @@ -28,6 +28,10 @@ function measurementToString( n ) { case 'ft': ft = floor(n / 36) inch = abs(round((n % 36) / 3)) + if (inch == 12) { + inch = 0 + ft += 1 + } s = ft + "'" if (inch > 0) { s += " " + inch + '"' diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index 52663e1..953260c 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -17,6 +17,7 @@ var SculptureEditor = FormView.extend({ "change [name=mute]": "setMute", "change [name=width]": 'changeWidth', "change [name=height]": 'changeHeight', + "change [name=depth]": 'changeDepth', "change [name=units]": 'changeUnits', "click [data-role=destroy-sculpture]": "destroy", }, @@ -35,6 +36,7 @@ var SculptureEditor = FormView.extend({ // image fields this.$width = this.$("[name=width]") this.$height = this.$("[name=height]") + this.$depth = this.$("[name=depth]") this.$units = this.$("[name=units]") // video fields @@ -168,17 +170,26 @@ var SculptureEditor = FormView.extend({ if (! this.sculpture) return this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) this.tainted = true }, changeWidth: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a ) this.setDimensions() + this.sculpture.updateOutline() }, changeHeight: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b ) this.setDimensions() + this.sculpture.updateOutline() + }, + changeDepth: function(e){ + e.stopPropagation() + this.sculpture.set_depth( this.$depth.unitVal() ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) + this.sculpture.updateOutline() }, changeUnits: function(){ app.units = this.$units.val() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e97500..6adb2a0 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1205,6 +1205,13 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } -webkit-box-sizing: content-box; box-sizing: content-box; } +.mx-outline { + border-width: 2px; + border-style: dashed; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} .destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs index 4b8535a..dfe917f 100644 --- a/views/controls/editor/sculpture.ejs +++ b/views/controls/editor/sculpture.ejs @@ -33,7 +33,7 @@
- +
remove object -- cgit v1.2.3-70-g09d2 From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Apr 2015 17:54:30 -0400 Subject: abstract out map tools --- .../javascripts/mx/extensions/mx.movements.js | 8 +- .../javascripts/rectangles/engine/map/ui_ortho.js | 49 +++ .../rectangles/engine/sculpture/types/_object.js | 2 +- public/assets/test/ortho2.html | 158 ++++----- public/assets/test/ortho3.html | 394 +++++++++++++++------ 5 files changed, 421 insertions(+), 190 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cf00adb..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -94,12 +94,12 @@ MX.Movements = function (cam) { moveRight = true break - // case 37: // left + case 37: // left case 81: // q turnLeft = true break - // case 39: // right + case 39: // right case 69: // e turnRight = true break @@ -200,12 +200,12 @@ MX.Movements = function (cam) { moveRight = false break - // case 37: // left + case 37: // left case 81: // q turnLeft = false break - // case 39: // right + case 39: // right case 69: // e turnRight = false break diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index e69de29..0c501ad 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,49 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].down(e, cursor) + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].move(e, cursor) + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + base.tools[currentTool].drag(e, cursor) + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + base.tools[currentTool].up(e, cursor, new_cursor) + } + }) + + var currentTool = "polyline" + base.setTool = function(s){ + currentTool = s + } + base.tools = { + polyline: new PolylineTool, + position: new PositionTool, + } + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 2f24ae5..2f593e8 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){ else { this.mx.el.classList.add("backface-visible") this.mx.el.classList.remove("backface-hidden") - this.mx.rotationY = PI/2 + this.mx.rotationY = quantize(cam.rotationY, PI/2) } Sculpture.resize.move_dots() }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 2c600f5..49e0308 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -41,6 +41,7 @@ body { + @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false +var MapTool = Fiber.extend(function(base){ + var exports = { + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + } + return exports +}) - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) +var PositionTool = MapTool.extend(function(base){ + var exports = { + down: function(e, cursor){ + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + map.ui.mouse.down = false + }, + } + return exports +}) - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (placing) { + // close polyline or cancel + placing = false + if (points.length > 2) { + add_mx_polyline(points) + } + else { + points.length = 0 } - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() return } + map.ui.tools.position.down(e, cursor) + return + } - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) mx_points.push( add_mx_point(p) ) - } - }, - move: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b = last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - }, - up: function(e, cursor, new_cursor){ - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} - + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + exports.move = function(e, cursor){ + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) var scene, map, controls @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale controls.opt.center.x = -x controls.opt.center.y = 0 controls.opt.center.z = -z diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +
-
+
+ + + +
+ +
+ + + +
+ + + + - - + + @@ -68,8 +70,13 @@ body { - + + + + + + - - + + -- cgit v1.2.3-70-g09d2 From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:50:27 -0400 Subject: split out modules --- .../rectangles/engine/map/tools/eraser.js | 27 +++ .../rectangles/engine/shapes/polyline.js | 147 +++++++++++++ .../rectangles/engine/shapes/shapelist.js | 61 ++++++ public/assets/test/ortho3.html | 243 +-------------------- 4 files changed, 238 insertions(+), 240 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js new file mode 100644 index 0000000..648cd11 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -0,0 +1,27 @@ +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js new file mode 100644 index 0000000..7e3c04c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -0,0 +1,147 @@ +var Polyline = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) + } + exports.firstPoint = function(){ + return this.points[0] + } + exports.lastPoint = function(){ + return this.points[this.points.length-1] + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } + exports.hasPointNear = function(p){ + var point + for (var i = 0; i < this.points.length; i++){ + point = this.points[i] + if (point.distanceTo( p ) < 10/map.zoom) { + return point + } + } + return null + } + exports.hasEndPointNear = function(p){ + if (this.closed) return null + if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { + return this.firstPoint() + } + if (this.lastPoint().distanceTo( p ) < 10/map.zoom) { + return this.lastPoint() + } + return null + } + exports.hasSegmentNear = function(p, min_dist){ + var p1, p2, d1, d2, sum, rat + var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity + var closest_i = -1 + var points = this.points + var p1, p2 = points[0] + for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] + d1 = p2.a - p1.a + d2 = p2.b - p1.b + sum = d1*d1 + d2*d2 + rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum + rat = rat < 0 ? 0 : rat < 1 ? rat : 1 + new_x = p1.a + rat * d1 + new_y = p1.b + rat * d2 + dx = new_x - p.a + dy = new_y - p.b + sum2 = sqrt(dx*dx+dy*dy) + if (sum2 < closest_distance) { + x = new_x + y = new_y + closest_distance = sum2 + closest_i = i + } + } + if (closest_i == -1) return null + return { + x: x, + y: y, + distance: closest_distance, + head: closest_i-1, + tail: closest_i, + } + } + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = "rgba(255,255,0,0.1)" + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + ctx.stroke() + if (! map.ui.placing || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + ctx.lineTo(p.a, p.b) + ctx.stroke() + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + exports.build = function(){ + this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx = new MX.Polyline(this) + shapes.add(this) + } + exports.rebuild = function(){ + this.mx.rebuild() + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx_points.length = 0 + this.points.length = 0 + } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js new file mode 100644 index 0000000..00e1a4e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -0,0 +1,61 @@ +var ShapeList = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.shapes = [] + } + exports.add = function(shape){ + this.shapes.push(shape) + } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } + exports.findClosestPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestEndPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasEndPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } + exports.forEach = function(fn){ + this.shapes.forEach(fn) + } + return exports +}) \ No newline at end of file diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f56c73f..ef5732c 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -74,9 +74,12 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@ -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
[[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


- +

-- cgit v1.2.3-70-g09d2 From e61e94f5d2f570f0cba3a3f7d91a18d8db524d79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 20:42:19 -0400 Subject: blueprint upload stuff --- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/builder/BlueprintUpload.js | 120 +++++++++++++++++++++ public/assets/stylesheets/app.css | 3 +- public/assets/test/ortho4.html | 43 +++++++- 4 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index bf646bb..e3d7621 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -44,7 +44,7 @@ var Map = function(opt){ var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b - + base.el.appendChild(canvas) switch (opt.type) { diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js new file mode 100644 index 0000000..dbc6f12 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BlueprintUpload.js @@ -0,0 +1,120 @@ + +var BlueprintUpload = UploadView.extend({ + el: ".blueprintUpload", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: ortho }) + + this.load() + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("
") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 56c65fe..bb32500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1597,7 +1597,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.signin, .mediaDrawer.signup, .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, -.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject { +.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, +.mediaDrawer.blueprintUpload { display:table; } .confirm button { diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index b434efb..12b6ab2 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -1,15 +1,19 @@ +
@@ -47,11 +55,38 @@ body {
-
+
X

Upload A Room Image

+ +
+
+
+ + + +
+
+ +
+ + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + +
+
+ +
+ + + + +
-- cgit v1.2.3-70-g09d2 From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 16:50:31 -0400 Subject: blueprint upload styling --- .../javascripts/rectangles/engine/map/ui/ortho.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ----- .../javascripts/ui/blueprint/BlueprintScaler.js | 43 ++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 36 ++++-- .../javascripts/ui/blueprint/BlueprintView.js | 2 +- views/controls/blueprint/editor.ejs | 122 +++++++++++++++++---- views/partials/scripts.ejs | 2 +- 7 files changed, 178 insertions(+), 61 deletions(-) delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScaler.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js index 52f7339..5be7446 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){ } base.set_tool = function(s){ console.log("set tool to", s) - base.tools[currentTool].cancel() + if (base.tools[currentTool]) { + base.tools[currentTool].cancel() + } currentTool = s tool = base.tools[currentTool] } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js deleted file mode 100644 index 227c1c8..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ /dev/null @@ -1,30 +0,0 @@ - -var BlueprintEditor = ModalView.extend({ - el: ".blueprintEditor", - - events: { - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(){ - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - - this.$blueprintMap.append(this.map.el) - }, - - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js new file mode 100644 index 0000000..e11b61e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -0,0 +1,43 @@ + +var BlueprintScaler = ModalView.extend({ + el: ".blueprintScaler", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = map = new Map ({ + type: "ortho", + el: this.$blueprintMap.get(0), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("position", new PositionTool) + map.ui.set_tool("position") + }, + + pick: function(){ + + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index 9467715..deb1075 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({ "change .url": "enterUrl", "keydown .url": "enterSetUrl", - "click .blueprint": "choose", + "click .blueprint": "pick", + "click .remove": "destroy", }, initialize: function(opt){ @@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({ populate: function(data){ this.loaded = true if (data && data.length) { + this.$blueprints.show() data.forEach(this.append.bind(this)) - this.$(".txt").hide() + this.show() } else { - this.$(".txt").show() + this.show() } }, pick: function(e){ var $el = $(e.currentTarget) - // load map with it + var media = $el.data("media") + this.hide() + this.parent.blueprintScaler.pick(media) }, - destroy: function(_id, cb){ + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + }).complete(function(){ + }) }, show: function(){ @@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({ }, add: function(media){ + this.$blueprints.show() this.append(media) + this.hide() + this.parent.blueprintScaler.pick(media) }, append: function(media){ - var $el = $("") - $el.attr("src", media.url) + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) $el.addClass("blueprint") this.$blueprints.append($el) }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 40c61d7..a803f12 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -12,7 +12,7 @@ var BlueprintView = View.extend({ // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintEditor = new BlueprintEditor ({ parent: this }) + this.blueprintScaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 6b80287..aec5e25 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -33,13 +33,88 @@ body { .hud span.active { color: #000; } .blueprintUpload { - width: 240px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; } .blueprints .blueprint { border: 1px solid black; - padding: 5px; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { height: 100px; max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: 0 1px 2px #888; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border-radius: 50%; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; cursor: pointer; } @@ -63,42 +138,49 @@ body {
- X
-

Upload your Blueprint

-
+

Upload your Blueprint

+

+ Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. +

+
- +
-
Your uploaded blueprints
- Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. - https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg +
+
+ Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. +

+ Do you want to upload a blueprint? +
-
-
+
+
-
- - +
+ + - + +
- +
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2a93e9b..136bd4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,7 +128,7 @@ - + -- cgit v1.2.3-70-g09d2 From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 18:38:12 -0400 Subject: functioning blueprint scaler --- .../javascripts/rectangles/engine/map/draw.js | 2 +- .../rectangles/engine/map/tools/line.js | 49 ++++++++++++ .../assets/javascripts/rectangles/models/rect.js | 6 ++ .../javascripts/ui/blueprint/BlueprintScaler.js | 91 ++++++++++++++++++++-- .../javascripts/ui/blueprint/BlueprintView.js | 3 + server/lib/schemas/Layout.js | 1 + views/controls/blueprint/editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 11ba3f8..cc2f4d8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -198,7 +198,7 @@ Map.Draw = function(map, opt){ // - function line (x,y,a,b,translation){ + var line = draw.line = function (x,y,a,b,translation){ if (translation) { x += translation.a a += translation.a diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js new file mode 100644 index 0000000..8f409a8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -0,0 +1,49 @@ +var LineTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null + + var line = exports.line = [] + + var can_drag, dragging + + exports.down = function(e, cursor){ + this.cursor = cursor + switch (line.length) { + case 0: + line[0] = cursor.x_component() + can_drag = true + break + case 1: + line[1] = cursor.x_component() + can_drag = false + break + case 2: + line[0] = cursor.x_component() + line.pop() + can_drag = true + break + } + } + + exports.move = function(e, cursor){ + this.cursor = cursor + } + + exports.drag = function(e, cursor){ + if (dragging) { + line[1].a = cursor.x.b + line[1].b = cursor.y.b + } + else if (can_drag && cursor.magnitude() > 10/map.zoom) { + line[1] = cursor.y_component() + dragging = true + } + } + + exports.up = function(e, cursor){ + can_drag = dragging = false + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index c667cf5..92c8c9e 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,12 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.x_component = function(){ + return new vec2( this.x.a, this.y.a ) + } + Rect.prototype.y_component = function(){ + return new vec2( this.x.b, this.y.b ) + } Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index a81c89b..addf9a9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,10 +1,13 @@ -var BlueprintScaler = ModalView.extend({ +var BlueprintScaler = ModalFormView.extend({ el: ".blueprintScaler", + method: "/api/media/scale", + events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", + "click .uploadNewBlueprint": "showBlueprintUpload", "click #saveBlueprint": "save", }, @@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({ this.$blueprintMap = this.$("#blueprintMap") this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$pixels = this.$("[name=blueprint-pixels]") this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") @@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({ zoom_min: -6.2, zoom_max: 1, }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("position", new PositionTool) - map.ui.set_tool("position") + this.lineTool = new LineTool + map.ui.add_tool("line", this.lineTool) + map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - this.animate() + this.animating = false + }, + + showBlueprintUpload: function(){ + this.parent.blueprintUpload.show() }, pick: function(media){ + this.media = media + + if (!! media.scale) { + this.parent.useFloorplan(media) + } + this.floorplan.load({ media: media, keepImage: true }) + + if (! this.animating) { + this.animating = true + this.animate() + } }, animate: function(t){ requestAnimationFrame(this.animate.bind(this)) + + if (! this.animating) return var dt = t - this.last_t this.last_t = t @@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({ this.map.draw.translate() this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.ctx.strokeStyle = "#f00" + this.map.draw.ctx.lineWidth = 2/map.zoom + switch (this.lineTool.line.length) { + case 1: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.cursor.x.a, + this.lineTool.cursor.y.a + ) + break + case 2: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.line[1].a, + this.lineTool.line[1].b + ) + break + } this.map.draw.coords() @@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({ }, changeDimensions: function(){ + app.units = this.$units.val() + this.$dimensions.unitVal() }, changeUnits: function(){ + app.units = this.$units.val() + this.$dimensions.resetUnitVal() + }, + lineLength: function(){ + if (this.lineTool.line.length !== 2) return 0 + var line = this.lineTool.line + return dist( line[0].a, line[0].b, line[1].a, line[1].b ) + } + + validate: function(){ + var val = this.$dimensions.unitVal() + var errors = [] + if (! this.lineLength()) { + errors.push("no line") + alert("Please click two corners of a wall and then specify how long it is in feet or meters.") + } + else if (val == 0) { + errors.push("no measurement") + alert("Please tell us how long the wall is in feet or meters.") + } + return errors }, - save: function(){ + + showErrors: function(){}, + + serialize: function(){ + var fd = new FormData() + fd.append( "_id", this.media._id) + fd.append( "units", this.$units.val() ) + fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() ) + fd.append( "_csrf", $("[name=_csrf]").val()) + return fd + }, + + success: function(){ + this.animating = false + this.parent.useFloorplan(media) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a803f12..6b204e5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -33,6 +33,9 @@ var BlueprintView = View.extend({ hideExtras: function(){ }, + + useFloorplan: function(media){ + }, pickWall: function(wall, pos){ }, diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index cff1d78..e15e188 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({ photo: { type: String, }, + media: mongoose.Schema.Types.Mixed, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 308b4c8..3e0c097 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -99,8 +99,8 @@ body {

- - + + - -
-- cgit v1.2.3-70-g09d2 From bbd62d9c7f3838d07e42e46c244c317a5dbdb5ae Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 20:01:58 -0400 Subject: clear shapes --- .../rectangles/engine/shapes/shapelist.js | 6 ++++ .../javascripts/ui/blueprint/BlueprintSettings.js | 38 +++------------------- .../javascripts/ui/blueprint/BlueprintView.js | 5 ++- views/controls/blueprint/settings.ejs | 18 ++-------- views/controls/blueprint/toolbar.ejs | 2 +- 5 files changed, 16 insertions(+), 53 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 932ce36..e86c5d6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -13,6 +13,12 @@ var ShapeList = Fiber.extend(function(base){ this.shapes.splice(index, 1) } } + exports.destroy = function(){ + this.shapes.forEach(function(shape){ + shape.destroy() + }) + this.shapes = [] + } exports.removeSegment = function (segment){ var shape = segment.shape var head = shape.getHeadAtIndex(segment.head) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 1ff3d6e..d460a9d 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -2,16 +2,14 @@ var BlueprintSettings = FormView.extend({ el: "#blueprintSettings", - createAction: "/api/layout/new", - updateAction: "/api/layout/edit", - destroyAction: "/api/layout/destroy", + action: "/api/blueprint/edit", + destroyAction: "/api/blueprint/destroy", events: { "mousedown": "stopPropagation", "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-layout']": 'clickSave', - "click [data-role='clone-layout']": 'clone', "click [data-role='clear-layout']": 'clear', "click [data-role='destroy-layout']": 'destroy', }, @@ -23,40 +21,15 @@ var BlueprintSettings = FormView.extend({ this.$id = this.$("[name=_id]") this.$csrf = this.$("[name=_csrf]") this.$name = this.$("[name=name]") - this.$privacy = this.$("[name=privacy]") }, load: function(data){ this.$id.val(data._id) this.$name.val(data.name) - - this.parent.colorControl.loadDefaults() - - data.rooms && Rooms.deserialize(data.rooms) - data.startPosition && scene.camera.move(data.startPosition) - data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop('checked', "checked") - - this.action = data.isNew ? this.createAction : this.updateAction - }, - - clone: function(){ - var names = this.$name.val().split(" ") - if ( ! isNaN(Number( names[names.length-1] )) ) { - names[names.length-1] = Number( names[names.length-1] ) + 1 - } - else { - names.push("2") - } - - this.$id.val('new') - this.$name.val( names.join(" ") ) - this.action = this.createAction - - window.history.pushState(null, document.title, "/builder/new") }, clear: function(){ - Rooms.removeAll() + shapes.destroy() }, destroy: function(){ @@ -89,10 +62,10 @@ var BlueprintSettings = FormView.extend({ var errors = [] var name = this.$name.val() if (! name || ! name.length) { - errors.push("Layout needs a name.") + errors.push("Blueprint needs a name.") } if (Rooms.count() == 0) { - errors.push("Please add some rooms by drawing boxes.") + errors.push("Please add some walls.") } return errors }, @@ -113,7 +86,6 @@ var BlueprintSettings = FormView.extend({ fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) fd.append( "name", this.$name.val() ) - fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index f919cc7..8330154 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -8,7 +8,6 @@ var BlueprintView = View.extend({ }, initialize: function(){ -// this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.map = this.buildMap() @@ -17,11 +16,11 @@ var BlueprintView = View.extend({ this.uploader = new BlueprintUploader ({ parent: this }) this.scaler = new BlueprintScaler ({ parent: this }) this.info = new BlueprintInfo ({ parent: this }) + this.settings = new BlueprintSettings ({ parent: this }) }, load: function(name){ if (! name || name == "new") { -// this.ready({ isNew: true, _id: "new", name: "" }) this.uploader.load() return } @@ -53,7 +52,7 @@ var BlueprintView = View.extend({ }, ready: function(data){ -// this.settings.load(data) + this.settings.load(data) this.info.load(data) this.editor.loadFloorplan(data) }, diff --git a/views/controls/blueprint/settings.ejs b/views/controls/blueprint/settings.ejs index a7ce2f0..1347f5b 100644 --- a/views/controls/blueprint/settings.ejs +++ b/views/controls/blueprint/settings.ejs @@ -10,29 +10,15 @@
- +
- -
-
- - - - -
-
- +
Clear - Clone Delete
diff --git a/views/controls/blueprint/toolbar.ejs b/views/controls/blueprint/toolbar.ejs index 82cbcba..9c55a4a 100644 --- a/views/controls/blueprint/toolbar.ejs +++ b/views/controls/blueprint/toolbar.ejs @@ -32,7 +32,7 @@
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 8a69888..bc8dacb 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -85,8 +85,9 @@ - + + -- cgit v1.2.3-70-g09d2 From 618ccc76b96fa5d070484ce2d0ec8d509153da69 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 20 Aug 2015 19:14:32 -0400 Subject: starting to convert polylines into regions --- .../rectangles/engine/shapes/regionlist.js | 83 ++++++++++++++++++---- .../javascripts/ui/blueprint/BlueprintEditor.js | 11 ++- .../javascripts/ui/blueprint/BlueprintUploader.js | 2 +- 3 files changed, 80 insertions(+), 16 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 1f2810f..94b902a 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -2,36 +2,91 @@ var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions - - RegionList.init = function(){ + + RegionList.build = function(){ + var segments = RegionList.getSortedSegments() + + // loop over them from left to right +// console.log(segments.map(function(s){ return s.toString() }).join("\n")) + + var rooms = [] + var open_segments = [] + + var segment, open_segment, vertical, other_side + + for (var i = 0; i < segments.length; i++) { + segment = segments[i] + if (! isVertical(segment)) { + continue + } + for (var j = 0; j < open_segments.length; j++) { + open_segment = open_segments[j] + if (overlaps(segment, open_segment)) { + // if we have overlap, it means we have made a full room + other_side = clone_segment(open_segment) + other_side[0].a = segment[0].a + other_side[1].a = segment[1].a + rooms.push([open_segment, other_side]) + open_segments.splice(j, 1) + j-- + } + } + open_segments.push(segment) + } + +// console.log(rooms.map(function(s){ return s[0][0].toString() + " " + s[0][1].toString() + " " + s[1][0].toString() + " " + s[1][1].toString() }).join("\n")) + + return rooms } - RegionList.build = function(){ + RegionList.getSortedSegments = function(){ + // get a list of all segments from these polylines var segments = shapes.getAllSegments() + + // re-orientate them so they're either facing up or right segments.forEach(function(segment){ - if (segment[0][0] == segment[1][0]) { - if (segment[0][1] > segment[1][1]) { + // vertical + if (segment[0].a == segment[1].a) { + if (segment[0].b > segment[1].b) { segment.push(segment.shift()) } } - else if (segment[0][1] == segment[1][1]) { - if (segment[0][0] > segment[1][0]) { + // horizontal + else if (segment[0].b == segment[1].b) { + if (segment[0].a > segment[1].a) { segment.push(segment.shift()) } } }) + + // sort them from top to bottom, left to right segments = segments.sort(function(a,b){ - return a[0][0] < b[0][0] + if (a[0].a < b[0].a) { + return -1 + } + else if (a[0].a == b[0].a) { + if (a[0].b < b[0].b) { + return -1 + } + else if (a[0].b == b[0].b) { + return 0 + } + else { + return 1 + } + } + else { + return 1 + } }) - console.log(segments) - - // get a list of all segments from these polylines - // re-orientate them so they're either facing up or right - // loop over them from left to right - // + return segments } + function isVertical (segment) { return segment[0].a == segment[1].a } + function isHorizontal (segment) { return segment[0].b == segment[1].b } + function overlaps (a,b) { return (a[0].b > b[0].b || a[1].b < b[1].b) } + function clone_segment(a){ return [a[0].clone(), a[1].clone()] } return RegionList })() \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 73f21c0..8fe66ca 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -93,7 +93,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - this.floorplan.draw(map.draw.ctx, true) + // this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -113,6 +113,15 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) + var rooms = RegionList.build() + rooms.forEach(function(room,i){ + map.draw.ctx.fillStyle = colors[i % colors.length] + map.draw.ctx.fillRect( room[0][0].a, room[0][1].b, + room[1][0].a - room[0][0].a, + room[0][0].b - room[0][1].b + ) + }) + map.draw.ctx.restore() }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index c7138e9..fbb71d5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -38,7 +38,7 @@ var BlueprintUploader = UploadView.extend({ this.$blueprints.show() data.forEach(this.append.bind(this)) this.hide() - if (this.nameToShow) { + if (this.nameToShow && this.nameToShow !== "new") { data.some(function(el){ if (el.slug == this.nameToShow) { this.parent.scaler.pick(el) -- cgit v1.2.3-70-g09d2 From 272474767b6ed1f419843c7a205c16f934eeb84f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 20 Aug 2015 23:33:36 -0400 Subject: turn segments into rects --- .../rectangles/engine/shapes/regionlist.js | 54 ++++++++-------------- .../assets/javascripts/rectangles/models/rect.js | 6 +++ .../assets/javascripts/rectangles/models/vec2.js | 3 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 2 +- .../javascripts/ui/blueprint/BlueprintSettings.js | 16 ++++--- public/assets/javascripts/ui/lib/ToggleableView.js | 19 ++++++++ views/controls/blueprint/info.ejs | 4 +- views/controls/builder/info.ejs | 4 +- views/controls/editor/media-editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 10 files changed, 65 insertions(+), 48 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/ToggleableView.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 94b902a..42519cf 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -12,7 +12,7 @@ var RegionList = (function(){ var rooms = [] var open_segments = [] - var segment, open_segment, vertical, other_side + var segment, open_segment, y_segments for (var i = 0; i < segments.length; i++) { segment = segments[i] @@ -21,12 +21,20 @@ var RegionList = (function(){ } for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] - if (overlaps(segment, open_segment)) { + if (segment.y.overlaps(open_segment.y)) { // if we have overlap, it means we have made a full room - other_side = clone_segment(open_segment) - other_side[0].a = segment[0].a - other_side[1].a = segment[1].a - rooms.push([open_segment, other_side]) + + y_segments = open_segment.y.split(segment.y) + + if (y_segments.length == 1) { + open_segment.x.b = segment.x.b + rooms.push(open_segment) + } + +// other_side = clone_segment(open_segment) +// other_side[0].a = segment[0].a +// other_side[1].a = segment[1].a +// rooms.push([open_segment, other_side]) open_segments.splice(j, 1) j-- } @@ -43,8 +51,8 @@ var RegionList = (function(){ // get a list of all segments from these polylines var segments = shapes.getAllSegments() - // re-orientate them so they're either facing up or right - segments.forEach(function(segment){ + // re-orient them so they're either facing up or right and make them into rects + segments = segments.map(function(segment){ // vertical if (segment[0].a == segment[1].a) { if (segment[0].b > segment[1].b) { @@ -57,36 +65,12 @@ var RegionList = (function(){ segment.push(segment.shift()) } } + return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) }) - // sort them from top to bottom, left to right - segments = segments.sort(function(a,b){ - if (a[0].a < b[0].a) { - return -1 - } - else if (a[0].a == b[0].a) { - if (a[0].b < b[0].b) { - return -1 - } - else if (a[0].b == b[0].b) { - return 0 - } - else { - return 1 - } - } - else { - return 1 - } - }) - - return segments + return sort.rects_by_position(segments) } - - function isVertical (segment) { return segment[0].a == segment[1].a } - function isHorizontal (segment) { return segment[0].b == segment[1].b } - function overlaps (a,b) { return (a[0].b > b[0].b || a[1].b < b[1].b) } - function clone_segment(a){ return [a[0].clone(), a[1].clone()] } + return RegionList })() \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 92c8c9e..a4756ed 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -62,6 +62,12 @@ Rect.prototype.maxDimension = function(){ return abs(this.width) > abs(this.height) ? this.width : this.height } + Rect.prototype.isVertical = function(){ + return this.x.isPoint() + } + Rect.prototype.isHorizontal = function(){ + return this.y.isPoint() + } Rect.prototype.mul = function(n){ this.x.mul(n) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 290e45e..90a56c6 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -43,6 +43,9 @@ vec2.prototype.eq = function(v){ return this.a == v.a && this.b == v.b } + vec2.prototype.isPoint = function(){ + return this.a == this.b + } vec2.prototype.add = function(n){ this.a += n this.b += n diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 8fe66ca..18ecf5f 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -93,7 +93,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - // this.floorplan.draw(map.draw.ctx, true) + this.floorplan.draw(map.draw.ctx, true) map.draw.coords() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index acd8dcc..252e3f1 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -1,5 +1,5 @@ -var BlueprintSettings = FormView.extend({ +var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ el: "#blueprintSettings", action: "/api/blueprint/edit", @@ -25,7 +25,13 @@ var BlueprintSettings = FormView.extend({ load: function(data){ this.$id.val(data._id) - this.$name.val(data.name) + if (data.name) { + this.$name.val(data.name) + this.hide() + } + else { + this.$name.val("") + } if (data.shapes) { shapes.destroy() shapes.deserialize( data.shapes ) @@ -51,10 +57,6 @@ var BlueprintSettings = FormView.extend({ }.bind(this)) }, - toggle: function(state){ - this.$el.toggleClass("active", state) - }, - enterSubmit: function (e) { e.stopPropagation() var base = this @@ -105,6 +107,8 @@ var BlueprintSettings = FormView.extend({ this.$name.val(data.name) this.action = this.updateAction + this.hide() + Minotaur.unwatch(this) Minotaur.hide() diff --git a/public/assets/javascripts/ui/lib/ToggleableView.js b/public/assets/javascripts/ui/lib/ToggleableView.js new file mode 100644 index 0000000..371629f --- /dev/null +++ b/public/assets/javascripts/ui/lib/ToggleableView.js @@ -0,0 +1,19 @@ +var ToggleableView = View.extend({ + + toggle: function(state){ + this.$el.toggleClass("active", state) + }, + + show: function(){ + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + visible: function(){ + return this.$el.hasClass("active") + } + +}) \ No newline at end of file diff --git a/views/controls/blueprint/info.ejs b/views/controls/blueprint/info.ejs index 9f7d708..4e2316f 100644 --- a/views/controls/blueprint/info.ejs +++ b/views/controls/blueprint/info.ejs @@ -15,8 +15,8 @@
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 8a0e0d5..11e995a 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -34,8 +34,8 @@
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 2a3d4f3..225bdc8 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -49,8 +49,8 @@
--> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index bc8dacb..865c0f1 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -108,6 +108,7 @@ + -- cgit v1.2.3-70-g09d2 From ca76295998fb75e9ab9c83ee9a1a694b9e0656c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 11:23:46 -0400 Subject: making rooms from segments --- .../javascripts/rectangles/engine/map/draw.js | 18 ++++++++- .../rectangles/engine/shapes/regionlist.js | 46 ++++++++++++---------- .../javascripts/rectangles/util/constants.js | 2 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 18 +++++---- 4 files changed, 55 insertions(+), 29 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index cc2f4d8..5824cc8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -189,9 +189,25 @@ Map.Draw = function(map, opt){ var sides = map.sides() var quant = sides.clone().quantize(MAP_GRID_SIZE) for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { - line(x, sides.y.a, x, sides.y.b) + if (Math.round(x) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } + line(x, sides.y.a, x, sides.y.b) } for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { + if (Math.round(y) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 42519cf..acb4ead 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -6,45 +6,51 @@ var RegionList = (function(){ RegionList.build = function(){ var segments = RegionList.getSortedSegments() +// var xx = t % (segments[0].x.a - segments[segments.length-1].x.b) + // loop over them from left to right -// console.log(segments.map(function(s){ return s.toString() }).join("\n")) +// console.log(segments.map(function(s){ return s.toString() }).join("\n")) var rooms = [] var open_segments = [] - var segment, open_segment, y_segments + var segment, open_segment, x_segment, y_segments, overlapped for (var i = 0; i < segments.length; i++) { segment = segments[i] - if (! isVertical(segment)) { + if (! segment.isVertical()) { continue } + overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] if (segment.y.overlaps(open_segment.y)) { // if we have overlap, it means we have made a full room - - y_segments = open_segment.y.split(segment.y) - - if (y_segments.length == 1) { - open_segment.x.b = segment.x.b - rooms.push(open_segment) - } - -// other_side = clone_segment(open_segment) -// other_side[0].a = segment[0].a -// other_side[1].a = segment[1].a -// rooms.push([open_segment, other_side]) - open_segments.splice(j, 1) - j-- + console.log(segment.y+"", "overlaps", open_segment.y+"") + overlapped = true + open_segments.splice(j--, 1) + + x_segment = new vec2( open_segment.x.a, segment.x.b ) + y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + console.log(y_segments.map(function(s){ return s+"" }).join("\n")) + y_segments.forEach(function(seg){ + + rooms.push(new Rect( x_segment, seg[0] )) + + var new_seg = new Rect( segment.x, seg[0] ) + open_segments.shift(new_seg) + j++ + }) } } - open_segments.push(segment) + if (! overlapped) { + open_segments.push(segment) + } } -// console.log(rooms.map(function(s){ return s[0][0].toString() + " " + s[0][1].toString() + " " + s[1][0].toString() + " " + s[1][1].toString() }).join("\n")) +// console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - return rooms + return { rooms: rooms, open_segments: open_segments, segments: segments } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a70cacd..522689b 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -22,7 +22,7 @@ var height_min = 200, resize_margin = 8, cursor_amp = 1.5, DEFAULT_PICTURE_WIDTH = 350, - MAP_GRID_SIZE = 360 // 10 feet + MAP_GRID_SIZE = 36 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 18ecf5f..7ec1352 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,6 +5,8 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + rooms: [], + initialize: function(opt){ this.parent = opt.parent @@ -81,6 +83,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() + this.rooms = RegionList.build() }, animate: function(t, dt){ @@ -93,7 +96,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - this.floorplan.draw(map.draw.ctx, true) + // this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -113,13 +116,14 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - var rooms = RegionList.build() - rooms.forEach(function(room,i){ + this.rooms.segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#f00" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+1, seg.height()+1 ) + }) + + this.rooms.rooms.forEach(function(room,i){ map.draw.ctx.fillStyle = colors[i % colors.length] - map.draw.ctx.fillRect( room[0][0].a, room[0][1].b, - room[1][0].a - room[0][0].a, - room[0][0].b - room[0][1].b - ) + map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) }) map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 62c899384b0cf4aab6288f662e12f11321de95df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 12:55:44 -0400 Subject: getting full coverage with rooms --- .../assets/javascripts/rectangles/engine/shapes/polyline.js | 2 +- .../javascripts/rectangles/engine/shapes/regionlist.js | 12 +++++++----- public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 11 ++++++++--- 3 files changed, 16 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 99c8fda..6c64128 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -47,7 +47,7 @@ var Polyline = Fiber.extend(function(base){ return null } exports.hasEndPointNear = function(p){ - if (this.closed) return null + if (this.closed || ! this.points.length) return null if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { return this.firstPoint() } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index acb4ead..f86968f 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -13,6 +13,7 @@ var RegionList = (function(){ var rooms = [] var open_segments = [] + var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped @@ -21,6 +22,7 @@ var RegionList = (function(){ if (! segment.isVertical()) { continue } + console.log(segment+"") overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] @@ -28,17 +30,17 @@ var RegionList = (function(){ // if we have overlap, it means we have made a full room console.log(segment.y+"", "overlaps", open_segment.y+"") overlapped = true + closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) x_segment = new vec2( open_segment.x.a, segment.x.b ) - y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + y_segments = open_segment.y.split(segment.y, TOP, BOTTOM) console.log(y_segments.map(function(s){ return s+"" }).join("\n")) y_segments.forEach(function(seg){ - rooms.push(new Rect( x_segment, seg[0] )) var new_seg = new Rect( segment.x, seg[0] ) - open_segments.shift(new_seg) + open_segments.unshift(new_seg) j++ }) } @@ -49,8 +51,8 @@ var RegionList = (function(){ } // console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - - return { rooms: rooms, open_segments: open_segments, segments: segments } + console.log({ rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments }) + return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 7ec1352..cf9dea6 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -116,9 +116,14 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - this.rooms.segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "#f00" - map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+1, seg.height()+1 ) + this.rooms.open_segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#00f" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) + }) + + this.rooms.closed_segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#0ff" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) this.rooms.rooms.forEach(function(room,i){ -- cgit v1.2.3-70-g09d2 From 0c1864a114a2efe1a3bb8b2b4951e8655712757a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 15:19:05 -0400 Subject: dedupe new rooms --- .../javascripts/rectangles/engine/map/draw.js | 4 +- .../rectangles/engine/shapes/regionlist.js | 62 +++++++++++++++++----- .../assets/javascripts/rectangles/models/vec2.js | 3 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 8 +-- 4 files changed, 58 insertions(+), 19 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5824cc8..f47f10c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -189,7 +189,7 @@ Map.Draw = function(map, opt){ var sides = map.sides() var quant = sides.clone().quantize(MAP_GRID_SIZE) for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { - if (Math.round(x) % 10 == 0) { + if (Math.round(x) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom } @@ -200,7 +200,7 @@ Map.Draw = function(map, opt){ line(x, sides.y.a, x, sides.y.b) } for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { - if (Math.round(y) % 10 == 0) { + if (Math.round(y) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index f86968f..93a0df7 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -6,52 +6,86 @@ var RegionList = (function(){ RegionList.build = function(){ var segments = RegionList.getSortedSegments() -// var xx = t % (segments[0].x.a - segments[segments.length-1].x.b) - - // loop over them from left to right -// console.log(segments.map(function(s){ return s.toString() }).join("\n")) - var rooms = [] + var seen_rooms = {} var open_segments = [] var closed_segments = [] - var segment, open_segment, x_segment, y_segments, overlapped + var segment, open_segment, x_segment, y_segments, overlapped, seen_segments for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } - console.log(segment+"") overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] if (segment.y.overlaps(open_segment.y)) { - // if we have overlap, it means we have made a full room - console.log(segment.y+"", "overlaps", open_segment.y+"") overlapped = true closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, TOP, BOTTOM) - console.log(y_segments.map(function(s){ return s+"" }).join("\n")) + + seen_segments = {} + y_segments.forEach(function(seg){ - rooms.push(new Rect( x_segment, seg[0] )) + seen_segments[ seg[0]+"" ] = true + var room = new Rect( x_segment, seg[0] ) + + if (seen_rooms[ room+"" ]) return; + + seen_rooms[ room+"" ] = true + rooms.push(room) + var new_seg = new Rect( segment.x, seg[0] ) + open_segments.unshift(new_seg) + j++ + }) + y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + y_segments.forEach(function(seg){ + if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) open_segments.unshift(new_seg) j++ }) } } - if (! overlapped) { + if (overlapped) { + // sort open segments? + open_segments = open_segments.sort(function(a,b){ + if (a.y.a < b.y.a) { return -1 } + if (a.y.a == b.y.a) { return 0 } + if (a.y.a > b.y.a) { return 1 } + }) + + if (open_segments.length < 2) { continue } + + for (var k = 1; k < open_segments.length; k++) { + if (open_segments[k-1].y.containsVec(open_segments[k].y)) { + open_segments.splice(k--, 1) + } + else if (open_segments[k-1].y.overlaps(open_segments[k].y)) { + open_segments[k].y = open_segments[k].y.clone() + console.log(open_segments[k-1].y+"", open_segments[k].y+"") + open_segments[k].y.a = open_segments[k-1].y.b + } + } + } + else { open_segments.push(segment) } } -// console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - console.log({ rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments }) + for (var i = 0; i < segments.length; i++) { + segment = segments[i] + if (! segment.isHorizontal()) { + continue + } + } + return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } } diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 90a56c6..d37bc12 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -111,6 +111,9 @@ vec2.prototype.containsDisc = function(n,r){ return this.a <= n-r && n+r <= this.b } + vec2.prototype.containsVec = function(v){ + return this.a <= v.a && v.b <= this.b + } vec2.prototype.clamp = function(n){ return clamp(n, this.a, this.b) } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index cf9dea6..0b27d0c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -108,7 +108,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ } shapes.forEach(function(shape){ - shape.draw(map.draw.ctx) +// shape.draw(map.draw.ctx) }) map.draw.ctx.strokeStyle = "#f00"; @@ -117,14 +117,16 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.camera(scene.camera) this.rooms.open_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "#00f" + map.draw.ctx.fillStyle = "rgba(0,0,255,0.2)" map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) this.rooms.closed_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "#0ff" + map.draw.ctx.fillStyle = "rgba(0,255,0,0.2)" map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) + + var colors = ["rgba(0,0,0,0.1)"] this.rooms.rooms.forEach(function(room,i){ map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From 3e87dcb3de9ad29f7c021792cbafc32d4c758d3f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 16:05:55 -0400 Subject: assigning sides --- .../javascripts/rectangles/engine/map/draw.js | 14 ----- .../rectangles/engine/shapes/regionlist.js | 59 +++++++++++++++++++--- .../javascripts/ui/blueprint/BlueprintEditor.js | 24 +++------ 3 files changed, 59 insertions(+), 38 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index f47f10c..c97603b 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -169,20 +169,6 @@ Map.Draw = function(map, opt){ } draw.coords = function(){ - /* - ctx.fillStyle = "#888"; - dot_at(0,0) - ctx.fillStyle = "#bbb"; - dot_at(100,0) - dot_at(0,100) - ctx.fillStyle = "#ddd"; - dot_at(200,0) - dot_at(0,200) - ctx.fillStyle = "#eee"; - dot_at(300,0) - dot_at(0,300) - */ - ctx.strokeStyle = "rgba(0,0,0,0.1)" ctx.lineWidth = 1/map.zoom diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 93a0df7..fb2c8e5 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -27,7 +27,7 @@ var RegionList = (function(){ open_segments.splice(j--, 1) x_segment = new vec2( open_segment.x.a, segment.x.b ) - y_segments = open_segment.y.split(segment.y, TOP, BOTTOM) + y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} @@ -35,9 +35,11 @@ var RegionList = (function(){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) - if (seen_rooms[ room+"" ]) return; - + if (seen_rooms[ room+"" ]) return seen_rooms[ room+"" ] = true + + room.sides = 0 + rooms.push(room) var new_seg = new Rect( segment.x, seg[0] ) open_segments.unshift(new_seg) @@ -54,7 +56,6 @@ var RegionList = (function(){ } } if (overlapped) { - // sort open segments? open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } if (a.y.a == b.y.a) { return 0 } @@ -69,7 +70,6 @@ var RegionList = (function(){ } else if (open_segments[k-1].y.overlaps(open_segments[k].y)) { open_segments[k].y = open_segments[k].y.clone() - console.log(open_segments[k-1].y+"", open_segments[k].y+"") open_segments[k].y.a = open_segments[k-1].y.b } } @@ -79,14 +79,57 @@ var RegionList = (function(){ } } + var splits, splitter + for (var i = 0; i < segments.length; i++) { segment = segments[i] - if (! segment.isHorizontal()) { - continue + var horizontal = segment.isHorizontal(), vertical = segment.isVertical() + for (var r = 0; r < rooms.length; r++){ + room = rooms[r] + if (vertical) { + if (segment.y.containsVec(room.y)) { + if (segment.x.a == room.x.a) { + room.sides |= LEFT + } + if (segment.x.a == room.x.b) { + room.sides |= RIGHT + } + } + } + if (horizontal) { + if (segment.x.containsVec(room.x)) { + if (segment.y.a == room.y.a) { + room.sides |= FRONT + } + if (segment.y.a == room.y.b) { + room.sides |= BACK + } + } +/* + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.containsVec(segment.x)) { + splits = room.x.split(segment.x, LEFT, RIGHT) + 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] + if (segment.x.containsVec(splitter[0])) { + if (segment.y.a == room.y.a) { + room.sides |= FRONT + } + if (segment.y.a == room.y.b) { + room.sides |= BACK + } + } + rooms.unshift(new_room) + r++ + } + } +*/ + } } } - return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } + return { rooms: rooms } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 0b27d0c..c7aa219 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -108,30 +108,22 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ } shapes.forEach(function(shape){ -// shape.draw(map.draw.ctx) + shape.draw(map.draw.ctx) }) map.draw.ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - - this.rooms.open_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "rgba(0,0,255,0.2)" - map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) - }) - - this.rooms.closed_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "rgba(0,255,0,0.2)" - map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) - }) - var colors = ["rgba(0,0,0,0.1)"] +// var colors = ["rgba(0,0,0,0.1)"] - this.rooms.rooms.forEach(function(room,i){ - map.draw.ctx.fillStyle = colors[i % colors.length] - map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) - }) + map.draw.regions(this.rooms.rooms, colors, "#000") + +// this.rooms.rooms.forEach(function(room,i){ +// map.draw.ctx.fillStyle = colors[i % colors.length] +// map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) +// }) map.draw.ctx.restore() }, -- cgit v1.2.3-70-g09d2 From 73fdf8d46f10793d210f4369adb8c31afa536d20 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 16:59:48 -0400 Subject: thinking --- .../rectangles/engine/shapes/regionlist.js | 33 +++++++++++++--------- .../assets/javascripts/rectangles/models/vec2.js | 3 ++ 2 files changed, 22 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index fb2c8e5..b2672ad 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -106,22 +106,27 @@ var RegionList = (function(){ } } /* - else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.containsVec(segment.x)) { - splits = room.x.split(segment.x, LEFT, RIGHT) - 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] - if (segment.x.containsVec(splitter[0])) { - if (segment.y.a == room.y.a) { - room.sides |= FRONT - } - if (segment.y.a == room.y.b) { - 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, LEFT, 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] + if (segment.x.containsVec( 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++ } } */ diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index d37bc12..226e56f 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -114,6 +114,9 @@ vec2.prototype.containsVec = function(v){ return this.a <= v.a && v.b <= this.b } + vec2.prototype.containsCenterVec = function(v){ + return this.a < v.a && v.b < this.b + } vec2.prototype.clamp = function(n){ return clamp(n, this.a, this.b) } -- cgit v1.2.3-70-g09d2 From 0d2ff65db2cf26c993245dae752dfb52b8cb2819 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 10:46:29 -0400 Subject: generating all room sides --- .../assets/javascripts/rectangles/engine/shapes/regionlist.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index b2672ad..71f19d8 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -105,18 +105,18 @@ 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, LEFT, RIGHT) + 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] - if (segment.x.containsVec( splitter[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 } @@ -129,7 +129,7 @@ var RegionList = (function(){ } } } -*/ + } } } -- 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') 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 a9bf197a6e8f91cc91d772238168d9be1beb3c4d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 12:15:14 -0400 Subject: makin sure tests work --- .../javascripts/rectangles/engine/map/tools/line.js | 16 +++++++++++++++- .../javascripts/rectangles/engine/map/tools/ortho.js | 2 ++ .../javascripts/rectangles/engine/map/tools/polyline.js | 2 ++ .../javascripts/rectangles/engine/shapes/polyline.js | 1 - .../javascripts/rectangles/engine/shapes/regionlist.js | 2 +- .../javascripts/rectangles/engine/shapes/shapelist.js | 7 ++++++- .../assets/javascripts/ui/blueprint/BlueprintEditor.js | 8 ++++---- .../assets/javascripts/ui/blueprint/BlueprintSettings.js | 1 + public/assets/test/ortho2.html | 9 ++++++++- 9 files changed, 39 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js index 8f409a8..8fe4fff 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/line.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -1,3 +1,6 @@ +// This tool lets you define a very simple line between two points. +// It is used by the BlueprintScaler to specify a sample distance to scale. + var LineTool = MapTool.extend(function(base){ var exports = {} @@ -8,6 +11,17 @@ var LineTool = MapTool.extend(function(base){ var can_drag, dragging exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + cursor.quantize(1/map.zoom) + app.router.blueprintView.map.center.a = cursor.x.a + app.router.blueprintView.map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + return + } + this.cursor = cursor switch (line.length) { case 0: @@ -44,6 +58,6 @@ var LineTool = MapTool.extend(function(base){ exports.up = function(e, cursor){ can_drag = dragging = false } - + return exports }) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index ef41096..918ac0d 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -14,6 +14,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -35,6 +36,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { else if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 1ab86f6..6716180 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -11,6 +11,7 @@ var PolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -27,6 +28,7 @@ var PolylineTool = MapTool.extend(function (base) { if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 609a2c8..54e11c6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -133,7 +133,6 @@ var Polyline = Fiber.extend(function(base){ exports.build = function(){ this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) this.mx = new MX.Polyline(this) - shapes.add(this) } exports.rebuild = function(){ this.mx.rebuild() diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 663f3fd..86269a6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -169,7 +169,7 @@ var RegionList = (function(){ } } - return { rooms: rooms } + return rooms } diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 90714c2..9cbf165 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -85,8 +85,13 @@ var ShapeList = Fiber.extend(function(base){ data && data.forEach(function(points){ var line = new Polyline() line.deserialize(points) - line.build() + shapes.add(line) }.bind(this)) } + exports.build = function(){ + this.shapes.forEach(function(shape){ + shape.build() + }) + } return exports }) \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index a341a24..547cdca 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,7 +5,7 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ - rooms: [], + regions: [], initialize: function(opt){ this.parent = opt.parent @@ -82,7 +82,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() - this.rooms = RegionList.build() + this.regions = RegionList.build() }, animate: function(t, dt){ @@ -118,9 +118,9 @@ 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.regions, colors, "#000") -// this.rooms.rooms.forEach(function(room,i){ +// this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] // map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) // }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 252e3f1..9c8808a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -35,6 +35,7 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ if (data.shapes) { shapes.destroy() shapes.deserialize( data.shapes ) + shapes.build() } this.data = data }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 448f029..ef77256 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -58,7 +58,9 @@ body { - + + + + -- cgit v1.2.3-70-g09d2 From c781911322c84eb0c2aa4a00860016437d7b7cba Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 18:30:33 -0400 Subject: surface blueprints on new project modal --- .../rectangles/engine/map/tools/arrow.js | 2 + .../rectangles/engine/map/tools/eraser.js | 2 + .../rectangles/engine/map/tools/line.js | 2 +- .../rectangles/engine/map/tools/ortho.js | 5 +- .../rectangles/engine/map/tools/polyline.js | 2 + .../rectangles/engine/map/tools/position.js | 2 + .../rectangles/engine/map/tools/start.js | 2 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 9 +- public/assets/javascripts/ui/site/LayoutsModal.js | 190 +++++++++++++++++++-- public/assets/stylesheets/app.css | 4 +- server/lib/api/layouts.js | 18 +- views/projects/layouts-modal.ejs | 3 + 12 files changed, 211 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js index 2a73954..00478d4 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -1,3 +1,5 @@ +// Tool used to move corners of polylines + var ArrowTool = MapTool.extend(function(base){ var exports = {} diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js index 648cd11..8fc3687 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -1,3 +1,5 @@ +// Tool used to delete lines + var EraserTool = MapTool.extend(function(base){ var exports = {} exports.down = function(e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js index a8e2473..8175d66 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/line.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -1,4 +1,4 @@ -// This tool is used to define a very simple line between two points. +// Tool is used to define a very simple line between two points. // It is used by the BlueprintScaler to specify a sample distance to scale. var LineTool = MapTool.extend(function(base){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index 918ac0d..6ced728 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -1,6 +1,7 @@ +// Tool to make a polyline where all walls are orthogonal + var OrthoPolylineTool = MapTool.extend(function (base) { - // this will work like normal polyline except all walls will be orthogonal - + var prev_point, horizontal = false, first_edge_is_horizontal = false var exports = {} diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 6716180..445ae26 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -1,3 +1,5 @@ +// Tool used to draw polylines with arbitrary angles + var PolylineTool = MapTool.extend(function (base) { var exports = {} exports.down = function(e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js index a994f5a..f8365bc 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/position.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js @@ -1,3 +1,5 @@ +// Tool used to set position on the map and let you change the view by dragging. + var PositionTool = MapTool.extend(function(base){ var exports = { recenterCursor: false, diff --git a/public/assets/javascripts/rectangles/engine/map/tools/start.js b/public/assets/javascripts/rectangles/engine/map/tools/start.js index cca387c..203a85f 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/start.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/start.js @@ -1,4 +1,4 @@ -// This tool is used to set the start position on the map. +// Tool is used to set the start position on the map. var StartPositionTool = MapTool.extend(function(base){ var exports = {} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index fbb71d5..fe1073a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -37,8 +37,12 @@ var BlueprintUploader = UploadView.extend({ if (data && data.length) { this.$blueprints.show() data.forEach(this.append.bind(this)) - this.hide() - if (this.nameToShow && this.nameToShow !== "new") { + if (this.nameToShow === "new") { + // don't pick anything.. + this.show() + } + else if (! this.nameToShow) { + this.hide() data.some(function(el){ if (el.slug == this.nameToShow) { this.parent.scaler.pick(el) @@ -47,6 +51,7 @@ var BlueprintUploader = UploadView.extend({ }.bind(this)) } else { + this.hide() this.parent.scaler.pick(data[0]) } } diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 87251af..a9c6ef0 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -6,6 +6,10 @@ var LayoutsIndex = View.extend({ this.$templatesList = this.$(".templates-list") this.$noTemplates = this.$(".no-templates") this.$form = this.$("form") + + this.$userTemplatesList = this.$(".userTemplatesList") + this.$blueprintsList = this.$(".blueprintsList") + this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']") }, load: function(type){ @@ -15,11 +19,6 @@ var LayoutsIndex = View.extend({ }, populate: function(data){ -/* - if (data.user.plan_level < 1 && data.projectCount == 1) { - // show lockout message - } -*/ if (! data.layouts.length) { this.$templates.hide() this.$form.hide() @@ -89,20 +88,89 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ action: "/api/layout", events: { - "click .templates span": 'toggleActive', + "click .templates span": 'pick', + "click .userTemplates span": 'pick', + "click .blueprints span": 'pickBlueprint', "submit form": 'newLayout', }, - toggleActive: function(e){ + pick: function(e){ e.preventDefault() - this.$(".templates .active").removeClass("active") var $layout = $(e.currentTarget) - $layout.addClass("active") + window.location.pathname = "/layout/" + $layout.data("slug") + }, + + pick: function(e){ + e.preventDefault() + var $blueprint = $(e.currentTarget) + $blueprint.addClass("active") - // actually do window.location.pathname = "/layout/" + $layout.data("slug") }, - + + populate: function(data){ +/* + if (data.user.plan_level < 1 && data.projectCount == 1) { + // show lockout message + } +*/ + if (! data.layouts.length) { + this.$templates.hide() + this.$form.hide() + this.$noTemplates.show() + } + this.$templatesList.empty() + data.layouts.forEach(function(room){ + var $span = $("") + $span.data("slug", room.slug) + + var $label = $("
-- cgit v1.2.3-70-g09d2 From 685d5fd7b32ac868a0b2d8ac8a2a1b4120f274cf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 11:57:51 -0400 Subject: fork orthopolyline --- .../rectangles/engine/map/tools/ortho.js | 2 +- .../javascripts/rectangles/engine/shapes/ortho.js | 41 ++++++++++++++++++++++ .../rectangles/engine/shapes/polyline.js | 21 +++++++---- .../rectangles/engine/shapes/shapelist.js | 14 ++++++-- .../javascripts/ui/blueprint/BlueprintSettings.js | 3 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 2 +- .../javascripts/ui/blueprint/BlueprintView.js | 22 ++++++++++++ public/assets/stylesheets/app.css | 4 +-- views/partials/header.ejs | 2 ++ views/partials/scripts.ejs | 1 + views/profile.ejs | 2 ++ 11 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/shapes/ortho.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index 6ced728..374c822 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -48,7 +48,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } else { map.ui.placing = true - shapes.workline = new Polyline () + shapes.workline = new OrthoPolyline () shapes.workline.add(p) first_point = prev_point = p horizontal = false diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js new file mode 100644 index 0000000..8a8f928 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -0,0 +1,41 @@ +// An OrthoPolyline is a Polyline where all angles are 90 degrees. + +var OrthoPolyline = Polyline.extend(function(base){ + var exports = {} + exports.type = function(){ + return "ortho" + } + exports.instantiate = function(){ + return new OrthoPolyline + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.draw = function(ctx, fillStyle, strokeStyle){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = fillStyle + ctx.strokeStyle = strokeStyle + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + strokeStyle && ctx.stroke() + if (! map.ui.placing || this.closed) { + fillStyle && ctx.fill() + } + } + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index fc6cad7..65e22ad 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -9,6 +9,12 @@ var Polyline = Fiber.extend(function(base){ this.mx_points = [] this.closed = false } + exports.type = function(){ + return "polyline" + } + exports.instantiate = function(){ + return new Polyline + } exports.add = function(p){ this.points.push( p ) this.mx_points.push( new MX.Point(p) ) @@ -25,19 +31,19 @@ var Polyline = Fiber.extend(function(base){ exports.getHeadAtIndex = function(index){ if (index == 0) { return null } if (index == this.points.length-1) { return this.clone() } - var head = new Polyline() + var head = this.instantiate() head.points = this.points.slice(0, index+1) return head } exports.getTailAtIndex = function(index){ if (index == this.points.length-1) { return null } if (index == 0) { return this.clone() } - var tail = new Polyline() + var tail = this.instantiate() tail.points = this.points.slice(index, this.points.length) return tail } exports.clone = function(){ - var clone = new Polyline() + var clone = this.instantiate() clone.points = this.points.concat() } exports.hasPointNear = function(p){ @@ -148,10 +154,13 @@ var Polyline = Fiber.extend(function(base){ return segments } exports.serialize = function(){ - return this.points.map(function(point){ return [point.a, point.b] }) + return { + type: this.type(), + points: this.points.map(function(point){ return [point.a, point.b] }), + } } - exports.deserialize = function(points){ - this.points = points.map(function(point){ return new vec2(point[0], point[1]) }) + exports.deserialize = function(data){ + this.points = (data.points || data).map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 75ecae6..e5a70fb 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -87,9 +87,17 @@ var ShapeList = Fiber.extend(function(base){ }) } exports.deserialize = function(data){ - data && data.forEach(function(points){ - var line = new Polyline() - line.deserialize(points) + data && data.forEach(function(shape_data){ + var line + switch (shape_data.type) { + case 'ortho': + line = new OrthoPolyline() + break + default: + line = new Polyline() + break + } + line.deserialize(shape_data) shapes.add(line) }.bind(this)) } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 80c9355..8addb9c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -93,10 +93,9 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ fd.append( "_id", this.$id.val() ) fd.append( "name", this.$name.val() ) fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) - fd.append( "startPosition", JSON.stringify( this.parent.startPosition ) ) + fd.append( "startPosition", JSON.stringify( this.parent.quantizeStartPosition() ) ) 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/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index fe1073a..dc3c281 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -65,7 +65,7 @@ var BlueprintUploader = UploadView.extend({ var $el = $(e.currentTarget) var media = $el.data("media") this.hide() - this.parent.scaler.pick(media, true) + this.parent.scaler.pick(media) }, destroy: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index ecbb536..19b9e84 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -29,6 +29,28 @@ var BlueprintView = View.extend({ orbiting: true, startPosition: {}, + quantizeStartPosition: function(){ + // + var regions = RegionList.build() + var pos = this.startPosition + var startPositionIsInARoom = regions.some(function(region){ + return region.contains(pos.x, pos.z) + }) + if (startPositionIsInARoom) { + return this.startPosition + } + else { + var center = regions[0].center() + return { + x: center.a, + y: viewHeight, + z: center.b, + rotationX: 0, + rotationY: Math.PI/2, + } + } + }, + buildMap: function(){ // i forget if this has to be global map = new Map ({ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 634ea60..e4f1b27 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1156,6 +1156,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } width: 100%; height: 100%; padding: 20px 0 40px 0; + text-align: center; } .templates-list, .userTemplatesList, @@ -1186,8 +1187,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } } .templates span { - display: block; - float: left; + display: inline-block; margin: 1vw 0; width:20%; padding: 2vw; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index bb8fc6e..ce9ffae 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -64,7 +64,9 @@ [[ if (profile && String(user._id) == String(profile._id)) { ]] Settings + [[ } else if (! profile) { ]] Profile [[ } ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index bac4120..da3f0ba 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -86,6 +86,7 @@ + diff --git a/views/profile.ejs b/views/profile.ejs index 63a07f5..d3ae10e 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -78,7 +78,9 @@ [[ } ]]
+ [[ include partials/edit-profile ]] [[ include projects/layouts-modal ]] [[ include projects/edit-project ]] -- cgit v1.2.3-70-g09d2 From 464bd3bfe74695955239e176dce8fe885bba8ac3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 12:44:17 -0400 Subject: arrow tool can translate walls orthogonally --- .../rectangles/engine/map/tools/arrow.js | 47 +++++++++++++++++++--- .../javascripts/rectangles/engine/shapes/ortho.js | 16 ++++++++ .../rectangles/engine/shapes/polyline.js | 28 +++++++++++++ .../javascripts/ui/blueprint/BlueprintToolbar.js | 2 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 3 ++ 5 files changed, 89 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js index 00478d4..0b0557e 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -3,16 +3,33 @@ var ArrowTool = MapTool.extend(function(base){ var exports = {} - var selected_point = null, original_point = null, selected_shape = null + var selected_point = null, selected_segment = null, original_point = null, selected_shape = null + var src_points, dest_points exports.down = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a var p = shapes.findClosestPoint(last_point) - if (p) { + if (p && p.shape.type() !== "ortho") { selected_shape = p.shape selected_point = p.point original_point = selected_point.clone() + return + } + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + + selected_segment = segment + console.log(segment.head, segment.tail) + selected_shape = segment.shape + src_points = segment.shape.cloneSegment( segment ) + dest_points = segment.shape.getSegment( segment ) + + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b } else { map.ui.set_drag_tool("position") @@ -28,6 +45,15 @@ var ArrowTool = MapTool.extend(function(base){ last_point.assign(p.point) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b + return + } + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b } else { document.body.style.cursor = "crosshair" @@ -35,13 +61,22 @@ var ArrowTool = MapTool.extend(function(base){ } exports.drag = function(e, cursor){ - selected_point.a = original_point.a + cursor.x.magnitude() - selected_point.b = original_point.b + cursor.y.magnitude() - selected_shape.rebuild() + if (selected_point) { + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + else if (selected_segment) { + selected_shape.translateSegment( + src_points, dest_points, + cursor.x.magnitude(), cursor.y.magnitude() + ) + selected_shape.rebuild() + } } exports.up = function(e, cursor){ - selected_point = selected_shape = original_point = null + selected_point = selected_shape = selected_segment = original_point = null } return exports diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index 8a8f928..c1acae5 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -33,6 +33,22 @@ var OrthoPolyline = Polyline.extend(function(base){ } } } + exports.translateSegment = function(src, dest, dx, dy) { + if (src[0].a == src[1].a) { + dest[0].a = src[0].a + dx + dest[1].a = src[1].a + dx + if (src.length == 3) { + dest[2].a = src[2].a + dx + } + } + else { + dest[0].b = src[0].b + dy + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].b = src[2].b + dy + } + } + } exports.close = function(){ this.points[this.points.length] = this.points[0] this.closed = true diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 65e22ad..579d0ea 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -46,6 +46,32 @@ var Polyline = Fiber.extend(function(base){ var clone = this.instantiate() clone.points = this.points.concat() } + exports.getSegment = function(segment){ + var seg = [ + this.points[segment.head], + this.points[segment.tail], + ] + if (segment.head == 0) { + seg.push( this.lastPoint() ) + } + else if (segment.tail == this.points.length-1) { + seg.push( this.firstPoint() ) + } + return seg + } + exports.cloneSegment = function(segment){ + return this.getSegment(segment).map(function(point){ return point.clone() }) + } + exports.translateSegment = function(src, dest, dx, dy){ + dest[0].a = src[0].a + dx + dest[0].b = src[0].b + dy + dest[1].a = src[1].a + dx + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].a = src[2].a + dx + dest[2].b = src[2].b + dy + } + } exports.hasPointNear = function(p){ var point for (var i = 0; i < this.points.length; i++){ @@ -156,10 +182,12 @@ var Polyline = Fiber.extend(function(base){ exports.serialize = function(){ return { type: this.type(), + closed: this.closed, points: this.points.map(function(point){ return [point.a, point.b] }), } } exports.deserialize = function(data){ + this.closed = data.closed || false this.points = (data.points || data).map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 7721298..8b0a08f 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -24,7 +24,7 @@ var BlueprintToolbar = View.extend({ this.$eraserMode = this.$('[data-role=eraser-mode]') this.$startPositionMode = this.$('[data-role=start-position-mode]') - this.orthoPolylineMode() + this.arrowMode() }, showUploader: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index dc3c281..aa62a4c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -66,6 +66,9 @@ var BlueprintUploader = UploadView.extend({ var media = $el.data("media") this.hide() this.parent.scaler.pick(media) + if (media.slug) { + window.history.pushState(null, document.title, "/blueprint/" + media.slug) + } }, destroy: function(e){ -- 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') 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 ebb9226fd5d37e8033e87e41b8ac0355d68f954c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 18:00:57 -0400 Subject: staff area for blueprints --- .../rectangles/engine/shapes/regionlist.js | 64 +++++++++++++++------- .../rectangles/engine/shapes/shapelist.js | 3 + .../javascripts/ui/blueprint/BlueprintEditor.js | 8 +-- .../javascripts/ui/blueprint/BlueprintInfo.js | 23 ++++++++ public/assets/stylesheets/app.css | 9 +++ server/lib/middleware.js | 23 ++++++++ server/lib/views/staff/fields.js | 3 +- server/lib/views/staff/helpers.js | 7 +++ server/lib/views/staff/index.js | 53 ++++++++++++++++-- server/lib/views/staff/middleware.js | 55 +++++++++++++++++++ views/controls/blueprint/info.ejs | 7 +++ views/staff/_blueprints.ejs | 21 +++++++ views/staff/_nav.ejs | 1 + views/staff/blueprints/index.ejs | 13 +++++ views/staff/blueprints/show.ejs | 59 ++++++++++++++++++++ views/staff/blueprints/show_404.ejs | 9 +++ views/staff/layouts/show.ejs | 2 +- 17 files changed, 331 insertions(+), 29 deletions(-) create mode 100644 views/staff/_blueprints.ejs create mode 100644 views/staff/blueprints/index.ejs create mode 100644 views/staff/blueprints/show.ejs create mode 100644 views/staff/blueprints/show_404.ejs (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 86269a6..0dd4a1e 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -10,10 +10,25 @@ var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions + // Build a list of regions from the existing shapes. + // Operates on all the shapes at once. RegionList.build = function(){ - - // first, get the segments sorted right to left & top to bottom var segments = RegionList.getSortedSegments() + return RegionList.buildRoomsFromSegments(segments) + } + + // Build a list of regions from the individual shapes. + // Same, but operates on the shapes individually + RegionList.buildByShape = function(){ + var shapes = RegionList.getSortedSegmentsByShape() + var region_lists = shapes.map(function(shape){ + return RegionList.buildRoomsFromSegments(shape.segments) + }) + var regions = [] + return regions.concat.apply(regions, region_lists); + } + + RegionList.buildRoomsFromSegments = function(segments){ var rooms = [] var seen_rooms = {} @@ -172,31 +187,42 @@ var RegionList = (function(){ return 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() - // re-orient them so they're either facing up or right and make them into rects - segments = segments.map(function(segment){ - // vertical - if (segment[0].a == segment[1].a) { - if (segment[0].b > segment[1].b) { - segment.push(segment.shift()) - } - } - // horizontal - else if (segment[0].b == segment[1].b) { - if (segment[0].a > segment[1].a) { - segment.push(segment.shift()) - } - } - return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) - }) + segments = segments.map(RegionList.segmentsToRects) return sort.rects_by_position(segments) } + + RegionList.getSortedSegmentsByShape = function(){ + return shapes.getAllShapeSegments().map(function(shape){ + var segments = shape.map(RegionList.segmentsToRects) + return { + shape: shape, + segments: sort.rects_by_position(segments) + } + }) + } + + // re-orient a segment so it's either facing up or right and make it into a rect + RegionList.segmentsToRects = function(segment){ + // vertical + if (segment[0].a == segment[1].a) { + if (segment[0].b > segment[1].b) { + segment.push(segment.shift()) + } + } + // horizontal + else if (segment[0].b == segment[1].b) { + if (segment[0].a > segment[1].a) { + segment.push(segment.shift()) + } + } + return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) + } return RegionList diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index e5a70fb..2d33af2 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -69,6 +69,9 @@ var ShapeList = Fiber.extend(function(base){ exports.forEach = function(fn){ this.shapes.forEach(fn) } + exports.getAllShapeSegments = function(){ + return this.shapes.map(function(shape){ return shape.getSegments() }) + } exports.getAllSegments = function(){ var segments = [] this.shapes.forEach(function(shape){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 7a1c064..7704689 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -82,7 +82,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() - this.regions = RegionList.build() + this.regions = RegionList.buildByShape() }, animate: function(t, dt){ @@ -114,9 +114,9 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.camera(scene.camera) // var colors = ["rgba(0,0,0,0.1)"] -// var colors = ["rgba(255,255,255,1)"] -// -// map.draw.regions(this.regions, colors, "#000") +// var colors = ["rgba(255,255,255,1)"] + +// map.draw.regions(this.regions, colors, "#000") // this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] diff --git a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js index 6dd6a7d..51b310e 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js @@ -10,6 +10,7 @@ var BlueprintInfo = View.extend({ "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', + "click .openScaler": 'openScaler', }, initialize: function(opt){ @@ -18,13 +19,30 @@ var BlueprintInfo = View.extend({ this.$units = this.$("[name=units]") this.$viewHeight = this.$("[name=viewHeight]") this.$unitName = this.$(".unitName") + this.$blueprintScaleDisplay = this.$("#blueprintScaleDisplay") }, load: function(data){ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$height.unitVal( window.wallHeight = data.wallHeight || app.defaults.wallHeight ) this.$units.val( data.units ) + this.$('span.units').html( data.units ) this.$unitName.html( data.units ) + + var resolution + switch (data.units) { + case 'ft': + resolution = app.defaults.footResolution + break + case 'm': + resolution = app.defaults.meterResolution + break + case 'px': + default: + resolution = 1 + break + } + this.$blueprintScaleDisplay.html( ((1/data.scale) * resolution).toFixed(1) ) this.show() }, @@ -33,6 +51,11 @@ var BlueprintInfo = View.extend({ this.$viewHeight.unitVal( window.viewHeight ) }, + openScaler: function(){ + this.parent.scaler.pick( this.parent.data, true ) + this.parent.scaler.show() + }, + show: function(){ this.toggle(true) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e4f1b27..1154fde 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -2505,6 +2505,9 @@ input[type="range"]::-webkit-slider-thumb { top: 5px; font-weight:600; } +.setting.number.scale label { + top: 0; +} .setting.number label:after { content:":"; } @@ -3328,6 +3331,7 @@ a[data-role="forgot-password"] { padding: 0px; position: relative; display: inline-block; + margin: 0 2px; } .blueprints .blueprint img { height: 100px; @@ -3364,6 +3368,11 @@ a[data-role="forgot-password"] { [data-role="create-new-blueprint"] { margin-bottom: 10px; } +.openScaler { + margin-left: 10px; + border-bottom: 1px solid; + cursor: pointer; +} /* KEYBOARD SHORTCUTS */ diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 04cb330..0a0a9ce 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -8,6 +8,7 @@ var passport = require('passport'), Collaborator = require('./schemas/Collaborator'), Project = require('./schemas/Project'), Layout = require('./schemas/Layout'), + Blueprint = require('./schemas/Blueprint'), Plan = require('./schemas/Plan'); @@ -129,6 +130,28 @@ var middleware = { } }, + ensureBlueprint: function (req, res, next) { + if (req.params.slug) { + Blueprint.findOne({ slug: req.params.slug }, function(err, blueprint){ + if (err) { + console.error(err) + req.blueprint = null + } + else if (! blueprint) { + req.blueprint = null + } + else { + req.blueprint = blueprint + } + next() + }) + } + else { + req.blueprint = null + next() + } + }, + ensureIsCollaborator: function(req, res, next) { req.isCollaborator = false req.isOwner = false diff --git a/server/lib/views/staff/fields.js b/server/lib/views/staff/fields.js index 57eea7e..84c1efa 100644 --- a/server/lib/views/staff/fields.js +++ b/server/lib/views/staff/fields.js @@ -1,7 +1,8 @@ module.exports = { user: "_id username displayName photo created_at updated_at last_seen created_ip last_ip", project: "_id name slug user_id privacy layout_type created_at updated_at", - layout: "_id name slug user_id layout_type created_at updated_at", + layout: "_id name slug user_id layout_type is_stock created_at updated_at", + blueprint: "_id name slug user_id created_at updated_at", plans: "monthly_price yearly_price basic_layout_monthly_price basic_layout_yearly_price " + "pro_layout_monthly_price pro_layout_yearly_price " + "basic_layout_limit pro_layout_limit stock_project_limit basic_project_limit pro_project_limit", diff --git a/server/lib/views/staff/helpers.js b/server/lib/views/staff/helpers.js index 57383f4..ff4065a 100644 --- a/server/lib/views/staff/helpers.js +++ b/server/lib/views/staff/helpers.js @@ -27,6 +27,13 @@ module.exports = { layout.user = {} return layout }, + + blueprint: function(blueprint){ + blueprint = blueprint.toObject() + blueprint.date = moment( blueprint.updated_at || blueprint.created_at ).format("M/DD/YYYY hh:mm a") + blueprint.user = {} + return blueprint + }, media: function(media){ media = media.toObject() diff --git a/server/lib/views/staff/index.js b/server/lib/views/staff/index.js index 033fc88..49a0384 100644 --- a/server/lib/views/staff/index.js +++ b/server/lib/views/staff/index.js @@ -7,6 +7,7 @@ var User = require('../../schemas/User'), Plan = require('../../schemas/Plan'), Subscription = require('../../schemas/Subscription'), Layout = require('../../schemas/Layout'), + Blueprint = require('../../schemas/Blueprint'), config = require('../../../../config'), middleware = require('../../middleware'), util = require('../../util'), @@ -159,7 +160,32 @@ var staff = module.exports = { staff.layouts.make_stock ); - + + // + // blueprints + + app.get('/staff/blueprints', + middleware.ensureAuthenticated, + middleware.ensureIsStaff, + + staff.middleware.ensureBlueprintsCount, + + staff.middleware.ensureBlueprints, + staff.middleware.ensureBlueprintsUsers, + + staff.blueprints.index + ); + app.get('/staff/blueprints/:slug', + middleware.ensureAuthenticated, + middleware.ensureIsStaff, + + middleware.ensureBlueprint, + staff.middleware.ensureBlueprint, + staff.middleware.ensureBlueprintUser, + + staff.blueprints.show + ); + // // media @@ -321,7 +347,7 @@ var staff = module.exports = { }, // /staff/projects/ - // /staff/projects/:name + // /staff/projects/:slug projects: { index: function(req, res){ res.locals.pagination.count = res.locals.projects.length @@ -350,7 +376,7 @@ var staff = module.exports = { }, // /staff/layouts/ - // /staff/layouts/:name + // /staff/layouts/:slug layouts: { index: function(req, res){ res.locals.pagination.count = res.locals.layouts.length @@ -374,7 +400,26 @@ var staff = module.exports = { }) }, }, - + + // /staff/blueprints/ + // /staff/blueprints/:slug + blueprints: { + index: function(req, res){ + res.locals.pagination.count = res.locals.blueprints.length + res.locals.pagination.max = res.locals.blueprintCount + staff.paginate(req, res) + res.render('staff/blueprints/index') + }, + show: function(req, res){ + if (res.locals.blueprint) { + res.render('staff/blueprints/show', { + }) + } + else { + res.render('staff/blueprints/show_404') + } + }, + }, media: { index: function(req, res){ diff --git a/server/lib/views/staff/middleware.js b/server/lib/views/staff/middleware.js index 1ea98e9..03fda2e 100644 --- a/server/lib/views/staff/middleware.js +++ b/server/lib/views/staff/middleware.js @@ -6,6 +6,7 @@ var User = require('../../schemas/User'), Plan = require('../../schemas/Plan'), Subscription = require('../../schemas/Subscription'), Layout = require('../../schemas/Layout'), + Blueprint = require('../../schemas/Blueprint'), util = require('../../util'), fields = require('./fields'), helpers = require('./helpers'), @@ -128,6 +129,35 @@ var middleware = module.exports = { }) }, + ensureBlueprints: function(req, res, next){ + var paginationInfo = res.locals.pagination = {} + var criteria = req.criteria || {} + var limit = paginationInfo.limit = Math.min( Number(req.query.limit) || 50, 200 ) + var offset = paginationInfo.offset = Number(req.query.offset) || 0 + var sort + paginationInfo.sort = req.query.sort + paginationInfo.sortOptions = ["date", "name"] + switch (req.query.sort) { + default: + case 'date': + sort = {'updated_at': -1} + break + case 'name': + paginationInfo.sort = "name" + sort = {'slug': 1} + break + } + Blueprint.find(criteria) + .select(fields.blueprint) + .sort(sort) + .skip(offset) + .limit(limit) + .exec(function (err, blueprints) { + res.locals.blueprints = blueprints.map(helpers.blueprint) + next() + }) + }, + ensureMedia: function(req, res, next){ var paginationInfo = res.locals.pagination = {} var criteria = req.criteria || {} @@ -240,6 +270,11 @@ var middleware = module.exports = { middleware.ensureObjectsUsers(res.locals.layouts, next) }, + ensureBlueprintsUsers: function(req, res, next){ + if (! res.locals.blueprints || ! res.locals.blueprints.length) { return next() } + middleware.ensureObjectsUsers(res.locals.blueprints, next) + }, + ensureSubscriptionsUsers: function(req, res, next){ if (! res.locals.subscriptions || ! res.locals.subscriptions.length) { return next() } middleware.ensureObjectsUsers(res.locals.subscriptions, next) @@ -345,6 +380,13 @@ var middleware = module.exports = { }) }, + ensureBlueprintsCount: function(req, res, next){ + Blueprint.count({}, function(err, count){ + res.locals.blueprintCount = count || 0 + next() + }) + }, + ensureMediaCount: function(req, res, next){ Media.count({}, function(err, count){ res.locals.mediaCount = count || 0 @@ -418,4 +460,17 @@ var middleware = module.exports = { }) }, + ensureBlueprint: function(req, res, next){ + res.locals.blueprint = req.blueprint + next() + }, + ensureBlueprintUser: function(req, res, next){ + if (! res.locals.blueprint) { return next() } + User.findOne({ _id: res.locals.blueprint.user_id }, fields.user, function(err, user){ + res.locals.blueprintUser = helpers.user(user) || defaults.user + next() + }) + }, + + } \ No newline at end of file diff --git a/views/controls/blueprint/info.ejs b/views/controls/blueprint/info.ejs index 4e2316f..a86481b 100644 --- a/views/controls/blueprint/info.ejs +++ b/views/controls/blueprint/info.ejs @@ -20,4 +20,11 @@
+
+ + + px/ + [edit scale] +
+
diff --git a/views/staff/_blueprints.ejs b/views/staff/_blueprints.ejs new file mode 100644 index 0000000..58fe2a3 --- /dev/null +++ b/views/staff/_blueprints.ejs @@ -0,0 +1,21 @@ + +[[ blueprints.forEach(function(blueprint){ ]] + + + + + + +[[ }) ]] +
+ [[- blueprint.name ]] + + [view] + + + [[- blueprint.user.username ]] + + [[- blueprint.date ]] +
diff --git a/views/staff/_nav.ejs b/views/staff/_nav.ejs index 3bb3b08..702a374 100644 --- a/views/staff/_nav.ejs +++ b/views/staff/_nav.ejs @@ -3,6 +3,7 @@ users projects layouts + blueprints media plans diff --git a/views/staff/blueprints/index.ejs b/views/staff/blueprints/index.ejs new file mode 100644 index 0000000..2206a1c --- /dev/null +++ b/views/staff/blueprints/index.ejs @@ -0,0 +1,13 @@ +[[ include ../_header ]] + +

Blueprints

+ +[[ include ../_nav ]] + +
+ +[[ include ../_pagination ]] +[[ include ../_blueprints ]] +[[ include ../_pagination ]] + +[[ include ../_footer ]] diff --git a/views/staff/blueprints/show.ejs b/views/staff/blueprints/show.ejs new file mode 100644 index 0000000..5fd9db6 --- /dev/null +++ b/views/staff/blueprints/show.ejs @@ -0,0 +1,59 @@ +[[ include ../_header ]] + +

[[- blueprint.name ]]

+ +[[ include ../_nav ]] + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ [[- blueprint.name ]] + + [view] + [edit] + + + [[- blueprint.date ]] +
+ [[ if (blueprintUser.photo) { ]] +
+ [[ } ]] + [[- blueprintUser.username ]] +
+ +
Width[[- blueprint.width ]]
Height[[- blueprint.height ]]
Scale[[- blueprint.scale ]]
+ +

+
+
+ +
+
+ +[[ include ../_footer ]] diff --git a/views/staff/blueprints/show_404.ejs b/views/staff/blueprints/show_404.ejs new file mode 100644 index 0000000..0ffca86 --- /dev/null +++ b/views/staff/blueprints/show_404.ejs @@ -0,0 +1,9 @@ +[[ include ../_header ]] + +

Blueprint not found

+ +[[ include ../_nav ]] + +
+ +[[ include ../_footer ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index b66449f..2742c1f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -42,7 +42,7 @@ - featured? + stock layout? [[- layout.is_stock ? "yes" : "no" ]] -- cgit v1.2.3-70-g09d2 From ee110d4725943bbc2b783323ec5087324531ca33 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 18:17:14 -0400 Subject: get rooms api working with shapes --- .../javascripts/rectangles/engine/map/_map.js | 3 + .../javascripts/rectangles/engine/map/draw.js | 19 +-- .../javascripts/rectangles/engine/shapes/ortho.js | 9 ++ .../rectangles/engine/shapes/polyline.js | 9 ++ .../rectangles/engine/shapes/regionlist.js | 11 ++ .../rectangles/engine/shapes/shapelist.js | 13 +- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 7 +- server/lib/api/rooms.js | 139 +++++++++++++++------ 9 files changed, 161 insertions(+), 51 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index e27346d..6492db6 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -50,6 +50,7 @@ var Map = function(opt){ switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Ortho (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -57,6 +58,7 @@ var Map = function(opt){ case "editor": base.draw = new Map.Draw (base) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Editor (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -64,6 +66,7 @@ var Map = function(opt){ case "minimap": base.draw = new Map.Draw (base, { center: scene.camera, minimap: true }) + base.draw.grid_size = MAP_GRID_SIZE * 10 base.ui = new Map.UI.Minimap (base) base.sides = base.sides_for_camera break diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index fd05f86..4f4759f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -179,8 +179,8 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(MAP_GRID_SIZE) - for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { + var quant = sides.clone().quantize(draw.grid_size) + for (var x = quant.x.a - draw.grid_size; x <= quant.x.b; x += draw.grid_size) { if (Math.round(x) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom @@ -191,17 +191,18 @@ Map.Draw = function(map, opt){ } line(x, sides.y.a, x, sides.y.b) } - for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { - if (Math.round(y) % 360 == 0) { + + for (var y = quant.y.a - draw.grid_size; y <= quant.y.b; y += draw.grid_size) { + if (Math.round(y) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom - } - else { + } + else { ctx.strokeStyle = "rgba(0,0,0,0.05)" ctx.lineWidth = 1/map.zoom - } - line(sides.x.a, y, sides.x.b, y) - } + } + line(sides.x.a, y, sides.x.b, y) + } } // diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index c1acae5..163f646 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -1,5 +1,9 @@ // An OrthoPolyline is a Polyline where all angles are 90 degrees. +if (! ('window' in this) ) { + var Polyline = require("./polyline.js") +} + var OrthoPolyline = Polyline.extend(function(base){ var exports = {} exports.type = function(){ @@ -55,3 +59,8 @@ var OrthoPolyline = Polyline.extend(function(base){ } return exports }) + + +if (! ('window' in this) ) { + module.exports = OrthoPolyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 579d0ea..b2cd92f 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -2,6 +2,11 @@ // 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. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") +} + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -201,3 +206,7 @@ var Polyline = Fiber.extend(function(base){ } return exports }) + +if (! ('window' in this) ) { + module.exports = Polyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 0dd4a1e..8c9e732 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -5,6 +5,13 @@ // 1) all angles are orthogonal // 2) all polylines are closed +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") + var Rect = require("../../models/rect") + var sort = require("../../util/sort") +} + var RegionList = (function(){ var RegionList = {} @@ -223,6 +230,10 @@ var RegionList = (function(){ } return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) } + + if (! ('window' in this) ) { + module.exports = RegionList + } return RegionList diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 2d33af2..21beb76 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,5 +1,11 @@ // The ShapeList manages the list of polylines which form a V2 layout. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var Polyline = require("./polyline.js") + var OrthoPolyline = require("./ortho.js") +} + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -110,4 +116,9 @@ var ShapeList = Fiber.extend(function(base){ }) } return exports -}) \ No newline at end of file +}) + +if (! ('window' in this) ) { + shapes = new ShapeList + module.exports = shapes +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 83bc8b7..d8cfca6 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.shapes) { + if (data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 1ba97cf..43e81d8 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -76,7 +76,12 @@ var ReaderView = View.extend({ }, build: function(data){ - data.rooms && Rooms.deserialize(data.rooms) + if (data.shapes.length) { + Rooms.deserializeFromShapes(data) + } + else { + Rooms.deserialize(data.rooms) + } data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) data.sculpture && Sculpture.deserialize(data.sculpture) diff --git a/server/lib/api/rooms.js b/server/lib/api/rooms.js index c044309..2a1d2fe 100644 --- a/server/lib/api/rooms.js +++ b/server/lib/api/rooms.js @@ -6,6 +6,8 @@ var Clipper = require("../../../public/assets/javascripts/rectangles/engine/room var Builder = require("../../../public/assets/javascripts/rectangles/engine/rooms/builder.js") var Grouper = require("../../../public/assets/javascripts/rectangles/engine/rooms/grouper.js") var Walls = require("../../../public/assets/javascripts/rectangles/engine/rooms/_walls.js") +var shapes = require("../../../public/assets/javascripts/rectangles/engine/shapes/shapelist.js") +var RegionList = require("../../../public/assets/javascripts/rectangles/engine/shapes/regionlist.js") /* jshint node: true */ @@ -21,47 +23,106 @@ var rooms = module.exports = { if (! doc) { res.json({ status: 404 }); return } doc = doc.toObject() - doc.rooms.forEach(function(data){ - var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) - var room = new Room({ - id: data.id, - rect: rect, - height: data.height - }) - Rooms.add(room) - }) - Rooms.clipper.solve_rects() - Rooms.builder.build() - - var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] - var collections = Rooms.grouper.collect() - Rooms.grouper.cull(collections) - Rooms.grouper.group(walls, collections, FRONT) - Rooms.grouper.group(walls, collections, BACK) - Rooms.grouper.group(walls, collections, LEFT) - Rooms.grouper.group(walls, collections, RIGHT) - walls.forEach(function(wall){ - wall.mx.forEach(function(mx){ - var data = mx.report() - data.id = wall.id - mx_walls.push(data) - }) - }) - - doc.mx_walls = mx_walls - doc.mx_floor = mx_floor - doc.mx_ceiling = mx_ceiling - - Rooms.forEach(function(room){ - room.mx_floor.forEach(function(mx){ - mx_floor.push( mx.report() ) - }) - room.mx_ceiling.forEach(function(mx){ - mx_ceiling.push( mx.report() ) - }) - }) + if (doc.shapes.length) { + parseMxShapes(doc) + } + else { + parseMxRooms(doc) + } res.json(doc) }) } } + +function parseMxShapes (doc) { + var viewHeight = doc.viewHeight + var wallHeight = doc.wallHeight + + shapes.deserialize( doc.shapes ) + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var regions = RegionList.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_walls(region) + mx_floor.push( Rooms.builder.make_floor(room, region) ) + mx_ceiling.push( Rooms.builder.make_ceiling(room, region) ) + }) + + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + mx_floor.push( room.mx_floor ) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} + +function parseMxRooms (doc) { + doc.rooms.forEach(function(data){ + var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) + var room = new Room({ + id: data.id, + rect: rect, + height: data.height + }) + Rooms.add(room) + }) + Rooms.clipper.solve_rects() + Rooms.builder.build() + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + room.mx_floor.forEach(function(mx){ + mx_floor.push( mx.report() ) + }) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} \ No newline at end of file -- 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') 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 From 7f443264d1c30b48cc3923ee6e700facdf0f7214 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 16:32:37 -0400 Subject: fix resize issues --- .../javascripts/rectangles/engine/map/_map.js | 29 +++++++++++++--------- public/assets/javascripts/rectangles/util/mouse.js | 15 ++++++++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/stylesheets/app.css | 2 ++ views/home.ejs | 1 + 5 files changed, 35 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 6492db6..ba3ec92 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -41,12 +41,28 @@ var Map = function(opt){ } base.set_zoom(opt.zoom) + base.resize = function(w, h){ + if (w && h) { + canvas.width = base.dimensions.a = w + canvas.height = base.dimensions.b = h + } + else { + // resize here - esp if 2d-hires + canvas.width = base.dimensions.a = base.el.parentNode.offsetWidth + canvas.height = base.dimensions.b = base.el.parentNode.offsetHeight + } + } + + base.toggle = function(state){ + return $(base.el).toggle(state).is(':visible') + } + var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b base.el.appendChild(canvas) - + switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) @@ -71,17 +87,6 @@ var Map = function(opt){ base.sides = base.sides_for_camera break } - - 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 - } - - base.toggle = function(state){ - return $(base.el).toggle(state).is(':visible') - } - } Map.prototype.update = function(){ diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 2b98cee..6d9862c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -54,10 +54,20 @@ function mouse (opt) { opt.up && base.tube.on("up", opt.up) opt.rightclick && base.tube.on("rightclick", opt.rightclick) - var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null + var offset; base.init = function (){ base.bind() + base.set_offset() + } + + base.set_offset = function(){ + if (opt.use_offset && opt.el) { + offset = opt.el.getBoundingClientRect() + } + else { + offset = null + } } base.on = function(){ @@ -73,6 +83,9 @@ function mouse (opt) { opt.el.addEventListener("mousedown", base.mousedown) opt.el.addEventListener("contextmenu", base.contextmenu) } + if (opt.use_offset) { + window.addEventListener("resize", base.set_offset) + } window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index d8cfca6..5aa88e9 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.shapes.length) { + if (data.shapes && data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1154fde..fdf7c12 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1331,6 +1331,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } #hud { position: fixed; top:0;left:0; + width: 100%; + height: 100%; z-index: 2; } #palette { diff --git a/views/home.ejs b/views/home.ejs index af43f0b..36dad83 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -60,6 +60,7 @@

Sign Up

+ Read Tutorial

Room Showcase

-- cgit v1.2.3-70-g09d2 From dcd316eda560e87c326a64c2ff05e0f74e02227a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 17:32:05 -0400 Subject: some light QA --- public/assets/javascripts/rectangles/engine/map/ui/editor.js | 8 ++++---- public/assets/javascripts/rectangles/util/minotaur.js | 6 ++---- public/assets/javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/javascripts/ui/builder/BuilderToolbar.js | 3 +++ public/assets/javascripts/ui/lib/FormView.js | 7 +++++-- public/assets/stylesheets/app.css | 6 ++++++ views/home.ejs | 12 ++++++------ 7 files changed, 27 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js index 7308344..699597a 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js @@ -73,7 +73,7 @@ Map.UI.Editor = function(map){ app.tube("builder-destroy-room", room) // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) return } else if (intersects.length) { @@ -205,13 +205,13 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) } var intersects = Rooms.filter(function(r){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (! intersects.length) { + if (! base.dragging && ! intersects.length) { app.tube("builder-pick-nothing") } @@ -247,7 +247,7 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) wheelState = null }, 250) diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index d165ccc..8b1abfe 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -38,7 +38,7 @@ for (var id in base.objects[type]) { var obj = base.objects[type][id] if (obj) { - obj.save(null, function(){ base.hide() }, function(){}) + obj.save(null, function(){ base.hide() }, function(){ base.hide() }) } delete base.objects[type][id] saving = true @@ -53,9 +53,7 @@ } base.hide = function () { - setTimeout(function(){ - base.$el.removeClass() - }, 500) + base.$el.removeClass('saving') } base.init(); diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index c8c8880..256bffe 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -52,7 +52,7 @@ var BuilderSettings = FormView.extend({ this.$name.val( names.join(" ") ) this.action = this.createAction - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/layout/new") }, clear: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 6c218be..e9dcce3 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -60,6 +60,9 @@ var BuilderToolbar = View.extend({ var state = map.ui.permissions.toggle("destroy") $(".inuse").removeClass("inuse") $(e.currentTarget).toggleClass("inuse", state) + if (! state) { + this.resetPermissions() + } }, }) diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 33effc8..a952ecb 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -69,7 +69,9 @@ var FormView = View.extend({ var errors = this.validate() if (errors && errors.length) { if (errorCallback) { - errorCallback(errors) + setTimeout(function(){ + errorCallback(errors) + }) } else { this.showErrors(errors) @@ -77,7 +79,6 @@ var FormView = View.extend({ return } } - var action = typeof this.action == "function" ? this.action() : this.action if (! action) return @@ -112,7 +113,9 @@ var FormView = View.extend({ return } else { + console.log("ok") if (successCallback) { + console.log("use cb") successCallback(response) } if (this.success) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index fdf7c12..7dda058 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -421,6 +421,10 @@ h5 { float: right; } +.projectList.about.makeAccountSingleton a { + margin: 0 20%; +} + .page .showcase { height:70vh; } @@ -3066,6 +3070,8 @@ a[data-role="forgot-password"] { font-size: 13px; margin: 5px 0 0 0; } + + .share { display:inline-block; width:100%; diff --git a/views/home.ejs b/views/home.ejs index 36dad83..e3303ed 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -57,15 +57,15 @@ Read Tutorial
-

Sign Up

- -
- Read Tutorial -
-

Room Showcase

[[ include projects/list-projects ]] + + [[ if (! logged_in) { ]] +
+ Make an Account +
+ [[ } ]] [[ include partials/confirm-modal ]] [[ include projects/layouts-modal ]] -- cgit v1.2.3-70-g09d2